2. 程式人生 > >jQuery整理筆記二----jQuery選擇器整理

jQuery整理筆記二----jQuery選擇器整理

阿新 • • 發佈：2019-01-07

一、基本選擇器

1、ID選擇器

JavaScript提供了原生方法實現在DOM中選擇指定ID值得元素。用法如下：

var element=document.getElementById("id");

jQuery簡化了其操作： var $element=$("#id");

實際上就是 jQuery對javaScript進行了一下包裝，jQuery的ID選擇方法在執行效率上要低於JavaScript的原生方法。

2、型別選擇器

跟ID選擇器一樣，JavaScript同樣提供了原生的方法用來在DOM中選擇指定型別的元素。

var elements=document.getElementByTagName(tagName"");

jQuery對其包裝後的簡化方法是 var $elements=$("tagName");

3、類選擇器

JavaScript沒有提供內建的類選擇方法，我們可以自己為其拓展一個，程式碼如下：

document.getElementsByClassName=function(className){

     var el=[],

         _el=document.getElementsByTagName("*");   //獲取所有元素

         for(var i=0;i<_el.length;i++){

            if(_el[i]==className){

              el[el.length]=_el[i];

            }

          }

    return el;

}

下面舉個例子，一個頁面有4個div,通過JavaScript使div1和div3的前景色設定成紅色，通過jQuery將div2和div4的前景色設定成藍色

<div class="red"></div>

<div class="red">div1</div>

<div class="blue">div2</div>

<div class="red">div3</div>

<div class="blue">div4</div>

程式碼如下 例項2-1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  document.getElementsByClassName=function(className){

     var el=[],
         _el=document.getElementsByTagName("*");   //獲取所有元素
         for(var i=0;i<_el.length;i++){
            if(_el[i].className==className){
              el[el.length]=_el[i];
            }
          }
		 return el;
	}

	window.onload=function (){
		var redDiv= document.getElementsByClassName("red");
		for(var i=0;i<redDiv.length;i++){
		  redDiv[i].style.color="red";
		}
	};

	$(function(){
		$(".blue").css("color","blue");
	})
  </script>
 </head>

 <body>
  <div id="" class="red">
	div1
  </div>
  <div id="" class="blue">
	div2
  </div>
  <div id="" class="red">
	div3
  </div>
  <div id="" class="blue">
	
  </div>

 </body>
</html>

上述例子可以看得到jQuery的寫法要相對簡單一些，而且jQuery已經是一個成熟的框架了，它內部封裝的類選擇器方法要比咱們自定義的效率高。

4、通配選擇器（"*"）

該選擇器可以匹配上下文中的所有元素，下面示例將選擇body下的所有元素

例項2-2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("body *").css("color","red");
		$("div *").css("color","blue");
	})
  //-->
  </script>
 </head>

 <body>
	<div id="" class="">
		div1
		<span class="">div下的span</span>
		<table>
		<tr>
			<td>div下的table</td>
		</tr>
		</table>
	</div>
	</br>
	<span class="">span1</span>
	</br>
	<textarea name="" rows="3" cols="80">textarea1</textarea>
		
	<table>
	</br>
	<tr>
		<td>table1</td>
	</tr>
	</table>
 </body>
</html>

5、分組選擇器

jQuery支援CSS的分組選擇器，通過這種方式可以擴大選擇器的選擇範圍，同時增強jQuery選擇器的應用能力，選個多組元素可以通過逗號分隔符來分隔多個不同的選擇器。，這些選擇器可以是任意型別的，也可以是複合選擇器。

例項2-3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
	$(function(){
		$("h2,#wrap,span.red,[title='text']").css("color","red");//分別選擇了元素h2、id為wrap的、span下的class為red的、title為text的
	})
  </script>
 </head>

 <body>
	<h2>H2</h2>
	<div id="wrap" class="">
		DIV
	</div>
	<div id="" class="red">
		DIV_CLASS_RED
	</div>
	<span class="red">SPAN</span>
	<p title="text">P</p>
 </body>
</html>

二、層級選擇器

