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);
});
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
