jQuery之效果、数据缓存、属性操作、内容文本值、元素操作

jQuery 效果
jQuery 给封装了很多动画效果最为常见的如下: 

c9ab45b2f527416db44aa6915674a3fb.png

 fbe829a697024633b340efe40a683f3f.png

3d84868dd6c64b8eabdba8a62e3acecd.png

a733afa5a4304b7c867edbddbddd63ab.png 

 2. 显示参数
(1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

b084f8721fc9497897a6c6a6390f906e.png

60855524eb6d4b7eb1375c23fd613e48.png 

7299bba4b249483f8c0828332fed2166.png 

 事件切换

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

(3)如果只写一个函数,则鼠标经过和离开都会触发它

bb2f7cc6a8d8491bb9eb56e0233672ab.png

3300eb88d6644282a3117472a5be2d0e.png 

动画队列及其停止排队方法 

501966750eb24153a8baa5c815607c0c.png

d9dc3b2d207d4e37b577a1c6e806967a.png 

f693226d06ba4beda9c7dc3df16caaaa.png 

a1a87212337c4d2f89c634769b479ab9.png 

347ca5dd7d624b8c8a130d7ef309b23a.png

8fc8249daa634847a20a922ae4b79eed.png

46f641130e3840ee98f140c73dc0b4a1.png 

89aba5513b9d47efbceb54d697277993.png 

 700251eea9a646c7a8b02b03a2f7116b.png

 

自定义动画 animate

3de2472472b14d87aaa39702f4972566.jpg

 

 2. 参数

(1)params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

33c7a5583daf4310949ce8617635de61.png

jQuery 属性操作,设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。

3707bf8699234c20a67a188af3d607f8.png

caeb31efb81e46e6ab6bdab2ab5aca99.png 

设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1” 

86d572f84e66420082e6df49ed4b0f40.png

92767b9ff7a643fc96081ceebefbf34a.png 

数据缓存 data()

data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。

22fc302a2bc342978cffe37d1a9c3805.png

40e6b16d006e4820a8d5be3645003f57.png 

 jQuery 内容文本值,主要针对元素的内容还有表单的值操作。

3f72a67991b54d698f35ed4948c1c4f7.png

de708f7efeca479f8f901c724a4a9e2e.png 

4f6d4deaae0d4d8e93a7279df7e54a40.png 

 9209fe8e6cbb430188a23914007dd3b6.png

jQuery 元素操作    遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。

88ee37bc4604474f8e6bb9027c04827e.png

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个

2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象

3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)

820d7b62444949f08bdde4165fc290b3.png

6de78a61663e4476856d3cdb14c08d96.png

 1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象

2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

eb3a30d37ef7444a8491418fa3b090f3.png

 a5d1758ed4a744bf898b3d7489e30c0d.png

 创建元素

06db24f7ade140089ba2394a41a7c6d9.png

 9cfc591e84a84352ae470f032c753817.png

4802c54bac464de8a4b18b6573a7d0aa.png 

把内容放入匹配元素内部最后面,类似原生 appendChild。

5c2e60d75c7a4cbd8d4e937be21a31a3.png

94fae4c0dfbe450ab6060f12549e648d.png 

1、内部添加元素,生成之后,它们是父子关系。

2、外部添加元素,生成之后,他们是兄弟关系。

e9403905525b423198c1caa5b5a999e0.png

f03e672320184753aded37e0a4c998e0.png 

 删除元素

2238a7361ffa47969a8c6a82960d442b.png

remove 删除元素本身。

empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。

9ee61579e0104e98978412b4dd4b986f.png

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值