JQ选择器
在jQuery中，存在着许多的选择器，以下将通过部分案例对选择器进行一个学习与理解
选择器是什么？
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
作用
用来查找特定页面元素
分类
- 基本
- 层次
- 过滤
- 表单
基本选择器
案例需求
<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 元素
案例需求
<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]
匹配给定的属性是某个特定值的元素
案例需求
<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
不可用的
案例需求
<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
JQ中文手册
拥有JQ的各种方法与对下工具
H5选择器
- querySelectorAll() 获取符合选择器的所有元素
- querySelectorAll() 获取符合选择器的所有元素
document.querySelector('li:last-child') |
