js/jQuery常見操作之各種語法例子（包括jQuery中常見的與索引相關的選擇器）

1. 操作table常見的
- 1.1 動態給table添加title（指定td）
- - 1.1.1 給td動態添加title（含：獲取tr的第幾個td）
  - 1.1.2 動態加工td提示信息（非同一單元格組合）
  - 1.1.3 總結
- 1.2 給指定行tr 添加樣式
2 根據name獲取復選框的情況
- 2.1 所有的復選框
- 2.2 所有的選中的復選框
- 2.3 所有的未選中的復選框
3. 獲取復選框的選中狀態
4. js/jQuery實現隱藏div等
- 4.1 js實現
- 4.2 jQuery實現
5. 其他語法
- 5.1 .eq(index)
- 5.2 :eq() Selector
- - 5.2.1 jQuery( ":eq(index)" )
  - 5.2.2 其他與索引相關的選擇器
- 5.3 :nth-child(n)
- 5.4 :last 與 :last-child
6. 參考

1. 操作table常見的

1.1 動態給table添加title（指定td）

1.1.1 給td動態添加title（含：獲取tr的第幾個td）

效果如下：

實現代碼如下：

核心代碼，如下：

<script>// 1.1 給name為“title_test”添加title$("td[name='title_test']").each(function(){$(this).mouseover(function(){$(this).attr("title","年齡-"+this.innerHTML);});});// 1.2 second-child-----本tr的第二個td$("#dogs_data tr td:second-child").each(function(){console.log(this.innerHTML);// 獲取td單元格里的值$(this).attr("title","編號-"+this.innerHTML);});// 1.3 last-child-----本tr的最后一個td，ast-child+1-----本tr的倒數第二個td$("#dogs_data tr td:last-child+1").each(function(){console.log(this.innerHTML);// 獲取td單元格里的值$(this).attr("title","姓名-"+this.innerHTML);});
</script>

完整代碼，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style>table {border-collapse: collapse;}table tr th,td{border: 1px solid;width: 60px;text-align: center;}thead tr:hover{background-color: rgb(255, 127, 127);}tbody tr:hover{background-color: aquamarine;}</style>
</head>
<body><script></script><table celllspacing="0" id="dogs_data"><thead><tr><th><input type="checkbox" id="checkAllOrNo" /></th><th>編號</th><th>姓名</th><th>年齡</th></tr></thead><tbody><tr><td><input type="checkbox" name="dogIds" value="A1001"/></td><td>A1001</td><td>麥兜</td><td name="title_test">3</td></tr><tr><td><input type="checkbox" name="dogIds" value="A1002"/></td><td>A1002</td><td>貝塔</td><td name="title_test">2</td></tr><tr><td><input type="checkbox" name="dogIds" value="A1003"/></td><td>A1003</td><td>泡泡</td><td name="title_test">6</td></tr></tbody></table><script>// 1.1 給name為“title_test”添加title$("td[name='title_test']").each(function(){$(this).mouseover(function(){$(this).attr("title","年齡-"+this.innerHTML);});});// 1.2 second-child-----本tr的第二個td$("#dogs_data tr td:second-child").each(function(){console.log(this.innerHTML);// 獲取td單元格里的值$(this).attr("title","編號-"+this.innerHTML);});// 1.3 last-child-----本tr的最后一個td，ast-child+1-----本tr的倒數第二個td$("#dogs_data tr td:last-child+1").each(function(){console.log(this.innerHTML);// 獲取td單元格里的值$(this).attr("title","姓名-"+this.innerHTML);});</script>
</body>
</html>

1.1.2 動態加工td提示信息（非同一單元格組合）

簡單例子如下（復雜需求根據需求自行修改）：

例子1，核心代碼如下：

// 在別的單元格提示指定單元格的內容----方式1
// $("td[name='title_test2']").each(function(){
//     $(this).mouseover(function(){
//         var tr = $(this).parent(); //通過td找tr
//         var td_second = tr.children("td").eq(1);//找到本tr的第二個td
//         console.log(td_second.html());
//         $(this).attr("title","姓名-"+td_second.html());//即：在別的單元格提示指定單元格的內容
//     });
// });// 在別的單元格提示指定單元格的內容----方式2
$("#dogs_data tr td:last-child").each(function(){$(this).mousemove(function(){})var tr = $(this).parent(); //通過td找trvar td_second = tr.children("td").eq(1);//找到本tr的第二個td// console.log(td_second.html());$(this).attr("title","姓名-"+td_second.html());//即：在別的單元格提示指定單元格的內容
});

例子2（獲取父標簽的最后一個td子標簽的第一個p子標簽），核心代碼如下：

