ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのその他のメソッド
jQueryのその他のメソッド
- 巴扎黑オリジナル
- 2017-06-26 14:32:141136ブラウズ
前言
その他のメソッドは実際にはツールクラスのメソッドですが、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"));//52console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}ネイティブ JavaScript を使用する場合、
document.body.foo = 52; console.log(document.body.foo);//52
【removeData()】
と同等です。 .data() を使用します。 name 引数を指定して呼び出された場合、.removeData() はその一意の値を削除します。引数なしで呼び出された場合は、すべての値が削除されます。 jQuery の内部 .data() キャッシュからは、ドキュメント内の HTML5 データ属性には影響しません。これらの属性は、.removeAttr() を使用して削除できます。そのような属性がない場合は、.removeData("name") を使用します。 name 内部データ キャッシュ内にあるので、jQuery は要素のデータ属性を見つけようとします。 data- 属性を繰り返しクエリすることを避けるために、.removeData() を使用する代わりに、名前を null または未定義に設定します (例: .data("name", unknown))。ネイティブ JavaScript を使用する場合は、同等のto
removeData( [name] ) // [name]:String 要移除的存储数据名removeData( [list] ) // [list]:Array,String 一个数组或空间分隔的字符串命名要删除的数据块
【queue()】
$('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"}
document.body.foo = 52;
console.log(document.body.foo);//52delete document.body.foo;
console.log(document.body.foo);
【clearQueue()】
すべて削除キューから未実行のアイテムを削除します
queue( [queueName ] ) //queueName : String 一个含有队列名的字符串。默认是 fx，标准的动画队列 queue( [queueName ], newQueue ) //newQueue:Array 一个替换当前列队内容的函数数组 queue( [queueName ], callback( next ) )//callback( next ):Function() 将要添加到队列中的新函数。当该函数被调用时，会从弹出队列中的下一个元素
コレクション操作
【each()】
var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);var n = div.queue('fx');
console.log(n.length);//2
clearQueue( [queueName ] )
【add()】
add() メソッドは、一致する要素のコレクションに要素を追加します。 add() メソッドのパラメータは、jQuery セレクター式、DOM 要素、HTML フラグメント参照など、ほぼすべての $() を受け入れることができます
each( function(index, function(index, Element)) )
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});add( selector ) add( elements ) add( html ) add( jQuery object ) add( selector, context )【get()】
$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></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>
【index()】
一致する要素から指定された要素のインデックス値を0から数えて検索します
<span style="color: #000000;">get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素<br></span>
パラメーターがセレクターの場合、.index() の戻り値は、セレクターが照合した要素を基準とした元の要素の位置です。一致する要素が見つからない場合、.index()は-1を返します
$( "li" ).get( 0 )
jQueryオブジェクトコレクション内のすべてのDOM要素を含む配列を返します
index( [selector或element] )
$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));
インデックスフィルタリング
インデックスセレクターはjQueryフィルターセレクターの一部です。同時に、eq()、first()、last()など、同様の機能を持つインデックス関連のメソッドもあります
toArray() 这个方法不接受任何参数【first()】 first()メソッドは、一致する要素のセットの最初の要素を取得します。パラメータを受け入れません
【last()】 last() メソッドは、一致する要素のセットの最後の要素を取得します このメソッドはパラメータを受け入れません
//[<li id="foo">, <li id="bar">]alert($('li').toArray());
【end()】。 Terminates the last filtering Operation in the currentchain, And returns the before state of the matched element
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></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>
end()メソッドは主にjQueryの連鎖属性で使われます。チェーンを使用しない場合、通常は変数名で前のオブジェクトを呼び出すだけなので、スタックを操作する必要はありません。 end() を使用すると、必要なメソッドをすべて一度に呼び出すことができます<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></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>
在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找
- 中的 '.bar'，而不是继续在
- 中进行查找，结果是将匹配到的元素的背景色变成绿色
内容过滤
jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()
【has()】
has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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>以上がjQueryのその他のメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。