層級選擇器就是根據HTML文件結構中節點之間的包含或者並列關係，決定匹配元素的一種方法。

1、關係選擇器

表2-1 關係選擇器
選擇器 說明
ancestor  descendant

      在給定祖先元素下匹配所有後代元素。ancestor，表示任何有效選擇器，descendant表示用以匹配元素的選擇器，並且它是第一個選擇器的後代元素。例如：$("form input")可以匹配表單下的所有input元素。
parent>child

      在給定父元素下匹配所有子元素。perent表示任何有效選擇器，descendant表示用以匹配元素的選擇器，並且它是第一個選擇器的後代元素。例如：$("table>tr")可以匹配table下的所有tr元素
prev + next                                                          

      匹配所有緊接在prev元素後的next元素。prev表示任何有效選擇器，next表示一個有效選擇器並且緊接著第一個選擇器 。例如：$("lable + input")匹配所有跟在lable後面的input元素
prev ~ siblings

       匹配prev元素之後的所有siblings元素。prev表示任何有效選擇器，siblings表示一個選擇器，並且它是作為prev選擇器的同輩。例如：$("form ~ input")匹配所有跟form元素同輩的input元素。

通過上面的表格我們不一定能完全明白這幾個選擇器的細節地方，還是寫個例項演示一下。

例項2-4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 關係選擇器演示例項 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("div").css("border","solid 1px red");			//控制所有div元素的邊框寬度為1 顏色為紅色
		$("div>div").css("margin","2em");				//控制div下屬的所有子div縮排兩個中文字元
		$("div div").css("background","#ff0");			//控制一級div下屬的所有div元素的背景色為#ff0
		$("div div div").css("background","#f0f");		//控制第三層div背景色為#f0f
		$("div + p").css("margin","2em");				//控制與div相鄰的p元素縮排兩個中文字元，只匹配div後面緊接著那個p元素
		$("div:eq(1) ~ p").css("background","blue");	//控制頁面第二個div（eq(1)代表取第二個)之後所有的與第二個div同輩的p元素的背景色為藍色
	})
  //-->
  </script>
 </head>

 <body>
	 <p>段落文字10</p>
	<div id="" class="">一級div元素
		<div id="" class="">二級div元素
			<div id="" class="">三級div元素
				
			</div>
			<p>段落文字31</p>
			<p>段落文字32</p>
		</div>
		<p>段落文字21</p>
		<p>段落文字22</p>
	</div>
	<p>段落文字11</p>
	<p>段落文字12</p>	
 </body>
</html>

2、子元素選擇器

這個寫個例項吧。

例項2-5：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
	$(function(){
		//$("ul li:nth-child(1)").css("background","#ff6")		//匹配每個ul元素下的第一個li元素，可能匹配0個或者多個
		//$("ul li:nth-child(3n+2)").css("background","#6ff")	//匹配每個ul元素下第3n+2個li元素，n取值為0，1,2，.......
		//$("ul li:first-child").css("color","red");			//匹配每個ul元素下的第一個li元素
		//$("ul li:first").css("color","red");					//匹配第一個ul元素下的第一個li元素 跟上面的那個是有區別的
		//$("ul li:last-child").css("color","blue");			//匹配每個ul元素下的最後一個li元素
		//$("ul li:last").css("color","red");					//匹配最後一個ul元素下的最後一個li元素
		$("ul li:only-child").css("color","red")				//如果li元素是ul元素下的唯一子元素(只有一個li元素,沒有其他元素)，
																//那麼可以匹配，否則不可匹配
	})
 //-->
 </script>
 <body>
	<ul>
		<li>列表11</li>
		<li>列表12</li>
		<li>列表13</li>
		<li>列表14</li>
		<li>列表15</li>
		<li>列表16</li>
	</ul>
	<ul>
		<li>列表21</li>
		<li>列表22</li>
		<li>列表23</li>
		<li>列表24</li>
		<li>列表25</li>
		<li>列表26</li>
	</ul>
 </body>
</html>

注意：

