简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQueryのその他のメソッド

巴扎黑
リリース： 2017-06-26 14:32:14
オリジナル
1084 人が閲覧しました

前言

その他のメソッドは実際にはツールクラスのメソッドですが、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操作

【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()】

jQueryオブジェクトを走査し、一致する要素ごとに関数を実行します

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()】
一致するjQueryオブジェクトを取得して、対応するDOM要素を取得します
$('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>
ログイン後にコピー
そうでない場合 If .index() メソッドにパラメータを渡すと、要素のセットに対して .index() が呼び出され、パラメータがDOM 要素または jQuery オブジェクトの場合、.index() の戻り値は、元のコレクションを基準とした渡された要素の位置です。

パラメーターがセレクターの場合、.index() の戻り値は、セレクターが照合した要素を基準とした元の要素の位置です。一致する要素が見つからない場合、.index()は-1を返します

$( "li" ).get( 0 )
ログイン後にコピー
【toArray()】

jQueryオブジェクトコレクション内のすべてのDOM要素を含む配列を返します

index( [selector或element] )
ログイン後にコピー

$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));
ログイン後にコピー

インデックスフィルタリング

インデックスセレクターはjQueryフィルターセレクターの一部です。同時に、eq()、first()、last()など、同様の機能を持つインデックス関連のメソッドもあります

【eq()】
eq()メソッドは、指定された要素のセットと一致しますインデックス要素。 eq() メソッドは、0 を基数とする整数をパラメータとして受け入れることができます。整数が負の数の場合、セット内の最後の要素からカウントが開始されます

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 サイトの他の関連記事を参照してください。

関連ラベル：
jquery 方法
ソース：php.cn
前の記事：jQueryの共通ツールメソッド 次の記事：jQueryを使用して簡単な計算機を実装する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
jQueryがデータ属性を取得するときに間違った値を取得する データ属性 <divclass='p1'data-location='1'></div> を持つ div があります。 $('button').click(...
から 2023-11-01 23:01:19
0
1
209
jQuery の Transfer-Encoding:chunked をサポート 私はウェブ開発者です。私のスクリプトでは、header() を使用して「Transfer-Encoding:chunked」を設定しています。そしてWebページにflush()を実...
から 2023-10-25 23:44:37
0
1
230
JavaScript または jQuery を使用して画像の自然な寸法を取得するにはどうすればよいですか? これまでのところ、私はこのコードを持っています: varimg=document.getElementById('draggable'); varwidth=img.clientW...
から 2023-10-21 13:53:08
0
2
275
テキストエリアを自動的に拡張する シンプルな自動拡張テキストエリアを作成しようとしています。これは私のコードです: textarea.onkeyup=function(){textarea.style.height...
から 2023-10-21 08:49:23
0
2
225
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！