jqueryセレクターとCSSセレクターの違いは何ですか?
- 青灯夜游オリジナル
- 2020-11-13 15:03:495648ブラウズ
違い: 1. 2 つは機能が異なります。CSS セレクターは要素を見つけた後に要素のスタイルを設定し、jQuery セレクターは要素を見つけた後に動作を追加します。2. jQuery セレクターはより優れた相互作用を持ちます。ブラウザの機能. 互換性; 3. CSS セレクターと jQuery セレクターの効率は異なります。
jQuery セレクターと CSS セレクターは非常によく似て記述されており、どちらも暗黙的な反復の特性があり、各選択をループする必要がないことがわかっています。セレクターの要件を満たしています。比較的使いやすい要素です。通常、CSS セレクターを $("") で囲むと、
| ## などの jQuery セレクターになります。 | #CSS セレクターjQuery セレクター | |
| #myID | $("#myID") | |
| .myClass | $(".myClass") | |
| p | $("p") | |
| p >strong | $(" p>strong") | |
|
p:nth-child(3 ) | $("p:nth-child(3)") |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p { font-size: 14px; color:#F00 }
p:nth-child(3){color:#690}
</style>
<script src="jquery/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("p").css({"color":"#00f","font-size":"16px"});
$("p:nth-child(3)").css({"font-size":"24px"});
});
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</body>
</html>だから何2つの違いは何ですか？
1. 2 つは機能が異なり、CSS セレクターは要素を見つけた後、要素のスタイルを設定し、jQuery セレクターは要素を見つけた後の動作を追加します。
2. jQuery セレクターは、ブラウザー間の互換性が優れています。
3. セレクターの効率。
CSS セレクターの効率
1. ID セレクター (#myid)
2. クラス セレクター (.myclassname)
3. タグ セレクター (p 、h1、p)
4、隣接セレクター (h1 p)
5、サブセレクター (ul > li)
6、子孫セレクター (li a)
7、ワイルドカード セレクター (*)
8、属性セレクター (a[rel="external"])
9、疑似クラス セレクター (a:hover、 li:nth-child)
上記 9 つのセレクターの効率は高いものから低いものまでランク付けされており、ベースの ID セレクターの効率が最も高く、疑似クラスのセレクターの効率は最低。詳細な紹介については、「効率的な CSS セレクターの作成」 (アドレス: http://csswizardry.com/2011/09/writing-efficient-css-selectors/) を参照することもできます。
jQuery セレクターの効率
1. ID セレクター $('#id') と要素ラベル セレクター $('form')
2. クラス選択 $(' .className')
3、属性セレクター $('[attribute=value]') および疑似クラス セレクター $(':hidden')
その他のプログラミング 関連知識については、次のサイトを参照してください。 :
プログラミングコース以上がjqueryセレクターとCSSセレクターの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。