jQuery个人学习笔记

jQuery就是一个封装了很多方法的js库，学习jQuery就是i学习方法的使用。

使用jQuery：

1. 引入jQuery文件
2. 写一个入口函数
   2.1$(document).ready(function(){ });
   2.2.$(function(){ alert("jQuery") });

jQuery版本：

1. 1.*** 支持老浏览器比如ie678 停止更新
2. 2.***不支持 停止更新
3. 3.***不支持 更新中
4. compressed 压缩版 用于发布 uncompressed 为压缩版，用于学习，开发

jQuery特性

1. 隐式迭代
2. 链式编程：一个方法返回的是一个jQuery对象，既然是jQuery对象就可以继续点出jQuery方法来

jQuery入口函数和window.onload的区别

1. windows.onload不能有多个，jq入口函数可以有多个
2. 执行时机不同：jq要快于windows.onload
   a.jQuery入口函数要在Dom树加载完毕后执行
   b.windows.onload要等页面上所有资源（Dom树/外部css/js链接/图片）加载完毕后执行

jQuery文件结构：

1. 引入一个js文件，是会执行这个js文件中的代码的
2. jQuery文件是一个自执行函数
3. 这个自执行文件就是给windows对象添加一个jQuery属性和$属性
4. $和jQuery是等价的，是一个函数
5. $是一个函数，传递参数不同，效果也不一样
   5.1如果参数传递的是一个匿名函数–入口函数
   5.2如果参数传递的是一个字符串(’#one’)/(
   123456789
   )–选择器/创建一个标签
   5.3如果参数传递的是dom对象，就会把dom对象转换成jQuery对象

dom对象和对象Query

1. dom对象：原生js选择器获取到的对象
   特点：只能调用dom方法或者属性，不能调用jQuery的属性或者方法

2. jQuery对象：用jQuery选择器获取到的对象，jQuery变量用$开头，是一个伪数组，是dom对象的一个包装集
   特点：只能调用jQuery的方法或者属性，不能调用dom对象的属性或者方法

3. dom对象转换成jQuery对象：
   

4. jQuery对象转换成dom对象
   4.1使用下标取出来：
   
   4.2使用jQuery的方法 get():
   

获取、设置文本 text()

1. 获取文本–text()方法不给参数：
   1.1会获取到这个标签中所有的文本，包括后代元素的文本
   
   1.2获取标签为div元素们的文本：包含多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到

2. 设置文本–text()方法给参数，参数就是要设置的文本：
   2.1 设置文本会覆盖原来的内容，如果设置的文本包含标签，是不会把标签解析出来的
   
   2.2 设置标签为div元素们的文本：包含多个dom元素的jQuery对象，通过text()方法设置文本，会把所有dom元素都设置上

获取、设置样式 css()

1. 获取样式–css()方法设置参数为要获取的样式名：
   1.1获取标签为div元素们的样式：包含多个dom元素的jQuery对象，只能获取第一个dom对象的样式
   
2. 设置样式–css(样式名，样式值)，设置的样式是行内样式：
   2.1 设置id为div1的样式
   
   2.2 设置标签为div元素们的样式：包含多个dom元素的jQuery对象，通过css()方法设置样式，隐式迭代会把所有dom元素都设置上

获取、设置表单内容 val()

1. val()方法，不给参数就是获取
2. val()方法，给参数就是设置

选择器

jQuery选择器是jQuery为外卖提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象

show() hide()

show()方法本质上是改变display属性为block
hide()方法本质上是改变display属性为none

mouseover 事件 mouseenter 事件

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter 事件只在鼠标移动到选取的元素上时触发。

mouseleave 事件只有在鼠标指针离开被选元素时被触发。
mouseout 事件在鼠标指针离开任意子元素时也会被触发。

class类操作

1. addClass(‘类名 类名’) - 向被选元素添加一个或多个类
2. removeClass(‘类名 类名’) - 从被选元素删除一个或多个类，没有参数，移除全部类
3. toggleClass() - 对被选元素进行添加/删除类的切换操作
4. hasClass() - 判断一个元素有没有某个类，如果有返回true，如果没有返回false
   

jQuery动画

显示show()与隐藏hide()

1. 显示 show()
   参数1：代表执行动画的时长 毫秒数，也可以是代表时长的字符串（fast normal slow ）
   参数2：代表动画执行完毕后的回调函数
   1.1. 如果show()这个方法没有参数，那就没有动画效果
   
2. 隐藏 hide()
   参数1：代表执行动画的时长 毫秒数，也可以是代表时长的字符串（fast normal slow ）
   参数2：代表动画执行完毕后的回调函数
   2.1没有参数，没有动画效果
3. 切换 toggle()
   如果隐藏就显示，如果显示就隐藏

滑入slideDown()与滑出slideUp

4. 滑入 slideDown() 参数不填，默认400毫秒
5. 滑出 slideUp() 参数不填，默认400毫秒
6. 切换 slideToggle()

淡入fadeIn()与淡出fadeOut

7. 淡入 fadeIn() 参数不填，默认400毫秒
8. 淡出 fadeOut 参数不填，默认400毫秒
9. 切换 fadeToggle()
10. 淡入到哪里 fadeTo() 参数1：时间 参数2：透明度

自定义动画animate

参数1：必选的 对象 代表的是需要做动画的属性
参数2：可选 代表执行动画的时长
参数3：可选 easing 代表缓动还是匀速 swing linear默认swing
参数4：代表动画执行完毕后的回调函数（可以调动画）

动画队列与停止动画

stop()方法：停止动画效果
参数1：是否清除队列 是否停止其他动画
参数2：是否跳转到最终效果 是否完成当前动画
默认stop(false，false)

动态创建元素

原生js中创建节点：document.write(); innerHTML; document.createElement()
jQuery创建节点：html() $()
11. html():设置或者获取内容
1.1获取内容：html() 方法不给参数，获取到元素的所有内容
1.2设置内容：html()方法给参数 会把原来内容给覆盖，如果设置的内容中包含标签，是会把标签解析出来的
12. $():能创建元素，但是创建的元素只存在与内存中，如果要在页面上显示，就要追加

jQuery节点

添加节点

1. append()
   父元素.append(子元素) 作为最后一个子元素添加
2. prepend()
   父元素.prepend(子元素) 作为第一个子元素添加
3. before()
   元素A.before(元素B) 把元素B插入到元素A前面，作为兄弟元素添加
4. after()
   元素A.after(元素B) 把元素B插入到元素A后面，作为兄弟元素添加
5. appendTo()
   子元素.append(父元素) 作为最后一个子元素添加

清空节点

父元素.empty();

移除节点

自己元素.remove()；

克隆节点

clone(); 只存在内存中，如果要在页面上显示，就要追加
clone()方法参数不管是true还是false，都是会克隆后代节点的
clone()方法参数是true表示会把事件一起克隆到，如果是false就不会克隆事件 不给参数默认是false