jQuery 选择器

jQuery网页脚本语言核心之一

概述:

1. 选择器是jQuery的基础

2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器

3. 可简化代码

什么是jQuery选择器?

层叠样式表

良好地继承了css选择器语法,还继承了其获取页面元素便捷高效的特点

于css不同,jQuery选择器获取元素后,为该元素添加的是行为

有良好的兼容性

优势

1. 简洁的写法

(1) $(选择)

2. 完善的处理机制

(1) 简洁,避免某些错误

类型:

可通过css选择器和过滤选择器两种方式选择元素,每种又有不同的方法来获取元素

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

(1) 基本选择器

(2) 层次选择器

(3) 属性选择器

2. 通过 过滤选择呢亲选择元素

(1) 基本过滤选择器

(2) 可见性过滤选择器

详解:

通过css选择器选取元素

jQuery支持大多数css选择器

最常用的有:基本选择器,层次选择器和属性选择器

在jQuery中它们构成的规则于css选择器完全相同

1. 基本选择器

1. 继承了css选择器的语法和功能

2. 主要由元素标签名,class,id和多个选择器组成

3. 可以实现大多数页面元素的查找

4. 主要包括:

(1) 标签选择器

(2) 类选择器

(3) Id选择器

(4) 并集选择器

(5) 全局选择器

补充:jQuery中还有交集选择器:

语法:$(AB)

一个元素,必须保证AB两个属性同时具备(与并集选择器正好相反)

2. 层次选择器

1. 通过DOM之间的层次关系来获取元素

2. jQuery有四种常用的层次选择器:

(1) 后代选择器

(2) 子选择器

(3) 相邻选择器

(4) 同辈选择器

层级选择器之间的相似与不同点: 1)层级选择器都有一个参考节点 2)后代选择器包含子选择器的选择的内容 3)一般兄弟选择器包含相邻兄弟选择的内容 4)相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下.

在层次选择呢亲中,后代选择器和子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替:

(1)使用next()房代替prev-next(相邻元素选择器)

(2)使用nextAll()方法代替prev`siblings(同辈元素选择器)

3. 属性选择器

属性选择器:语法标识:([])

什么是属性选择器?

1. 顾名思义,属性选择器就是通过HTML元素的属性选择元素的选择器

2. 与css中的属性选择器语法构成完全一致

条件属性选择器

  条件属性选择器共包括6种,其中[attribute!=value]选择器是jQuery自己拓展的选择器

[attribute!=value]

[attribute!=value]选择器选择属性值不等于value的元素,返回集合元素

[注意]class="test test1"的元素也符合$('[class!="test"]')的情况,因为属性选择器的严格匹配机制

[attribute^=value]

[attribute^=value]选择器选择属性值以value开始的元素,返回集合元素

[attribute$=value]

[attribute$=value]选择器选择属性值以value结束的元素,返回集合元素

[attribute*=value]

[attribute*=value]选择器选择属性值包含value的元素,返回集合元素

[attribute|=value]

[attribute|=value]选择器选择属性值等于value或以value-开头的元素,返回集合元素

[attribute~=value]

[attribute~=value]选择器选择属性值用空格分隔的值中包含value的元素,返回集合元素

[注意]$('[class~="test"]')选择器包含class="test"的元素的情况

通过条件过滤选取元素

过滤:把不要的滤掉,留下需要的

语法标识: (:)

主要通过特定的过滤规则来筛选出所有的DOM元素

同样:过滤规则与css中伪类语法相同,即选择器都以一个冒号(:)开头。冒号前是需要过滤的元素

栗子:

(1)a:hover 表示当鼠标指针移过<a>元素时

(2)Tr:visited 表示当鼠标指针访问过<tr> 元素后

经典栗子:

实现列表隔行变色

注意:奇偶过滤选择器 从0开始

1. 基本过滤选择器

注:$(“:header”) 选取的时所有h1`h6的标签

让文本框获取焦点:$(“input”).focus();

过滤选择器是通过元素所处的位置来获取元素的

2. 可见性过滤选择器

通过元素的显示状态,即元素显示或隐藏来选取元素

:visible:控制眼睛能看到

:hidden:控制本有但隐藏的元素

$(“:hiddden”).show()可以拿出不可见的代码(比如js,jQuery)

Css:type=”hidden”  隐藏域

在可见性选择器中需要注意的是,选择器 :hidden获取的元素不仅包括样式属性display为“none”的元素,还包括文本隐藏域和visibility:hidden之类的元素

3. 补充

表格样式:将相邻边线折成一个,并且填充表格内的空格

jQuery选择器注意事项

1. 选择器中含有特殊符号的注意事项

W3C 规范中,规定属性值中不能含有某些特殊字符,但在实际开发过程中,可能会遇到表达中含有'# 和“.”等特殊字符的情况,如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。

HM 代码如下:

<div id="id#a">aa</div>
<div id="id [2] ">cc</div>

按照普通的方式来获取,例如:

$("#id#a") ;
$("#id[2]");

以上代码不能正确获取到元素,正确的写法如下。

$("#id\\#a") ;
$("#id\\[2\\]");

2. 选择器中含有空格的注意事项

选择器中的空格也是不容忽视的,多一个空格或少一个空格,可能会得到截然不同的长。

HTML 代码如下。

<div class="test">
    <div style="display:none;">aa</div>
    <div style="display:none; ">bb</div>
    <div style="display:none;">cc</div>
    <div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

使用如下jQuery 选择器分别来获取它们。

//带空格的jQuery选择器
var $t a= $(".test :hidden") ;
//不带空格的jQuery选择器
var $t b= $ (".test:hidden") ;
var len a = $t_a.length;
var len_b= $t_b.length;
//输出4
alert("$('.test :hidden') = "+len_a) ;
//输出3
alert ("$ ('.test:hidden')= "+1en_b) ;

之所以会出现不同的结果,是因为后代选择器与过滤选择器存在不同。

//带空格的jQuery 选择器
var $t a= $ (".test :hidden") ;
以上代码选取的是class 为“test”的元素内部的隐藏元素。
而代码:
/1不带空格的jQuery选择器
var $t b= $(".test:hidden") ;
选取的是隐藏的class 为“test" 的元素。

最后:

(C) 房上的猫 。 保留所有权利。  https://www.cnblogs.com/lsy131479/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

3151
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

1113
来自专栏小古哥的博客园

JavaScript事件对象与事件的委托

事件对象 包含事件相关的信息,如鼠标、时间、触发的DOM对象等  js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: doc...

3415
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

3484
来自专栏柠檬先生

css3弹性盒子模型——回顾。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

2168
来自专栏SeanCheney的专栏

Scrapy CSS选择器

官方文档的CSS选择器太简短,整理了一个比较全的。 * 选择所有节点 #...

3559
来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

3076
来自专栏前端儿

CSS- 文本超出指定宽度后隐藏并显示为省略号

  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   

1022
来自专栏calmound

JavaScript基础2---控制权DOM操作

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素,属性和文本的树结构(...

3444
来自专栏天天

jQuery初识(20171025)

974

扫码关注云+社区

领取腾讯云代金券