jQuery选择器的基本使用

1.基本选择器

element:元素选择器 $('div'),$('p'),$('span')
id:  #box  $('#box').css('color','red');
class: item $('.item').css('color','yellow');
* :全局选择器    $('*').css('border','1px solid yellow');

实例代码

    
    




    我是div



    我是class=item的div



    我是id=box的div

---

2,层级选择器,组合选择器

div,p 逗号代表同级别  $('div,p').css()
div li: 空格代表div下的所有后代元素 $('div li')
div>li : 大于号代表div下的所有子元素 $('div > li')
p.item :代表class='item'的p标签    $('p.item')
li.item+li: + 代表当前标签的下一个 li $('li.item+li').css('color','red');

li.item~li: ~代表当前标签之后的所有兄弟li $('li.item~li').css('color','purple');

实例代码

    
    


 哈哈
    

        
python
        
python01
        
python02
        
python03
        

            
java01
            
java02
            
java03
        

        
        
python04
        
python05
    





    
11
    
12
    
14
    
13

    

        
21
        
22
        
23
        
24
        
25
    


因曾问我西来意,我话山居不记年.
草履只栽三个耳,麻衣曾补两番肩.
东庵每见西庵雪,下涧常流上涧泉,
半夜白云消散后,一轮明月到床前.

---

基本筛选器

• :first

• :not(selector)

• :even

• :odd

• :eq(index)

• :gt(index)

• :lang^1.9+

• :last

• :lt(index)

• :header

• :animated

• :focus

• :root^1.9+

• :target^1.9+

• 内容

  • :contains(text)
  • :empty
  • :has(selector)
  • :parent

• 可见性

  • :hidden
  • :visible

• 属性

  • [attribute]
  • [attribute=value]
  • [attribute!=value]
  • [attribute^=value]
  • [attribute$=value]
  • [attribute*=value]
  • [attrSel1][attrSel2][attrSelN]

实例代码(取几个实例做个简单测试便可):

    
    


 哈哈
    

        
python
        
python01
        
python02
        
python03
        

            
java01
            
java02
            
java03
        

        
        
python04
        
python05
    
    
hahhaahah





    
11
    
12
    
14
    
13

    

        
21
        
22
        
23

        
24
        
25
    


因曾问我西来意,我话山居不记年.
草履只栽三个耳,麻衣曾补两番肩.
东庵每见西庵雪,下涧常流上涧泉,
半夜白云消散后,一轮明月到床前.


我是动漫测试





// 以下为部分代码 用于参考使用


    
    
    
    
$(document).ready(function(){
            //$("img[alt]").css("border", "5px solid green")
            //$("img[alt='abc']").css("border", "5px solid green");
            //$("img[alt!='abc']").css("border", "5px solid green")
            //$("img[alt^='hello']").css("border", "5px solid green")
            //$("img[alt$='d']").css("border", "5px solid green")
            //$("img[alt*='o']").css("border", "5px solid green")


            $("img[alt*='o'][title]").css("border", "5px solid green");
        })

---

属性操作

    
    


jQuery属性操作