首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
老郭博客-程序员客栈
文章模型
下载模型
首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
首页
学
【学】前端
细说jQuery的选择器
细说jQuery的选择器
发布时间:
2年前
作者:
老郭
热度:
1400 ℃
评论数:
# 细说jQuery的选择器 ------------ #### 一、基本选择器 ``` $('#id属性值') ----->document.getElementById() $('tag标签名称') ------>document.getElementById() $('.class属性值')------>class属性值选择器 $('*') 通配符选择器 $('s1,s2,s3')联合选择器 ``` ``` //1、$(#id属性值) //$("#useremail").css(样式名称,样式值); $("#useremail").css('color','blue'); //2、 $(标签名称) $('h2').css('background-color','pink'); $('input').css('width','100px'); //3、$(.class属性值) $('.apple').css('background-color','lightgreen'); //4、$(*)通配符选择器(获得页面全部节点) $('*').css('background-color','gray'); //5、$(s1,s2,s3) selector选择器联合选择器 //把符合s1 或 s2或s3条件的节点都给找到 $('h2,#usertel,#userqq').css('background-color','blue'); ``` #### 二、层次选择器 > $(s1 s2) [父子] 派生选择器 派生选择器:在s1内部获得全部的s2接节点(不考虑层次) ``` $("div span"); //在div内部获得span节点 <div> <span></span> <p><span></span></p> </div> ``` > $(s1 > s2) [父子] 直接子元素选择器 直接子元素选择器:在s1内部获得子元素节点s2 ``` $("div > span"); //在div内部获得子元素span节点 <div> <span></span> <p><span></span></p> <span></span> </div> ``` > $(s1 + s2) [兄弟] 直接兄弟选择器 直接兄弟选择器:在s1后面获得紧紧挨着的第一个兄弟关系的s2节点 ``` $("div + span"); //在div后面获得紧紧挨着的第一个兄弟关系的span节点 <div> <span></span> <p><span></span></p> <span></span> </div> <span></span> <span></span> <div></div> <span></span> ``` > $(s1 ~ s2) [兄弟] 后续全部兄弟关系节点选择器 后续全部兄弟关系节点选择器:在s1后面获得全部兄弟关系的s2节点 ``` $("div ~ span"); //获得div后边全部兄弟关系的span节点 <div> <span></span> <p><span></span></p> <span></span> </div> <span></span> <span></span> <div></div> <span></span> <script type="text/javascript" src="./jquery-1.11.1min.js"></script> <script type="text/javascript"> function f1(){ //1、$(s1 s2)派生选择器(不考虑层次) $('div span').css('color','blue');//刘备 阿斗 关羽 //2、$(s1 > s2)直接子元素选择器 $('div > span').css('color','blue');//刘备 关羽 //3、$(s1 + s2)紧紧挨着的第一个兄弟关系选择器 $('div + span').css('color','blue');//吕布 周瑜 //4、$(s1 ~ s2)s1后续全部兄弟关系的s2节点 $('div ~ span').css('color','blue');//吕布 貂蝉 周瑜 孙权 } </script> </head> <body> <h2>基本选择器</h2> <div> <span>刘备</span> <p><span>阿斗</span></p> <span>关羽</span> </div> <span>吕布</span> <span>貂蝉</span> <div>董卓</div> <span>周瑜</span> <p>黄盖</p> <span>孙权</span> <input type="button" name="" value="触发" onclick="f1()"> </body> ``` ------------ #### 三、层次选择器 ``` 3.1:first 用法:$("tr:first");单个元素的组成集合 匹配找到的第一个元素 3.2:last 匹配找到的最后一个元素 3.3:not(selector) 去除所有与给定选择器匹配的元素 3.4:even 匹配所有索引值为偶数的元素,从0开始计数 3.5:odd 匹配所有索引值为奇数的元素,从0开始计数 3.6:eq(index) 匹配一个给定索引值的元素,从0开始计数 3.7:gt(index) 匹配所有大于给定索引值的元素,从0开始计数 3.8:lt(index) 匹配所有小于给定索引值的元素,从0开始计数 3.9:header 匹配h1,h2,h3之类的标题元素 ``` > 注意: ``` ①、并且选择器可以单独使用 ②、各种选择器都可以构造“并且”关系 ③、并且关系的选择器可以使用多个,每个选择器使用前,已经获得节点的下标要“归位”(归零) ④、多个并且关系的选择器,没有前后数序要求,但是要避免产生“歧义” //多个并且关系的选择器,没有前后顺序要求,但是要避免产生‘歧义’ $('li.pear').css('background-color','orange'); //获得‘标题标签元素’,并且有‘class=pear’属性值 //$(':header') //$(':pear') $(':header.pear').css('color','red'); //$('h1,h2,h3,h4') $(':header.pear').css('background-color','yellow'); ``` #### 四、内容过滤选择器 ``` 4.1 :contains(内容) 包含内容选择器,获得节点内部必须包含指定的内容 $('div:dontains(beijing)') <div>i like<span>beijing</span></div>//标签不构成影响 <div>xiaoming like shanghai</div> 4.2 :empty 获得空元素(内部没有任何元素/文本(空))节点对象 $('div:empty') <div>i like<span>beijing</span></div> <div> </div> <div>hello</div> <div><img></div> <div></div> 4.3 :has(选择器) 节点内部必须包含指定选择器对应的元素 $('div:has(#apple)') <div><p></p></div> <div><span id='apple'></span></div> 4.4 :parent 寻找的节点必须作为父元素节点存在 $('div:parent') <div></div> <div> </div> <div><input type="text"></div> <div>sun</div> ``` ``` 内容选择器的具体使用: //1、:contains(text) $('div:contains(beijing)').css('color','red'); //2、:empty 空节点 //console.log($('div:empty')); //3、:has选择器 $('div:has(p)').css('background-color','pink'); //4、:parent作为父节点存在的节点 //console.log($('div:parent')) ``` #### 五、表单域选中选择器 ``` 复选框、单选按钮、下拉列表 $(:checked)复选框、单选按钮 选中选择器 $(:selected) 下拉列表 选中选择器 获得复选框、单选按钮、下拉列表的元素节点: <script type="text/javascript"> function f1(){ //:checked获得被选中的复选框 console.log($('.hby:checked')); //Object[input.hby 属性(attributr)值 = ‘2’,input.hby 属性(attribute)值 = ‘3’,input.hby 属性(attribute)值 = ‘4’] //:checked 获得被选中的单选按钮 console.log($('.sx:checked'));//object[input.sx 属性(attributr)值 = ‘c’] //:selected获得被选中的下拉列表项目 console.log($('option:selected'));//Object[option] } </script> <h2>表单域选中选择器</h2> 爱好: <input type="checkbox" name="hobby[]" class="hby" value="1">篮球 <input type="checkbox" name="hobby[]" class="hby" value="2">足球 <input type="checkbox" name="hobby[]" class="hby" value="3">排球 <input type="checkbox" name="hobby[]" class="hby" value="4">棒球 <hr> 性别: <input type="radio" name="sex" class="sx" value="a">男 <input type="radio" name="sex" class="sx" value="b">女 <input type="radio" name="sex" class="sx" value="c">保密 <hr> 城市: <select> <option value="A">北京</option> <option value="B">天津</option> <option value="C">上海</option> <option value="D">深圳</option> </select> ```
jQuery,选择器
上一篇:
使用Ajax中$.post方法前台获取json数据,将数据转换为对象
下一篇:
jQuery的属性操作
栏目导航
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
相关文章
Ajax是什么?
1252 ℃
网站禁止浏览器缓存
1314 ℃
Ajax之get方式请求
2781 ℃
Ajax之post方式请求
2209 ℃
Json使用
1211 ℃
无刷新表单信息提交
1419 ℃
使用Ajax中$.post方法前台获取json数据,将数据转换为...
1803 ℃
细说jQuery的选择器
1400 ℃
jQuery的属性操作
2158 ℃
jQuery快捷操作
1307 ℃
jQuery对象与dom对象关系
3071 ℃
jQuery的事件加载机制
1634 ℃
jQuery属性选择器使用
2231 ℃
jQuery基本动画效果
2574 ℃
利用Ajax技术实现天气预报接口
1471 ℃
微信小程序
手机扫码访问