『总结』jQuery经常使用函数方法

时间 2019-12-07

标签总结 jquery 经常使用函数方法栏目 JQuery 繁體版

原文原文链接

1.delay(duration,[queueName])

设置一个延时来推迟执行队列中以后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。他既能够推迟动画队列的执行，也能够用于自定义队列。javascript

duration:延时时间，单位：毫秒css

queueName:队列名词，默认是Fx，动画队列。html

例：java

头部与底部延迟加载动画效果node

$(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()绑定事件方式；jquery

live()方法在jquery1.9以后被删除。segmentfault

on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或将来的元素（好比由脚本建立的新元素）。api

使用方式:数组

　$(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();//元素相对于滚动条顶部的偏移量

参考地址：http://www.w3school.com.cn/jq...

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()的用法（清除动画积累的有效方法）

一、stop([stopAll], [gotoEnd])方法有两个参数（固然能够不传或直传一个），其中stopAll的意思是清除以后的全部动画。gotoEnd的意思是，执行完当前动画。

二、stopAll == true时，中止队列中的全部动画， stopAll ==false时，只中止队列中的当前动画，后续动画继续执行。

三、gotoEnd == true时，当即跳到当前动画的末尾， gotoEnd ==false时，停在当前状态。且gotoEnd只有在设置了stopAll的时候才起做用

四、在项目中，若是不进行动画队列清理，就会产生动画积累的问题。所以在写入动画时，最好先清除队列中的重复动画。

在项目中，例如作下拉二级导航效果，用到jquery的slideDown()与slideUp()方法，当鼠标快速晃动后，若是不进行动画队列清理，就会产生动画积累，出现问题。
例如：

$(".nav li.has_list").hover(function(){
    $(this).children("a").addClass("curr");
    $(".nav li.has_list").children("div").stop(false,true);
    $(this).children("div").slideDown(400).end();                            
},function(){
    $(this).children("a").removeClass("curr");
    $(".nav li.has_list").children("div").stop(false,true);
    $(this).children("div").slideUp(400).end();
    
   }
);

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中的$.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/jq...

11.toggleClass()方法

这个方法的参数接受一个或多个样式类名做为参数。
在第一个版本中，若是在匹配的元素集合中的该元素上存在该样式名，则移除它，不然就加上。
例如：

$('div.tumble').toggleClass('bounce')

若是.tumble元素上存在class为bounce，则移除；不存在则加上。
在第二个版本中，该方法第二个参数是判断样式类名是否被添加仍是被删除。若是是true，这添加；若是是false，则移除。
例如：

$( "#foo" ).toggleClass( className, addOrRemove );

相似于：

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

从 jQuery 1.4 开始, 若是不将任何参数传递给 .toggleClass() 方法,那么匹配元素上的全部样式会在该方法第一次执行时被移除，第二次执行时被还原，如此往复。一样的，从 jQuery 1.4 开始,能够用一个函数做为参数，返回应该显示的样式：

$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});

若是匹配元素的父级元素有bar样式类名，这个例子将为<div class="foo">元素切换 happy 样式类；不然他将切换 sad 样式类。

12.val()方法

.val()方法主要用于获取表单元素的值，如input, select 和 textarea。当在一个空集合上调用，它返回undefined。

当该集合中第一个元素是一个select-multiple（即，select元素设置了multiple属性），.val()返回一个包含每一个选择项值的数组。在jQuery 3.0中，若是没有选项被选中，它将返回一个空数组；在jQuery 3.0以前的版本中，它将返回null。

对于选择框（select），复选框（checkbox）和单选按钮（radio），可使用:checked选择器来获取值，如：

// 在下拉列表中获取所选选项的值
$( "select#foo option:checked" ).val();
 
// 直接从下拉列表中选择值
$( "select#foo" ).val();
 
// 从复选框获取选中值
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// 从一组单选按钮获取选中值
$( "input[type=radio][name=baz]:checked" ).val();

注意: 经过 .val() 方法从 <textarea> 元素中获取的值是不含有回车（r）字符的。可是若是该值是经过 XHR 传递给服务器的，回车（r）字符会被保留（或者是被浏览器添加的，可是在原始数据中并不包含回车（r））。可使用下面的 valHook 方法解决这个问题：

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

