ホームページ > 記事 > ウェブフロントエンド > jQuery での $() の 3 つの使用例

jQuery での $() の 3 つの使用例

php中世界最好的语言オリジナル: 2018-04-23 10:56:291244ブラウズ

今回は jQuery の 3 つの $() の使用例をお届けします。 jQuery の 3 種類の $() を使用する際の注意事項は何ですか? 以下は実際的なケースです。

$ 記号は jQuery の「クラス」のエイリアスで、$() は jQuery オブジェクトを構築します。したがって、「$()」はjQueryの

コンストラクターと言えます(個人的な意見です、笑)。

1. $() は $(expression)、つまり

css selector、Xpath、または html 要素にすることができます。つまり、ターゲット要素は上記の式を通じて照合されます。例: $("a") によって構築されたオブジェクトは、CSS セレクターを使用して jQuery オブジェクトを構築します。これにより、すべての 7d01d0a03a49fceb57d12197d8d196cb タグが選択されます。例:
$("a").click(function(){...})
は、ページ上のリンクがクリックされたときのトリガーイベントです。正確に言うと、jQuery はタグ 7d01d0a03a49fceb57d12197d8d196cb を使用してオブジェクト $("a") を構築し、関数 click() はこの jQuery オブジェクトの (イベント) メソッドです。
たとえば、次のような HTML コードがあります:

<p>one</p> 
<p> 
<p>two</p> 
</p> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a>

この HTML の操作は次のステートメントです:

alert($("p>p").html());

$() はクエリ式です。つまり、「p>p」のようなクエリ式を使用します。 " jQuery オブジェクトが構築され、次に "html()" はその HTML コンテンツを表示することを意味します。これは、上記の HTML コードスニペットの [2] です。別の例:

$("<p><p>Hello</p></p>").appendTo("body");

$() は文字列です。このような文字列を使用して jQuery オブジェクトを構築し、この文字列を b2636b4e0e32f7cd731b9073897693b7 に追加します。

2. $() は、特定の DOM 要素である $(element) にすることができます。たとえば、一般的に使用される DOM オブジェクトには、ドキュメント、場所、フォームなどが含まれます。次のコード行のように:

$(document).find("p>p").html()); 
$()中的document是一个DOM元素，即在全文寻找带<p>的<p>元素，并显示<p>中的内容。

3. $() は $(function)、つまり $(document).ready() の短縮形である関数にすることができます。たとえば、一般的な形式は次のとおりです:

$(document).ready(function(){ 
alert("Hello world!"); 
});

変数操作:

$(function(){ 
alert("Hello world!"); 
});

HTML ドキュメント内の要素を選択するために、jQuery には 2 つのメソッドがあります:

1) $("p>ul a") など、その Itはpタグ内のulタグ内のaタグを意味します
ただし、$('p>ul')と$('p ul')には違いがあります

$(&#39;p>ul&#39;)是<p>的直接后代里找<ul>； 
而$(&#39;p ul&#39;)是在<p>的所有后代里找<ul>。

2) jQueryオブジェクトのメソッドをいくつか利用する(メソッド find()、each() など)

$("#ownedlist).find("li") は $("#ownedlist li") と似ています。each() はすべての li を反復します。式「#」は HTML の ID を表します。たとえば、上記の例の「#ownedlist」は、「ID は、orderedlist が配置されているタグです」という意味です。
*************** ******************************************。 *
1、
タグの選択 $('p')、クラスセレクター $('.myClass')、および ID セレクター $('#myId') は比較的単純で、多くは説明しませんが、 1 つ - $('p>ul. ') と $('p ul') は異なります。 $('p>ul') は e388a4556c0f65e1904146cc1a846bee の直接の子孫にあります。 $('p ul') は ;p> のすべての子孫の ff6d136ddc5fdfeffaf53ff6ee95f185 で見つかります。つまり、$('#sId>li') は ID が「sId」のすべての子ノードを選択します。この 25edfb22a4f469ecb59f1190150159c6 の子孫には、探しているスコープではない 25edfb22a4f469ecb59f1190150159c6 (見つかった DOM オブジェクトはその独自のレベルの DOM オブジェクトのみです) および $('#sId li:not(. horizontal)') はクラスを参照します。「sId」という名前の li のすべての子孫には、horizontal クラスの要素はありません。ここでは not() が否定疑似クラスです。ここで返されるのは jQurey オブジェクトです。配列オブジェクトであり、この jQuery オブジェクトの長さが取得されます。
2. 要素の属性です。
属性セレクターです。
[] には @ がありません。 [] が要素の子孫であることを示します。
$('ul li') と $('ul[li]') は両方とも jQuery 配列を返しますが、この 2 つの意味はまったく逆です。前者は、25edfb22a4f469ecb59f1190150159c6 の子孫をすべて検索するものであり、後者は、子孫が 25edfb22a4f469ecb59f1190150159c6 であるすべての

「...で終わる」属性を検索するには、$= を使用します。

first，:last，:parent ，:hidden，:visible，:odd，:even，:not(&#39;xxx&#39;)， ":eq(0)"（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx")

如：$('tr:not([th]):even')意为a34de1251f0d9fe1e645927f19a896e8元素的子孙中不含b4d429308760b6c2d20d6300079ed38e的所有子孙的偶数项
4、还有几个，简单不解释了

$(&#39;th&#39;).parent()—— 
$(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
$(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
$(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

还有一个，就是end()，这个方法肯定是用在某个DOM节点执行了某一动作之后，还想在与其相关的节点上执行类似动作，这里就要用到end()。用过end()方法之后，所返回的是执行动作的那个节点的父节点上。举个例子

$(...).parent().find(...).addClass().end()

这里执行动作的节点是find(...)，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。
5、要直接访问DOM元素，可用get(0)的方法，如

$(&#39;#myelement&#39;).get(0)，也可缩写成$(&#39;#myelement&#39;)[0]

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

jQuery での $() の 3 つの使用例

関連記事