常见的jQuery选择器汇总

基本元素选择器

代码如下:

$("p")
$("p.ii")选取所有class=ii的 p元素
$("p#demo")选取id=demo的第一个p元素

分层选择器

代码如下:

$("div input")div 下的所有input
$("div>input")

基本条件选择器

代码如下:

$("p:first")
$("p:last")
$("tr:even")选择偶数行
$("tr:odd")奇数
$("input:not(:checked)")选择所有为本选中的元素
$("tr:eq(1)")索引值为1的表格
$("tr:gt(0)")大于0
$("tr:lt(0)")小于0
$(":header")选择所有标题元素
$(":animated")正在执行的动画

内容条件选择器

代码如下:

$("div:constains('ddd')")选择包含ddd文本的层元素
$("td:empty")选择不包含文本或者子元素的表格单元
$("div:has(p)")选择包含段落元素的层元素
$("td:parent")选择包含子元素或者文本的表格单元

可见性条件选择器

代码如下:

$("tr:hidden")  //选择所有隐藏的表格
$("tr:visible") 选择所有可见的表格

属性选择器

代码如下:

$("div[id]")具有id属性的层
$("input[name='']") input属性name=''
$("input[name!='']")
$("input[name^='']")选择具有name属性并且值为‘'为起始内容的表单输入元素
$("input[name$='']")选择具有name属性并且值为‘'为结束内容的表单输入元素
$("input[name*='']")选择具有name属性并且值为‘'的表单输入元素
$("input[id][name$='']")选择具有id和name属性的值以‘'为结束内容的输入表单元素

子元素选择器

代码如下:

$("ul li:nth-child(2)")选择第二个列表项
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(3n)")
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")选择列表出现且仅出现一个列表项

表单元素选择器

代码如下:

$("input")选择所有 input textarea select button等元素
$(":text")文本行
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")

表单属性选择器

代码如下:

$("input:enabled")  //选择所有可用
$("input:disabled")
$("input:checked")
$("select:option:selected")

赞 (0)

相关推荐

  • jquery选择器需要注意的问题

    jquery选择器需要注意的问题

    我们先来看段代码,很简单,如下 复制代码 代码如下: <div id="div1">     <span>111</span>     <span>222</span>     <span>333</span>     <button id="button1">clear</button> </div> 复制代码 代码如下: $(function(

  • jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元素指定属性的属性值. 复制代码 代码如下: $(selector).attr(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta chars

  • jQuery中addClass()方法用法实例

    本文实例讲述了jQuery中addClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法向匹配元素添加一个或多个类. 此方法有多个语法形式. 语法结构一: 为匹配元素添加指定的类名.如果要一次性添加多个类名,它们之间要用空格分隔. 复制代码 代码如下: $(selector).addClass(class) 参数列表: 参数 描述 class 定义被添加类的名称 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head>

  • jQuery中复合属性选择器用法实例

    本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • jQuery中prop()方法用法实例

    本文实例讲述了jQuery中prop()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以获取或者设置匹配元素的属性值. 根据方法参数的不同,作用也有所不同. 语法结构一: 当参数为属性名称时,此方法能够匹配元素集合中,第一个匹配元素指定属性名称的属性值. 复制代码 代码如下: $("selector").prop(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> &

  • jQuery中removeClass()方法用法实例

    本文实例讲述了jQuery中removeClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法从匹配元素删除一个或多个类. 根据方法参数的不同,有以下几种语法结构. 语法结构一: 方法没有参数.把匹配元素所有的类都移除. 复制代码 代码如下: $(selector).removeClass() 实例代码: 代码可以将div的所有css类删除. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-eq

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • jQuery中removeProp()方法用法实例

    本文实例讲述了jQuery中removeProp()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以删除由prop()方法设置的属性. 语法: 复制代码 代码如下: $("selector").removeProp(name) 参数列表: 参数 描述 name 定义要要删除的属性名称. 实例: 实例一: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  • jQuery中removeAttr()方法用法实例

    本文实例讲述了jQuery中removeAttr()方法用法.分享给大家供大家参考.具体分析如下: 此方法从匹配元素中移除相应的属性. 语法结构: 复制代码 代码如下: $(selector).removeAttr(attribute) 参数列表: 参数 描述 attribute 定义要从匹配元素中移除的属性 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

  • 常见的jQuery选择器汇总

    基本元素选择器 复制代码 代码如下: $("p") $("p.ii")选取所有class=ii的 p元素 $("p#demo")选取id=demo的第一个p元素 分层选择器 复制代码 代码如下: $("div input")div 下的所有input $("div>input") 基本条件选择器 复制代码 代码如下: $("p:first") $("p:last"

  • 常用jQuery选择器汇总

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. j s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById).那么jQuery是如何获取呢? 通过标签获取:$('tag') 通过类名获取:$('.className') 通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个cs

  • jQuery选择器基础入门教程

    本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv

  • jQuery选择器选中最后一个元素，倒数第二个元素操作示例

    jQuery选择器选中最后一个元素，倒数第二个元素操作示例

    本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作.分享给大家供大家参考,具体如下: HTML部分: <div> <p>元素1</p> <p>元素2</p> <p>元素3</p> <p>元素4</p> <p>元素5</p> </div> 取倒数第二个p元素 $("div p").eq(-2) 取最后一个p元素 $("

  • jQuery 选择器用法基础入门示例

    本文实例讲述了jQuery 选择器用法.分享给大家供大家参考,具体如下: 今儿个开始学习jQuery,在学习jQuery之前我们应该掌握js,我之前也写过几篇笔记,但是只是小部分的知识,js也不是很难 可以自己简单的看看.以后写js会经常用到jQuery这个库. 1 安装jQuery 1.1 从官网下载 可以从 jQuery.com 下载.有两个版本可以选择: production:被精简压缩过,常用于实际网站. development:源码,可读性高,常用于开发阶段. 1.2 CDN引入 百度

  • jquery选择器和属性对象的操作实例分析

    本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ

  • 高效jQuery选择器的5个技巧实例分析

    本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

  • jQuery 选择器用法实例分析【prev + next】

    目录 jQuery 选择器 (prev + next) 定义和用法 语法 参数 返回值 实例 本文实例讲述了jQuery 选择器用法.分享给大家供大家参考,具体如下: jQuery 选择器 (prev + next) 定义和用法 jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回. 注意: 选择器next的查找范围必须是与"prev元素"相邻的下一个元素,并且必须是"prev元素"的同辈元素.

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1．简化代码的编写2．隐式迭代3．无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

随机推荐