jQuery选择器(上)

一、基本选择器
  1.ID选择器 $("#id")
  2.类选择器 $(".class")
  3.元素选择器 $("element")
  4.通配选择器 $("*")
  5.集合选择器 $("#id,p,span")
二、层次选择器
  1.$("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素
  2.$("parent>child") 选取parent 元素下的child(子)元素,与后代元素的区别是后代元素包括子元素,孙子元素,重孙子元素.
  3.$("prev+next") 等价于$("prev").next("next") 选取紧接在prev元素后的next元素
  4.$("prev~siblings") 等价于$("prev").nextAll() 即为之后的所有同辈节点 选取prev元素之后的所有siblings元素
三、过滤选择器
  1.基本过滤选择器
    :first 选取第1个元素
    :last 选取最后一个元素
    :not(selector) $("input:not(.myClass)") 选取所有class不是myClass的<input>元素
    :even $("input:even") 选取索引是偶数的<input>元素 索引从0开始
    :odd 索引是奇数的所有元素,从0开始
    :eq(index) 选取索引等于index的元素(index从0开始)
    :gt(index) 索引大于index的元素 (index从0开始)
    :lt(index) 索引小雨index的元素(index从0开始)
    :header 选取所有的标题元素,例如h1,h2等
    :animated 选取当前正在执行动画的所有元素
  2.内容过滤选择器
    :contains(text) 选取含有文本内容为“text”的元素
    :empty 选取不包含子元素或者文本的空元素
    :has(selector) 选取含有选择器所匹配的元素的元素
    :parent 选择含有子元素或者文本的元素
  3.可见性过滤选择器
   :hidden 选取所有不可见的元素 $(":hidden") 包括<input type="hidden"/> <div style="display:none;"><div style="visibility:hidden">
   :visible 选取所有可见的元素 $("div:visible") 选取所有可见的div
  4.属性过滤选择器
    [attribute] $("div[id]") 选取拥有属性id的元素
    [attribute=value] $("div[title=test]") 选取属性title为“test”的<div> 元素
    [attribute!=value] $("div[title!=test]")选取属性title不为“test”的<div> 元素,没有title属性也会被选中
    [attribute^=value] $("div[title^=test]") 选取属性title以“test"开始的div元素
    [attribute$=value] $("div[title$=test]") 选取属性title以“test"结束的div元素
   [attribute*=value] $("div[title*=test]") 选取属性title含有”test“的div元素
   [selector1][selector2][selectorN] $("div[id][title$=‘test‘]") 选取拥有属性id,并且属性title以”test“结束的div元素
  5.子元素过滤选择器
    :nth-child(index/even/odd/equation) :eq(index)只匹配一个元素 ,而:nth-child姜维每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始算起的,而:           eq(index)是从0开始
    :first-child 每个父元素的第1个子元素
    :last-child 每个父元素的最后一个子元素
    :only-child 如果某元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

时间: 2024-10-25 00:43:37

jQuery选择器(上)的相关文章

史上最全的jQuery选择器

jQuery选择器的优势 1.简洁的写法 $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中也不例外.其中$("#ID")用来代替document.getElementById()函数,即通过ID获取元素. 2.支持CSS1到CSS3选择器 jQuery选择器的写法与CSS选择器的写法十分相似,只不过两者的作用效果不同,CSS选择器是找到元素后添加样式,而jQuery选择器是找到元素后添加行为. 3.完善的处理机制 使用jQuery选择器不仅简洁,

jQuery选择器遇上一些特殊字符

学习jQuery过程中,发现一些特殊字符,如“.”,“#”,"(","]"等.它在选择器应用时,按照普通处理就会出错.解决办法,就是使用转义字符来处理,这有点象C#的转义一样. 如"\\": 例如(Insus.NET只列举一个例子,其它特殊字符处理是一样的.):先在MVC视图中,写上一个Div标签: 为了做到演示,我们再放一个铵钮: 接下来,我们可以写JQuery脚本了: 实时操作演示看看: jQuery选择器遇上一些特殊字符

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

Jquery 选择器大全

jQuery 选择器简介  jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器. jQuery 中所有选择器都以美元符号开头:$(). 1 .基本选择器 $("#test") 选择id值为test的元素,id值是唯一的所以返回单个元素. $("div") 选择所有的d

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery选择器详解及实例---《转载》

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(func

使用jquery选择器大全的用法介绍

在jquery开发(http://www.maiziedu.com/course/python/303-2785/)当中,很多人都很在意选择器的问题,首先选择器是jQuery最基础的东西,也对获得页面元素变得更加容易.更加灵活,能减轻工程师的开发压力,本文主要加深对选择器的理解以及用法,帮助提升个人编写jQuery代码的效率.下面就一起看看对所有jQuery选择器的介绍,并且也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素

javaScript 笔记(5) --- jQuery(上)

这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQuery 语法:jQuery 语法是通过选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合. 基础语法:$(selector).action() 美元符号定义 jQuery 选择符(sele