1. 全栈程序员必看首页

JQuery选择器超级详细

全栈程序员-站长 • • 未分类 • 阅读 2

JQuery选择器超级详细基本选择器 id 选择器 id 的属性值 获取与指定 id 属性值匹配的元素单击按钮 将 id 为 myid 的元素背景为绿色 lt pagecontentT text html charset UTF 8 language java gt html head title JQuery 选择器 title head html

基本选择器

id选择器：$(“#id的属性值”)

类选择器：$(“.class的属性值”)

标签选择器：$(“标签名”)

并集选择器：$(“选择器1，选择器2”)

层级选择器

后代选择器：$(“选择器1   选择器2”)

子选择器：$(“选择器1 > 选择器2”)

属性选择器

属性名称选择器：$(“选择器[属性名]”)

属性选择器：

$(“选择器[属性名=’值’]”)

$(“选择器[属性名!=’值’]”)

$(“选择器[属性名^=’值’]”) 

$(“选择器[属性名$=’值’]”)

$(“选择器[属性名*=’值’]”)

复合属性选择器：$(“选择器[属性名=’值’][]…”)

过滤选择器

首元素选择器：${选择器：first}

尾元素选择器：${选择器：last}

非元素选择器：${选择器1：not(选择器2)}

偶数选择器：${选择器：even}

奇数选择器：${选择器：odd}

等于索引选择器：${选择器：eq(index)}

大于索引选择器：${选择器：gt(index)}

小于索引选择器：${选择器：lt(index)}

标题选择器：${：header}

表单过滤选择器

可用元素选择器：${:enabled}

不可用元素选择器：${:disabled}

选中选择器

单复选框：${:checked}

下拉框：${:selected}

 

基本选择器

id选择器：$(“#id的属性值”)

 获取与指定id属性值匹配的元素

单击按钮，将id为myid的元素背景为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,id为mydivid 
      
 
       这是span,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

类选择器：$(“.class的属性值”)

 获取与指定的class属性值匹配的元素

单击按钮，将类名为myClassName的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,id为mydivid，calss为myClassName 
        这是span  
      
 
      
 
       

         这是div,calss为myClassName 
       
 
  这是span,id为myspanid，calss为myClassName

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

标签选择器：$(“标签名”)

 获取所有匹配标签名称的元素

单击按钮，将标签为div的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,id为mydivid，calss为myClassName 
        这是span  
      
 
      
 
       

         这是div,calss为myClassName 
       
 
  这是span,id为myspanid，calss为myClassName

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

 

并集选择器：$(“选择器1，选择器2”)

获取多个选择器选中的所有元素 

单击按钮，将标签为span的元素，或者id为myDivId的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div 
        这是span  
      
 
      
 
       

         这是div,id为myDivId 
       
 
  这是span,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

层级选择器

后代选择器：$(“选择器1   选择器2”)

选择选择器1内部的所有选择器2

改变id为myDivId的元素下的，所有span元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,id为myDivId 
       
  这是span  
  这是span 
 
  这是span  
 







 
 
 



 
      
 
      
 
       

         这是div 
        
  这是span  
 

 
       
 
  这是span,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

子选择器：$(“选择器1 > 选择器2”)

选择选择器1内部的所有子选择器2

改变div元素下的，所有子span元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,id为myDivId 
       
  这是span  
  这是span 
 
  这是span  
 







 
 
 



 
      
 
      
 
       

         这是div 
        
  这是span  
 

 
       
 
  这是span,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

属性选择器

属性名称选择器：$(“选择器[属性名]”)

包含指定属性的选择器

改变类名为myCalss并且含有id属性的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为divId1 
      
 
      
 
       

         这是div,calss为myClass 
       
 
  这是span,calss为myClass,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

属性选择器：

$(“选择器[属性名=’值’]”)

包含指定属性等于指定值的选择器

改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为myDivId1 
      
 
      
 
       

         这是div,calss为myClass，id为myDivId2 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass,mySpanId1

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

$(“选择器[属性名!=’值’]”)

包含指定属性不等于指定值的选择器

改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为myDivId1 
      
 
      
 
       

         这是div,calss为myClass，id为myDivId2 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass,mySpanId1

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

$(“选择器[属性名^=’值’]”) 

包含指定属性以指定值开头的选择器 

改变类名为myCalss并且id属性以my开头的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为myDivId1 
      
 
      
 
       

         这是div,calss为myClass，id为myDivId2 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass,mySpanId1

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

$(“选择器[属性名$=’值’]”)

包含指定属性以指定值结尾的选择器 

改变类名为myCalss并且id属性以Id1的元素背景变为绿色 

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为myDivId1 
      
 
      
 
       

         这是div,calss为myClass，id为myDivId2 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass,mySpanId1

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

$(“选择器[属性名*=’值’]”)

包含指定属性含有指定值的选择器 

改变类名为myCalss并且id属性值含有Div的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为myDivId1 
      
 
      
 
       

         这是div,calss为myClass，id为myDivId2 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass,mySpanId1

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

复合属性选择器：$(“选择器[属性名=’值’][]…”)

包含多个属性条件的选择器

改变calss为myClas并且存在属性id的div元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass，id为divId1 
      
 
      
 
       

         这是div,calss为myClass，id为divId2 
       
 
  这是span,calss为myClass,id为myspanid

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

过滤选择器

首元素选择器：${选择器：first}

获得指定选择器的元素中的第一个元素

改变类名为myClass的第一个元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

尾元素选择器：${选择器：last}

获得指定选择器的元素中的最后一个元素

改变类名为myClass的最后一个元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

非元素选择器：${选择器1：not(选择器2)}

获得指定选择器1的元素中不包含选择器2的元素

改变类名为myClass的元素中不包含span元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

偶数选择器：${选择器：even}

获得指定选择器的元素中索引为偶数的元素，索引从0开始计数

改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

奇数选择器：${选择器：odd}

获得指定选择器的元素中索引为奇数的元素，索引从0开始计数

改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

等于索引选择器：${选择器：eq(index)}

获得指定选择器的元素中等于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引为2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

大于索引选择器：${选择器：gt(index)}

获得指定选择器的元素中大于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

小于索引选择器：${选择器：lt(index)}

获得指定选择器的元素中小于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      

        这是div,calss为myClass 
      
 
      
 
       

         这是div,calss为myClass 
       
 
 
        

          这是div,calss为myClass 
        
 
  这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

标题选择器：${：header}

获得标题元素，固定写法

改变所有标题的背景颜色为绿色

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      
标题1
 
      
标题3
 
      

        这是div,calss为myClass 
      
 
      
 
       
 
        
标题2
 这是div,calss为myClass 
        
标题4
 
       
 
 
        

          这是div,calss为myClass 
        
 
  
标题6
 这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

改变类名为myClass的元素下所有标题的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器     
    
 
     
 
      
标题1
 
      
标题3
 
      

        这是div,calss为myClass 
      
 
      
 
       
 
        
标题2
 这是div,calss为myClass 
        
标题4
 
       
 
 
        

          这是div,calss为myClass 
        
 
  
标题6
 这是span,calss为myClass

单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

表单过滤选择器

可用元素选择器：${:enabled}

获得满足选择器中可用的元素

单击改变from表单内可用的input背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器







单击前

JQuery选择器超级详细

 单击后

JQuery选择器超级详细

不可用元素选择器：${:disabled}

获得满足选择器不可用的元素

单击改变from表单内不可用的input背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器







单击前

JQuery选择器超级详细

单击后

JQuery选择器超级详细

选中选择器

单复选框：${:checked}

获得单选/复选框选中的元素

单击选中复选框选中的值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器    


 
       

         选择性质，单选 
        
 渣男 
 极品 
 
 
 选择爱好，多选 
 编程 
 打游戏 
 学习 
 游泳





单击前

JQuery选择器超级详细

 勾选

JQuery选择器超级详细

单击后，打印了复选框勾选的值

 

JQuery选择器超级详细

下拉框：${:selected}

获得下拉框选中的元素

单击输出复选选择框的选中的值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    
     
     JQuery选择器





单击前

JQuery选择器超级详细

复选选择框选中值

JQuery选择器超级详细

 单击后

JQuery选择器超级详细

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/201325.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月20日 上午9:35
下一篇 2026年3月20日 上午9:35


相关推荐

  • 关于 ioctl 的 FIONREAD 參数

    关于 ioctl 的 FIONREAD 參数

    关于 ioctl 的 FIONREAD 參数ioctl是用来设置硬件控制寄存器，或者读取硬件状态寄存器的数值之类的。而read,write是把数据丢入缓冲区，硬件的驱动从缓冲区读取数据一个个发送或者把接收的数据送入缓冲区。ioctl(keyFd,FIONREAD,&b)得到缓冲区里有多少字节要被读取，然后将字节数放入b里面。接下来就能够用read了。read(keyFd,&b,size…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月23日
    13
  • django 渲染_django开源项目

    django 渲染_django开源项目

    django 渲染_django开源项目前言渲染模块的原理和解析模块是一样，drf默认的渲染有2种方式，一种是json格式，另一种是模板方式。渲染模块源码入口入口：APIView类中dispatch方法中的：self.response

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月7日
    2
  • 网站检测空链、死链工具（Xenu）

    网站检测空链、死链工具（Xenu）

    网站检测空链、死链工具（Xenu）网站常用检测空链、死链工具网站的链接一般都成千上万，如果存在大量的空链接将大大的影响用户体验，怎样有效检测无效链接。下面是比较常用的几种简单工具。一、Xenu（Xenu’sLinkSleuth）1、文件→检测网址，打开如下图，输入根网址，点击确定即可。如果想检测本地html文件可点击本地文件然后导入。2、点击确定，开始自…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月22日
    39
  • JCF集合框架理解

    JCF集合框架理解

    JCF集合框架理解JCF 集合框架所谓的集合 就是可以往里面放批量元素针对这些元素执行执行单独或统一的操作框架 指为了实现某个目标或是某个功能 而预先设计好的一系列具有继承或实现关系的类与接口 使用者可以直接操作这些类与接口 而不必关注底层的实现 Collection 是一个接口 是容器类的根接口 是用来装元素的 在 Collection 中有衍生出 3 个子集合 List Set MapList 接口 List

    全栈程序员-站长的头像 全栈程序员-站长
    2026年2月4日
    4
  • volatile关键字作用

    volatile关键字作用

    volatile关键字作用一、作用简述内存可见性：保证变量的可见性：当一个被volatile关键字修饰的变量被一个线程修改的时候，其他线程可以立刻得到修改之后的结果。当一个线程向被volatile关键字修饰的变量写入数据的时候，虚拟机会强制它被值刷新到主内存中。当一个线程用到被volatile关键字修饰的值的时候，虚拟机会强制要求它从主内存中读取。 屏蔽JVM指令重排序（防止JVM编译源码生成class时使用重排序）…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月1日
    38
  • 嘘…偷偷教你破解“朋友圈三天可见”「建议收藏」

    嘘…偷偷教你破解“朋友圈三天可见”「建议收藏」

    嘘…偷偷教你破解“朋友圈三天可见”「建议收藏」点击上方[全栈开发者社区]→右上角[…]→[设为星标⭐]在微信公开课上，腾讯高级执行副总裁、微信事业群总裁张小龙说：朋友圈状态设置三天可见的人数超过了一亿人，这个开关是微信里使用率最…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月28日
    98

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号