A、:nth-child(even) :nth-child(odd) //分別是匹配偶數位元素和奇數位元素 可以用2n和2n+1替代

B、我們用過的eq(n)選擇器是從0開始計數的，而剛剛整理的那些選擇器是從1開始計數的，使用的時候要注意

三、過濾選擇器

過濾選擇器主要通過特定的過濾表示式來篩選特殊需求的DOM元素，過濾選擇器與CSS的偽類選擇器語法格式相同，即以冒號作為字首識別符號。根據需求的不同，過濾選擇器又可以分為定位過濾器、內容過濾器、可見過濾器。下面分別介紹：

1、定位過濾器

定位過濾器主要通過編號和排位篩選特定位置上的元素，或者過濾掉特定元素.



以上效果實現程式碼 例項2-6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("tr:first").css("color","red");					//設定第一行字型為紅色
			$("tr:eq(0)").css("font-size","20px");				//設定第一行字型大小為20畫素 font-size:20px
			$("tr:last").css("color","blue");					//設定最後一行字型為藍色
			$("tr:even").css("background","#ffd");				//設定偶數行背景色為#ffd
			$("tr:odd").css("background","#dff");				//設定技術行背景色為#dff
			$("tr:gt(3)").css("font-size","14px");				//設定從第五行開始所有的字型大小為14px
			$("tr:lt(4)").css("font-size","14px");				//設定1-4行字型大小為14px
			
		})
  //-->
  </script>
 </head>

 <body>
	<table>
	<tr>
		<th>選擇器</th>
		<th>說  明</th>
	</tr>
	<tr>
		<td>:first</td>
		<td>匹配找到的第一個元素，例如，$("tr:first")表示匹配表格的第一行</td>
	</tr>
	<tr>
		<td>:last</td>
		<td>匹配找到的最後一個元素，例如，$("tr:last")表示匹配表格的最後一行</td>
	</tr>
	<tr>
		<td>:not</td>
		<td>去除所有與給定選擇器匹配的元素。例如，$("input:not(:checked)")可以匹配所有未選中的input元素</td>
	</tr>
	<tr>
		<td>:even</td>
		<td>匹配所有索引值為偶數的元素，從0開始計數。例如$("tr:even"),可以匹配表格的偶數行</td>
	</tr>
	<tr>
		<td>:odd</td>
		<td>上面是偶數，這個是奇數</td>
	</tr>
	<tr>
		<td>:eq</td>
		<td>匹配一個給定索引值的元素，例如，$("tr:eq(0)")可以匹配第一個tr</td>
	</tr>
	<tr>
		<td>:gt</td>
		<td>匹配所有大於給定索引值的元素，從0開始計數。例如，$("tr:gt(0)")可以匹配表格的第二行以及後面的行</td>
	</tr>
	<tr>
		<td>:lt</td>
		<td>上面是大於，這個是小於，eq就相當於等於唄</td>
	</tr>
	<tr>
		<td>:header</td>
		<td>匹配如h1\h2\h3類標題元素</td>
	</tr>
	<tr>
		<td>:animated</td>
		<td>匹配所有正在執行動畫效果的元素</td>
	</tr>
	</table>
 </body>
</html>

2、內容過濾器

內容過濾器主要根據匹配元素所包含的的子元素或者文字內容進行過濾。主要有四種方式：

表2-2 內容選擇器
選擇器 說     明
:contains 匹配包含給定文字的元素，例如，$("div:contains('圖片')") 匹配所有包含文字"圖片"的div元素
:has 匹配含有選擇器所匹配的元素的元素，例如，$("div:has(p)")匹配所有包含p元素的div元素
:empty 匹配所有不包含子元素或者文字的空元素
:parent 匹配含有子元素或者文字的元素，與empty相互對應

