jQuery のメソッドとは何ですか? jQuery でよく使用されるメソッド (コード付き)

この記事の内容は、jQuery のメソッドとは何ですか? jQuery でよく使用されるメソッド (コード付き) についてです。必要な方は参考にしていただければ幸いです。

.each()

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

$('p').each(function(idx,node){
  $(node).text(idx + ':' + 'hello')
})

$.extend()

jQuery.extend([deep,] target [, object1 ] [, objectN ] )
複数のオブジェクトをマージし、すべての属性を最初のオブジェクトに追加しますjQuery.extend([deep,] target [, object1 ] [, objectN ] )
把多个对象进行合并，把所有的属性添加到第一个对象上

• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

• 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。即{}为默认属性，用户向里面设置属性，覆盖掉默认的属性，没有设置的即使用默认属性。

var object = $.extend({}, object1, object2)
var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
}var object2 = {  banana: { price: 200 },  durian: 100
}
// 将obj2合并到obj1上的案例
$.extend( object1, object2 )

.clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果。

例如：

<div class="container">    
<div class="hello">Hello</div>    
<div class="world">World</div></div>
$(&#39;.hello&#39;).appendTo(&#39;.world&#39;);<div class="container">  <div class="world">
    World    <div class="hello">Hello</div>  </div></div>

如果需要的是复制而不是剪切，可以像下面这样写代码：

$('.hello').clone().appendTo('.world')

.index()

从给定集合中查找特定元素 index下标

• 没参数返回第一个元素index

• 如果参数是 DOM对象 或者 jQuery对象 ，则返回参数在集合中的index

• 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

$('p').eq(2).index()  //2
$('.ok').index('p')  //获取p标签中的.ok的下标

.ready()

相当于原生JS的document.onDOMContentLoaded
当DOM准备就绪时，指定一个函数来执行。

例如执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才行），就需要将这样的代码放到 load 事件中。

下面两种写法都是等同的

$(document).ready(function(){
})

$(function(){
})

示例

$(function(){    console.log('ready')
})

window.onload 和 $(document).ready

开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有被加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。那window.onload 和 $(document).ready 有什么区别？document.onDOMContentLoaded 呢?

window.onload 和 $(document).ready 有什么区别？

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是 DOM结构 绘制完毕后就执行，不必等到所有页面元素加载完毕。

两个方法重复执行的不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个
$(document).ready()可以同时编写多个，并且都可以得到执行。
如果两个方法都写了，那么$(document).ready()是比window.onload要先执行的。

简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){})

document.onDOMContentLoaded 呢?

document.onDOMContentLoaded相当于 jQuery 当中的.ready()

• 2 つを指定する場合、または複数のオブジェクトが $ に渡されます。 extend() を実行すると、オブジェクトのすべてのプロパティがターゲット オブジェクト (ターゲット パラメーター) に追加されます。

• $.extend() にパラメーターが 1 つだけ指定されている場合、これはターゲット パラメーターが省略されていることを意味します。この場合、jQuery オブジェクト自体がデフォルトでターゲット オブジェクトになります。このようにして、jQuery 名前空間に新しい機能を追加できます。これは、jQuery に新しい機能を追加したいプラグイン開発者にとって便利です。つまり、{} はデフォルトの属性であり、設定されていない場合はデフォルトの属性が上書きされます。

rrreee.clone()

.clone() メソッドは、すべての一致する要素、一致する要素の下位要素、およびテキスト ノードを含む、すべての一致する要素セットを深くコピーします。 。
通常、ページ上の要素を DOM 内の別の場所に挿入すると、剪断効果と同様に、要素は古い場所から削除されます。

例:

rrreee🎜 切り取るのではなくコピーする必要がある場合は、次のようなコードを記述できます: 🎜rrreee🎜.index()🎜🎜 indexの下にある指定されたコレクションから特定の要素を検索します> 🎜

• をマークします🎜パラメータがない場合は、最初の要素indexを返します🎜
• 🎜パラメータがDOMオブジェクトの場合または jQuery オブジェクトを返し、パラメータの index を返します🎜
• 🎜パラメータがセレクターの場合は、最初に一致する要素 index を返し、見つからない場合は return - 1🎜

