javascript選擇器推薦：javascript選擇器有哪些

jQuery是JavaScript的一個輕量級擴展庫，用於操作CSS、DOM、BOM。它的安裝非常簡單，就不多啰嗦了，我們先講講操作CSS。首先:開發工具是Hbuilder、API是jquery3.6。

jQuery

先使用script標籤引入jQuery代碼如下:

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

引入API後，再創建一個Script標籤，用來寫javaScript。

首先介紹jquery的類選擇器，選擇器是CSS的基本知識，具體的也不多介紹了。

1. 類選擇器

首先編寫HTML文件，創建三個p元素:

    <p class="c1">p-1</p>
		<p class="c1" id="p2">p-2</p>
		<p class="c2" id="p3">p-3</p>

然後編寫JavaScript代碼

$(document).ready(function(){
		$('.c1').css('border','8px solid red')
	})

這個是jQuery的基本語法，因為是對DOM操作，所以工廠函數里寫上document，這裡的.c1是選中標籤的類為c1的元素，添加它的樣式。jQuery還有一種極簡寫法:

$('.c2').css('border','5px solid green')

也就是去掉工廠函數，直接選中元素並添加元素。

2.標籤選擇器

jQuery還有一個標籤選擇器。也就是在選擇器里寫對應的標籤名

HTML代碼如下:

<p class="c1" id="p1">p1</p>
<p class="c1" id="p2">p2</p>

javaScript代碼如下:

$('p').css('border','4px solid blue')

然後打開瀏覽器就有對應的樣式了。

web

下面介紹位置選擇器:

jquery的位置選擇器可以很快地找到需要的DOM元素。注:jQuery的集合都是從0開始索引的。

HTML代碼如下:

<div class="div">
			<p>第一個:first</p>
			<p>偶數:even</p>
		</div>
		
		<div class="div">
			<p>奇數:odd</p>
		</div>
		
		<div class="div">
			<p>偶數:even</p>
		</div>
		
		<div class="div">
			<p>奇數:odd</p>
		</div>

JavaScript代碼如下：

$(".div:first").css("background","black")

這就是選擇第一個盒模型，並設置樣式。

下面介紹後代選擇器。後代選擇器就是給定一個祖元素然後作用到這個標籤的兒子元素、孫子元素等等。後代選擇器中間是空格分開。

HTML代碼如下:

<ul id="test">
			<li>c++</li>
			<li>java</li>
			<li>javascript</li>
			<li>python</li>
			<ul>
				 <li>jsp</li>
				 <li>rust</li>
			</ul>
</ul>

在這段代碼中，ID是test的元素為祖元素，下面的<li>包括子元素<ul>都是這個id為test的元素的後代元素，選中祖元素並設置後代元素的樣式。

JavaScript代碼如下:

$("#test li").css("border","1px solid blue")

因為是設置元素的樣式，所以直接使用極簡寫法，後面的代碼可能會與標準寫法混用。

HTML5

HTML5

這樣就把這個祖先元素下面所有的後代元素都設置了樣式。

再介紹子代選擇器。子代選擇器整體代碼與後代選擇器差不多，選擇器中間使用大於號也就是”>”這個符號。它是選中父元素後，只能作用到該父元素的子元素，對孫子元素沒有任何作用。案例如下:

HTML代碼如下：

ul id="test">
			<li>java</li>
			<li>python</li>
			<li>javaScript</li>
			<li>hbuilderx</li>
			<ul>
				<!-- 這兩個li元素是孫子元素匹配不到 -->
				<li>java</li>
				<li>python</li>
			</ul>
		</ul>

JavaScript代碼如下:

$("#test>li").css("background","yellow")

這就為子代元素設置樣式。

jQuery的選擇器先介紹這麼多，有些選擇器的代碼還沒整理好，欲知後事如何，且聽下回分析。