Jquery选择器

Posted fyfighting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery选择器相关的知识,希望对你有一定的参考价值。

Jquery选择器主要分两种:

一.通过css选择器选取元素

二.通过条件过滤选取元素

css选择器选取元素又分为三种:

                  1.基本选择器

                  2.层次选择器

                  3.属性选择器

条件过滤选取元素又分为两种:

                  1.基础过滤选择器

                  2.可见性过滤选择器

 

  名称

  语法结构

       描述

  返回值

      示例

标签选择器

element

根据给定的标签名匹配元素

元素集合

$("h2")选取所有h2元素

类选择器

.class

根据给定的class匹配元素

元素集合

$(".title")选取所有class为title的元素

ID选择器

#id

根据给定的id匹配元素

单个元素

$("#title")选取id为title的元素

并集选择器

selector,selector2,..selectorN

将每一个选择器匹配的元素合并后一起返回

 

元素集合

$("div,p,.title")选取所有div、p和拥有class为title的元素

交集选择器

element.cla或element#id

匹配指定class或id的某元素或元素集合(若在同一页面中指定id的元素返回值,则一定是单个元素;若指定class的元素,则可以是单个元素,也可以是元素集合)

 

单个元素或元素集合

 

$("h2.title")选取所有拥有class为title的h2元素

全局选择器

*

匹配所有元素

集合元素

$("*")选取所有元素

 

层次选择器:

       1、$(“div li”)获取div下的所有li标签(后代,子、子的子标签…)。

       2、$(“div > li”)获取div下的直接li子标签。

       3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。

       4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。

属性过滤选择器:

   1、$(“div[id]”)选取有id属性的<div>。

   2、$(“div[title=test]”)选取title属性为“text”的<div>。

   3、$(“div[title!=test]”)选取title属性不为“text”的<div>。

基本过滤选择器:

   1、:first选择第一个标签。$(“div:first”)选取第一个<div>。

   2、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。

   3、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的<input>标签。

   4、:even、:odd,选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的<input>。

   5、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签,比如$(“input:lt(1)”)选取索引小于1的<input>。

   6、$(“:header”)选取所有的h1…h6标签

 

以上是关于Jquery选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery选择器中加变量参数

jquery选择器中加变量参数

jQuery选择器

Jquery获取元素方法

jQuery选择器探究:ID选择器

jQuery选择器探究:ID选择器