rrreee🎜.ready()🎜🎜 はネイティブ JS の document.onDOMContentLoaded と同等です
DOM の準備ができたら、実行する関数を指定します。 🎜🎜たとえば、要素のロード後に実行されたコードを使用する必要がある場合(たとえば、画像のサイズの取得を画像のロード後に行う必要がある場合)、そのようなコードをloadイベントに置く必要があります。 🎜🎜次の 2 つの書き方は同等です🎜rrreee🎜例🎜rrreee

window.onload と $(document).ready

​​>🎜 開発では、多くの場合、ハンドラーを一部の要素のイベントにバインドする必要があります。しかし問題は、要素がページに読み込まれていないのにバインディング イベントが実行された場合、効果がないことです。これら 2 つのイベントは、このような状況を回避するために大まかに使用され、これら 2 つのイベントのコールバックにバインドされた関数を配置して、ページの特定の要素が読み込まれた後にイベント関数がバインドできるようにします。 window.onload と $(document).ready の違いは何ですか? document.onDOMContentLoaded についてはどうですか? 🎜🎜window.onload と $(document).ready の違いは何ですか? 🎜🎜実行時間が異なります🎜🎜window.onload は、画像を含むページ内のすべての要素が読み込まれるまで実行する前に待機する必要があります。
$(document).ready() は、描画完了後にすべてのページ要素がロードされるのを待たずに実行される DOM 構造です。 🎜🎜2つのメソッドの繰り返し実行の違い🎜🎜window.onloadメソッドは同時に複数記述することはできません。window.onloadメソッドが複数ある場合は最後のメソッドのみが実行されます
$(document) .ready() は同時に複数回書き込むことができ、すべて実装できます。
両方のメソッドが記述されている場合、$(document).ready() が wi​​ndow.onload の前に実行されます。 🎜🎜簡略化された記述方法🎜window.onload には簡略化された記述方法がありません
$(document).ready(function(){}) は $(function(){}) と省略できます🎜 document.onDOMContentLoaded はどうですか? 🎜🎜 document.onDOMContentLoaded は、jQuery の .ready() に相当します。 DOMContentLoaded イベントは、最初の HTML ドキュメントが完全に読み込まれて解析された後、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。 🎜🎜jQuery ドキュメントの概要 これら 2 つは同じ関数ではないことを説明する段落があります🎜🎜🎜🎜🎜Translation🎜🎜ready() メソッドは、ページの DOM ドキュメント オブジェクト モデルが JavaScript コードを安全に操作できるようになるとすぐに実行する方法を提供します。多くの場合、これは、ユーザーがページを表示または操作する前に、イベント ハンドラーの追加やプラグインの初期化など、必要なタスクを実行するのに適した時期です。このメソッドへの連続呼び出しによって複数の関数が追加されると、それらは DOM 内で準備され、追加された順序で実行されます。 jQueryの場合 3.0 では、jQuery は、1 つのハンドラーで発生した例外が、その後追加されたハンドラーの実行を妨げないことを保証します。 🎜

ほとんどのブラウザは次で始まります 同様の機能が DOMContentLoaded イベントの形式で提供されます。ただし、jQueryの.ready() これらのメソッドには重要かつ有用な違いがあります。DOM の準備ができている場合、コードが .ready(handler) を呼び出す前にブラウザが DOM をロードします。 DOMContentLoaded の場合でも、関数ハンドラーは引き続き実行されます。対照的に、イベントの発生後に追加された DOMContentLoaded イベント リスナーは実行されません。

つまり、 document.onDOMContentLoaded は jQuery の .ready() に相当するものではなく、類似のメソッドであるとしか言えません。

関連する推奨事項:

jQuery での順序付けされていない画像のプリロードの実装と使用方法

jQuery オブジェクトとネイティブ DOM オブジェクトの違いと変換

以上がjQuery のメソッドとは何ですか? jQuery でよく使用されるメソッド (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。