1. 程式人生 > >Jquery——選擇器

Jquery——選擇器

clas his col one 過濾選擇器 tex open 層級選擇器 class

body

技術分享
 1 <body>
 2 <form action="">
 3     <input class="input1" name = "name" id = "name" type = "text" />
 4     <input class="input2" name = "passwor" id = "passwor" type = "text" />
 5     <div>
 6         <input class="input3" name = "age" id = "age" type = "text"
/> 7 <input class="input4" name = "phone" id = "phone" type = "text" /> 8 </div> 9 </form> 10 <ul> 11 <li>1</li> 12 <li>2</li> 13 <li>3</li> 14 <li>4</li> 15 <li>5</li> 16 </ul> 17 <input type = "button"
value = "點擊" onclick="Myclick()" /> 18 </body>
body

選擇器:

技術分享
1 var input = $("input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     }) 
View Code

選取所有的<input>元素;

技術分享
1 var input = $("#name");
2     input.each(function(){
3         var i = $(this).val();
4 alert(i); 5 })
Id選擇器

選取Id="name"的元素

技術分享
1  var input = $(".input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     }) 
類選擇器

選取class="input"的元素

技術分享
1 var input = $("*");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
*選擇器

選取所有元素;

技術分享
1 var input = $(".input2,#name,#phone");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
疊加選擇器

分別選取class="input2",id="name",id="phone"的元素

技術分享
1 var input = $("form  input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     }) 
層級選擇器

選取<form>下的<input>元素;

技術分享
1 var input = $("form > input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
層級選擇器-子級

選取<form>下的子級<input>元素,不選取孫級

技術分享
1 var input = $("ul + input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
層級選擇器-next

選取<ul>後的第一個<input>元素,input必須在ul的下一位

技術分享
1 var input = $("ul ~ input");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
層級選擇器-~

選取<ul>後的所有同級<input>元素,不包含<ul>;

技術分享
1 var input = $("input:first");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
過濾選擇器-first

選取第一個<input>元素;

技術分享
1 var input = $("input:last");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
過濾選擇器-last

選取最後一個<input>元素;

技術分享
1 var input = $("input:even");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
過濾選擇器-even

選取所有偶數<input>元素,從0開始;

技術分享
1 var input = $("input:odd");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
過濾選擇器-odd

選取所有奇數<input>元素,從0開始;

技術分享
1 var input = $("input:not(#name)");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
選擇器-not

選取所有<input>裏id!=name的元素;

技術分享
1 var input = $("input:not(:checked)");
2     input.each(function(){
3         var i = $(this).val();
4         alert(i);
5     })
選擇器-not2

選取<input>裏沒選中的元素,註意not(:)中的:;

Jquery——選擇器