首页 前端知识 【jQuery】简单总结归纳

【jQuery】简单总结归纳

2024-05-07 13:05:42 前端知识 前端哥 88 389 我要收藏

通过浏览器调试:

在这里插入图片描述

我们通过数组可以类比出: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

<p>Hello</p><p>Hello China</p><p class="selected">Hello World</p>

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

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

Hello World

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

//html

<p>Hello</p><p>Hello China</p><p class="selected">Hello World</p>

  • parent():得到元素的父元素

  • find(exp):返回匹配给定选择器的后代元素

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

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

HelloHello World

  • nextAll():返回当前元素所有兄弟元素

  • next():返回当前元素耳朵下一个兄弟元素

六、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研发岗),26岁小伙斩获三面,收获Offer定级P6

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

蚂蚁金服(Java研发岗),26岁小伙斩获三面,收获Offer定级P6

蚂蚁金服(Java研发岗),26岁小伙斩获三面,收获Offer定级P6

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

蚂蚁金服(Java研发岗),26岁小伙斩获三面,收获Offer定级P6


Java面试核心知识点笔记

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

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

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

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

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

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7330.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!