js jquery cssセレクタまとめ
4435 ワード
js jquery cssセレクタまとめ
一.元のJS(Documentオブジェクト)セレクタ.
idセレクタ:document.getElementById("test");
nameセレクタ:document.getElementsByName("test");
ノードセレクタ:document.getElementsByTagName("p");
classセレクタ:document.getElementsByClassName("test");
二.jQueryセレクタ
1.jQueryエレメントセレクタ.
idセレクタ:$("#test");
classセレクタ:$(".test");
ノードセレクタ:$(「p」);
2.jQuery属性セレクタ.
$("div[id]"); id属性を含むdiv要素$(「input[name='keleyicm']」)をすべて選択します.すべてのname属性が「keleyicm」に等しいinput要素$(「input[name!='keleyicm'」)を選択します.すべてのname属性が「keleyicm」のinput要素$(「input[name^='keleyi'」)に等しくないことを選択します.すべてのnameプロパティが「keleyi」で始まるinput要素$(「input[name$='keleyi'」)を選択します.すべてのnameプロパティを「keleyi」で終わるinput要素$(「input[name*='keleyi'」)を選択します.すべてのnameプロパティに'keleyi'のinput要素$(「input[id][name$='keleyi'」)が含まれていることを選択します.複数のプロパティを使用して、idプロパティを含むすべてのエレメントを取得し、keleyiで終わるエレメントを選択できます.
3.jQuery CSSセレクタ.
$("p").css("background-color","red");
4.jQueryフォームセレクタ.
:input
$(":input")
すべてのフォーム要素
:text
$(":text")
すべてのtype=「text」の要素
:password
$(":password")
すべてのtype=「password」の要素
:radio
$(":radio")
すべてのtype=「radio」の要素
:checkbox
$(":checkbox")
すべてのtype=「checkbox」の要素
:submit
$(":submit")
すべてのtype=「submit」の要素
:reset
$(":reset")
すべてのtype=「reset」の要素
:button
$(":button")
すべてのtype=「button」の要素
:image
$(":image")
すべてのtype=「image」の要素
:file
$(":file")
すべてのtype=「file」の要素
:enabled
$(":enabled")
アクティブなすべてのinput要素
:disabled
$(":disabled")
無効なすべてのinput要素
:selected
$(":selected")
選択されたすべてのinput要素
:checked
$(":checked")
選択したすべてのinput要素
詳細:jQueryリファレンスマニュアル-セレクタ
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
コメント:
1.$(「input」)と$(「:input」)と$(「」)の違いは?
$(「input」)はノードセレクタであり、すべてのinputノードが選択することを示す.
$(":input")は、textarea、selectを含むすべてのフォーム要素を選択するフォームセレクタです.
$("")は2つの部分に分けて理解でき、htmlでは独立したラベルであり、$を加えるとjqueryオブジェクトが生成され、オブジェクトはこれである.例えば、$(')などの要素を迅速に生成するために使用される場合がある.html('これは新しいdiv').addClass('classname').appendTo('body')は、bodyラベルの後にこの新しいdivを追加しました.
2.jqueryセレクタスペース、大きい番号、プラス記号と波番号の違い?
スペース:$('parent childchild')は、parentの下にあるすべてのchildchildノード(すべての子孫)を取得することを表します.大きい番号:$('parent>child')は、parentの下にあるすべてのchildの息子(初代)を取得することを表します.プラス記号:$('pre+nextbrother')はpreノードを取得した次の兄弟ノードを表し、next()メソッド波番号:$('pre~brother')はpreノードを取得した後のすべての兄弟ノードを表し、nextall()メソッドに相当する.
三.CSSセレクタ
1.CSSセレクタパケット
2.CSS子孫選択器
3.CSSサブエレメントセレクタ.
4.CSS隣接兄弟選択器
5.CSS属性セレクタ.
セレクタ
説明
[ attribute ]
指定した属性を持つ要素を選択できます.
[ attribute = value ]
指定した属性と値を持つ要素を選択します.
[ attribute ~= value ]
属性値に指定した語彙を含む要素を選択します.
[ attribute |= value ]
指定した値で始まる属性値を持つ要素を選択します.この値は単語全体でなければなりません.
[ attribute ^= value ]
属性値を一致させて、値の先頭にある各要素を指定します.
[ attribute $= value ]
属性値を一致させて、値の末尾にある各要素を指定します.
[ attribute *= value ]
一致属性値には、指定した値の各要素が含まれます.
6.CSS伪类
説明
CSS
:active
アクティブな要素にスタイルを追加します.
1
:focus
キーボード入力フォーカスを持つ要素にスタイルを追加します.
2
:hover
要素の上にマウスを浮かべると、要素にスタイルを追加します.
1
:link
アクセスされていないリンクにスタイルを追加します.
1
:visited
アクセスしたリンクにスタイルを追加します.
1
:first-child
エレメントの最初のサブエレメントにスタイルを追加します.
2
:lang
指定したlangプロパティを持つ要素にスタイルを追加します.
2
7.CSS疑似元素
説明
CSS
:first-letter
テキストの最初の文字に特殊なスタイルを追加します.
1
:first-line
テキストの最初の行に特殊なスタイルを追加します.
1
:before
要素の前にコンテンツを追加します.
2
:after
要素の後にコンテンツを追加します.
2
詳細:CSSセレクタリファレンスマニュアル
http://www.w3school.com.cn/cssref/css_selectors.asp
転載先:https://www.cnblogs.com/ooo0/p/6115324.html
一.元のJS(Documentオブジェクト)セレクタ.
idセレクタ:document.getElementById("test");
nameセレクタ:document.getElementsByName("test");
ノードセレクタ:document.getElementsByTagName("p");
classセレクタ:document.getElementsByClassName("test");
二.jQueryセレクタ
1.jQueryエレメントセレクタ.
idセレクタ:$("#test");
classセレクタ:$(".test");
ノードセレクタ:$(「p」);
2.jQuery属性セレクタ.
$("div[id]"); id属性を含むdiv要素$(「input[name='keleyicm']」)をすべて選択します.すべてのname属性が「keleyicm」に等しいinput要素$(「input[name!='keleyicm'」)を選択します.すべてのname属性が「keleyicm」のinput要素$(「input[name^='keleyi'」)に等しくないことを選択します.すべてのnameプロパティが「keleyi」で始まるinput要素$(「input[name$='keleyi'」)を選択します.すべてのnameプロパティを「keleyi」で終わるinput要素$(「input[name*='keleyi'」)を選択します.すべてのnameプロパティに'keleyi'のinput要素$(「input[id][name$='keleyi'」)が含まれていることを選択します.複数のプロパティを使用して、idプロパティを含むすべてのエレメントを取得し、keleyiで終わるエレメントを選択できます.
3.jQuery CSSセレクタ.
$("p").css("background-color","red");
4.jQueryフォームセレクタ.
:input
$(":input")
すべてのフォーム要素
:text
$(":text")
すべてのtype=「text」の要素
:password
$(":password")
すべてのtype=「password」の要素
:radio
$(":radio")
すべてのtype=「radio」の要素
:checkbox
$(":checkbox")
すべてのtype=「checkbox」の要素
:submit
$(":submit")
すべてのtype=「submit」の要素
:reset
$(":reset")
すべてのtype=「reset」の要素
:button
$(":button")
すべてのtype=「button」の要素
:image
$(":image")
すべてのtype=「image」の要素
:file
$(":file")
すべてのtype=「file」の要素
:enabled
$(":enabled")
アクティブなすべてのinput要素
:disabled
$(":disabled")
無効なすべてのinput要素
:selected
$(":selected")
選択されたすべてのinput要素
:checked
$(":checked")
選択したすべてのinput要素
詳細:jQueryリファレンスマニュアル-セレクタ
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
コメント:
1.$(「input」)と$(「:input」)と$(「」)の違いは?
$(「input」)はノードセレクタであり、すべてのinputノードが選択することを示す.
$(":input")は、textarea、selectを含むすべてのフォーム要素を選択するフォームセレクタです.
$("")は2つの部分に分けて理解でき、htmlでは独立したラベルであり、$を加えるとjqueryオブジェクトが生成され、オブジェクトはこれである.例えば、$(')などの要素を迅速に生成するために使用される場合がある.html('これは新しいdiv').addClass('classname').appendTo('body')は、bodyラベルの後にこの新しいdivを追加しました.
2.jqueryセレクタスペース、大きい番号、プラス記号と波番号の違い?
スペース:$('parent childchild')は、parentの下にあるすべてのchildchildノード(すべての子孫)を取得することを表します.大きい番号:$('parent>child')は、parentの下にあるすべてのchildの息子(初代)を取得することを表します.プラス記号:$('pre+nextbrother')はpreノードを取得した次の兄弟ノードを表し、next()メソッド波番号:$('pre~brother')はpreノードを取得した後のすべての兄弟ノードを表し、nextall()メソッドに相当する.
三.CSSセレクタ
1.CSSセレクタパケット
h2, p {color:gray;}2.CSS子孫選択器
h1 em {color:red;}3.CSSサブエレメントセレクタ.
h1 > strong {color:red;}4.CSS隣接兄弟選択器
h1 + p {margin-top:50px;}5.CSS属性セレクタ.
a[href] {color:red;}セレクタ
説明
[ attribute ]
指定した属性を持つ要素を選択できます.
[ attribute = value ]
指定した属性と値を持つ要素を選択します.
[ attribute ~= value ]
属性値に指定した語彙を含む要素を選択します.
[ attribute |= value ]
指定した値で始まる属性値を持つ要素を選択します.この値は単語全体でなければなりません.
[ attribute ^= value ]
属性値を一致させて、値の先頭にある各要素を指定します.
[ attribute $= value ]
属性値を一致させて、値の末尾にある各要素を指定します.
[ attribute *= value ]
一致属性値には、指定した値の各要素が含まれます.
6.CSS伪类
説明
CSS
:active
アクティブな要素にスタイルを追加します.
1
:focus
キーボード入力フォーカスを持つ要素にスタイルを追加します.
2
:hover
要素の上にマウスを浮かべると、要素にスタイルを追加します.
1
:link
アクセスされていないリンクにスタイルを追加します.
1
:visited
アクセスしたリンクにスタイルを追加します.
1
:first-child
エレメントの最初のサブエレメントにスタイルを追加します.
2
:lang
指定したlangプロパティを持つ要素にスタイルを追加します.
2
7.CSS疑似元素
説明
CSS
:first-letter
テキストの最初の文字に特殊なスタイルを追加します.
1
:first-line
テキストの最初の行に特殊なスタイルを追加します.
1
:before
要素の前にコンテンツを追加します.
2
:after
要素の後にコンテンツを追加します.
2
詳細:CSSセレクタリファレンスマニュアル
http://www.w3school.com.cn/cssref/css_selectors.asp
転載先:https://www.cnblogs.com/ooo0/p/6115324.html