jQuery选择器用法介绍

目录

• 一、jQuery选择器
• 二、基本选择器
• 三、层次选择器
• 四、属性选择器
• 五、过滤选择器
• 1、基本过滤选择器
• 2、可见性过滤选择器
• 3、内容过滤器
• 六、表单选择器
• 七、补充
• 1、特殊符号的转义
• 2、选择器中的空格

jQuery选择器类似于CSS选择器，用来选取网页中的元素。例如：

$("h3").css("background-color","red");

说明：

• 获取并设置网页中所有

  元素的背景色。

• “h3”为选择器语法，必须放在$()中。
• $("h3")返回jQuery对象。

一、jQuery选择器

jQuery选择器功能强大，种类也很多，分类如下：

1、类CSS选择器

• 基本选择器
• 层次选择器
• 属性选择器

2、过滤选择器

• 基本过滤选择器
• 可见性过滤选择器

3、表单选择器

4、内容过滤器

二、基本选择器

基本选择器语法如下图所示：

示例：

    
    
    
    
    
    
    


    
    

         id为box的div
         
class为title的h2标签
         
class为title的h3标签
         
热门排行
         

             

             
斗地主
             
休闲游戏
             
QQ斗地主是国内同时在线人数最多的棋牌游戏......
         
    

效果：

三、层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素，语法如下：

请看下面的示例

需求说明：点击标题，使用层次选择器选择不同的元素使得其背景色为蓝色，如下图所示：

代码：

    
    
    
    
    
    
    
    
    
    


    

        
全部旅游产品分类
        

            
北京周边旅游特价
            

                按天数
                海边旅游
                草原
            
        
        

            
景点门票
            

                    名胜
                    暑期
                    乐园
            
            

                    山水
                    双休
                    园林
            
        
        更多分类
    
   

效果：

四、属性选择器

属性选择器通过HTML元素的属性来选择元素。语法如下：

示例：

    
    
    
    
    
    
    
    
    
    
    


    

        
动画列表
        

            
名侦探柯南
            
火影忍者
            
死神
            
妖精的尾巴
            
银魂
            
黑猫警长
            
仙履奇缘
        
    

效果：

五、过滤选择器

过滤选择器通过特定的过滤规则来刷选元素。

语法特点是使用“：”，例如：

$("li:first")

表示选取第一个li元素。

1、基本过滤选择器

基本过滤选择器可以选择第一个元素、最后一个元素、索引为奇数或偶数的元素，语法如下：

基本过滤选择器还可以根据索引的值选取元素

基本过滤选择器还支持一些特殊的选择方式

示例：

    
    
    
    
    
    
    
    
    


    
网络小说
    

        
王妃不好当
        
致命交易
        
珈蓝寺
        
逆天至宠
        
交错时光的爱恋
        
张震讲鬼故事
        
第一次亲密接触
    
    

结果：

2、可见性过滤选择器

可见性过滤选择器可以通过元素的显示状态来选取元素，语法如下：

例如：

示例：

    
    
    
    
     
      
      
      
      


     
     
     
嗨，您好!

效果：

点击显示：

点击隐藏：

3、内容过滤器

内容过滤器根据内容来选取元素，语法如下：

示例：

    
    
    
    
    
    
    
    
    


    

        

            

                
序号
                
订单号
                
商品名称
                
价格(元)
            
        
        

            

                
1
                
10035900
                
Nike透气减震运动鞋
                
231.00
            
            

                
2
                
10036114
                
天美太阳伞
                
51.00
            
            

                
3
                
10035110
                
万圣节儿童蜘蛛侠装
                
31.00
            
            

                
4
                
10035120
                
匹克篮球运动鞋
                
231.00
            
            

                
5
                
10032900
                
jQuery权威指南
                

            
        
    

效果：

六、表单选择器

表单选择器根据不同类型的表单元素进行选取，语法如下：

示例：

    
    
    
    
      
      
      
      


    

        
注册表单
        

           
           

               账号：
           
           

               密码：
            
            

                确认密码：
            
            

                昵称：
            
            

                性别:
                男
                女
            
            

                爱好:
                篮球
                足球
                羽毛球
                其他
            
            

                省份：
                
                    --省份--
                    北京
                    云南
                    河北
                    河南
                
            
            
        
    

效果：

七、补充

1、特殊符号的转义

2、选择器中的空格

到此这篇关于jQuery选择器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。