JQueryノート4:JQueryセレクタ
DomセレクタはgetElementById、getElementByName関数です.JQueryセレクタはDomセレクタと同様に、条件を満たす要素を検索するために使用されます.$("#コントロールId")コントロールidに基づいてコントロールのjQueryオブジェクトを取得します.getElementByIdに相当します.
$(「TagName」)は、getElementsByTagNameに相当するすべての指定されたラベル署名のjQueryオブジェクトを取得します.
CSSセレクタ、同時にスタイルを持つ複数の要素を選択
複数条件セレクタ:
$(「p,div,span.menuitem」)を選択し、pラベル、divラベル、menuitemスタイルを持つspanラベル要素を選択します.
注:セレクタ式のスペースは多くても少なくはありません.これは間違いやすいです!
階層セレクタ:
•(1)$("div li")divの下のすべてのli要素(子孫、子、子の子...)•(2)$("div>li")divの下の直接li要素を取得し、">"lの両側にスペースがあることに注意してください.
•(3)$(".menuitem+div")menuitemというスタイルの最初のdiv要素を取得します(一般的ではありません)
•(4)$(「.menuitem~div」)取得スタイル名menuitem以降のすべてのdiv要素(一般的ではない)フォームセレクタ
•(1)$(":input")サーバに送信可能なすべてのフォームをinputとして計算し、すべての、<textarea>、•(2)$(":text")を取得してすべての単行テキストボックスを選択するだけで、$(「input[type=text])•(3)$(":password")がすべてのパスワードボックスを選択することに等しい.同じ理屈では、radio、:checkbox、:submit、:image、:reset、:button、:file、:hiddenもあります.
$(" # div1").html("<font color=red>hello</font>")$(「TagName」)は、getElementsByTagNameに相当するすべての指定されたラベル署名のjQueryオブジェクトを取得します.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
// Dom ， $("p") ， Dom onload=initEvent() 。
//$("p").click(function () { alert(" P "); });
$(function () {// onload
$("p").click(function () { alert(" P "); });// p click
});
</script>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>CSSセレクタ、同時にスタイルを持つ複数の要素を選択
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
.warning{background-color:Yellow;color:Red;}
</style>
<script type="text/javascript">
$(function () {
$(".warning").click(function () { alert(" "); });
});
</script>
</head>
<body>
<p class="warning"> </p>
<div class="warning"> </div>
<input id="Button2" type="button" value=" " class="warning"/>
</body>
</html>複数条件セレクタ:
$(「p,div,span.menuitem」)を選択し、pラベル、divラベル、menuitemスタイルを持つspanラベル要素を選択します.
注:セレクタ式のスペースは多くても少なくはありません.これは間違いやすいです!
階層セレクタ:
•(1)$("div li")divの下のすべてのli要素(子孫、子、子の子...)•(2)$("div>li")divの下の直接li要素を取得し、">"lの両側にスペースがあることに注意してください.
•(3)$(".menuitem+div")menuitemというスタイルの最初のdiv要素を取得します(一般的ではありません)
•(4)$(「.menuitem~div」)取得スタイル名menuitem以降のすべてのdiv要素(一般的ではない)フォームセレクタ
•(1)$(":input")サーバに送信可能なすべてのフォームをinputとして計算し、すべての、<textarea>、•(2)$(":text")を取得してすべての単行テキストボックスを選択するだけで、$(「input[type=text])•(3)$(":password")がすべてのパスワードボックスを選択することに等しい.同じ理屈では、radio、:checkbox、:submit、:image、:reset、:button、:file、:hiddenもあります.