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

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

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

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

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

css selector、Xpath、または html 要素にすることができます。つまり、ターゲット要素は上記の式を通じて照合されます。 例: $("a") によって構築されたオブジェクトは、CSS セレクターを使用して jQuery オブジェクトを構築します。これにより、すべての タグが選択されます。例:
$("a").click(function(){...})
は、ページ上のリンクがクリックされたときのトリガー イベントです。正確に言うと、jQuery はタグ を使用してオブジェクト $("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 オブジェクトを構築し、この文字列を に追加します。

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') は

の直接の子孫にあります。 $('p ul') は ;p> のすべての子孫の

で見つかります。つまり、$('#sId>li') は ID が「sId」のすべての子ノードを選択します。この
• の子孫には、探しているスコープではない
• (見つかった DOM オブジェクトはその独自のレベルの DOM オブジェクトのみです) および $('#sId li:not(. horizo​​ntal)') はクラスを参照します。「sId」という名前の li のすべての子孫には、horizo​​ntal クラスの要素はありません。ここでは not() が否定疑似クラスです。ここで返されるのは jQurey オブジェクトです。配列オブジェクトであり、この jQuery オブジェクトの長さが取得されます。
  2. 要素の属性です。
  属性セレクターです。
  [] には @ がありません。 [] が要素の子孫であることを示します。
  $('ul li') と $('ul[li]') は両方とも jQuery 配列を返しますが、この 2 つの意味はまったく逆です。前者は、
• の子孫をすべて検索するものであり、後者は、子孫が
• であるすべての
  配列を検索するものです。
  XPath で、「... で始まる」属性を検索したい場合は、^= を使用します。 name 属性が mail で始まる入力要素を検索したい場合は、
  $('input[@name^=" mail" ]') 「...で終わる」属性を検索するには、$= を使用します。 「始まりも終わりもない」属性を検索するには、*= を使用します。
  3. 上記に属さないセレクター-前述の CSS と XPath は、「:」で表されるカスタム セレクターであり、ここで使用されるものは次のとおりです:
  
  

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

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

  $('th').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)的方法，如
  

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

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

  推荐阅读：

  js仿jquery步骤详解
  

  JS中时间单位比较的方法
  

  以上がjQuery での $() の 3 つの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。