jQuery での Selector セレクターの使用の概要

jQuery セレクターの概要

//jQuery 选择器 $ 
//$(expression,[context]) return jQuery 
//Unit One 
//expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 

// $("*"); // 表示页面所有元素标签 
// $("th, td") // 表示所有<th><td>元素标签 
// $("a") // 表示所有<a>元素标签 
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标 
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素 
// $(".stuff:empty"); // 表示css选择中的空元素 
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素 
// $(".buttons:disabled"); // 表示css选择中的非启用元素 
// $("input:checked"); // 表示css选择中的选中的元素 
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素 
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配 
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素 
// //alert($("#orderedlist ~ li").length); 
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素 



//expression 之 根据元素属性选择 
// alert($("button[@class]").length); // 表示有class属性的元素 
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素 
// alert($(&#39;button[@class^=not&#39;).length); // 表示有class属性且值开头匹配not的元素 
// alert($(&#39;button[@class$=not&#39;).length); // 表示有class属性且值结尾匹配not的元素 
// alert($(&#39;button[@class*=not&#39;).length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^=&#39;orderedlist&#39;]").find("li:contains(&#39;First&#39;)").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// }); 
//查找ol标签且属性 id=orderedlist的所有元素,这里有两种写法 
//ol[@id=&#39;orderedlist&#39;] 定位父元素 直接用each 迭代 
//ol[@id=&#39;orderedlist&#39;]/* 所有父元素下的子元素 使用find(&#39;child- element&#39;).each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的 
//$(&#39;<p>hello</p>&#39;).appendTo("h2"); //生成一个标记文本 并追加到页面h2标签内 
//也可以 将原本页面元素取出追加 
//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制 

///$(elements) return jQuery 
//这个函数允许直接传入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档 
//$(callback) return jQuery 



//以下是selector一些说明 
/*

基本:

#id: id 属性に基づいてオブジェクトを取得します。
element: 特定の HTML タグに一致するすべてのオブジェクト
.class: オブジェクトの class 属性に従ってオブジェクトを取得する
*: すべてのオブジェクトを取得する
selector1、selector2、selectorN: 削除せずに複数のセレクターのコレクションを取得する重複項目

レベルセレクター:
ancestor子孫: このセレクターはスペースであり、最初に最初のセレクターのすべてのオブジェクトを検索し、次にその子孫ノードで 2 番目のセレクターに一致するすべてのオブジェクトを検索することを意味します。
親 > 子: このセレクターは大なり記号であり、最初に最初のセレクターのすべてのオブジェクトを検索し、次にその子ノード (孫ではない) で 2 番目のセレクターに一致するすべてのオブジェクトを検索することを意味します。
prev + next: このセレクターはプラス記号です。これは、まず最初のセレクターのすべてのオブジェクトを検索し、次に同じレベルの次のノードに続き、2 番目のセレクターにも一致するオブジェクトを検索することを意味します。
prev ~ 兄弟: このセレクターは ~ 記号です。これは、まず最初のセレクターのすべてのオブジェクトを検索し、次に同じレベルの後続のすべてのノードで 2 番目のセレクターに一致するオブジェクトを検索することを意味します。

基本的なフィルター文字:
:first: 複数のオブジェクトの最初のオブジェクトと一致する
:last: 複数のオブジェクトの最後のオブジェクトと一致する
:not(selector): not 項目の後のセレクター内のコンテンツと一致する
:even:すべてのオブジェクトの偶数
:odd: すべてのオブジェクトの奇数と一致
:eq(index): 以下の特定のテーブルの 1 つの要素と一致
:gt(index): 特定の要素よりも大きい 添字付きのすべての要素と一致
:lt(index): 特定の添え字未満のすべての要素と一致します
:header: h1、h2、h3、h4、h5、h6 などのすべてのヘッダー要素と一致します
:animated: アニメーション効果のあるすべての要素と一致します 要素

テキストフィルター:
:contains(text): 間接的に役立つ状況を含め、テキスト要素を内部に含むオブジェクトと一致します
:empty: 子要素のないすべてのオブジェクトと一致します
:has(selector): 少なくとも An オブジェクトを含むすべてのオブジェクトと一致します子セレクター
:parent: テキストのみを含むオブジェクトを含むすべての親オブジェクトと一致します

可視性フィルター:
:hidden: すべての非表示オブジェクト、または入力の非表示タイプと一致します
:visible : すべての表示オブジェクトと一致します

属性フィルター:
[attribute]: 特定の属性を持つすべてのオブジェクトと一致します
[attribute=value]: 特定の属性と値を持つオブジェクトと一致します
[attribute!=value]: 特定の属性を持つが特定の値ではないオブジェクトと一致します
[attribute^=value]: 特定の属性を持ち、特定の値で始まるオブジェクトと一致します
[attribute$=value]: 特定の属性を持ち、特定の値で始まるオブジェクトと一致します 特定の値で終わるオブジェクト
[属性*=値]: 特定の属性を持ち、特定の値を含むオブジェクトと一致します
[selector1] [selector2][selectorN]: 複数の属性セレクターに同時に一致するオブジェクトと一致します

子フィルター:
:nth-child (index/even/odd/equation): 子要素内の特定の添え字/偶数/奇数/方程式オブジェクトに一致します。:eq(index) は単一オブジェクトの子要素の特性にのみ一致し、このメソッドは一致します。複数のオブジェクトの特定の子要素の共通の特性
:first-child: 最初の子要素と一致
:last-child: 最後の子要素と一致
これら 2 つの一致する文字は、複数の親のすべての子要素とも一致しますオブジェクト
:only-child: 親要素に子要素が 1 つだけある場合、この子要素と一致します

フォーム フィルター文字
名前の種類

:input Returns: Array<Element(s)>

フォーム内の入力要素と一致します

:text Returns: Array<Element(s)>

入力が含まれるフォーム内の要素と一致しますタイプはテキストです

:password Returns: Array<Element(s)>

入力タイプがパスワードであるフォーム内の要素と一致します

:radio Returns: Array<Element(s)>

入力タイプがラジオであるフォーム内の要素と一致します

:checkbox Returns: Array<Element(s)>

入力タイプがチェックボックスであるフォーム内の要素と一致します 要素

:submit Returns: Array<Element(s)>

フォーム内の入力タイプが submit である要素と一致します

:image Returns: Array<Element(s)>

フォーム内の image の要素と一致します

:reset Returns: Array<Element(s)>

フォーム内で入力タイプがリセットされる要素と一致します

:button Returns: Array<Element(s)>

入力タイプがフォーム内のボタン 要素

:file Returns: Array<Element(s)>

は、入力タイプが file であるフォーム内の要素と一致します

:hidden Returns: Array<Element(s)>

は、入力タイプが非表示であるフォーム内の要素または非表示領域と一致します

:enabled Returns: Array<Element(s)>

は、有効なすべての要素と一致します

:disabled Returns: Array<Element(s)>

有効になっていないすべての要素と一致します

:checked Returns: Array<Element(s)>

選択されたすべての要素と一致します

:selected Returns: Array<Element(s)>

すべての ドロップダウン リスト選択された要素と一致します

*/

以上がjQuery での Selector セレクターの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。