jquery选择器代码详解(四)（jQuery中基本选择器有哪些?并写出示例代码）

本篇文章给大家谈谈jquery选择器代码详解(四)，以及jQuery中基本选择器有哪些?并写出示例代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、jquery有几种选择器
• 2、jQuery基本筛选选择器实例代码
• 3、jQuery基本选择器选择元素使用介绍
• 4、jQuery选择器基础入门教程

jquery有几种选择器

jQuery选择器一般分为四种

一、基本选择器

基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。

1、ID选择器 #id

描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复）

示例：$("#test") 选取 id 为 test 的元素

2、类选择器 .class

描述：根据给定的类名匹配元素，返回元素集合

示例：$(".test") 选取所有class为test的元素

3、元素(标签)选择器 element

描述：根据给定的元素名匹配元素，返回元素集合

示例：$("p") 选取所有的p元素 $("div") :选取所有的div标签

4、*

描述：匹配所有元素，返回元素集合

示例：$("*") 选取所有的元素

5、selector1，selector2,...,selectorN（并集选择器）

描述：将每个选择器匹配到的元素合并后一起返回，返回合并后的元素集合

示例：$("p,span,p.myClass") 选取所有p,span和class为myClass的p标签的元素集合

二、层次选择器

层次选择器根据层次关系获取特定元素。

1、后代选择器

示例：$("p span") 选取p元素里的所有的span元素（注：后代选择器选择父元素所有指定选择的元素，不管是儿子级，还是孙子级）

2、子选择器 $("parentchild")

示例：$("pspan") 选择p元素下的所有span元素 （注：子选择器只选择直属于父元素的子元素）

3、同辈选择器 $("prev+next")

描述：选取紧接在prev元素后的next元素，返回元素集合

示例：$(".one+p") 选取class为one的下一个p同辈元素集合

4、同辈选择器 $("prev~siblings")

描述：选取prev元素后的所有siblings元素，返回元素集合

示例：$("#two~p")选取id为two的元素后所有p同辈元素集合

三、过滤选择器

1基本过滤选择器

1、 :first

描述：选取第一个元素，返回单个元素

示例：$("p:first") 选取所有p元素中第一个p元素

2、 :last

描述：选取最后一个元素，返回单个元素

示例：$("p:last") 选取所有p元素中最后一个p元素

3、 :not(selector)

描述：去除所有与给定选择器匹配的元素，返回元素集合

示例：$("input:not(.myClass)") 选取class不是myClass的input元素

4、 :even

描述：选取索引是偶数的所有元素，索引从0开始，返回元素集合

5、 :odd

描述：选取索引是奇数的所有元素，索引从0开始，返回元素集合

6、 :eq(index)

描述：选取索引等于index的元素，索引从0开始，返回单个元素

7、 :gt(index)

描述：选取索引大于index的元素，索引从0开始，返回元素集合

8、 :lt(index)

描述：选取索引小于于index的元素，索引从0开始，返回元素集合

9、 :focus

描述：选取当前获取焦点的元素

2内容过滤选择器

1、:contains(text)

描述：选取含有文本内容为text的元素，返回元素集合

示例：$("p:contains('我')") 选取含有文本“我”的元素

2、:empty

描述：选取不包含子元素或者文本元素的空元素，返回元素集合

示例：$("p:empty") 选取不包含子元素或者文本元素的空p元素（p/p）

3、:has(selector)

描述：选取含有选择器所匹配的元素的元素，返回元素集合

示例：$("p:has(p)") 选取含有p元素的p元素（pp//p）

4、:parent

描述：选取含有子元素或者文本的元素，返回元素集合

示例：$("p:parent") 选取含有子元素或者文本元素的p元素（pp//p或者p文本/p）

3可见性过滤选择器

1、:hidden

描述：选取所有不可见的元素，返回元素集合

2、:visible

描述：选取所有可见的元素，返回元素集合

4属性过滤选择器（返回元素集合）

1、[attribute]

示例：$("p[id]") 选取拥有id属性的p元素

2、[attribute=value]

示例：$("input[name=text]") 选取拥有name属性等于text的input元素

3、[attribute!=value]

示例：$("input[name!=text]") 选取拥有name属性不等于text的input元素

4、[attribute^=value]

示例：$("input[name^=text]") 选取拥有name属性以text开始的input元素

5、[attribute$=value]

示例：$("input[name$=text]") 选取拥有name属性以text结束的input元素

6、[attribute*=value]

示例：$("input[name*=text]") 选取拥有name属性含有text的input元素

7、[attribute~=value]

