JQ选择器
在jQuery中,存在着许多的选择器,以下将通过部分案例对选择器进行一个学习与理解
选择器是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
作用
用来查找特定页面元素
分类
- 基本
- 层次
- 过滤
- 表单
基本选择器
- #id : id选择器
- element : 元素选择器
- .class : 属性选择器
- *: 任意标签
- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
案例需求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本选择器</title> </head> <body> <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box">span(class="box")</span><br> <ul> <li>AAAAA</li> <li title="hello">BBBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDDDD(title="hello")</li> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择id为div1的元素 2. 选择所有的div元素 3. 选择所有class属性为box的元素 4. 选择所有的div和span元素 5. 选择所有class属性为box的div元素 */ //1. 选择id为div1的元素 $('#div1').css('color', 'red') // 字体颜色红色 //2. 选择所有的div元素 $('div').css('fontSize', '20px') // 字体大小20px //3. 选择所有class属性为box的元素 $('.box').css('background', 'yellow') // 背景颜色黄色 //4. 选择所有的div和span元素 $('div,span').css('fontStyle', 'oblique') // 字体倾斜 //5. 选择所有class属性为box的div元素 $('div.box').css('border', '1px solid aqua') // 添加边框 //6. 选择所有元素 $('*').css('marginTop', '30px') // 上边距增加 30px </script> </body> </html>
层次选择器
- 查找子元素
- 后代元素
- 兄弟元素的选择器
ancestor descendant
在给定的祖先元素下匹配所有的后代元素parent>child
在给定的父元素下匹配所有的子元素prev+next
匹配所有紧接在 prev 元素后的 next 元素prev~siblings
匹配 prev 元素之后的所有 siblings 元素
案例需求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_层次选择器</title> </head> <body> <ul> <li>AAAAA</li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span class="box">DDDD</span></li> <span>EEEEE</span> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选中ul下所有的的span 2. 选中ul下所有的子元素span 3. 选中class为box的下一个li 4. 选中ul下的class为box的元素后面的所有兄弟元素 */ //1. 选中ul下所有的的span // $('ul span').css('background', 'yellow') //2. 选中ul下所有的子元素span // $('ul>span').css('background', 'yellow') //3. 选中class为box的下一个li // $('.box+li').css('background', 'yellow') //4. 选中ul下的class为box的元素后面的所有兄弟元素 $('ul .box~*').css('background', 'yellow') </script> </body> </html>
案例图1
案例图2
案例图3
案例图4
过滤选择器
在原有匹配元素中筛选出其中一些
- :first
获取第一个元素
- :last
获取最后个元素
- :eq(index)
匹配一个给定索引值的元素
- :lt(index)
匹配所有小于给定索引值的元素
- :gt(index)
匹配所有大于给定索引值的元素
- :odd
匹配所有索引值为奇数的元素,从 0 开始计数
- :even
匹配所有索引值为偶数的元素,从 0 开始计数
- :header
匹配如 h1, h2, h3之类的标题元素
- :not(selector)
去除所有与给定选择器匹配的元素
在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))
- :hidden
匹配所有不可见元素,或者type为hidden的元素
- :contains(text)
匹配包含给定文本的元素
- :visible
匹配所有的可见元素
- [attrName]
匹配包含给定属性的元素
- [attrName=value]
匹配给定的属性是某个特定值的元素
案例需求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_过滤选择器</title> </head> <body> <div id="div1" class="box">class为box的div1</div> <div id="div2" class="box">class为box的div2</div> <div id="div3">div3</div> <span class="box">class为box的span</span> <br/> <ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">BBBBB</li> <li style="display:none">我本来是隐藏的</li> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择第一个div 2. 选择最后一个class为box的元素 3. 选择所有class属性不为box的div 4. 选择第二个和第三个li元素 5. 选择内容为BBBBB的li 6. 显示隐藏的li 7. 选择有title属性的li元素 8. 选择所有属性title为hello的li元素 */ //1. 选择第一个div // $('div:first').css('background', 'red') //2. 选择最后一个class为box的元素 //$('.box:last').css('background', 'red') //3. 选择所有class属性不为box的div // $('div:not(.box)').css('background', 'red') //没有class属性也可以 //4. 选择第二个和第三个li元素 // 多个过滤选择器不是同时执行, 而是依次执行 // $('li:gt(0):lt(2)').css('background', 'red') //$('li:lt(3):gt(0)').css('background', 'red') //5. 选择内容为BBBBB的li // $('li:contains("BBBBB")').css('background', 'red') //6. 显示隐藏的li // $('li:hidden').css('display','block') //7. 选择有title属性的li元素 // $('li[title]').css('background', 'red') //8. 选择所有属性title为hello的li元素 $('li[title="hello"]').css('background', 'red') </script> </body> </html>
案例图1
案例图2
案例图3
案例图4
在这儿特此讲一下关于
gt()
与lt()
的用法与原理
gt()与lt()
可以用作选择一个区间,但它是依次执行的,而不是同时执行,以本案例做分析,6个元素,选择第2至第3个
- 如果先用
gt()
后用lt()
- 则先
:gt(0)
选取大于第一个以外的区间,如下图蓝色区域- 在蓝色区域内
:lt(2)
选取小于第三个外的区间,如橙色区域- 最终得到的即为红色区域内
第2至第3个
- 如果先用
lt()
后用gt()
- 则先
:lt(3)
选取小于第四个以外的区间,如下图蓝色区域- 在蓝色区域内
:gt(0)
选取大于第一个外的区间,如橙色区域- 最终得到的即为红色区域内
第2至第3个
案例图5
案例图6
案例图7
案例图8
表单选择器
表单选择器
- :input
- :text
- :checkbox
- :radio
- :checked
选中的
- :disabled
不可用的
案例需求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08_表单选择器</title> </head> <body> <form> 用户名: <input type="text"/><br> 密 码: <input type="password"/><br> 爱 好: <input type="checkbox" checked="checked"/>篮球 <input type="checkbox"/>足球 <input type="checkbox" checked="checked"/>羽毛球 <br> 性 别: <input type="radio" name="sex" value='male'/>男 <input type="radio" name="sex" value='female'/>女<br> 邮 箱: <input type="text" name="email" disabled="disabled"/><br> 所在地: <select> <option value="1">北京</option> <option value="2" selected="selected">天津</option> <option value="3">河北</option> </select><br> <input type="submit" value="提交"/> </form> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择不可用的文本输入框 2. 显示选择爱好 的个数 3. 显示选择的城市名称 */ //1. 选择不可用的文本输入框 // $(':text:disabled').css('background', 'red') //2. 显示选择爱好 的个数 console.log($(':checkbox:checked').length) //3. 显示选择的城市名称 $(':submit').click(function () { var city = $('select>option:selected').html() // 选择的option的标签体文本 city = $('select').val() // 选择的option的value属性值 alert(city) }) </script> </body> </html>
案例图1
案例图2
案例图3