ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryの$()_jqueryの3種類
jQueryの$()_jqueryの3種類
- WBOYオリジナル
- 2016-05-16 18:37:421192ブラウズ
1. $() は、CSS セレクター、Xpath、または html 要素である $(expression) にすることができます。つまり、ターゲット要素は上記の式を通じて照合されます。
例: $("a") によって構築されたオブジェクトは、CSS セレクターを使用して jQuery オブジェクトを構築します。これにより、すべての タグが選択されます。例:
$("a").click(function(){...})
は、ページ上のリンクがクリックされたときにトリガーされるイベントです。正確に言うと、jQuery はタグ を使用してオブジェクト $("a") を構築し、関数 click() はこの jQuery オブジェクトの (イベント) メソッドです。
たとえば、次の HTML コードがあります:
コードをコピーします コードは次のとおりです。以下のように:
three
jQuery
而操作这段HTML的是如下一条语句：
alert($("div>p").html());
$()中的是一个查询表达式，也就是用“div>p”这样一个查询表达式构建了一个jQuery对象，然后的“html()”意思是显示其html内容，也就是上面HTML代码段的[two]。再如：
$("
Hello
$() は文字列です。このような文字列を使用して jQuery オブジェクトを構築し、この文字列を
2. $() は、特定の DOM 要素である $(element) にすることができます。たとえば、コード行
$(document) など、一般的な DOM オブジェクトにはドキュメント、場所、フォームなどが含まれます。 find("div>p").html());
$() 内のドキュメントは DOM 要素です。つまり、全文で
要素を検索します。 display
3. $() は $(document).ready() の短縮形です。一般的な形式は次のとおりです:
$ (document).ready (function(){
alert("Hello world!");
});
変数操作:
$(function(){
alert("Hello world!");
});
HTML ドキュメント内の要素を選択するために、jQuery には 2 つのメソッドがあります:
1) $("div>ul a") など、その ul 内の a タグを意味します。 div タグ内のタグ
ただし、$('div>ul') と $('div ul') には違いがあり、
$(' div>ul') は次のようになります。
は
3. $() は $(document).ready() の短縮形です。一般的な形式は次のとおりです:
$ (document).ready (function(){
alert("Hello world!");
});
変数操作:
$(function(){
alert("Hello world!");
});
HTML ドキュメント内の要素を選択するために、jQuery には 2 つのメソッドがあります:
1) $("div>ul a") など、その ul 内の a タグを意味します。 div タグ内のタグ
ただし、$('div>ul') と $('div ul') には違いがあり、
$(' div>ul') は次のようになります。
は
の直接の子孫の中から検索されますが、$('div ul') は
<🎜; のすべての子孫の中から
<🎜; のすべての子孫の中から
- を検索します。 >2) jQuery オブジェクトのいくつかのメソッド (メソッド find()、each() など)
- の子孫に
- が含まれている場合でも、ID が「sId」であるすべての
- 子ノードを選択します。検索の範囲を選択します (検出される DOM オブジェクトは、その独自のレベルの DOM オブジェクトのみです)。 $('#sId li:not(.horizontal)') は、クラス名 "sId" 内の li のすべての子孫が、horizontal クラスのすべての要素を持たないことを意味します。 ——not() は否定擬似クラスです。
ここで返されるのは jQurey オブジェクト、配列オブジェクトであり、この jQuery オブジェクトの長さは .length() で取得できます。
2. これは要素の属性であり、属性セレクターです。
[] には @ がありません。これは、[] が要素の子孫であることを示します。
$('ul li') と $('ul[li]') はどちらも jQuery 配列を返しますが、その意味はまったく逆です。前者は、- の下にある
- の子孫をすべて検索するものであり、後者は、子孫が
- である
- 配列を検索するものです。
XPath で「... で始まる」属性を検索する場合は、^= を使用します。name 属性が mail で始まる入力要素を検索する場合は、
$('input[@ name^ ="mail"]')
「...で終わる」属性を検索するには、$= を使用します。
始まりも終わりもない属性を検索するには、*=
3. 上記の CSS および XPath に属さないセレクターは、「:」で表されるカスタム セレクターです。ここで使用されるセレクターは、first、:last、:parent、:hidden、:visible、:odd、: です。偶数、:not('xxx')、":eq(0)" (0 から始まる)、:nth(n)、:gt(0)、:lt(0)、:contains("xxx")
例: $('tr:not([th]):even') は、
4 を含まない要素のすべての子孫の偶数番号の項目を意味します他にもいくつかありますが、説明されていません。コンテンツには、「Henry」の の前のノードが含まれています
$('td:contains("Henry")').next()—「Henry」ののコンテンツ前のノード
$('td:contains("Henry")').siblings()——コンテンツに「Henry」が含まれる
のすべての兄弟ノード DOM ノードが特定のアクションを実行し、必要な場合に使用されます。関連するノードに対して同様のアクションを実行するには、ここで End() を使用します。 end() メソッドを使用すると、アクションを実行するノードの親ノードが返されます。例:
$(...).parent().find(...).addClass().end()
ここでアクションを実行するノードは find(...) です。配列オブジェクトの場合、実行されるアクションは「addClass()」であり、次に end() が使用されます。このとき、返されたものは、parent() が指すノード、つまり「addClass()」を指します。その配列オブジェクトの親ノードのアクションが実行されます。
5. DOM 要素に直接アクセスするには、
$('#myelement').get(0) などの get(0) メソッドを使用できます。これは $( と省略することもできます) '#myelement') [0]声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
$("#ownedlist).find("li") を $( "#ownedlist li") のように使用します。 each() もすべての li を反復し、式内の「#」は HTML の ID を表します。たとえば、上記の例の「#ownedlist」は、「ID は、orderedlist が配置されているタグである」ことを意味します。
******************************************* **** **********************
1. タグセレクター $('p')、クラスセレクター $('.myClass '), id セレクター $('#myId') は比較的単純で、多くを語る必要はありません。ただし、$('div>ul') と $('div ul') には違いがあります。
$('div>ul') は
の直接の子孫です。
- を見つけることができます。そして、$('div ul') は、
のすべての子孫の中から
- を検索します。
したがって、$('#sId>li') は、この