jQuery（二）——选择器

各种jquer选择器

    // 匹配 后面所有的兄弟元素
    // $('#list1 ~ li' ).css('background', 'red')

    // 匹配 下一个兄弟元素
    // $('#list1 + li' ).css('background', 'red')

    // 匹配第几个元素 索引从0开始
    // $('li:eq(2)' ).css('background', 'red')
    // $('li:eq(-1)' ).css('background', 'green')

    // 选中偶数
    // $('li:even').css('color', 'red')

    // 选中奇数
    // $('li:odd').css('color', 'red')
    
    //选择第一个匹配的DOM元素。
    // $('li:first').css('color', 'red')
    
    // 选择匹配集合中所有大于给定index（索引值）的元素。
    // $('li:gt(2)').css('color', 'red')
    
    // $("lt:(index)")为小于index的元素设置样式
    // $("li:lt(2)").css("color","pink");
   
    // 选中所有的head标签
    // $(':header').css('color','#f00')
    // $('li:lang(zh-CN').css('color', '#0f0');
    
    // 过滤掉某个元素 
    // $('li:not(#list1)').css('color','#00f')
    // #ff8907
    
    // $(':hidden').css('display','block')

    //选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
    // $('li[name |= "list"]').css('color', 'orange')
    // 包含list以及带有（"list-"）这种前缀形式

    // 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
    //只要name中包含有“list”字符串的都可以设置样式
    // $('li[name *= "list"]').css('color', 'orange')
    
    //选择指定属性用空格分隔的值中包含一个给定值的元素。
    //包含list 以及list index（用空格分隔的元素）
    // $('li[name ~= "list"]').css('color', 'orange')
    
    //选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
    //表示的是name用list结尾的元素如：111list
    // $('li[name $= "list"]').css('color', 'orange')

    //选择指定属性是以给定字符串开始的元素
    // $('li[name ^= "list"]').css('color', 'orange')

    //选择不存在指定属性，或者指定的属性值不等于给定值的元素。
    //选择name名不是list的元素
    // $('li[name != "list"]').css('color', 'orange')

    //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
    // $('li:nth-last-child(1)')表示的是为最后一个li设置样式
    // $('li:nth-last-child(1)').css('background', 'pink');
    
    //如果某个元素是其父元素的唯一子元素，那么它就会被选中。
    //$('p:only-child').css('background', 'yellow')