例項2-7：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("li:empty").text("空內容");				//匹配空li元素
			$("div ul:parent").css("background","#ff1");//匹配div下包含的不為空的ul元素
			$("h2:contains('標題')").css("color","red");//匹配包含文字內容"標題"的h2元素
			$("p:has(span)").css("color","blue");		//包含span元素的p元素	
		})
  //-->
  </script>
 </head>

 <body>
	 <div id="" class="">
		<h2>標題</h2>
		<p>段落文字1</p>
		<p><span>段落文字2</span></p>
		<ul>
			<li></li>
			<li></li>
		</ul>
	 </div>
 </body>
</html>

執行效果如下：


3、可見過濾器

可見過濾器就是根據元素的可見或者隱藏來進行匹配的

表2-3 可見過濾器
選擇器 說   明
:hidden 匹配所有不可見元素，或者type為hidden的元素
:visible 匹配所有可見元素
這個比較簡單好記

例項2-8：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		$("p:odd").hide();
		$("p:odd").css("color","red");
		$("p:visible").css("color","blue");
		$("p:hidden").show();
	})
  //-->
  </script>
 </head>

 <body>
	<p>段落文字1</p>
	<p>段落文字2</p>
	<p>段落文字3</p>
	<p>段落文字4</p>
 </body>
</html>

執行效果：

四、屬性選擇器

屬性選擇器一般是根據元素的屬性和其值作為過濾的條件來匹配相應的DOM元素

1、七種屬性選擇器

表2-4 屬性選擇器
選擇器 說   明
[attribute] 匹配包含給定屬性的元素，例如，$("div[id]") 匹配所有包含id屬性的div元素
[attridute=value] 匹配屬性等於特定值的元素，屬性值的引號大多數是可選的，如果屬性值包含"]"時，需要加引號以避免衝突。
[attridute!=value] 跟上面的相對應，很好理解
[attridute^=value] 匹配給定的屬性是以某些值開始的元素，例如，$("input[name^='text']")表示所有name屬性值是以text開始的input元素
[attridute$=value] 匹配給定的屬性是以某些值結尾的元素，跟上面的相對應
[attridute*=value] 匹配給定的屬性是包含某些值得元素
[selector1][selector2][selector3] 複合屬性選擇器，需要同時滿足多個條件時使用，例如，$(input[name*='text'][id])表示匹配所有name屬性值包含text的且包含id屬性的input元素。

2、使用屬性選擇器示例

看一個示例，在這個示例中將根據超連結檔案的型別，分別為不同型別的檔案新增圖示。

例項2-8 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
	$(function(){
		var $a1=$("a[href$=pdf]");
		$a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");
		var $a2=$("a[href$=rar]");
		$a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");
		var $a3=$("a[href$=jpg],[href$=bmp]");
		$a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");
		var $a4=$("a[href^='http']");
		$a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");	
		

	})
  //-->
  </script>
 </head>

 <body>
  <a href="1.pdf">超連結</a><br>
  <a href="2.rar">超連結</a><br>
  <a href="3.jpg">超連結</a><br>
  <a href="4.bmp">超連結</a><br>
  <a href="http://www.baidu.com">超連結</a>
 </body>
</html>

執行前後效果：


五、表單選擇器

表單是頁面中使用頻率較高的元素之一，但是很多表單域都是使用input元素來定義的，為了方便使用者能夠靈活操作表單，jQuery專門定義了表單選擇器，使用表單選擇器可以方便地獲取表單中某類表單域物件。

1、基本表單選擇器

表2-5 表單選擇器
選擇器 說   明
:input 匹配所有input、textarea、select和button元素
:text 匹配所有單行文字框
:password 匹配所有密碼框
:radio 匹配所有單選按鈕
:checkbox 匹配所有複選框
:submit 匹配所有提交按鈕
:image 匹配所有影象域
:reset 匹配所有重置按鈕
:button 匹配所有普通按鈕
:file 匹配所有檔案域
:hidden 匹配所有隱藏域

下面看一個表單例項

