专栏首页个人随笔jQuery 选择器

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 条评论
登录 后参与评论

相关文章

  • 初识CSS3

    1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

    房上的猫
  • 玩转SpringCloud(F版本) 二.服务消费者(1)ribbon+restTemplate

    在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的。Spring cloud有两种服务调用方式,一种是ribbon...

    房上的猫
  • 程序猿(媛)的葵花宝典-- 必备idea 插件plugins 提高编码效率

    因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入外部插件的方式

    房上的猫
  • 从零开始学 Web 之 CSS(一)选择器

    CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

    Daotin
  • CSS复合选择器

    CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。

    乐心湖
  • Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地
  • CSS选择器

    大象无痕
  • –ECMAScript 6 - 解构赋值

    大象无痕
  • 前端基础-CSS伪类选择器和类选择器一起使用

    cwl_java
  • 爬取数据不是非要Python

    最近有朋友问是否可以不用Python编程就能爬取数据并分析,想起来正好之前写了一篇文章,关于Web Scraper的使用,由于之前忘记标记原创,今天就再发一次。...

    用户1564362

扫码关注云+社区

领取腾讯云代金券