『总结』jQuery常用函数方法

浏览: 34 发布日期: 2017-09-11 分类: 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();//元素相对于滚动条顶部的偏移量

参考地址: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()的用法(清除动画积累的有效方法)

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");
    $(".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>。

未完待后续慢慢补充。

返回顶部