1、基本选择器
1、是什么?
- 有特定格式的字符串
2、作用
- 用来查找特定页面元素
3、基本选择器
- #id:id选择器
- element:元素选择器
- .class:属性选择器
- *:任意标签
- selector1,selector1,selectorN:取多个选择器的并集(组合选择器)
- selector1selector2selectorN:取多个选择器的交集(相交选择器)
<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">DDDDD(title="hello")</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1、选择id为div1的元素
$('#div1').css('background', 'red')
// 2、选择所有的div元素
$('div').css('background', 'green')
// 3、选择所有class属性为box的元素
$('.box').css('background', 'blue')
// 4、选择所有的div和span元素
$('div, span').css('background', 'yellow')
// 5、选择所有的class属性为box的div元素
$('div.box').css('background', 'grey')
</script>
2、层次选择器
层次选择器:查找子元素,后代元素,兄弟元素的选择器
1、ancestor descendant
在给定的祖先元素下匹配所有的后带元素
2、parent>child
在给定的父元素下匹配所有的子元素
3、prev+next
匹配所有紧接在prev元素后的next元素
4、prev~siblings
匹配prev元素后的所有siblings元素
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDDD</span></li>
<span>EEEEE</span>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1、选中ul下的所有span
$('ul span').css('background', 'red')
// 2、选中ul下所有的子元素span
$('ul>span').css('background', 'blue')
// 选中class为box的下一个li
$('.box+li').css('background', 'green')
// 4、选中ul下的class为bix元素后面的所有兄弟元素
$('ul .box~*').css('background', 'yellow')
</script>
3、过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
- 基本
- 内容
- 可见性
- 属性
<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">DDDDD</li>
<li title="two">BBBBB</li>
<li style="display: none;">我本来是隐藏的</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1、选择第一个div
$('div:first').css('background', 'red');
// 2、选择最后一个class为box的元素
$('.box:last').css('background', 'green');
// 3、选择所有class属性不为box的div
$('div:not(.box)').css('background', 'blue'); //没有class属性也可以
// 4、选择第二个和第三个li元素
$('li:gt(0):lt(2)').css('background', 'orange');
// 5、选择内容为BBBBB的li
$('li:contains("BBBBB")').css('background', 'yellow');
// 6、选择隐藏的li
console.log($('li:hidden').length, $('li:hidden')[0]);
// 7、选择有title属性的li元素;./
$("li[title]").css('background', 'pink');
// 8、选择所有属性title为hello的li元素
$("li[title='hello']").css('background', 'grey');
</script>
表单选择器
表单选择器
1、表单
2、表单对象属性
<form>
用户名:<input type="text"><br>
密码:<input type="password"><br>
爱好:
<input type="checkbox" checked="checked">篮球
<input type="checkbox" checked="checked">足球
<input type="checkbox" checked="checked">羽毛球<br>
性别:
<input type="radio" name="sex" id="male">男
<input type="radio" name="sex" id="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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1、选择不可用文本的输入框
$(':text:disabled').css('background', 'red');
// 2、显示选择爱好的个数
console.log($(':checkbox:checked').length);
// 3、显示选择城市名称
$(':submit').click(function () {
var city = $('select>option:selected').html()
alert(city)
})
</script>