jQuery 快速入门---选择器（二）

jquery选择器

选择器是jQuery学习的重中之重，也就是对jQuery核心函数的使用

● 选择器本身只是一个有特定语法规则的字符串，没有实质用处
● 它的基本语法规则使用的就是 CSS 的选择器语法，并对基进行了扩展
● 只有调用$()，并将选择器作为参数传入才能起作用
● $(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组），并封装成jQuery对象

基本选择器

ID选择器 : #id,根据给定的ID匹配一个元素
标签选择器: element,根据给定的元素名匹配所有元素
属性选择器: .class,根据给定的类匹配元素
通用选择器 : * ,匹配所有元素
并集选择器: selector1,selector2,selector3 ,将每一个选择器匹配到的元素合并后一起返回
交集选择器: selector1selector2selector3 ,将每一个选择器匹配到的元素取交后返回

层次选择器

后代元素选择器:ancestor descendant ,在给定的祖先元素下匹配所有的后代元素
子代元素选择器 :parent > child ,在给定的父元素下匹配所有的子元素
兄弟选择器: prev+next,匹配所有紧接在 prev 元素后的 next 元素,prev~siblings,prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

过滤选择器
在原有选择器匹配的元素中进行进一步过滤的选择器
选择器语法中大部分是过滤选择器
基本,内容,可见性,属性

表单选择器
表单,表单对象属性

代码实践

基本选择器

// 1.选择id为div1的元素
$('#div1').css('background-color', 'red');

// 2.选择所有的div元素
$('div').css('background-color', 'red');

// 3.选择所有class属性为box的元素
$('.box').css('background-color', 'red');

// 4.选择所有的div和span元素
$('div,span').css('background-color', 'red');

// 5.选择所有class属性为box的div元素
$('div.box').css('background-color', 'red');

// 6.选择所有元素
$('*').css('background-color', 'red');

<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>

层级选择器

// 1.选中ul下所有的span
$('ul span').css('background', 'red');

// 2.选中ul下所有的子元素span
$('ul > span').css('background', 'red');

// 3.选中class为box的下一个li
$('.box + li').css('background', 'red');

// 4.选中ul下li的class为box的元素后面的所有兄弟元素
$('ul .box ~ *').css('background', 'red');

<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>

过滤选择器

// 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');

// 4.选择第二个和第三个li元素,:eq、:gt、:lt
$('li:eq(1),li:eq(2)').css('background', 'red');
$('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').show().css('background', 'red');

// 7.送择有title属性的li元素
$('li[title]').css('background', 'red');

// 8.选择所有属性title为hello的li元素
$('li[title=hello]').css('background', 'red');

//9.匹配所有索引值为奇数的元素
$('#data tbody > tr:odd').css('backgroundColor', '#ccf');

<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>

表单选择器

表单选择器 描述
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:reset 匹配所有重置按钮
:button 匹配所有按钮

表单对象属性 描述
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的option元素

// 1.选择不可用的文本输入框
$(':text:disabled').css('background-color', 'red');

// 3.显示选择的城市名称
$(':submit').click(function () {
    alert($('select>option:selected').html());
});

<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" value='male'/>男
    <input type="radio" name="sex" value='female'/>女<br>
    邮箱：<input type="text" name="email" disabled="disabled"/><br>
    所在地：I
    <select>
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">河北</option>
    </select><br>
    <input type="submit" value="提交"/>
</form>