13.noConflict() 方法

语法：jQuery.noConflict(removeAll)
removeAll：布尔值。指示是否容许完全将 jQuery 变量还原。

noConflict() 方法让渡变量的控制权。该方法释放对

变量的控制。该方法也可用于为 jQuery 变量规定新的自定义名称。

例1，将 $ 引用的对象映射回原始的对象：

jQuery.noConflict();
jQuery("div p").hide();    // 使用 jQuery
$("content").style.display = "none";    // 使用其余库的 $()

例2，能够将 jQuery.noConflict() 与简写的 ready 结合，使代码更紧凑：

jQuery.noConflict()(function(){
    // 使用 jQuery 的代码
});
... // 其余库使用 $ 作别名的代码

例3，建立一个新的别名用以在接下来的库中使用 jQuery 对象：

var j = jQuery.noConflict();
j("div p").hide();    // 基于 jQuery 的代码
$("content").style.display = "none";    // 基于其余库的 $() 代码

例4，彻底将 jQuery 移到一个新的命名空间：

var dom = {};
dom.query = jQuery.noConflict(true);

dom.query("div p").hide();    // 新 jQuery 的代码
$("content").style.display = "none";    // 另外一个库 $() 的代码
jQuery("div > p").hide();    // 另外一个版本 jQuery 的代码

14.$.proxy() 方法

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

该方法一般用于向上下文指向不一样对象的元素添加事件。

语法 1: $(selector).proxy(function,context)
例子：

<div>这是一个 div 元素。</div>
$(document).ready(function(){
    test=function(){ 
        this.txt="这是一个对象属性";
        $("div").click($.proxy(this.myClick,this));
    };

    test.prototype.myClick = function(event){
        console.log(this.txt);
        console.log(event.currentTarget.nodeName);
    };

    var x = new test();
});

语法2:$(selector).proxy(context,name)

参数	描述
fuction	要被调用的已有的函数。
context	函数所在的对象的名称。
name	已有的函数，其上下文将被改变（应该是 context 对象的属性）。

例子：

$(document).ready(function(){
  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));
});

15.$.isWindow()方法

判断传入的参数是否为 window对象

$.isWindow() 函数用于判断指定参数是不是一个window窗口。

语法：$.isWindow( object ) 其中object为任意类型须要进行判断的任意值。

$(function () { 
    $("b").append( "" + $.isWindow(window) );
})

16.jQuery.data() 方法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

先看个实例，向元素附加数据，而后取回该数据：

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

从元素返回数据：$(selector).data(name)
参数name:可选。规定要取回的数据的名称。若是没有规定名称，则该方法将以对象的形式从元素中返回全部存储的数据。

向元素附加数据:$(selector).data(name,value)
参数name：必需。规定要设置的数据的名称。
参数value：必需。规定要设置的数据的值。

使用对象向元素附加数据：$(selector).data(object)
参数object：必需。规定包含名称/值对的对象。

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合W3C HTML5 规范.

举个例子, 给定下面的HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

下面全部的 jQuery 代码都能运行。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

以上代码的第二条语句正确是表述了该元素的data-last-value属性。若是没有传递key参数的数据存储， jQuery将在元素的属性中搜索，将驼峰式字符串转化为中横线字符串，而后在结果前面加上data-。因此，该字符串lastValue将被转换为data-last-value。

17.$.expr自定义伪类选择器

例如：

<div id="con1"></div>
<div id="con2"></div>
<div id="con3"></div>

$(function() {
        //初始测试数据
        var init=function(){
            $("#con1").add("#con3").data("key","10001");
        };
        init();
        var select="newSelect";
        var name="key";
        //定义一个新选择器
        $.expr[ ":" ][ select ] = function( elem ) {
            return $.data( elem, name );
        };
        //使用
        $("div:newSelect").each(function(){
            console.log(this.id);//结果:con1 con3
        })
    });

18.$.map()

例1，原数组中大于 0 的元素加 1 ，不然删除。：

$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});

结果：[2, 3]

例2：

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

具体参考地址：《jquery中的map()方法与js中的map()方法》

19.is()方法

