jQuery杂项方法

前面的话

　　杂项方法其实也是工具类方法，但由于其不是定义在jQuery构造函数上的方法，所以不能称为工具方法。本文将详细介绍jQuery中的杂项方法

数据操作

【data()】

　　该方法用于在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

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

console.log($("body").data("foo"));//52
console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}

　　如果使用原生javascript，相当于

document.body.foo = 52;
console.log(document.body.foo);//52

【removeData()】

　　removeData()方法允许移除用.data()绑定的值。当带name参数调用的时候，.removeData()将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性

　　当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()

removeData( [name] ) // [name]:String 要移除的存储数据名
removeData( [list] ) // [list]:Array,String 一个数组或空间分隔的字符串命名要删除的数据块
$(‘body‘).data("test1", "VALUE-1")
         .data("test2", "VALUE-2");
console.log($(‘body‘).data());//{test1: "VALUE-1", test2: "VALUE-2"}
$(‘body‘).removeData("test1");
console.log($(‘body‘).data());//{test1: "VALUE-1", test2: "VALUE-2"}

　　如果使用原生javascript，相当于

document.body.foo = 52;
console.log(document.body.foo);//52
delete document.body.foo;
console.log(document.body.foo);

队列操作

【queue()】

　　显示或操作匹配的元素上已经执行的函数队列

queue( [queueName ] ) //queueName : String 一个含有队列名的字符串。默认是 fx，标准的动画队列
queue( [queueName ], newQueue ) //newQueue:Array 一个替换当前列队内容的函数数组
queue( [queueName ], callback( next ) )//callback( next ):Function() 将要添加到队列中的新函数。当该函数被调用时，会从弹出队列中的下一个元素
var div = $("div");
div.show("slow");
div.animate({left:‘+=200‘},2000);
var n = div.queue(‘fx‘);
console.log(n.length);//2

【clearQueue()】

　　从列队中移除所有未执行的项

clearQueue( [queueName ] )

集合操作

【each()】

　　遍历一个jQuery对象，为每个匹配元素执行一个函数

each( function(index, function(index, Element)) )
$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

【add()】

　　add()方法添加元素到匹配的元素集合。add()方法的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用

add( selector )
add( elements )
add( html )
add( jQuery object )
add( selector, context )
$(‘li‘).add(‘p‘)
$(‘li‘).add(‘<p id="new">new paragraph</p>‘)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<div>div</div>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).add(‘div‘).css(‘background‘, ‘lightgreen‘);
})
</script>

【get()】

　　通过检索匹配jQuery对象得到对应的DOM元素

get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素
$( "li" ).get( 0 )

【index()】

　　从匹配的元素中搜索给定元素的索引值，从0开始计数

index( [selector或element] )

　　如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

　　如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置。

　　如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

$(‘#bar‘).index();
listItem.index(‘li‘);
$(‘li‘).index($(‘li:gt(0)‘));

【toArray()】

　　返回一个包含jQuery对象集合中的所有DOM元素的数组

toArray() 这个方法不接受任何参数
//[<li id="foo">, <li id="bar">]
alert($(‘li‘).toArray());

索引过滤

　　索引选择器是jQuery过滤选择器的一部分。与此同时，也存在功能相似的索引相关的方法，包括eq()、first()、last()

【eq()】

　　eq()方法匹配元素的集合为指定的索引的哪一个元素。eq()方法可以接受一个整数作为参数，以0为基数。若整数为负数，则从集合中的最后一个元素开始计数　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$(‘#btn1‘).click(function(){
    $(‘li‘).eq(0).css(‘border‘,‘1px solid red‘);
})
$(‘#btn2‘).click(function(){
    $(‘li‘).eq(-1).css(‘border‘,‘1px solid blue‘);
})
$(‘#btn3‘).click(function(){
    $(‘li‘).eq(2).css(‘border‘,‘1px solid green‘);
})
</script>

【first()】

　　first()方法获取匹配元素集合中第一个元素，该方法不接受参数

【last()】

　　last()方法获取匹配元素集合中最后一个元素，该方法不接受参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$(‘#btn1‘).click(function(){
    $(‘li‘).first().css(‘border‘,‘1px solid red‘);
})
$(‘#btn2‘).click(function(){
    $(‘li‘).last().css(‘border‘,‘1px solid blue‘);
})
</script>