例項2-9：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("#form1 :text").val("修改後的文字域");
			$("#form1 :password").val("修改後的密碼域");
			$("#form1 :checkbox").val("修改後的複選框");
			$("#form1 :radio").val("修改後的單選框");
			$("#form1 :image").val("修改後的影象域");
			$("#form1 :file").val("修改後的檔案框");
			$("#form1 :hidden").val("修改後的隱藏域");
			$("#form1 :button").val("修改後的普通按鈕");
			$("#form1 :submit").val("修改後的提交按鈕");
			$("#form1 :reset").val("修改後的重置按鈕");
		})
  //-->
  </script>
 </head>

 <body>
	<form id="form1" method="post" >
		<input type="text" name="" value="文字域"><br>
		<input type="password" name="" value="密碼域"><br>
		<input type="checkbox" name="" value="複選框">複選框<br>
		<input type="radio" name="" value="單選按鈕">單選按鈕<br>
		<input type="image" src="" value="影象域"><br>
		<input type="file" src="" value="檔案域"><br>
		<input type="hidden" name="" value="隱藏域"><br>
		<input type="button" value="普通按鈕" onclick=""><br>
		<input type="submit" value="提交按鈕" onclick=""><br>
		<input type="reset"  value="重置按鈕" onclick=""><br>
	 </form>
 </body>
</html>

處理前後效果圖：

                                                  

注意：$("#form1 text") 在form1後面有一個空格

2、高階表單選擇器

除了簡單的表單域選擇器外，jQuery還根據表單域中特有的屬性定義了4個表單屬性選擇器，這些選擇器與基礎表單選擇器不同，它們可以選擇任何型別的表單域，因為它主要根據表單屬性來選擇。

表2-6 高階表單選擇器
選擇器 說   明
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被選中的元素（複選框、單選按鈕等，不包括select的option）
:selected 匹配所有選中的option元素

例項2-10：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			$("#form1 :disabled").val("不可用");
			$("#form1 :enabled").val("可用");
			$("#form1 :checked").removeAttr("checked");
			$("#form1 :selected").removeAttr("selected");
		})
  //-->
  </script>
 </head>

 <body>
	<form id="form1" method="post" >
		<input type="text" name=""  disabled="disabled" value="文字域"><br>
		<input type="text"          disabled="disabled" value="文字域"><br>
		<input type="text"  value="文字域"><br>
		<input type="checkbox" name="" value="複選框" checked="checked">複選框<br>
		<input type="radio" name="" value="單選按鈕">單選按鈕<br>
		<select name="">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected>3</option>
		</select>
	 </form>
 </body>
</html>

前後效果：


相關推薦

jQuery整理筆記二----jQuery選擇器整理

一、基本選擇器 1、ID選擇器 JavaScript提供了原生方法實現在DOM中選擇指定ID值得元素。用法如下： var element=document.getElementById("id"); jQuery簡化了其操作： var $element=$("#id");

jQuery選擇器整理

選擇器-層級: 1.ancestor descendant在給定的祖先元素下匹配所有的後代元素    $("div input");//div下所有input 2.parent > child 在給定的父元素下匹配所有的子元素    $("div > input);//父元素下的子元素

jQuery 選擇器 整理

一、 css選擇器1.查詢元素的方法按照 $app1 = $("#app")/$(".app")/$("div/li/ul"); 形式來寫2.支援多級查詢：形式大概在：$app1 = $("#app,.app1,#app2")$app1 = $(".app>app1")

JQuery學習筆記（二）——選擇器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-

鋒利的jQuery學習筆記之jQuery選擇器

