python之路_前端基础之jQuery入门3-白红宇

python之路_前端基础之jQuery入门3

阅读量：5313 次

发布时间：2019-06-14

本文共 3278 字，大约阅读时间需要 10 分钟。

一、文档操作

（一）插入儿子元素

1、添加到指定元素内部的后面

　　$(A).append(B)：B作为A的最后一个儿子元素；$(A).appendTo(B)：A作为B最后一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

2、添加指定元素内部的前面

　　$(A).prepend(B)：B作为A的第一个儿子元素；$(A).prependTo(B)：A作为B第一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

（二）插入兄弟元素

1、添加到指定元素外部的后面

　　$(A).after(B)：B作为兄弟元素紧挨A元素后面；$(A).insertAfter(B)：A作为兄弟元素紧挨B元素后面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

2、添加到指定元素外部的前面

　　$(A).before(B)：B作为兄弟元素紧挨A元素前面；$(A).insertBefore(B)：A作为兄弟元素紧挨B元素前面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

（三）移除和清空元素

　　remove（）：从DOM中删除所有匹配的元素；empty()：删除匹配的元素集合中所有的子节点。

（四）替换

　　$(A).replaceWith(B)：A被B替换；$(A).replaceAll(B)：A替换所有的B，应用实例：

（五）克隆

　　clone()，具体应用实例如下：

Title

稳重，我们能赢

二、绑定事件

（一）事件绑定

　　常见的事件类型有：click(点击触发)、hover（悬浮触发）、focus（聚焦触发）、blur（非聚焦触发）、change（主要用于select标签，更改选中就会触发）、keyup（输入按键一弹起就会触发事件，如电商网站搜索框，用户每输入一个字符，都会帮你用户提示相关内容），绑定事件的语法如下：

jQuery对象.on(事件类型，function（）{})

Title

（二）事件委托

　　　同样以js部分讲到事件委托用到表格删除为例，删除事件委托实例如下：

$("table").on("click", ".delete", function () {        $(this).parent().parent().remove();                           // 删除当前行    });

三、动画属性

　　常见动画属性如下：

// 基本　　show()                                                 ---显示　　hide()                                                 ---隐藏　　toggle()                                               ---切换// 滑动　　slideDown()　　slideUp()　　slideToggle()// 淡入淡出　　fadeIn()　　fadeOut()　　fadeTo()　　fadeToggle()// 自定义　　animate()

　　左侧菜单动画实例：

四、each（）和data（）

1、each（）

　　each（function）方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

　　但是需要注意如下：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法，也就是说上述的例子可以直接用如下形式实现：

　　通过return false语句可以提前结束循环。

　　each(迭代对象，function（index,value）），应用实例：

2、data（）

　　data(key,value)：在匹配的元素上存储任意相关数据，如下：

　　data（key)：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值，如下：

　　以上的应用实例如下表单的增删改实例：

    
         Title    
     
                                     序号                 姓名                 爱好                 操作            
          
                                     1                 alex                 吹逼                                                            
                             2                  egon                  杠娘                                                              
          
     
     
         
      姓名
    
      爱好