一些實用的JS

時間 2019-11-20

標籤一些實用欄目 JavaScript 简体版

原文原文鏈接

1.str.split(/\s+/)

這句是表示以和/\s+/匹配的字符串做爲分界，分割字符串str

好比一個空格或者多個或者空格以及回車等其中+表示一個或者多個

var a = "b-c-d";

var d = a.split("-");

alert(d[1]); //c

2.var up_class;

if(!(up_class = $(this).data('up_class'))) $(this).data('up_class', up_class = $(this).attr('class').split(/\s+/)[0] + '-up');

其中 if(!undefined) 這個返回的是TRUE;//這邊注意了哦

3.以NUll undefined "空" 做爲條件返回的是false;

4.JS將一個數取整 :

1.parseInt(str)

2.Math.ceil(number) //返回大於等於其數值參數的最小整數。

3.Math.floor(number) //返回小於等於其數值參數的最大整數。

4.Math.round(number) //四捨五入

5.parseInt("12abc") // 返回 12。把一組字符串變成數字

6.Data.parse()

Date.parse方法是Date對象的一個靜態方法，其做用是「解析一個包含日期的字符串，並返回該日期與 1970 年 1 月 1 日午夜之間所間隔的毫秒

數」。格式爲：　　Date.parse(dateVal) 　　這個方法是很經常使用的，好比在驗證輸入日期是否存在時，能夠使用它，若是是一個不存在的日期，則其返回值將是NaN，另外若是要比較兩個日期的前後，或是計算兩個日期相差的天數，均可以用到。　　今天在使用它比較日期前後的時候遇到了一個奇怪的問題，是關於日期格式的，parse方法要求短日期能夠使用「/」或「-」做爲分隔符，可是必須用月 /日/年的格式來表示，例現在天是「7/6/2008」或是「7-6-2008」，問題就出如今這裏，當使用「7-6-2008」這種格式時，在IE中能夠正常解析，但在FireFox中，返回值卻老是NaN。一開始覺得是代碼出現問題，檢查之後才發現是瀏覽器的緣由，後來將格式改成「7/6/2008」後在IE和FF中均可以正常解析了。

7.服務器和客戶端時間同步

var ServerDate = new Date(2010,09,27,09,42,46);

var ClientDate= new Date();

var d=ClientDate-ServerDate;//計算S和C之間的時差，單位毫秒

function display()