示例：$("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述：合并多个属性过滤选择器

5表单对象属性过滤选择器（返回元素集合）

1、:enabled

描述：选取所有可用元素

2、:disabled

描述：选取所有不可用元素

3、:checked

描述：选取所有被选中的元素（单选框，复选框）

示例：$("input:checked") 选取所有被选中的input元素

4、:selected

描述：选取所有被选中的选项元素（下拉列表）

示例：$("select option:selected") 选取所有被选中的选项元素

四、表单选择器（返回元素集合，使用相似）

1、:text

描述：选择所有的单行文本框

示例：$(":text")选取所有的单行文本框

2、:password

描述：选择所有的密码框

3、:button

描述：选择所有的按钮

4、:checkbox

描述：选择所有的多选框

jQuery基本筛选选择器实例代码

本文实例为大家分享了jQuery基本筛选选择器的具体代码，供大家参考，具体内容如下

!DOCTYPE

html

html

head

meta

http-equiv="Content-type"

content="text/html;

charset=utf-8"

/

title/title

link

rel="stylesheet"

href="imooc.css"

type="text/css"

script

src=""/script

/head

body

h2基本筛选器/h2

h3:first/:last/:even/:odd/h3

div

class="left"

div

class="div"

pdiv:first/p

p:even/p

/div

div

class="div"

p:odd/p

/div

div

class="div"

p:even/p

/div

div

class="div"

p:odd/p

/div

div

class="div"

p:even/p

/div

div

class="div"

pdiv:last/p

p:odd/p

/div

/div

script

type="text/javascript"

//找到第一个div

$(".div:first").css("color",

"#CD00CD");

/script

script

type="text/javascript"

//找到最后一个div

$(".div:last").css("color",

"#CD00CD");

/script

script

type="text/javascript"

//:even

选择所引值为偶数的元素，从

开始计数

$(".div:even").css("border",

"3px

groove

red");

/script

script

type="text/javascript"

//:odd

选择所引值为奇数的元素，从

开始计数

$(".div:odd").css("border",

"3px

groove

blue");

/script

h3:eq/:gt/:lt/h3

div

class="left"

div

class="aaron"

p:lt(3)/p

/div

div

class="aaron"

p:lt(3)/p

/div

div

class="aaron"

p:eq(2)/p

/div

div

class="aaron"

/div

div

class="aaron"

p:gt(3)/p

/div

div

class="aaron"

p:gt(3)/p

/div

/div

script

type="text/javascript"

//:eq

//选择单个

$(".aaron:eq(2)").css("border",

"3px

groove

blue");

/script

script

type="text/javascript"

//:gt

选择匹配集合中所有索引值大于给定index参数的元素

$(".aaron:gt(3)").css("border",

"3px

groove

blue");

/script

script

type="text/javascript"

//:lt

选择匹配集合中所有索引值小于给定index参数的元素

//与:gt相反

$(".aaron:lt(2)").css("color",

"#CD00CD");

/script

h3:not/h3

div

class="left"

div

input

type="checkbox"

name="a"

/

pAaron/p

/div

div

input

type="checkbox"

name="b"

/

p慕课/p

/div

div

input

type="checkbox"

name="c"

checked="checked"

/

p其他/p

/div

/div

script

type="text/javascript"

//:not

选择所有元素去除不匹配给定的选择器的元素

//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$("input:not(:checked)

+

p").css("background-color",

"#CD00CD");

/script

/body

/html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

jQuery基本选择器选择元素使用介绍

复制代码

代码如下:

html

xmlns=""

head

!--

1.基本选择器：是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找

jQuery选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种

--

title/title

!--使用jQuery基本选择器选择元素：一个页面包含两个div标记，其中一个用于设置ID属性，另一个用于设置Class属性；我们再增加一个span标记，全部元素初始值均为隐藏，然后通过jQuery基本选择器显示相应的页面标记。--

script

src="jquery-1.9.1.js"

type="text/javascript"/script

style

type="text/css"

body{font-size:12px;text-align:center;}

.clsFrame{width:300px;height:100px}

.clsFrame

div,span{display:none;float:left;width:65px;height:65px;border:solid

1px

#ccc;margin:8px}

.clsOne{background-color:#eee}

/style

script

type="text/javascript"

$(function

()

{

//ID匹配元素

$('#divOne').css('display',

'block');

})

$(function

()

{

//元素名匹配元素

$('div

span').css('display',

'block');

})

$(function

()

{

//类匹配元素

$('.clsFrame

.clsOne').css('display',

'block');

})

$(function

()

{

//匹配所有元素

$('*').css('display',

'block');

})

$(function

()

{

//合并匹配元素

$('#divOne,span').css('display',

'block');

})

/script

/head

body

div

class="clsFrame"

div

id="divOne"

ID/div

div

class="clsOne"

CLASS/div

spanSPAN/span

/div

/body

/html

jQuery选择器基础入门教程

本文实例讲述了jQuery选择器用法。分享给大家供大家参考，具体如下：

什么是jQuery选择器

使用JavaScript操作页面上得DOM元素时，首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。

在jQuery中则完全不同，jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象，并且将对象以jquery对象的形式返回。

首先来看看什么是选择器。

//根据id获取jQuery对象

var

jQueryObject=$("#testDiv");

上例中使用了id选择器，选取id为testDiv的DOM对象并将它放入jQuery对象，最后返回了一个jQuery对象。

现在通过jQueryObject变量就可以操作testDiv图层了，因为jQueryObject是一个jQuery对象，所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容：

jQueryObject.html("修改后的HTML内容");

通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。

jQuery选择器的强大在于提供了丰富的选择器，如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。

jQuery选择器核心函数

jQuery选择器调用的是jQuery核心函数：

jQuery(EXPRESSION,[econtext]);

这个函数接收一个包含选择器表达式的字符串，然后用这个字符串去匹配一组元素。

jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数，或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式（通常由CSS选择器组成），然后根据这个表达式查找所有匹配的元素。

默认情况下，如果没有指定context参数，$()将在当前的HTML

document中查找DOM元素：如果指定了context参数，如一个dom元素集jQuery对象，则会在这个context中查找。在jQuery1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。

参数说明如下：

~Expression：必选参数，选择器表达式。

~Context：可选参数，选择器上下文

~jQuery，选择器返回的jQuery对象，jQuery对象，jQuery对象是一个集合，可以使用链式语法调用各种jQuery函数。

Context参数能够缩小选择器的范围，加快查找速度。

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

希望本文所述对大家jquery程序设计有所帮助。

关于jquery选择器代码详解(四)和jQuery中基本选择器有哪些?并写出示例代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。