jQuery選擇器及應用

jQuery選擇器及應用

jQuery獲取元素的方式

1. 根據id獲取
   • id選擇器
   • ==用法：==$("#id的值");
   • 獲取的元素的個數：一個

" class="hljs 
  
  
  
  

 
">$("#div")
複製代碼

2. 根據標籤的名字獲取

   • 標籤選擇器
   • ==用法：==$("標籤名字");
   • 獲取的元素的個數：多個

// <div id="btn" class="dv"></div>
$(".di")
複製代碼

3. 根據類樣式的名字獲取
   • 類選擇器
   • ==用法：==$(".類樣式的名字");
   • 獲取的元素的個數：多個

// <div id="btn" class="dv"></div>
$("div")
複製代碼

4. 標籤加類選擇器

//<li class="dv">nihao </div>
        $("li.dv")
複製代碼

5. 層次選擇器

<ul id="uu">
	<li></li>
	<li></li>
	<li></li>
</ul>
複製代碼

//獲取全部的li標籤
$(function () {
     $("#uu>li")
})

複製代碼

6.過濾選擇器

• even 偶數 選擇器
• odd 奇數 選擇器

$(".wrap li:odd").css("background","red");   //設置li奇數行的樣式
$(".wrap li:even").css("background","blue");//設置li偶數行的樣式
複製代碼

7.索引選擇器

• ==lt(index)==：設置索引小於index的全部的標籤元素
• ==eq(index)==：設置索引爲index的標籤元素
• ==gt(index)==：設置索引大於index的全部的標籤元素

//設置ul中的索引爲4的li的標籤元素
$(".wrap li:eq(4)").css("background","red");
//設置ul中的索引大於4的全部li的標籤元素
$(".wrap li:gt(4)").css("background","blue");
//設置ul中的索引小於4的全部li的標籤元素
$(".wrap li:lt(4)").css("background","green");
複製代碼

jQuery中常見的幾個方法

注意：如下幾個方法，括號裏面什麼都不寫表示獲取，寫內容表示設置

• ==.html()== 方法：
  • 設置標籤中間顯示其餘標籤及內容，相似於==innerHTML==
• ==.text()== 方法：
  • 設置標籤中間顯示的文本內容，類型於==innerText==
• ==.val()== 方法：
  • 設置input標籤中value值，相似於==value==
• ==.css()== 方法：
  • 設置元素的樣式，相似於==style==
• ==.attr()== 方法：
  • 獲取屬性值