Jquery:语法-选择器(jquery的选择器有哪些举例说明)

选择其说明

$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回

基本选择器

 基本选择器是jquery中最简单，也是最常用的选择器
 它通过标签名、id属性、class属性来查找匹配的DOM元素

• //#id
   用法:$(“#id”)
   返回值：根据id属性匹配一个标签, 封装成jQuery对象
• //element（标签）
   用法: $(“tagName”)
   返回值：根据标签名匹配的一个或多个标签, 封装成jQuery对象
• //.class
   用法: $(“.class”)
   返回值：根据class属性值匹配一个或多个标签, 封装成jQuery对象
• //*
   用法: $(“*”)
   返回值: 匹配所有标签, 封装成jQuery对象
• //selector1,selector2,selectorN
  取多个选择器的 /*并集(组合选择器)*/
   用法: $(“div,span,.myClass”)
   返回值: 所有匹配选择器的标签, 封装成jQuery对象
• //selector1selector2selectorN
  取多个选择器的/*交集(相交选择器)*/

• 操作：改变指定元素节点的背景颜色
  * jQuery操作样式表
  * css(参数1,参数2):为参数1赋值，值为参数2。
  * css(参数1):获取参数1的样式值。
  * jQuery操作属性
  * attr(参数1,参数2)
  * attr(参数1)

用法示例

基本选择器示例代码

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

• 查找子元素, 后代元素, 兄弟元素的选择器
  //ancestor descendant
   用法:$(“form input”)
  在给定的祖先元素下的后代（就是儿子、孙子、重孙子。。。）元素中匹配元素
• //parent > child
   用法: $(“form > input”)
  在给定的父元素下的子元素(子代| 就是儿子代)中匹配元素.
• //prev + next
   用法: $(“label + input”)
  匹配所有紧接在prev元素后的next元素
• //prev ~ siblings
   用法: $(“form ~ input”)
  匹配prev元素之后的所有兄弟元素

过滤选择器

基本过滤选择器

• :first
   用法: $(“tr:first”) ;
   说明: 匹配找到的第一个元素
• :last
   用法: $(“tr:last”)
   说明: 匹配找到的最后一个元素.与 :first 相对应
• :not(selector)
   用法: $(“input:not(:checked)”)
   说明: 去除所有与给定选择器匹配的元素，有点类似于”非”
  意思是没有被选中的input(当input的 type=”checkbox”).
  selector 用于筛选的选择器
  在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
• :even
   用法: $(“tr:even”)
   说明: 匹配所有索引值为偶数的元素，从0开始计数。js的数组都是从0开始计数的
• :odd
   用法: $(“tr:odd”)
   说明: 匹配所有索引值为奇数的元素,和:even对应,从0开始计数.
• :eq(index)
   用法: $(“tr:eq(0)”)
   说明: 匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素。括号里面的是索引值不是元素排列数
  index 从0开始计数
• :gt(index)
   用法: $(“tr:gt(0)”)
   说明: 匹配所有大于给定索引值的元素。
  index 从0开始计数
• :lt(index)
   用法: $(“tr:lt(2)”)
   说明: 匹配所有小于给定索引值的元素。
  index 从0开始计数
• :header
  匹配如 h1, h2, h3之类的标题元素
• :animated

匹配所有正在执行动画效果的元素

• :focus 1.6+(版本)
  触发每一个匹配元素的focus事件。
  这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

内容过滤选择器

• :contains(text)
   用法: $(“div:contains(‘John’)”)
   说明: 匹配包含给定文本的元素，这个选择器比较有用，当我们要选择的不是dom标签元素时,
  它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的。
  text：一个用以查找的字符串
• :empty
   用法: $(“td:empty”)
   说明: 匹配所有不包含子元素或者文本的空元素
• :has(selector)
   用法: $(“div:has(p)”).addClass(“test”)
   说明: 匹配含有选择器所匹配的元素的元素，这个解释需要好好琢磨,
  但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”。
  selector：用于筛选的选择器
• :parent
   用法: $(“td:parent”)
   说明: 匹配含有子元素或者文本的元素。注意这里是”:parent”,可不是”.parent”

可见过滤选择器

• :hidden
   用法: $(“tr:hidden”)
   说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到。
  意思是css中display:none和input type=”hidden”的都会被匹配到。
  同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别
• :visible
   用法: $(“tr:visible”)
   说明: 匹配所有的可见元素.

属性过滤选择器