JQuery-2

最新推荐文章于 2022-10-31 19:06:39 发布

Monkey_nini

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/Monkey_nini/article/details/107792377

版权

jQuery属性操作

prop（）获取元素固有的属性值
prop（“属性”，“属性值”）设置固有属性值
attr（）获取元素的自定义属性===》原生getAttribute()
attr（“属性”，“属性值”）设置自定义属性=====》原生setAttribute()
data（）数据缓存，存放在元素的内存里面
并不会修改DOM元素结构，一旦页面刷新，之前的数据会移除
h5自定义属性，data-index

jQuery内容文本值

获取元素内容 html() ===》有标签显示标签，相当于innerHTML
获取元素文本内容text () ===》只显示文本内容，相当于innerText
获取表单值 val() ===》相当于value
也可以设置值

在这里插入图片描述

jQuery元素操作

each (function (index,dom){
})
回调函数第一个参数是索引号，第二个参数是dom元素，不是jQuery元素
遍历元素====》相同元素做不同操作
隐式迭代====》相同元素做相同操作
$.each(对象或者数组,function(index,dom){
})
主要用于处理数据
创建元素 $()，把想要的标签写在里面
添加元素
内部添加：==== > 父子关系
append，把元素放在最后面
prepend，把元素放在最前面
外部添加：==== >兄弟关系
before，放在目标元素的前面
after，放在目标元素的后面
删除元素
remove，删除本身
empty，删除元素的所有孩子
====> 相当于html("")

jQuery事件

事件注册
mouseover
mouseout
blur
focus
change
keydown
keyup
resize
scroll
事件处理
on() 为元素绑定一个或多个事件
on() 事件委托
事件绑定在父元素，触发对象是子元素，this指向子元素
（虽然触发的是儿子，但是根据事件冒泡，触发执行后面的函数）
on() 给未来动态创建的元素绑定事件
off() 解绑事件
one() 事件只触发一次
trigger(事件名) 自动触发事件
元素.事件()
triggerHandler(事件名) 不会触发元素的默认行为
事件对象

jQuery其他

$.extend拷贝对象

浅拷贝会将obj对象里面的复杂数据类型的地址赋值给了targetObj，所以他们的msg指向同一个对象，如果targetObj将age修改，obj也会跟者修改。

在这里插入图片描述
深拷贝把里面的数据完全赋值一份给targetObj，如果里面有不冲突的属性，会合并在一起，然后重新开辟一个新的空间，两个对象相互独立，将targetObj的age修改不会影响obj的age

如果是简单数据类型，属性相同会覆盖，不同会保留。
如果是复杂数据类型，要看是深拷贝还是浅拷贝，即括号里的第一个参师是true还是false，深拷贝属性相同会覆盖，不同会保留，浅拷贝则不会，直接覆盖，前提是对象引用名一样。

多库共存

第二个方式自定义$符号

jQuery 插件

依赖jQuery，所以要先引入jQuery，再引入插件

在这里插入图片描述

瀑布流
懒加载
当我们页面滑动到可视区域，才显示图片
可以提高网页下载速度，也能减轻服务器负载
全屏滚动
bootstrap JS插件

jQuery尺寸、位置操作

尺寸
位置
offset 相对于文档的位置，与父级元素无关

position 相对于带有定位的父级的位置，如果都没有，则相对于文档
只能获取，不能设置
scrollTop scrollLeft 元素被卷去的头部和左侧
----------------回到顶部的显示和隐藏

-------------------------返回顶部