【end()】

　　终止在当前链的最新过滤操作，并返回匹配的元素的以前状态

end() 这个方法不接受任何参数

　　end() 方法主要用于 jQuery 的链式属性中。当没有使用链式用法时，我们通常只是调用变量名上的前一个对象，所以我们不需要操作栈。使用 end() 时，我们可以一次性调用所有需要的方法

$(‘ul.first‘).find(‘.foo‘).css(‘background-color‘, ‘red‘)
  .end().find(‘.bar‘).css(‘background-color‘, ‘green‘);

　　在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找 <ul class="first"> 中的 ‘.bar‘，而不是继续在 <li class="foo"> 中进行查找，结果是将匹配到的元素的背景色变成绿色

内容过滤

　　jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()

【has()】

　　has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).has(‘ul‘).css(‘border‘, ‘1px solid lightblue‘);
})
</script>

【map()】

　　map()方法通过一个函数匹配当前集合中的每个元素

　　作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input value="text">
<input value="text">
<input value="text">
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘input‘).map(function(index,dom){
        dom.value += index;
    });
})
</script>

【filter()】

　　filter()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).filter(‘:even‘).css(‘border‘,‘1px solid lightgreen‘)
})
</script>

　　filter()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素保留；否则，该元素在匹配集合中被去除

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).filter(function(index,dom){
        if(!(index % 3)){
            $(dom).css(‘border‘,‘1px solid lightgreen‘)
            return true;
        }
    })
})
</script>

【not()】

　　not()方法与filter()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).not(‘:even‘).css(‘border‘,‘1px solid lightgreen‘)
})
</script>

　　not()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素被去除；否则，该元素在匹配集合中保留

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).not(function(index,dom){
        if(!(index % 3)){
            $(dom).css(‘border‘,‘1px solid lightgreen‘)
            return true;
        }
    })
})
</script>

【is()】

　　is()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，DOM元素，jQuery对象或函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$(‘li‘).click(function(){
    if($(this).is(‘:contains("2")‘)){
        $(this).css(‘border‘,‘1px solid black‘)
    }
})
</script>

　　is()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回false，is()方法也返回false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<div id="result"></div>
<script>
var i = 0;
$(‘li‘).click(function(){
    ++i;
    if($(this).is(function(index,dom){
        $(‘#result‘).html(dom.innerHTML);
        if(i%2){
            return true;
        }
    })){
         $(this).css(‘border‘,‘1px solid black‘)
    }
})
</script>

【slice()】

　　slice()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象　

　　slice(start[,end])方法接受两个参数：start和end

　　start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数

　　end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$(‘#btn‘).click(function(){
    $(‘li‘).slice(2,4).css(‘background‘, ‘red‘);
})
</script>
时间： 2024-10-13 07:38:53

jQuery杂项方法的相关文章

jQuery 杂项方法

jQuery 杂项方法 方法 描述 data() 向被选元素附加数据,或者从被选元素获取数据 each() 为每个匹配元素执行函数 get() 获取由选择器指定的 DOM 元素 index() 从匹配元素中搜索给定元素 $.noConflict() 释放变量 $ 的 jQuery 控制权 $.param() 创建数组或对象的序列化表示形式(可在生成 AJAX 请求时用于 URL 查询字符串中) removeData() 移除之前存放的数据 size() 在版本 1.8 中被废弃.返回被 jQue

jQuery.parseJSON()方法

jQuery.parseJSON()方法 jQuery 杂项方法 实例 解析一个 JSON 字符串 $(function () { var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" ); }) 尝试一下 » 定义和用法 $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 注意:传入格式有误的

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jQuery on()方法

jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

优化加载jQuery的方法

请看下面的一段代码: 1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 2 <script type="text/javascript"> 3 window.jQuery || document.write("<script src='__ADMIN_JS__/jquery-2.0.3.

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象

使用jquery的方法和技巧

1.下载一个jquery.js的文件 2.引入jquery.js文件 1 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 5 //这里面使用jquery的方法 6 7 8 }); 9 </s

jQuery.access()方法

最开始只是想了解attr方法,发现它内部调用了jQuery.access()方法.除了attr,还有prop.text.html.css.data 都是内部调用了jQuery.access()方法,可见它的重要. attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); } prop: function( name, value ) {