jquery常用函数与方法

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

未完待后续慢慢补充。