jQuery选择器

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>