1.delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行,也可以用于自定义队列。
duration:延时时间,单位:毫秒
queueName:队列名词,默认是Fx,动画队列。
例:
头部与底部延迟加载动画效果
$(document).ready(function() { $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800); $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800); });
2.jQuery on( ) 委派事件实现
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
live()方法在jquery1.9之后被删除。
on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式:
$(selector).on(event,childselector,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).on("click",childselector,data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
下面看个例子就明白了:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中on()绑定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加单个事件处理*********/ $(".header").on("click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); /********添加多个事件处理********/ //空格相隔方式 $(".header").on("mouseout click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); //大括号替代方式 $(".header").on({ "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }, ".btn-test"); //删除事件 $(".header").off("click", ".btn-test"); }); </script> </head> <body> <div class="header"> <input type="button" value="按钮" class="btn-test" /> </div> <div class="container"> </div> </body> </html>
3.JQuery offset(),position()获得绝对,相对位置的坐标方法
获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;)
var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left;
例如:
$(".produc a span").click(function(){ $('body, html').animate({scrollTop:$('#buy').offset().top }, 'slow'); });
获取相对(父元素)位置:
var X = $('#DivID').position().top; var Y = $('#DivID').position().left;
var left = $("selector").offset().left;//元素相当于窗口的左边的偏移量 var top = $("selector").offset().top;//元素相对于窗口的上边的偏移量 var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量 var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量
4.jquery获取鼠标位置
$(function () { //e为事件名; $(document).mousemove(function (e) { $("p").text("X:" + e.pageX + " Y:" + e.pageY); }); });
5.jquery判断某个元素是否含有某个class,是否存在某些属性,怎样移除某些属性。
在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new")
即可判断.
这时就没有现成的方法了. 如果存在某个属性 $("#aid").attr("rel") 会返回 rel的值,如果不存在 rel属性则会返回"undefined"
undefined 就是 undefined类型 , if($("#aid").attr("rel")=="undefined")
这个判断可能不成立.
因为类型不相同.
建议使用 if(typeof($("#aid").attr("rel"))=="undefined")
即可。
jquery移除某个jquery对象的某个属性: $(".main").removeAttr("style");
6.jquery stop()的用法(清除动画积累的有效方法)
1、stop([stopAll], [gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。
2、stopAll == true时,停止队列中的所有动画, stopAll ==false时,只停止队列中的当前动画,后续动画继续执行。
3、gotoEnd == true时,立即跳到当前动画的末尾, gotoEnd ==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用
4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。
在项目中,例如做下拉二级导航效果,用到jquery的slideDown()与slideUp()方法,当鼠标快速晃动后,如果不进行动画队列清理,就会产生动画积累,出现问题。
例如:
$(".nav li.has_list").hover(function(){ $(this).children("a").addClass("curr"); $(this).children("div").stop(true,true).slideDown(400); },function(){ $(this).children("a").removeClass("curr"); $(this).children("div").stop(true,true).slideUp(400); } );
7.jquery中的size()方法
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'<span title="Core/length">length</span>' 属性一致。
例如:计算文档中所有图片数量
html代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jquery代码:
$("img").size();
结果当然是2.
8.jquery中的$.inArray方法
语法:jQuery.inArray( value, array [, fromIndex ] )
value:要查找的值,array:一个数组,通过它来查找,fromIndex: 数组索引值,表示从哪里在开始查找。默认值是0,这将查找整个数组。
$.inArray()
方法类似于JavaScript的原生.indexOf()
方法,没有找到匹配元素时它返回-1。如果数组第一个元素匹配value
(参数) ,那么$.inArray()
返回0。
因为JavaScript将0视为false(即 0 == false, 但是 0 !== false),要检查在array
中是否存在value
, 你需要检查它是否不等于(或大于)-1。
值之间的比较是严格比较(愚人码头注:即,===或!==比较)。下面这段代码返回 -1
(没有找到) , 因为字符串数组中不可能找到一个数字:
例如:
$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] );
得到的结果是-1,数组中有字符串"10",但是没有数字10.
参考地址:http://www.css88.com/jqapi-1.9/jQuery.inArray/
9.jquery中的$.toArray()方法
toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素
例如:将 li 元素转换为数组,然后输出该数组元素的 innerHTML :
html代码:
<button>输出每个列表项的值</button> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul>
js代码:
$("button").click(function(){ x=$("li").toArray() for (i=0;i<x.length;i++) { alert(x[i].innerHTML); } });
10.jquery的DOM元素方法get()
语法:$(selector).get(index)
get() 方法获得由选择器指定的 DOM 元素。
例如:获得第一个 p 元素的名称和值:
$("button").click(function(){ x=$("p").get(0); $("div").text(x.nodeName + ": " + x.innerHTML); });
参考地址:http://www.w3school.com.cn/jquery/dom_element_methods_get.asp
未完待后续慢慢补充。