空格 attr 簡單 cap 字符串 check disable select file 在介紹jQuery選擇器之前，先簡單介紹一下CSS選擇器---> 一、CSS選擇器 常見的CSS選擇器有以下幾種： 選擇器 語法 描述 示例 標簽選擇器 E{CSS規則

【jquery原始碼二】$選擇器--是如何將DOM封裝成jquery物件的②

前言：前面一篇已經看過$是如何封裝jQuery物件的，可以簡單的概述為，把DOM物件放在了屬性名為0、1、2....下面，然後給jQuery添加了context,length,selector屬性，還有一些例項出來的方法。 這篇文章來說說jQuery是如何實現眾多選

jQuery UI 實例 - 日期選擇器（Datepicker）

for cal 周四 radi panel alternate 可能 max 輸入 默認功能 日期選擇器（Datepicker）綁定到一個標準的表單 input 字段上。把焦點移到 input 上（點擊或者使用 tab 鍵），在一個小的覆蓋層上打開一個交互日歷。選擇一個日期

[jQuery學習系列一]1-選擇器與DOM對象

還需 直接 itl java date js代碼 循環 ava 也會 前言: 好久沒有更新博客了, 最近想復習下 之前學過的JS的相關內容, 也算是自己的一種總結. 知識長時間不用就會忘記, 多學多記多用!! 下面的程序都可以在下面的網站進行在線調試: http://ww

jquery非常好用的選擇器nextUnit以及filter

cto 選擇 參數 索引 頁面 gen 指示 length per 1、nextUntil() 獲得每個元素所有跟隨的同胞元素，但不包括被選擇器、DOM 節點或已傳遞的 jQuery 對象匹配的元素。參數： selector 字符串值，包含指示在何處停止匹配跟隨的同胞

jQuery基礎—2、Query選擇器

2.1JQuery選擇器 JQuery中，需要選定元素，然後對元素進行操作，我們通過各種選擇器，對元素進行選定。 JQuery選擇器的語法和CSS選擇器的語法基本相同。 2.2強大的jQuery選擇器（詳解）【轉】 基礎選擇器 Basics 名稱 說明 舉例 #id 根據

JQuery 總結（1） 選擇器的使用

 一 注意：     1.DOM物件：通過原生js獲取的DOm物件（DOm樹上的節點就是，比如<li></li>）     2.jQuery物件：通過jQuery 選擇器獲取的      jQuery

jquery中，模糊查詢選擇器，帶 *= 的寫法具體什麼含義？

1、例如： $( "select[id*=ddlcpstyle1]" ) 1）*= 表示選擇 id 中包括 ddlcpstyle1 的 select <select id="AAAddlcpstyle1"></select> <select id="ddlc

jQuery初學基礎常用內容——選擇器

接近半個月沒有更新部落格了，因為在學習Vue的一個小專案，如果要問我這個小專案做的如何，我能說的就是程式碼我給背下來了。背程式碼我個人認為並不是一個很好的方法，但是確實也是一種學習的途徑，起碼我從一開始的不理解，到最後可以理解程式碼為什麼要這麼寫。 好了，這次要寫的內容是JQ，為什麼是JQ？

jquery中匿名函式、選擇器、方法呼叫、繫結事件

轉載地址： https://blog.csdn.net/ideality_hunter/article/details/77935656 http://www.cnblogs.com/si-shaohua/p/3760286.html https://www.cnblogs.com/de

jQuery父類子類選擇器彙總

jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class")  jQuery.pare

CSS JQUERY的幾種複合選擇器

A B：後代選擇器 AB：交集選擇器 A ,B：並集選擇器 A > B：A中子元素是B 選擇器 A ~ B：A後面所有B兄弟元素 選擇器 A + B：A後面下一個B元素 選擇器 jQuery 選擇器 選擇器 例項 選取 * $

jQuery初識，常用的選擇器、Ajax

jQuery是一個快速、簡潔的JavaScript框架。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝 JavaScript常用的功能程

【JS】【jQuery】【獲取物件,選擇器】

通過$(“XXX”)方式獲取的都是jQuery物件,由Dom的節點元素組成的偽陣列物件 - 基本選擇器 $("#id值"); //返回一個偽陣列,裡面只有一個對應id的節點元素 $("di

jQuery——入門（一）JQuery的簡介與基本選擇器的使用

JQuery入門（一）—— 基本簡介與基本選擇器的使用 一、jQuery簡介         jquery是2006年1月由美國人John Resig在紐約barcamp釋出，目前已經成為輔助javascript開發的最流行的javascri

jQuery的7個同級選擇器

jQuery的同級選擇器有七個，其中最常用的是next()和prev()，使用時要避免跟after()和before()混淆。前者是獲取元素，後者是往指定位置插入值。 通過下面的demo可以清楚的瞭解