jQuery效果_jquery new撖寡情-CSDN博客

本文链接：https://blog.csdn.net/lolhahahaha/article/details/119037656

文章目录

1、jQuery对象和DOM对象相互转换
2.jQuery效果
3.属性操作
- 3.1属性操作
4.内容设置
5.元素操作
6.jQuery事件
7.其他方法

1、jQuery对象和DOM对象相互转换

var myvideo = document.querySelector('video');//DOM对象
$(myvideo);//DOM对象转换为jQuery对象
$('video')[0];//jQuery对象转换为DOM对象
$('video').get(0);//jQuery对象转换为DOM对象

2.jQuery效果

2.1普通动画

2.1.1显示show

show([speed,[easing],[fn]]) 参数都可以省略
easing：切换效果
fn：回调函数，每个动画完毕后执行的函数

2.1.2隐藏hide

同上

2.1.3切换toggle

同上

2.2滑动动画

2.2.1下拉动画slidedown()

2.2.2.上拉动画slideup()

2.2.3滑动切换slidetoggle()

2.3事件切换hover()

hover(over{},out{}) 参数可以省略
如果只写一个函数，那么鼠标经过和离开都会触发函数

2.4动画队列

2.4.1停止排队stop()

停止上一次动画，一定要写在动画函数前

2.5淡入淡出效果

2.5.1淡入fadeIn()

2.5.2淡出fadeOut()

2.5.3切换fadeToggle()

2.5.4渐进到某个透明度fadeTo()

opacity:透明度，0~1之间

自定义动画animate()

animate(params,speed,easing,fn):params属性必须要写
params：想要更改样式的属性，以对象形式传递

3.属性操作

3.1属性操作

3.1.1获取/更改属性prop()

3.1.2获取/更改元素自定义属性attr()

3.1.3获取/更改元素自定义属性data()

以内存的形式获取和存放属性值，不会改变DOM

4.内容设置

4.1获取元素内容html()

4.2获取元素文本内容text()

4.3获取设置表单值val()

val()等价原生js里的value

4.4获取祖先元素里的内容parents()

4.5保留n位小数toFixed()

5.元素操作

5.1遍历元素

jQuery的隐式迭代是遍历所有的元素，执行相同的操作，要执行不同的操作时，隐式迭代就不行了

each()方法1

$("selector").each(function(index,domEle){ xxx,  })

相当于进行了for循环，对每个元素赋予了一个index索引值，并将每个DOM对象提取了出来
然后通过将需要改变的参数放入数组中，在循环中利用索引号调用参数，就可以实现对每个元素进行不同的操作

each()方法2
主要用于遍历数据

$.each($("selector"),function(index,domEle){})

5.2创建、添加和删除元素

5.2.1创建

$("<di}></>")

5.2.3添加

内部添加：

element.append("元素")//将元素放在element中的匹配元素的内部的最后面，类似于原生的appendChild
element.prepend("元素")//将元素放在element中的匹配元素的内部的最前面

外部添加：

element.after("元素")//将元素放置在element中的匹配元素的后面
element.before("元素")//将元素放置在element中的匹配元素的前面

删除

element.remove()//删除element中的匹配元素本身
element.empty()//删除element中的匹配元素的所有子节点
element.html("")//清空element中的匹配元素内容，注意括号内是空字符串，这个方法和empty一样

5.3获取元素尺寸大小位置

jQuery 提供多个处理尺寸的重要方法：

5.3.1获取元素本身大小

width()
height()

5.3.2获取元素及padding大小

innerWidth()
innerHeight()

5.3.3获取元素整体大小（不包含margin/参数为true时包含）

outerWidth()
outerHeight()

5.3.4获取元素位置offset()//以文档为基准，跟父元素没关系

5.3.5获取元素位置position()//以父亲为基准，如果父亲没有定位，则以文档为基准。且不能设置

5.3.4获取元素被卷头部/左侧scrollTop()/scrollLeft()

6.jQuery事件

6.1事件处理on()

6.1.1实现事件处理(一个或多个事件)：

$("selector").on("click",function(){})

6.1.2实现事件委托：

$("selector").on("click","后代元素",function(){})

6.2事件解绑off()

6.2.1解绑所有

.off()//不带参数

6.2.2解绑指定事件

.off("click")

6.2.3解除事件委托

.off("click","后代元素")

6.3只触发一次的事件one()

6.4自动触发事件trigger()

6.4.1普通自动触发事件

$("selector").click()

注意：自动触发事件的前提是，这个元素绑定了此事件

6.4.2 trigger()自动触发事件

$("selector").trigger("click");

6.4.2 triggerHandle()自动触发事件

不会触发元素默认行为

6.5jQuery事件对象event

当元素绑定了事件并且触发了事件后，就会产生事件对象event
event中包含了各种参数
可以利用event阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation

7.其他方法

7.1对象拷贝extend()

$.extend([deep]/*不写此参数默认浅拷贝false*/,target，object1,...)

可以同时拷贝多个对象，单相同的类型的数据后拷贝的数据会覆盖前面的数据

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
深拷贝和浅拷贝的示意图大致如下：

图片描述
在这里插入图片描述

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
三、赋值和浅拷贝的区别
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

所以，如果是浅拷贝的话，修改新的对象中的复杂参数也会影响拷贝对象中的参数