【JQuery】JQuery入门——知识点讲解(2.2)

简介: 本期主要介绍JQuery入门——知识点讲解(二)

1. 层级选择器


CSS 层级选择器类似,可以通过层级关系获取对应标签对象。

A B

获得 A 元素内部的所有的 B 元素。(祖孙)--后代

A>B 获得 A 元素下面的所有 B 子元素。(父子)

A+B

获得 A 元素同级下一个 B 元素(兄弟)

A~B

获得 A 元素之后的所有 B 元素(兄弟)

代码准备:

image.png

image.png

2. 属性选择器(通配符选择器)


我们可以通过属性选择器,以属性名或者值来匹配对应标签

[ 属性名 ]

获得有 指定属性名 的标签对象。

[ 属性名 = 值 ]

获得 指定属性名 等于 指定值 的标签对象

[ 属性名 *= 值 ]

获得 指定属性名 含有 指定值 的标签对象

多个属性选择器可以组合使用

[ 选择器 1][ 选择器 2][ 选择器 3] ,多个属性同时过滤。 where .. and ... and ...

了解:

[ 属性名 != 值 ]

获得 指定属性名 不等于 指定值 的标签对象

[ 属性名 ^= 值 ]

获得 指定属性名以指定值 开头 的标签对象

[ 属性名 $= 值 ]

获得 指定属性名以指定值 结尾 的标签对象

代码准备:

image.png

3. 基本过滤选择器


通常我们在获取到一系列标签对象之后,会有一些筛选需求,

这里就可以使用基本过滤选择器。

:first

第一个

:last

最后一个

:even

偶数,索引从 0 开始计数

:odd

奇数

:not(..) 除了指定内容。例如: 1234:not(3) --> 124

例如: div:not(div:first)

:eq(index) 获取指定索引的元素 =

:gt(index) 大于 n 个 >

:lt(index) 小于 n 个 <

代码准备:

image.png

image.png

4. 表单属性选择器


:checked

选中(单选 radio ,多选 checkbox<input type="..." checked="checked">

:selected

选择(下列列表 <select><option selected="selected">

:enabled

可用

:disabled

不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

代码准备:

image.png

image.png

5. jQuery 操作 class 属性


addClass() 给指定标签的 class 属性追加样式

removeClass() 将标签指定的 class 属性移除

代码准备:

image.png

扩展:

使用 jQuery 直接操作 CSS :

JQ.css("CSS 属性 ");

获取某个 CSS 属性值。

JQ.css("CSS 属性 ","CSS 属性值 ");

设置某个 CSS 属性值。

image.png

6. 属性操作:prop()attr()


prop("属性名");

获取元素的某个属性的值 ---------- 等同于 attr(" 属性名 ")

prop(" 属性名 ", 属性值 );

设置元素的某个属性为指定值 ---- 等同于 attr(" 属性名 ", 属性值 )

removeProp("属性名 ");

删除元素的某个属性的值 ----------- 等同于 removeAttr(" 属性名 ");

注: prop 命令是 jQuery1.6 版本后的新操作方式,用以替代 attr 命令。

1.6 之前版本,若 prop 命令不管用,则使用 attr 即可

代码准备:

相关文章
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
51 0
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
69 0
|
2月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
6月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
46 0
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
64 0
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
49 0
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
70 0
|
JavaScript 前端开发
js和jQuery知识点总结(二)
js和jQuery知识点总结