jQuery

jQuery

jQuery常用插件网站

jQuery插件库:http://www.jq22.com/

jQuery之家 http://www.htmleaf.com/

image-20220511120535980

image-20220511120442620

image-20220511121306456

jQuery事件/on()绑定多个事件

image-20220511212937678

image-20220511213117237

image-20220511213204247

image-20220511213453823

image-20220511213721368

image-20220511213645740

jQuery解绑事件off()

image-20220512100851678

jQuery绑定只执行一次事件one()

image-20220512101036029

jQuery自动触发事件trigger()

和定时器一起使用可以达到自动触发指定事件的效果

image-20220512102412152

image-20220512101253845

第三种方法不会触发元素的默认行为

image-20220512102353313

jQuery事件对象

image-20220512102819012

jQuery对象拷贝

deep默认为浅拷贝,设置成true则为深拷贝

浅拷贝和深拷贝的区别:浅拷贝传址,深拷贝传值

浅拷贝不考虑自身,重复字段会完全覆盖

深拷贝保留自身的情况下,重复的覆盖

传址就是共享一个地址,会同时改变,一个改变了,另一个也会改变

传值就是独立的值,一个改变,另一个不会改变

image-20220512104118502

image-20220512102913985

image-20220512103536278

jQuery入口函数

image-20220511121722046

image-20220511121604692

jQuery顶级对象$,等价于jQuery

image-20220511121844822

jQuery对象和DOM对象的区别

image-20220511122247326

jQuery和DOM对象的相互转换

jQuery获取到的是一个伪数组集合,若只有1个元素,那它的索引就是0

image-20220511154625900

image-20220511154418719

jQuery常用选择器

image-20220511154809753

image-20220511154951118

image-20220511155522555

image-20220511155908213

jQuery直接修改样式-css

jQuery自带隐式for循环【隐式迭代】,会遍历选出来的伪数组,依次遍历,进行样式的赋值和修改

多组样式使用对象封装起来,用逗号分开。属性名和值可以不加引号,当css就好啦

image-20220511175223854

jQuery直接修改样式-get

image-20220511175042444

jQuery通过添加自定义类名修改样式

image-20220511175745447

jQuery修改html内容

html()/text()

image-20220511190735333

val()

image-20220511190836014

image-20220511190809469

image-20220511190928449

jQuery判断类名是否存在

image-20220511173559792

jQuery获取当前元素在伪数组中的索引

$(this).index()

jQuery排他思想

通过$(this).siblings选中其他兄弟节点

image-20220511173821289

判断复选框是否全选

妙啊!checked返回的是伪数组的长度,自然也是选中的复选框的个数

image-20220511190159311

链式编程

按顺序执行代码

image-20220511174719260

jQuery效果

  • 显示隐藏
  • 滑动
  • 淡入淡出
  • 自定义动画

image-20220511180313724

image-20220511180853141

页面设置动画

image-20220511212243016

jQuery动画队列停止-stop()

防止一次性触发多个动画进行展示,使用stop()方法就会停止之后的动画,仅展示当前动画

image-20220511181921108

image-20220511181842921

获取jQuery对象自带的属性值使用prop()

image-20220511183118274

image-20220511183134404

获取jQuery对象自定义属性值使用attr()

image-20220511183340474

数据缓存-data()【不常用】

获取dom中data-index自定义属性的值的时候,只需要element.data("index")即可

不用写前缀data-,而且返回的是数字类型

image-20220511184843467

image-20220511184923773

jQuery尺寸

image-20220511192339087

jQuery位置

offset()

image-20220511211231819

position()

image-20220511211413537

scrollTop()/scrollLeft()

image-20220511212024738

image-20220511211817183

遍历-each

image-20220511191409182

遍历-$.each()

主要用于处理数据,可以遍历对象

image-20220511191938866

image-20220511192057791

jQuery多库共存

image-20220512104846116

image-20220512104609046

解决方法【换个名字呗】:

image-20220512104825556

posted @ 2023-06-06 09:04  迷路之本  阅读(2)  评论(0编辑  收藏  举报