【jQuery】简单总结归纳

通过浏览器调试：

我们通过数组可以类比出：jQuery 对象其实是一个长度为 4 的 dom 对象数组

button #mae01……button#mae04

所以 jQuery 对象其实就是一个 DOM 对象数组

jQuery 对象本质：DOM 对象的数组 +jQuery 提供的一系列函数功能

jQuery 对象与 js 对象的转换：

jQuery->js: $(DOM 对象);

js->jQuery：jQuery 对象 [下标]

通过数组下标取出 dom 对象

jQuery 对象的迭代：

C++

Java

Python

JavaScript

四、jQuery 选择器

与 CSS 选择器 类似

基本选择器

后代选择器

子选择器

并集选择器

伪类选择器

五、jQuery 元素的筛选

• eq(index): 获取该 index 个元素（从 0 开始）

// 获取第 2 个 p 元素：

Hello China

`$(“p”).ep(2);

`

//html

Hello

Hello China

Hello World

• filter(exp): 获取与指定 exp 匹配的元素

//js 获取类名为 select 的元素:

Hello World

$(“p”).filter(“.selected”)`

//html

Hello

Hello China

Hello World

// 从所有段落开始，进一步搜索 span 元素，即后代选择器

$(“p”).find(“span”)

HelloHello World

六、jQuery 属性标签

不传参数是获取，传参数是设置

• html()：起始标签和结束标签中的内容，与 DOM 对象的 innerHTML 相同

• txet()：起始标签和结束标签中的内容，与 iDOM 对象的 nnerText 相同

• val()：表单项的 value 属性值，与 DOM 对象的 value 相同

• attr()、prop(): 设置和获取属性值

七、DOM 的增删改

内部插入

appendTo(content) a.appendTo(b); 把 a 加到 b 里面 添加到最后面

prependTo(content) a.prependTo(b); 把 a 添加到 b 里面 添加到最前面

外部插入

insertAfter(content) a.insertAfter(b); 把 a 插入到 b 的后面

insertBefore(content) a.insertBefore(b); 把 a 插入到 b 的前面

替换

replaceWith(content|fn) a.replaceWith(b) 用 b 替换所有的 a

replaceAll(selector) a.replaceAll(b) 用 a 替换所有的 b

删除

empty() a.empty() 把 a 掏空，把 a 里面的所有元素都删除

remove([expr]) a.remove(b) 所有的 a，是 b 的话就会删除 a.remove() 删除 a

八、CSS 样式操作

// 参数可以传类名

addClass(class|fn) 添加样式

removeClass(class|fn) 删除样式

toggleClass(class|fn) 替换样式 (有就删除，没有就添加)

offse(class|fn) 获取和设置元素的坐标

// 即给 p 标签添加上 selected 类的属性

$(“p”).addClass(“selected”);

九、jQuery 动画

第一个参数：动画执行时间

第二个参数：动画的回调函数，即动画完成后，自动调用的函数

基本动画：

show() 将隐藏元素显示

hide() 将显示元素隐藏

toggle() 替换

淡入淡出动画：

fadeIn() 淡入

fadeout() 淡出

fadeTo() 在指定时长内慢慢将透明度修改到指定值

透明度：0(完全透明)-1(完全可见)

fadeToggle() 淡入 / 淡出切换

十、jQuery 事件操作

Java 面试核心知识点笔记

其中囊括了 JVM、锁、并发、Java 反射、Spring 原理、微服务、Zookeeper、数据库、数据结构等大量知识点。

Java 中高级面试高频考点整理

最后分享 Java 进阶学习及面试必备的视频教学

Java 面试核心知识点笔记

其中囊括了 JVM、锁、并发、Java 反射、Spring 原理、微服务、Zookeeper、数据库、数据结构等大量知识点。

[外链图片转存中…(img-EzBmFXVm-1714513240971)]

Java 中高级面试高频考点整理

[外链图片转存中…(img-usV7LqYV-1714513240971)]

[外链图片转存中…(img-EGywbKXK-1714513240972)]

最后分享 Java 进阶学习及面试必备的视频教学

[外链图片转存中…(img-HRQx1GW2-1714513240972)]

本文已被 CODING 开源项目：【一线大厂 Java 面试题解析 + 核心总结学习笔记 + 最新讲解视频 + 实战项目源码】收录