// 獲取父標簽的最后一個td子標簽的第一個<p>子標簽
$("#dogs_data tr td:first-child").each(function(){$(this).click(function(){// 第一種寫法var aa = $(this).parent().children("td").eq(4).children('p').first().html();console.log(aa);// 第一種寫法var bb = $(this).parent().children("td:last-child").children('p').first().html();console.log(bb);})
});

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js"></script> --><style>table {border-collapse: collapse;}table tr th,td{border: 1px solid;width: 100px;text-align: center;}thead tr:hover{background-color: rgb(255, 127, 127);}tbody tr:hover{background-color: aquamarine;}meter{height: 40px;width: 100px;}</style>
</head>
<body><script></script><table celllspacing="0" id="dogs_data"><thead><tr><th><input type="checkbox" id="checkAllOrNo" /></th><th>編號</th><th>姓名</th><th>年齡</th><th>玩具球電量</th></tr></thead><tbody><tr><td><input type="checkbox" name="dogIds" value="A1001"/></td><td>A1001</td><td>麥兜</td><td>3</td><td name="title_test2"><p>大球電量：</p><meter max="100" min="0" value="10" low="20" high="80"></meter></td></tr><tr><td><input type="checkbox" name="dogIds" value="A1002"/></td><td>A1002</td><td>貝塔</td><td>2</td><td  name="title_test2"><p>小球電量：</p> <meter max="100" min="0" value="60" low="20" high="80"></meter></td></tr><tr><td><input type="checkbox" name="dogIds" value="A1003"/></td><td>A1003</td><td>泡泡</td><td>6</td><td  name="title_test2" ><p>紅色球電量：</p><meter max="100" min="0" value="20" low="20" high="80"></meter></td></tr></tbody></table><script>// 在別的單元格提示指定單元格的內容----方式1// $("td[name='title_test2']").each(function(){//     $(this).mouseover(function(){//         var tr = $(this).parent(); //通過td找tr//         var td_second = tr.children("td").eq(1);//找到本tr的第二個td//         console.log(td_second.html());//         $(this).attr("title","姓名-"+td_second.html());//即：在別的單元格提示指定單元格的內容//     });// });// 在別的單元格提示指定單元格的內容----方式2$("#dogs_data tr td:last-child").each(function(){$(this).mousemove(function(){})var tr = $(this).parent(); //通過td找trvar td_second = tr.children("td").eq(1);//找到本tr的第二個td// console.log(td_second.html());$(this).attr("title","姓名-"+td_second.html());//即：在別的單元格提示指定單元格的內容});// 獲取父標簽的最后一個td子標簽的第一個<p>子標簽$("#dogs_data tr td:first-child").each(function(){$(this).click(function(){// 第一種寫法var aa = $(this).parent().children("td").eq(4).children('p').first().html();console.log(aa);// 第一種寫法var bb = $(this).parent().children("td:last-child").children('p').first().html();console.log(bb);})});</script>
</body>
</html>

1.1.3 總結

給td添加title方法很多，簡單直接的方法就是直接寫屬性，列表方式也可以直接title提示列表中指定td的數據，如果能簡單獲取的，使用上面方式反而是復雜的，上面方式只是說語法以及有些不跟列表同時返回頁面的提示（需要觸發事件請求后臺返回title的提示數據，然后動態設置tilte的情況）可以使用上面的方式添加。

1.2 給指定行tr 添加樣式

效果如下：

實現代碼如下：

樣式

.one_tr_style{background-color: aquamarine;
}

js/jQuery

<script>$(document).ready(function(){$("tr:eq(1)").find("td").addClass("one_tr_style");});
</script>

2 根據name獲取復選框的情況

2.1 所有的復選框

代碼如下：

$("input[name='items']").each(function(){console.log($(this).val());
});

2.2 所有的選中的復選框

代碼如下：

$("input[name='items']:checked").each(function(){console.log($(this).val());
});

2.3 所有的未選中的復選框

代碼如下：

$("input[name='items']:not(:checked)").each(function(){selectedNum ++;//計算沒有選中的項目個數
});

3. 獲取復選框的選中狀態

根據ID獲取，使用 .is(":checked") 如下：

// 點擊 全選/全不選 復選框----使用s(":checked")
$("#checkAllOrNo").click(function(){$("input[name='items']").each(function(){// 選中狀態與 全選/全不選 的復選框保持一致即可this.checked = $("#checkAllOrNo").is(":checked");});
});

jQuery循環中常用判斷（使用this.checked）

//3.反選(直接取反)
$("#fanxuan").click(function(){$("input[name='items']").each(function(){this.checked = !(this.checked);//直接取反});
});

4. js/jQuery實現隱藏div等

4.1 js實現

代碼里含部分jQuery，不想摘出來了，自己根據需要拿，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js"></script> --><style>.visible {display: block;}.hidden {display: none;}</style>
</head>
<body><script>$(document).ready(function(){// 隱藏 div_1-----方式1 .css$("#div_1").css("display","none");// 隱藏 div_2-----方式2 .visibility（這種隱藏方式占空間，頁面顯示空白一塊）// document.getElementById("div_2").style.visibility = "hidden"; // 隱藏 div_4  這個寫在這里生效-----方式3 .classListdocument.getElementById("div_4").classList.add("hidden");// 顯示div_3$("#div_2").css("display","");// 隱藏input_1$("#input_1").css("display","none");// 隱藏input_2document.getElementById("input_2").type = "hidden";// 隱藏input_2——通過設置input的style屬性display為none來隱藏inputdocument.getElementById("input_2").style.display = "none";// 顯示input_3document.getElementById("input_3").type = "text";});function hideDiv_2() {// -----方式4 .display// 這個需要借助函數，寫在事件觸發才生效，寫在外面不生效，但是使用classList時不用事件也是ok的document.getElementById("div_2").style.display = "none";}function useclassListHideDiv() {document.getElementById("div_4").classList.remove("visible");//這個可以不要document.getElementById("div_4").classList.add("hidden");//但是這個必須要，只有這一個就可以}function useclassListShowDiv() {document.getElementById("div_4").classList.remove("hidden");//只有這一個就可以// document.getElementById("div_4").classList.add("visible"); // 只有這個不生效，所以這個可以不要}</script><div id="div_1">我是div1</div><div id="div_2">我是div2</div><div id="div_3">我是div3</div><div id="div_4">我是div4</div><input type="text" id="input_1" name="test" value="aa"/><input type="text" id="input_2" name="test" value="bb"/><input type="hidden" id="input_3" name="test" value="cc"/><br/><br/><button onclick="hideDiv_2()">隱藏div2</button><button onclick="useclassListHideDiv()">classList隱藏div4</button><button onclick="useclassListShowDiv()">classList顯示div4</button></body>
</html>

4.2 jQuery實現

核心代碼如下：

<script>$(document).ready(function(){// 1. 隱藏 div// 1.1 通過attr設置屬性$("#div_1").attr("style","display:none;");//隱藏div$("#div_2").attr("style","display:block;");//顯示div// 1.2 通過hide與show方法$("#div_3").hide();//隱藏div$("#div_4").show();//顯示div// 1.3 通過css方法設置$("#div_5").css("display","none");//隱藏div$("#div_6").css("display","block");//顯示div// 2. 隱藏input// 隱藏input_1$("#input_1").css("display","none");// 隱藏input_2$("#input_2").attr("style","display:none;");//隱藏// $("#input_2").attr("style","display:block;");//顯示});
</script>

5. 其他語法

5.1 .eq(index)

解釋：
一個整數，指示元素的從 0 開始的位置。負數的話，從-1開始（最后一個index）

例子如下

效果如下：

核心代碼如下：

<script>$(document).ready(function(){$( "li" ).eq( 1 ).css( "background-color", "red" );$( "li" ).eq( -2 ).css( "background-color", "green" );$( "body" ).find( "div" ).eq( 1 ).addClass( "blue" );})
</script>

5.2 :eq() Selector

5.2.1 jQuery( “:eq(index)” )

例子1：

效果如下：

實現代碼如下：

<script>// 針對所有td不是單行td$( "td:eq( 2 )" ).css( "background-color", "red" );$( "td:eq( 3 )" ).css( "background-color", "green" );// 針對第三行 的 第二個td$( "tr:eq(2) td:eq( 1 )" ).css( "background-color", "pink" );
</script>

例子2：

效果：

代碼：

.my_background_style{background-color: red;
}

<script>$( "td:eq( 0 )" ).addClass( "my_background_style" );$( "td:eq( 8 )" ).addClass( "my_background_style" );// 針對第2行 的 第二個td$( "tr:eq(1) td:eq( 1 )" ).addClass( "my_background_style" );
</script>

注意：
- 在 jQuery 1.8 之前， :eq(index) 選擇器不接受負值（盡管該 .eq(index) 方法接受）；
- 由于是 jQuery 擴展，而不是 CSS 規范的一部分，因此 :eq() 使用 :eq() 查詢無法利用本機 DOM querySelectorAll() 方法提供的性能提升。為了在現代瀏覽器中獲得更好的性能，請改用 $(“your-pure-css-selector”).eq(index)

5.2.2 其他與索引相關的選擇器

如：:eq() ， :lt() :gt() :even ， :odd

5.3 :nth-child(n)

選擇屬于其父元素的第 n 個子元素的所有元素。從1開始
例子，直接截官網的來吧，如下：

5.4 :last 與 :last-child

用法如下：

<script>// 取出的是整個table的最后一個td （my_background_style是自己定義的樣式）$("table tr td:last").addClass( "my_background_style" );// 取出的是每行的最后一個td$("table tr td:last-child").css( "background-color", "green" );
</script>