jQuery介绍Ⅱ

jQuery的节点操作

1. 创建节点

对应原生 js 中的 createElement（）；
$(html 格式的文本)
注意
（）中传递一个选择器的时候，就是获取页面中的 DOM 元素，传入一个 html 格式文本的时候，就是创建了一个 DOM 元素。

2. 插入节点

对应原生 js 中的 appendChild（）

内部插入
① 页面元素.append(要插入的元素)，放在页面元素的子元素位置，放在末尾

②appendTo()
要插入的元素.appendTo(页面元素)；

③prepend()
页面元素.prepend(要插入的元素) 放在子元素的最前面

④prependTo()
要插入的元素.prependTo(页面元素)

外部插入
① after()
页面元素.after(要插入的元素) 放在页面元素的下一个兄弟元素位置

② inserAfter（）
要插入的元素.insertAfter(页面元素)

③ before（）
页面元素.before(要插入的元素) 放在页面元素的上一个兄弟元素位置

④ insertBefore（）
要插入的元素.insertBefore(页面元素)

---

jQuery删除节点

1. empty（）
   把页面元素变成一个空标签，把所有子元素都删掉；

2. remove（）
   把自己从页面中移除；

---

jQuery 替换节点

1. replaceWith（）
   页面元素.replaceWith（替换元素）
2. replaceAll（）
   使用：替换元素.replaceAll（页面元素）

---

jQuery 的方法

ready（）事件
类似于 window.onload，会在页面所有资源加载完毕后执行，也叫做 jQuery 的入口函数；
简单写法：$(function(){})

each（）
类似于 forEach()

---

jQuery 的动画
标准动画

1. show() 显示
   show(时间，运动曲线，运动结束的回调函数)；
   举个栗子：
   $(‘div’).show(1000,‘linear’,function(){
   console.log(‘success’);
   })

2. hide() 隐藏

3. toggle() 切换
   注意：三种动画的使用方式一样

折叠动画

1. slideDown() 下滑显示
2. slideUp() 上滑隐藏
3. slideToggle（） 切换

渐隐渐显动画

1. fadeIn() 渐显
2. fadeOut() 渐隐
3. fadeToggle() 切换
4. fadeTo() 显示指定的透明度
   使用方法：fadeTo(时间，指定的透明度，运动曲线，回调函数)

综合动画

animate()
语法： animate({写css属性}，时间，运动曲线，函数)
举个栗子：
$(‘div’).animate({width:200,
height:100,
rigtht:30
},1000,‘linear’,()=>console.log(‘success’))

停止动画
jQuery 的动画有一个特点，当你触发多次这个动画时，它总会将这几次动画全部执行完毕才会停止。

1. stop()
   该方法会让动画立刻停止在当前运动到的位置；

2. finish()
   该方法也会让运动立刻停止，但是会让这次动画直接到达运动完成的位置；