• 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()

    所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 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

     

  • 相关阅读:
    Vue.js快速入门之七:系统权限管理
    Springboot 异步Async教程
    Android codec2 视频框架 之应用
    Unity入门02——Unity工作原理
    lammps输出模拟结果的4种方法
    bootstrap.xml 和applicaiton.properties和applicaiton.yml的区别和联系
    PlanetScale云数据库
    安卓部分手机使用webview加载链接后白屏(Android低版本会出现的问题)
    Flutter基础组件:开关、进度组件、图片组件、图标组件
    【申博攻略】北京交通大学2023年学术型博士招生简章有哪些变化?
  • 原文地址:https://blog.csdn.net/weixin_53155105/article/details/126313700