{

var today=new Date();//以當前時間和日期來建立DATE對象

today.setTime(today.getTime()-d);//同步日期到服務器時間

var year=today.getFullYear();//獲取當前年份

var month=today.getMonth();//獲取當前月份

var day=today.getDate();//獲取當前日期

var week=today.getDay();//獲取當前日期對應的星期

var hours=today.getHours();//獲取當前小時

var minutes=today.getMinutes();//獲取當前分鐘

var seconds=today.getSeconds();//獲取當前秒鐘 }

8. toUpperCase() 將一串小寫的字母轉換成大寫的字母

9.第一次點擊和第二次點擊不同

function click_action(){

alert('第一次');

var click_action2 = alertMsg("第二次了！");

document.getElementById("enjoy").onclick = click_action2 ; //不能夠.

}

function alertMsg(t) {

return function(){

alert(t);

}

10 /*獲取對象*/

var $ = function (id){

return document.getElementById(id);

};

11. 阻止瀏覽默認

function stopBubble(e) {

//若是提供了事件對象，則這是一個非IE瀏覽器

if ( e && e.stopPropagation )

//所以它支持W3C的stopPropagation()方法

e.stopPropagation();

else

//不然，咱們須要使用IE的方式來取消事件冒泡

window.event.cancelBubble = true;

}

//阻止瀏覽器的默認行爲

function stopDefault( e ) {

//阻止默認瀏覽器動做(W3C)

if ( e && e.preventDefault )

e.preventDefault();

//IE中阻止函數器默認動做的方式

else

window.event.returnValue = false;

return false;

}

使用方法：

//監視用戶什麼時候把鼠標移到元素上，

//爲該元素添加紅色邊框

unionDom[i].onmouseover = function(e) {

this.style.border = "1px solid red";

stopBubble( e );

};

//監視用戶什麼時候把鼠標移出元素，

//刪除咱們所添加的紅色邊框

unionDom[i].onmouseout = function(e) {

this.style.border = "0px";

stopBubble( e );

};

12 x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E)

若是用math語句的話，能夠改寫成以下：

with(Math){

x=cos(3*PI)+sin(Math.LN10);

y=tan(14*E);

}

IF(K){k}

IF(K)ELSE{k}

12 input 自動適應寬度

checkLength(cityspan,15,22)

checkLength:function(which,maxchar,fonsize){ //input 輸入框自適應寬度 maxchar=最大寬度 fonsize=字體大小

iCount = which.val().length;

if(iCount<=maxchar) which.css({ width: iCount*fonsize+'px'});

}

$.ajax({

type: 'GET',

url: "someurl"l,

processData: true,

data: {},

dataType: "json",

success: function (data) { processData(data); }

});

13 jQuery AJAX EX:

獲取：

$(function()

{

value = escape("上海");

$.ajax({

url: " http://www.1hai.cn/AsyncData.aspx?action=getbstore1&city=" + value,

type: 'get',

success: function(data)

{

var dataObj = eval("(" + data + ")");

alert(dataObj.storehouses[0].district);

}

});

})

發送：

$(function()

{

var textarea=$('#TextArea1').val();

var contact=$('#Text1').val();

var erroUrl=document.URL;

$.ajax({

type: "POST",

url: 'url',

data: 'textarea='+textarea+'&contact='+contact+'&erroUrl='+erroUrl,//xml

success: function(){

alert("您的意見已經成功提交，很是感謝你的意見.");

tjy.tjyBox.fadeOut("slow");

tjy.bgScreen.fadeOut("slow");

}

});

}

14 獲取當前頁URL

document.location="url";(只讀)

document.location.reload("url";);

window.location="url";

location="url";

document.href="url"

document.location.href="url"

document.location.replace="url"

document.action="url"; document.submit();

document.location.href和document.location.replace均可以實現從A頁面切換到B頁面，但他們的區別是：

用document.location.href切換後，能夠退回到原頁面。而用document.location.replace切換後，不能夠經過「後退」退回到原頁面。

關於document.location.href或其餘可回退的切換方式

document.location 至關於 document.URL 聲明瞭裝載文檔的URL,

除非發生了服務器重定向, 不然該屬性的值與Window.location.href的值是同樣的.

history.go(-1);//返回上一頁

document.IFRAME名稱.location.href='url';//改變框架內容

15.彈出層失去焦點隱藏：

var flag = false;

$(".selectbox").hover(function() { flag = true }, function() { flag = false })

$(document).mousedown(function(e)

{

e = window.e || e;

var target = e.target || e.srcElement;

if (!flag && target != $(".selectbox")) { $(".selectbox").hide(); }

})

16.JS獲取URL參數

function GetUrlParms()

{

var args = new Object();

var query = location.search.substring(1); //獲取查詢串

var pairs = query.split("&"); //在逗號處斷開

for (var i = 0; i < pairs.length; i++)

{

var pos = pairs[i].indexOf('='); //查找name=value

if (pos == -1) continue; //若是沒有找到就跳過

var argname = pairs[i].substring(0, pos); //提取name

var value = pairs[i].substring(pos + 1); //提取value

args[argname] = unescape(value); //存爲屬性

}

return args;

}

var args = new Object();

args = GetUrlParms();

var value = args["c"];

alert(value);

</script>

17.JS的共用

var notice = ['電子郵件', '手機號碼', '姓名', '證件號碼', '駕照號碼', '家庭地址', '緊急聯繫人姓名', '緊急聯繫人電話', '緊急聯繫人地址']

$('.usermain input[type="text"]').each(function(i)

{

$(this).focus(function() { this.select(); $(this).addClass('color333') }).blur(function()

{

if ($(this).val().indexOf('請輸入') > -1 || $(this).val() == '')

{

$(this).val('請輸入' + notice[i]).removeClass('color333')

}

else $(this).addClass('color333')

})

18. 文本框文字提示（可優化）

$(function()

{

/*提示文字處理*/

$(".input-txt").focus(function()

{

if ($(this).attr("value") == $(this).attr("null"))

{

$(this).attr("value", "").addClass("current");

}

})

$(".step1-box .code-box .input-txt").blur(function()

{

if ($(this).attr("value") == "")

{

$(this).attr("value", $(this).attr("null")).removeClass("current");

}

})

19.setTimeout延遲傳值函數問題：

$(function()

{

$(".test-box").click(function()

{

var _obj = $(this);

window.setTimeout(function() { anime(_obj); }, 1000);

})

function anime(_obj)

{

_obj.css("background", "red");

}

</script>

20.判斷圖片加載完成後顯示

EX1：_img.load(function(){完成後執行XXX});

EX2：

var _imgInterval = setInterval(function()

{

var _completed = 0;

var _img = $(".ul li img");

_img.each(function()

{

if (this.complete)

{

$(this).fadeIn("slow");

_completed++;

}

if (_completed == _img.length)

{

clearInterval(_imgInterval);

}

});

}, 100);

</script>

21.自適應屏幕高寬度全屏

(function($)

{

$(function()

{

_mainBox();

$(window).resize(function()

{

_mainBox();

});

function _mainBox()

{

var arrPageSizes = ___getPageSize();

var _winW = arrPageSizes[0];

var _winH = arrPageSizes[1];

if (_winW > 1000)

{

$(".outer").width(_winW);

$(".main").width(_winW - 120);

} else

{

$(".outer").width(1000);

$(".main").width(880);

}

if (_winH > 600)

{

$(".outer").css("height", "100%");

$(".navShadow,.navShadow2,.newsList").css("height", "100%");

} else

{

$(".outer").height(600);

$(".navShadow,.navShadow2,.newsList").height(600);

}

var _mainHalf = $(".main").height() / 2;

/*if(!_mainHalf%2==0){

_mainHalf = _mainHalf+0.5;

}else{

_mainHalf = _mainHalf;

}*/

$(".navC").height(_mainHalf);

}

/*for(i=0;i<2;i++){

var _length = $(".navHover .ul").eq(i).find("li").length;

var _height = 42*_length;

$(".navHover .ul").eq(i).height(_height);

$(".navHover .ul").eq(i).css({"top":"50%","marginTop":-_height/2});

}*/

function ___getPageSize()

{

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY)

{

xScroll = window.innerWidth + window.scrollMaxX;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight)

{ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else

{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight)

{ // all except Explorer

if (document.documentElement.clientWidth)

{

windowWidth = document.documentElement.clientWidth;

} else

{

windowWidth = self.innerWidth;

}

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight)

{ // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body)

{ // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if (yScroll < windowHeight)

{

pageHeight = windowHeight;

} else

{

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if (xScroll < windowWidth)

{

pageWidth = xScroll;

} else

{

pageWidth = windowWidth;

}

arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

return arrayPageSize;

};

});

})(jQuery);

</script>

22.JQ鍵盤事件（↑、↓、Enter）

function ShowSelectItem(divId)

{

$("#hint div").css("background-color", "White");

$("#" + divId).css("background-color", "Gray");

$("#search").val($("#" + divId).text());

}

function SelectItemEvent()

{

var items = $("#hint div");

var selected = 1; //默認選第一個

ShowSelectItem(selected);

//捕捉鍵盤事件

$(document).keydown(function(e)

{

if (e.keyCode == 38)

{ //按了上箭頭

selected--;

if (selected < 1)

{

selected = 5;

}

ShowSelectItem(selected);

}

else if (e.keyCode == 40)

{ //按了下箭頭

selected++;

if (selected > 5)

{

selected = 1;

}

ShowSelectItem(selected);

}

else if (e.keyCode == 13)

{

alert(「Enter」);

}

});

}

$(document).ready(function()

{

SelectItemEvent();

});

</script>

23.input得到焦點文本選中光標移動到最後

EX1：

function setFocus() {

var range = this.createTextRange(); //創建文本選區

range.moveStart('character', this.value.length); //選區的起點移到最後去

range.collapse(true);

range.select();

}

$('input').bind('focus',function(){

if($.browser.msie){

setFocus.call(this);

} else{

this.setFocus();

}

});

EX2：

$.fn.extend({

clicktext: function()

{

$(this).click(function()

{

$(this).select();

})

}

})

$('input').clicktext();

24.兼容標準瀏覽器的focus()：

var _id;

$(".input-check").blur(function() {

_id = $(this).attr("id");

$(this).hide().parents(".value").find(".check-error").show();

})

$(".check-error").mousedown(function() {

$(this).hide().parents(".value").find(".input-check").show();

window.setTimeout(function() { jQuery("#" + _id + "").focus(); }, 0);

})

25.導航菜單延遲

var navFun = function() {

var mouseover_tid = [];

var mouseout_tid = [];

$(".header .nav li").each(function(index) {

$(this).hover(

function() {

var _self = this;

clearTimeout(mouseout_tid[index]);

mouseover_tid[index] = setTimeout(function() {

$(_self).addClass("hover").children().children("i, .nav-show").fadeIn(300);

}, 200);

function() {

var _self = this;

clearTimeout(mouseover_tid[index]);

mouseout_tid[index] = setTimeout(function() {

$(_self).removeClass("hover").children().children("i, .nav-show").fadeOut(300);

}, 200);

})

}

navFun();

26.獲取鼠標座標

EX1：

$('#testDiv').mousemove(function(e) {

var _x = e.originalEvent.x || e.originalEvent.layerX || 0;

var _y = e.originalEvent.y || e.originalEvent.layerY || 0;

$(this).text(_x + '---' + _y);

})

EX2：

function mousePos(e) {

var x, y;

var e = e || window.event;

return {

x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,

y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop

};

function test(e) {

document.getElementById("mjs").innerHTML = mousePos(e).x + ',' + mousePos(e).y;

};

EX3：

function mouseMove(e) {

e = e || window.event;

var mousePos = mouseCoords(e);

alert(mousePos.x + "-" + mousePos.y);

}

function mouseCoords(e) {

if (e.pageX || e.pageY) {

return { x: e.pageX, y: e.pageY };

}

return {

x: e.clientX + document.body.scrollLeft - document.body.clientLeft,

y: e.clientY + document.body.scrollTop - document.body.clientTop

};

}

document.onmousemove = mouseMove;

27.拖拽容器（圖片BUG處理）

function moveFun() {

var objX, objY, posX, posY, moveX, moveY;

function mousePos(e) {

var x, y;

var e = e || window.event;

return {

x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,

y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop

};

$("#lightbox-container-image-box").mousedown(function(e) {

$(this).attr('ismove', 'true');

objX = $(this).parents("#jquery-lightbox").offset().left;

objY = $(this).parents("#jquery-lightbox").offset().top;

posX = mousePos(e).x;

posY = mousePos(e).y;

}).mousemove(function(e) {

if ($.trim($(this).attr('ismove')) == 'false') {

return false;

}

if (e.button != 0 && e.button != 1) {

return false;

}

moveX = mousePos(e).x;

moveY = mousePos(e).y;

var resultX = objX + moveX - posX;

var resultY = objY + moveY - posY;

$("#jquery-lightbox").css({ "top": resultY, "left": resultX });

return false;

}).mouseup(function() {

$(this).attr('ismove', 'false');

});

}

28.jQuery獲取Select選擇的Text和Value

1. $("#select_id").change(function(){//code...}); //爲Select添加事件，當選擇其中一項時觸發

2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text

3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值

jQuery添加/刪除Select的Option項：

1. $("#select_id").append("<option value='Value'>Text</option>"); //爲Select追加一個Option(下拉項)

2. $("#select_id").prepend("<option value='0'>請選擇</option>"); //爲Select插入一個Option(第一個位置)

3. $("#select_id option:last").remove(); //刪除Select中索引值最大Option(最後一個)

4. $("#select_id option[index='0']").remove(); //刪除Select中索引值爲0的Option(第一個)

5. $("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Option

內容清空：$("#charCity").empty();

29.js對文字進行編碼及解碼函數

編碼：escape,encodeURI,encodeURIComponent

解碼：unescape,decodeURI,decodeURIComponent

詳細： http://user.qzone.qq.com/355582750/blog/1379397017

ajax URL中文亂碼問題：encodeURI(encodeURI(url))（二次轉碼）

30.正則判斷是否爲網站連接

/^(https?|ftp):\/\/|(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)|\/|\?)*)?$/i

31.JS判斷鼠標從什麼方向進入一個容器

http://www.cnblogs.com/rubylouvre/archive/2012/11/06/2757175.html

<!DOCTYPE html>

<html>

<head>

<title>判斷鼠標進入方向</title>

</head>

<body>

<style>

html,body{margin:0;padding:0;}

#wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}

</style>

方向反饋

</div>

$("#wrap").bind("mouseenter mouseleave",

function(e) {

var w = $(this).width();

var h = $(this).height();

var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

var eventType = e.type;

var dirName = new Array('上方','右側','下方','左側');

if(e.type == 'mouseenter'){

$(this).html(dirName[direction]+'進入');

}else{

$(this).html(dirName[direction]+'離開');

}

});

</script>

</body>

</html>

32.JS模擬監聽觸屏滑動方向

//模擬觸屏事件

var touchFun = function() {

var x_m_d = null;

var x_m_u = null;

var direction = null;

var m_d = false;

var objPos = null;

document.getElementById("banner").addEventListener('touchstart', m_down, false);

document.getElementById("banner").addEventListener('touchmove', m_move, false);

document.getElementById("banner").addEventListener('touchend', m_up, false);

function m_down(e) {

x_m_d = e.touches[0].pageX;

m_d = true;

objPos = $('.tab-banner-content li.current').offset().left;

}

function m_move(e) {

x_m_u = e.touches[0].pageX;

direction = x_m_u - x_m_d;

if (direction > 10 || direction < -10) {

event.preventDefault();

}

clearInterval(timeoutSet);

if (m_d) {

$('.tab-banner-content li.current').css('left', objPos + direction);

}

function m_up(e) {

if (m_d) {

if (direction > 50) {

prevFun();

} else {

$('.tab-banner-content li.current').stop().animate({

'left': objPos

}, 'slow');

}

if (direction < -50) {

nextFun();

}

timeoutSet = setInterval(nextFun, timeoutTime);

}

touchFun();

33.JS屏蔽連接拖動後打開新窗口

$('a').on('mouseup mousedown mouseout', function(e) {

if (e && e.preventDefault) {

e.preventDefault();

} else {

window.event.returnValue = false;

}

});

$('a').on('click', function(e) {

window.location.href = this.href;

});

34.HTML 5 全局 contenteditable 屬性，容器內容可編輯模式
<p contenteditable="true">這是一段可編輯的段落。請試着編輯該文本。</p>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。