jQuery实用笔记

前言

希望本篇文章能多你有所帮助

---

一、Dom对象和jQuery对象的互换

1、Dom对象转化为jQuery对象

（1） 先有DOM对象
（2）${DOM对象}就可以转换成jQuery对象

2、jQuery对象转化为Dom对象

（1）先有jQuery对象
（2）jQuery对象[下标]取出对应的DOM对象

---

二、jQuery选择器(***重点)

1、基本选择器

（1）内容

（2）操作

a、

b、

c、

d、

e、

2、层级选择器

（1）内容

（2）操作

a、

b、

c、

d、

3、基本过滤选择器

（1）内容

a、:first

b、:last

c、:not(selector)

d、:even

e、:odd

f、:eq(index)

g、:gt(index)

h、:lt(index)

（2）操作

a、:first

b、:last

c、:not(selector)

d、:even

e、:odd

f、:eq(index)

g、:gt(index)

h、:lt(index)

4、内容过滤选择器

（1）内容

内容文档查询即可

（2）操作

5、属性过滤选择器

（1）内容

（2）操作

6、表单过滤器（内容过多，使用时可以查阅文档）

（1）操作

---

三、jQuery元素的筛选

查文档

---

四、jQuery的属性操作

1、jQuery-html()、text、value()方法

（1）内容

（2）操作

a、html

b、text

c、val

2、jQuery-attr()和prop()方法

（1）内容

五、DOM 的增删改

内部插入：
appendTo() a.appendTo(b)： 把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) ：把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入：
insertAfter() a.insertAfter(b) ：得到 ba
insertBefore() a.insertBefore(b)： 得到 ab

替换:
replaceWith() a.replaceWith(b) ：用 b 替换掉 a
replaceAll() a.replaceAll(b) ：用 a 替换掉所有 b

删除：
remove() a.remove(); 删除 a 标签
empty() a.empty(); 清空 a 标签里的内容

---

六、jQuery的css样式操作

addClass() ： 添加样式
removeClass() ： 删除样式
toggleClass() ： 有就删除，没有就添加样式。
offset() ： 获取和设置元素的坐标。

---

七、动画操作

1、基本动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

2、淡入淡出动画

fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换

---

总结

看了一天的jQuery，再次感到前端内容的无穷无尽。
jQuery和js有着异曲同工之妙，可以说，jQuery是js的一种简化的写法。还有许多内容本篇博客没有提到，还望见谅。希望这篇文章对你有所帮助，后续在有时间的时候博主会继续更新相关的博客，fighting！