jQuery学习笔记2之jQuery选择器

喜欢ヅ旅行 2022-07-30 13:13 137阅读 0赞

**一、jQuery的基本选择器**

下面是利用jQuery的基本选择器进行的演示，跟css的规则一致

元素名直接调用元素名

class用.classname

id用\#idname

并列的直接用“,”隔开

$(function()\{

//使用id选择器 选择id=btn1的元素  
$("\#btn1").click(function()\{  
//alert("btn1 is clicked...");  
$("\#one").css("background","\#ffbbaa");  
\});  
$("\#btn2").click(function()\{  
//alert("btn1 is clicked...");  
$(".mini").css("background","\#ffbbaa");  
\});  
$("\#btn3").click(function()\{  
//alert("btn1 is clicked...");  
$("div").css("background","\#ffbbaa");  
\});  
$("\#btn4").click(function()\{  
//alert("btn1 is clicked...");  
$("span,\#two").css("background","\#ffbbaa");  
\});

\});

**二、jQuery层次选择器**

如果想通过DOM元素之间的层次关系来获取特定的元素，例如：后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器:

![Center][]

实际应用代码：//$("body div").css("background","\#ffbbaa");//body内所有div  
//$("body > div").css("background","\#ffbbaa");//body的所有子div  
//$("\#one+div").css("background","\#ffbbaa");//id为one的所有相邻div  
//$("\#one~div").css("background","\#ffbbaa");//id为one的所有兄弟div  
//$("\#one span").css("background","\#ffbbaa");//不相邻选不上  
//$("\#one").nextAll("span").css("background","\#ffbbaa");//id为one的后所有的span元素  
//$("\#one").nextAll("span:first").css("background","\#ffbbaa");//id为one的后第一个span元素

**三、过滤选择器**

**1.基本过滤选择器**

:first选取第一个元素

:last选取最后一个元素

:not(selector)去除所有与选择器匹配的元素

:even选取所有索引为偶数的元素（从0开始）

:odd 选取所有索引为奇数的元素（从0开始）

:eq(index)选取索引等于index的元素

:gt(index) 选取索引大于index的元素

:lt(index) 选取索引小于index的元素

:header 选取所有标题元素，如：h1,h2,h2...

:animated 选取当前正在执行动画的所有元素

如：$("span:first").css("background","\#ffbbaa");//选取第一个span元素

$("div:animated").css("background","\#ffbbaa");//选取执行动画的div

**2.内容过滤选择器**主要规则体现在它所包含的子元素和文本内容上

:contains(text)选取含有文本text的元素

:empty选取不包含子元素或者文本的元素

:has(selector) 选取含有选择器所匹配元素的元素

:parent选取含有子元素或者文本的元素

如：$("div:contains('move')").css("background","\#ffbbaa");//选取含有move文本的div

**3.可见性过滤选择器**

:hidden选择所有不可见元素

:visible选择所有可见元素

**4.属性过滤选择器**

\[attribute\]选择拥有此属性的元素

\[attribute=value\] 选择指定属性值为value的元素

\[attribute!=value\] 选择指定属性值不为value的元素

\[attribute^=value\]选择以指定属性值为value开始的元素

\[attribute$=value\] 选择以指定属性值为value结束的元素

\[attribute\*=value\] 选择包含指定属性值为value的元素

**5.子元素过滤选择器需要在：前输入一个空格**

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

:first-child选取每个父元素的第一个子元素

:last-child选取每个父元素的最后一个子元素

:only-child选取父元素的唯一的子元素

**6.表单对象属性过滤选择器**

:enabled选择所有可用的元素

:disabled选择所有不可用的元素

:checked选择所有被选中的元素

:selected选择所有选中的元素

**7.表单选择器**

:input选取所有的input textarea select 和button元素

:text选取所有的单行文本框

:password选取所有的密码框元素

:radio选取所有的单选框

:checkbox选取所有的多选框

:submit选取所有的提交按钮

:image选取所有的图像按钮

:reset选取所有的图像按钮

:button选取所有的按钮

:file选取所有的上传域

:hidden选取所有的不可见元素

[Center]: /images/20220724/ff616e645bf0425289e3fd26b8360385.png

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery-学习笔记02【基础——JQuery选择器】

> [Java后端学习路线笔记汇总表【黑马程序员】][Java_ _] > > 1. [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_

一时失言乱红尘/ 2022年10月30日 09:28/ 0 赞/ 132 阅读

相关 jQuery学习笔记（一）使用jQuery选择器（荐）

jQuery预先的javascript的编程，提供了计划所有css3下的标准选择器，开发者可以利用这些选择器轻松选择各种元素，供javascript使用。重要的是jQuer

悠悠/ 2022年08月05日 16:18/ 0 赞/ 170 阅读

相关 JQuery学习系列2--选择器

层次选择器 •\-> 后代选择器 $(祖代后代) //后面多有的 •\-> 子代选择器 $(父>子) //后面一个 •\-> 紧随选择器 $(前+后) // $(前+\

梦里梦外;/ 2022年08月05日 07:38/ 0 赞/ 96 阅读

相关 jQuery学习笔记2之jQuery选择器

一、jQuery的基本选择器下面是利用jQuery的基本选择器进行的演示，跟css的规则一致元素名直接调用元素名 class用.classname id用\idna

喜欢ヅ旅行/ 2022年07月30日 13:13/ 0 赞/ 138 阅读

相关 jQuery选择器(2)

jQuery选择器之基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM

我不是女神ヾ/ 2022年06月10日 07:09/ 0 赞/ 125 阅读

相关 jQuery参考之jQuery选择器

jQuery 选择器请使用我们的 [jQuery 选择器检测器][jQuery] 来演示不同的选择器。 <table> <tbody> <tr> <

超、凢脫俗/ 2022年05月30日 05:51/ 0 赞/ 157 阅读

相关 JQuery复习之JQuery选择器

今日目录： 1、Jquery 选择器介绍 2、基本选择器 3、属性选择器 4、其他

清疚/ 2022年05月23日 06:36/ 0 赞/ 200 阅读

相关 Jquery选择器2

主要介绍带有属性的选择器的用法： <!DOCTYPE html> <html lang="en"> <head> <meta char

叁歲伎倆/ 2022年05月16日 04:10/ 0 赞/ 128 阅读

相关 jQuery学习——入门jQuery选择器之层次选择器

今天说的是层次选择器，那层次选择器有哪几个？ $("ancestor descendant")：选取parent元素后所有的child元素 $("parent

古城微笑少年丶/ 2021年09月25日 16:22/ 0 赞/ 411 阅读

相关 jquery选择器--学习笔记

一、jquery选择器风格: jquery中的选择器完成继承了CSS的风格。利用JQ选择器，可以非常便捷和快速找出特定的DOM元素，然后为它们添加相应的行为。使用CSS选择

怼烎@/ 2021年09月16日 13:58/ 0 赞/ 260 阅读