jquery应用—— 查找元素相关（选择器）；

子元素选择器：

    //  大前提： 所选的 都是 修饰div的... div 是它父元素（没有限定）的第一个孩子吗？是最后一个孩子吗？是第index个孩子吗？是唯一的孩子吗？
    $('div:first-child') // 匹配所有为第一个元素的div
    $('div:last-child') // 匹配所有为最后一个元素的div
    $('div:nth-child(index)') // 匹配所有索引值为 index的div
    $('div:only-child') // 匹配所有 为父元素唯一子元素的div
    // 1.9+
    // 大前提 div:first-of-type 是一个整体 最后的结果 是父元素（div） 的第一个为div的元素，最后一个元素；
    $('div:first-of-type') // 匹配所有为div内第一个元素的div
    $('div:last-of-type') // 匹配所有为div内最后一个元素的div
    $('div:nth-of-type(index)') // 匹配所有为div内索引值为index 的div元素

混淆选择器：

用在类选择器或者ID选择器中包含一些CSS特殊字符的时候;

基本选择器：

$('*')

$( '#id')

$('.class')

$('element')  // div p span ...

层级选择器：

$('parent children') // parent 所有子元素；
$('parent > children') // parent 直接子元素；
$('prev + next') // prev 后所有next 元素；
$('prev ~ siblings') // 匹配所有sibllings 的兄弟元素；

属性选择器：

$('div[attr]') // 选出所有拥有属性 attr 的 div
$('div[attr = value]') // 选出所有属性attr = value 的div
$('div[attr != value]') // 选出所有具有属性attr 且attr不为value的div
$('div[attr ^= value]') // 选出所有attr 的值 以value 开头的div
$('div[attr $= value]') // 选出所有attr 的值 以value 结尾的div
$('div[attr *= value]') // 选出所有attr 的值 包含value 的div
$('div[attr][attr1][attr2='value']') // 选出所有拥有且满足条件的div

基本筛选器：

  
    $('div:first') // 选择出的jquery元素组中的第一个div
    $('div:last') // 选择出的jquery元素组中的最后一个div
    $('div:not(selector)') // 将选出jquery对象组中的满足selector 条件的 对象去除；
    $('div:even');$('div:odd') // 匹配所有索引值为偶数/基数的元素；
    $('div:eq(index)') // 匹配索引值为index的元素；
    $('div:gt(index)') // 匹配所有索引值大于index的元素；
    $('div:lt(index)') // 匹配所有索引值小于index的元素；
    $(':header')  // 匹配所有的header(h1-h6)元素；
    $(':animated')  // 匹配所有正在运动的元素；
    $(':focus') // 匹配当前获得焦点的元素；
    // 1.9+
    $('div:lang(language)') // 匹配一个语言值所提供的语言代码；
    $(':root') // 文档根目录；html元素；
    $(':target') // http://jquery.cuishifeng.cn/target.html

内容选择器：

    $('div:contains(text)') // 匹配包含给定文本的元素；
    $('div:has(selector)') // 匹配包含给定元素的元素；
    $('div:empty') // 匹配包含的空元素；
    $('div:parent') // 匹配所有拥有子元素或者文本的元素；所有有内容的元素； 
    // <div class="demo">div</div> demo 满足
    // <div class="demo"><div class="demo1"></div></div> demo 满足 demo1 不满足

可见性选择器：

    $('div:visible') // 匹配所有可见元素
    $('div:hidden') // 匹配所有不可见元素，或者type值(首先元素得有type) 为hidden

表单元素选择器：

：input 匹配所有input元素；

：text ：password ：radio ：checkbox ：submit ：image ：reset ：button file匹配所有type 为text，password，radio，checkbox，submit，image，reset，button，file的元素；

表单对象属性选择器：

：enabled 可操作

：disabled 不可操作

：checked 已选择

：selected 已选择

jquery应用—— 查找元素相关（选择器）；

猜你喜欢