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

未完待后续慢慢补充。
上一篇:CRM, C4C和Hybris的工作流简介


下一篇:spring(16)------spring的数据源配置