jquery选择器之基本筛选器
HTML示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title></title> </head> <body> <!--HTML区域--> <h1>第一个标题</h1> <div class = "nav-2014" > <div class = "w" > <div class = "w-spacer" ></div> <div class = "categorys" > <div class = "dt" >家用电器分类</div> </div> <span class = "hr" ></span> <div class = "navitems-2014" > <div id= "treasure" ></div> <span class = "clr" ></span> <span class = "chr" ></span> 男:<input type= "checkbox" checked = "checked" value= "nan" > 女:<input type= "checkbox" value= "nv" > </div> </div> </div> <h2>第二个标题</h2> <div id= "electronic" > <div id= "firstScreen" >1 <div class = "w" >2</div> </div> <ul> <div class = "u_c" lang= "en-us" ></div> <li class = "ui-switch-curr" ></li> <li class = "ui-switch-item" ></li> <li class = "ui-switch-next" ></li> <li class = "ui-switch-sub" ></li> </ul> <div class = "secord_screen" ></div> <div class = "third_screen" ></div> </div> </body> </html> |
伪类选择器:即以:开头的
:first 获取第一个元素
:not(selector) 去除所有选定的元素
:even 匹配索引为偶数的元素
:odd 匹配索引为奇数的元素
:eq(index) 匹配给定的索引
:gt(index) 大于指定的索引
:lt(index) 小于指定的索引
:last 匹配获取的最后一个元素
:header 匹配所有标题元素
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!--jquery区域--> <script src= "jquery-3.1.0.js" ></script> <script> // 获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div $( "#electronic > div:first" ) // 获取所有li元素中最后一个元素 $( "li:last" ) // 获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv"> $( "input:not(:checked)" ) // 获取所有li元素中索引为0,2,4...的元素 $( "li:even" ) // 获取所有li元素中索引为1,3,5...的元素 $( "li:odd" ) // 获取所有li元素中索引为1的元素 $( "li:eq(1)" ) // 获取所有li元素中索引大于1的元素 $( "li:gt(1)" ) // 获取所有li元素中索引小于1的元素 $( "li:lt(1)" ) // 给所有标题加上背景色 $( ":header" ).css( "background" , "red" ) console.log(cls) </script> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步