山西营销网站建设那个公司好,建设网站运营成本,php网站开发示例,可以做笔记的网站js/jQuery常见操作 之各种语法例子#xff08;包括jQuery中常见的与索引相关的选择器#xff09; 1. 操作table常见的1.1 动态给table添加title#xff08;指定td#xff09;1.1.1 给td动态添加title#xff08;含#xff1a;获取tr的第几个td#xff09;1.1.2 动态加工… js/jQuery常见操作 之各种语法例子包括jQuery中常见的与索引相关的选择器 1. 操作table常见的1.1 动态给table添加title指定td1.1.1 给td动态添加title含获取tr的第几个td1.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() Selector5.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[nametitle_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的最后一个tdast-child1-----本tr的倒数第二个td$(#dogs_data tr td:last-child1).each(function(){console.log(this.innerHTML);// 获取td单元格里的值$(this).attr(title,姓名-this.innerHTML);});
/script完整代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/scriptstyletable {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
bodyscript/scripttable celllspacing0 iddogs_datatheadtrthinput typecheckbox idcheckAllOrNo //thth编号/thth姓名/thth年龄/th/tr/theadtbodytrtdinput typecheckbox namedogIds valueA1001//tdtdA1001/tdtd麦兜/tdtd nametitle_test3/td/trtrtdinput typecheckbox namedogIds valueA1002//tdtdA1002/tdtd贝塔/tdtd nametitle_test2/td/trtrtdinput typecheckbox namedogIds valueA1003//tdtdA1003/tdtd泡泡/tdtd nametitle_test6/td/tr/tbody/tablescript// 1.1 给name为“title_test”添加title$(td[nametitle_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的最后一个tdast-child1-----本tr的倒数第二个td$(#dogs_data tr td:last-child1).each(function(){console.log(this.innerHTML);// 获取td单元格里的值$(this).attr(title,姓名-this.innerHTML);});/script
/body
/html1.1.2 动态加工td提示信息非同一单元格组合
简单例子如下复杂需求根据需求自行修改 例子1核心代码如下// 在别的单元格提示指定单元格的内容----方式1
// $(td[nametitle_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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/script --styletable {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
bodyscript/scripttable celllspacing0 iddogs_datatheadtrthinput typecheckbox idcheckAllOrNo //thth编号/thth姓名/thth年龄/thth玩具球电量/th/tr/theadtbodytrtdinput typecheckbox namedogIds valueA1001//tdtdA1001/tdtd麦兜/tdtd3/tdtd nametitle_test2p大球电量/pmeter max100 min0 value10 low20 high80/meter/td/trtrtdinput typecheckbox namedogIds valueA1002//tdtdA1002/tdtd贝塔/tdtd2/tdtd nametitle_test2p小球电量/p meter max100 min0 value60 low20 high80/meter/td/trtrtdinput typecheckbox namedogIds valueA1003//tdtdA1003/tdtd泡泡/tdtd6/tdtd nametitle_test2 p红色球电量/pmeter max100 min0 value20 low20 high80/meter/td/tr/tbody/tablescript// 在别的单元格提示指定单元格的内容----方式1// $(td[nametitle_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
/html1.1.3 总结
给td添加title方法很多简单直接的方法就是直接写属性列表方式也可以直接title提示列表中指定td的数据如果能简单获取的使用上面方式反而是复杂的上面方式只是说语法 以及 有些不跟列表同时返回页面的提示需要触发事件请求后台返回title的提示数据然后动态设置tilte的情况可以使用上面的方式添加。
1.2 给 指定行tr 添加样式
效果如下 实现代码如下 样式.one_tr_style{background-color: aquamarine;
}js/jQueryscript$(document).ready(function(){$(tr:eq(1)).find(td).addClass(one_tr_style);});
/script2 根据name获取复选框的情况
2.1 所有的复选框
代码如下$(input[nameitems]).each(function(){console.log($(this).val());
});2.2 所有的选中的复选框
代码如下$(input[nameitems]:checked).each(function(){console.log($(this).val());
});2.3 所有的未选中的复选框
代码如下$(input[nameitems]:not(:checked)).each(function(){selectedNum ;//计算没有选中的项目个数
});3. 获取复选框的选中状态
根据ID获取使用 .is(:checked) 如下// 点击 全选/全不选 复选框----使用s(:checked)
$(#checkAllOrNo).click(function(){$(input[nameitems]).each(function(){// 选中状态与 全选/全不选 的复选框保持一致即可this.checked $(#checkAllOrNo).is(:checked);});
});jQuery循环中常用判断使用this.checked//3.反选(直接取反)
$(#fanxuan).click(function(){$(input[nameitems]).each(function(){this.checked !(this.checked);//直接取反});
});4. js/jQuery实现隐藏div等
4.1 js实现
代码里含部分jQuery不想摘出来了自己根据需要拿代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/script --style.visible {display: block;}.hidden {display: none;}/style
/head
bodyscript$(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); // 只有这个不生效所以这个可以不要}/scriptdiv iddiv_1我是div1/divdiv iddiv_2我是div2/divdiv iddiv_3我是div3/divdiv iddiv_4我是div4/divinput typetext idinput_1 nametest valueaa/input typetext idinput_2 nametest valuebb/input typehidden idinput_3 nametest valuecc/br/br/button onclickhideDiv_2()隐藏div2/buttonbutton onclickuseclassListHideDiv()classList隐藏div4/buttonbutton onclickuseclassListShowDiv()classList显示div4/button/body
/html4.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;);//显示});
/script5. 其他语法
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 );})
/script5.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 );
/script6. 参考
更多了解请去官网 https://api.jquery.com/.
