当前位置：首页 > news >正文

js/jQuery常见操作之各种语法例子（包括jQuery中常见的与索引相关的选择器）

news 2025/9/16 22:34:26

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>

6. 参考

更多了解，请去官网：
https://api.jquery.com/.

js/jQuery常见操作之各种语法例子（包括jQuery中常见的与索引相关的选择器）

js/jQuery常见操作之各种语法例子（包括jQuery中常见的与索引相关的选择器） 1. 操作table常见的1.1 动态给table添加title（指定td）1.1.1 给td动态添加title（含：获取tr的第几个td）1.1.2 动态加工…...

编程日记 2023/12/10 2:07:36

C语言数组（下）

我希望各位可以在思考之后去看本期练习，并且在观看之后独立编写一遍，以加深理解，巩固知识点。练习一：编写代码，演⽰多个字符从两端移动，向中间汇聚我们依旧先上代码 //编写代码，演⽰多个字…...

编程日记 2023/12/10 2:06:35

pytorch学习5-最大池化层的使用

系列文章目录 pytorch学习1-数据加载以及Tensorboard可视化工具pytorch学习2-Transforms主要方法使用pytorch学习3-torchvisin和Dataloader的使用pytorch学习4-简易卷积实现pytorch学习5-最大池化层的使用pytorch学习6-非线性变换（ReLU和sigmoid）pytorc…...

编程日记 2023/12/10 2:05:34

在python中安装库，会有conda安装，也会有pip安装，conda与pip的区别是什么？

文章目录一、Conda是什么？二、pip是什么？三、pip与conda的区别：总结一、Conda是什么？ Conda是一个开源的包管理系统，它是Anaconda公司为Python和其他编程语言开发的。它主要用于数据科学和机器学习领域，…...

编程日记 2023/12/10 2:00:27

算法-贪心思想

贪心的思想非常不好解释，而且越使用权威的语言解释越难懂。而且做题的时候根据自己的理解可能直接做出来，但是非要解释一下怎么使用的贪心的话，就懵圈了。一般来说，贪心的题目没有固定的套路，一题一样，不过…...

编程日记 2023/12/10 1:59:26

STL源码剖析笔记——适配器（adapters）

系列文章目录 STL源码剖析笔记——迭代器 STL源码剖析笔记——vector STL源码剖析笔记——list STL源码剖析笔记——deque、stack，queue STL源码剖析笔记——Binary Heap、priority_queue STL源码剖析笔记——AVL-tree、RB-tree、set、map、mutiset、mutimap STL源…...

编程日记 2023/12/10 1:54:22

Mysql、Oracle区分大小写？

Mysql Windows 系统的文件名不区分大小写，所以运行在 Windows 系统上面的 MySQL 服务器也不用区分数据库名和表名的大小写。Linux 系统大小写规则： 数据库名与表名严格区分大小写表的别名严格区分大小写变量名严格区分大小写列名与列的别名忽略大小写 M…...

编程日记 2023/12/10 1:50:18

Java多线程并发（二）

四种线程池 Java 里面线程池的顶级接口是 Executor，但是严格意义上讲 Executor 并不是一个线程池，而只是一个执行线程的工具。真正的线程池接口是 ExecutorService。 newCachedThreadPool 创建一个可根据需要创建新线程的线程池，但是在以前…...

编程日记 2023/12/10 1:49:17

树莓派外接上显示器以后一直黑屏无画面显示

一般遇到这种情况都是因为没有强制支持热插拔引起的，先断电树莓派，确保显示器与树莓派连接正常，然后上电就可以正常显示了。如果想要支持热插拔，可以修改配置文件。 sudo nano /boot/config.txt 修改如下配置 hdmi_force_hotpl…...

编程日记 2023/12/10 1:47:15

使用Ansible lineinfile模块进行行级别操作

Ansible是一种功能强大的自动化工具，它提供了各种模块来简化配置管理任务。其中，lineinfile模块是一种特别有用的模块，它允许我们在文件中插入、修改或删除行。本文将介绍Ansible的lineinfile模块，并演示如何使用它来进行行级别操…...

编程日记 2023/12/10 1:45:14

cd /Users/haijunyan/Desktop/CustomKit/KeepThreadAlive/KeepThreadAlive //Podfile所在文件夹 git config --global https.postBuffer 10485760000 git config --global http.postBuffer 10485760000 pod install https://blog.csdn.net/weixin_41872403/article/details/86…...

编程日记 2023/12/10 1:43:13

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. 参考

相关文章：

js/jQuery常见操作之各种语法例子（包括jQuery中常见的与索引相关的选择器）

1.2 给指定行tr 添加样式