一些实用的JS

2023-02-18 11:04:20

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>

码农公寓

相关文章