定义：is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，若是这些元素中至少有一个元素匹配给定的参数，则返回 true。

语法：.is(selector)

说明：与其余筛选方法不一样，.is() 不建立新的 jQuery 对象。相反，它容许咱们在不修改 jQuery 对象内容的状况下对其进行检测。这在 callback 内部一般比较有用，好比事件处理程序。

假设咱们有一个列表，其中两个项目包含子元素：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您能够向 <ul> 元素添加 click 处理程序，而后把代码限制为只有当列表项自己，而非子元素，被点击时才进行触发：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

如今，当用户点击的是第一个列表项中的单词 "list" 或第三个列表项中的任何单词时，被点击的列表项会被设置为红色背景。不过，当用户点击第一个列表项中的 item 1 或第二个列表项中的任何单词时，都不会有任何变化，这是由于这上面的状况中，事件的目标分别是 是 <span>。

20.wrap(),unwrap(),wrapAll(),wrapInner(),unwrap()

wrap() 方法把每一个被选元素放置在指定的 HTML 内容或元素中。

wrapAll() 在指定的 HTML 内容或元素中放置全部被选的元素。

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每一个被选元素中的全部内容 (inner HTML)。

unwrap() 方法删除被选元素的父元素。

下面举例子：

<div class="content">
    <p>我是第一条文本内容。</p>
    <p>我是第二条文本内容。</p>
</div>

使用wrap()方法：

$("p").wrap("<strong></strong>");

结果：

<div class="content">
    <strong><p>我是第一条文本内容。</p></strong>
    <strong><p>我是第二条文本内容。</p></strong>
</div>

使用wrapAll()方法：

$("p").wrapAll("<strong></strong>");

结果：

<div class="content">
    <strong><p>我是第一条文本内容。</p><p>我是第二条文本内容。</p></strong>
</div>

使用wrapInner()方法：

$("p").wrapInner("<strong></strong>");

结果：

<div class="content">
    <p><strong>我是第一条文本内容。</strong></p>
    <p><strong>我是第二条文本内容。</strong></p>
</div>

使用unwrap()方法：

$("p").unwrap();

结果：

<p>我是第一条文本内容。</p>
<p>我是第二条文本内容。</p>

在来一个例子，每隔4个label用一个class为same的div元素包裹，html代码：

<div class="city">
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
</div>

js代码：

$(function(){
    $(".city label").each(function(i){
        $(".city label").slice(i*4,i*4+4).wrapAll("<div class='same'></div>");
    });
})

结果：

<div class="city">
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label></div>
</div>

21.jQuery 事件 - target 属性

target 属性规定哪一个 DOM 元素触发了该事件

例如，显示哪一个 DOM 元素触发了事件：

<h1>这是一个标题</h1>
<h2>这是另外一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。若是您触发了事件，下面的 div 会显示出哪一个元素触发了该事件。</p>
<div></div>
<script type="text/javascript">
$(document).ready(function(){
  $("p, button, h1, h2").click(function(event){
    $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
  });
});
</script>

运行结果如图：

event.target
说明：引起事件的DOM元素。

this和event.target的区别
js中事件是会冒泡的，因此this是能够变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

this和event.target的相同点
this和event.target都是dom对象，若是要使用jquey中的方法能够将他们转换为jquery对象：和
(event.target);

//对于没有子项的菜单，统一设置

$("li:not(:has(ul))").css({
    "cursor":"default",
    "list-style-image":"none"
});

22.not()方法

定义：not() 从匹配元素集合中删除元素。

例如，从包含全部段落的集合中删除 id 为 "selected" 的段落：

<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p id="selected">This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>

<script>
$("p").not("#selected").css('background-color', 'red');
</script>

结果如图：

23.has()方法

定义：has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
语法：.has(selector)

说明：若是给定一个表示 DOM 元素集合的 jQuery 对象，.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代；若是任何后代元素匹配该选择器，该元素将被包含在结果中。

请思考下面这个带有嵌套列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

咱们能够对列表项集合应用该方法，就像这样：

$('li').has('ul').css('background-color', 'red');

该调用的结果是，项目 2 的背景被设置为红色，这是由于该项目是后代中惟一拥有 <ul> 的 <li>。

未完待后续慢慢补充。