jQuery选择器
选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展
只有调用$，并将选择器作为参数传入才能起作用
$(selector)作用：
根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回
1.基本选择器
最基本常用的选择器
#id
element
.class
*
selector1,selector2,selectorN
selector1selector2selectorN
//1.选择id为div1元素 // $('#div1').css('background','red') // 2.选择所有div元素 // $('div').css('background','red') // 3.选择所有class属性为box的元素 // $('.box').css({'background':'red'}) // 4.选择所有的div和span元素 // $('div,span').css('background','red') // 5.选择所有class属性为box的div元素 // $('div.box').css('background','red')
2.层次选择器
查找子元素，后代元素，兄弟元素的选择器
ancestor descendant
parent > child
prev + next
prev ~ siblings:匹配prev元素之后的所有siblings元素
//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下的class为box的元素后面的所有兄弟元素 // $('ul .box~*').css('background','red')
3.过滤选择器
在原有的选择器匹配的元素中进一步进行过滤的选择器
基本/内容/可见性/属性
//1.选择最后一个class为box的元素 // $('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元素 // $('li:gt(0):lt(2)').css('background','red') //5.选择内容为BBBB的li // $('li:contains("BBBBB")').css('background','red') //6.选择隐藏的li // console.log($('li:hidden')[0]) //7.选择有title属性的li元素 // $('li[title]').css('background','red') //8.选择所有属性title为hello的li元素 // $('li[title="hello"]').css('background','red')
4.表单选择器
表单/表单对象属性
/** * 1.选择不可用的文本输入框 * $(':text:disabled').css('background','red') * 2.显示选择爱好的个数 * $(':checkbox:checked').length * 3.显示选择的城市的名称 * $(':submit').click(function () { * var city = $('select>option:selected').html() * city = $('select').val()//value属性值 * }) */