jQuery--＞快捷简单的JavaScript库

jQuery封装了常用的JavaScript常用的功能代码

jQuery的优点：

1. 轻量级。核心文件才十几kb，不会影响页面的加载速度
2. 跨浏览器兼容，基本兼容了现在的主流浏览器。
3. 链式编程，隐式迭代
4. 对事件、样式、动画支持简化dom操作
5. 支持插件扩展开发
6. 免费开源

jQuery的功能：

jQuery的出现就是为了快速方便的操作DOM，提高开发效率。

jQuery的使用步骤：

1. 引入jQuery文件
2. 使用即可

jQuery的入口函数：

$();

$是什么意思？

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。

2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

什么是 jQuery 对象？什么是DOM对象？

• 用原生 JS 获取来的对象就是 DOM 对象
• jQuery 方法获取的元素就是 jQuery 对象。
• jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
• （注意）只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

jQuery对象和DOM对象如何相互转化

DOM对象-->jQuery对象：$(DOM对象)--穿马甲
jQuery对象-->DOM对象:jQuery对象[index],index是索引号

jQuery基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$(“选择器”) --- 里面选择器直接写 CSS 选择器即可，但是要加引号

jQuery层级选择器

jQuery设置样式

jQuery筛选选择器

筛选选择器有什么作用？

​ 可以快捷(语法简单)的找到指定的元素，完成相应操作。

jQuery样式操作

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

1 .参数只写属性名，返回的是属性值

2 . 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

3 . 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

jQuery进行类样式操作

以操作类样式， 注意操作类里面的参数不要加点。

• 添加类
  $(“div”).addClass(“current”);
• 移除类
  $(“div”).removeClass(“current”);
• 切换类
  $(“div”).toggleClass(“current”);

设置或获取元素固有属性值prop()

• 获取属性语法：prop(“属性”)
• 设置属性语法：prop(“属性”，“属性值”)

设置或获取元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

• 获取属性语法：attr(“属性”)
• 设置属性语法：attr(“属性”,“属性值”)

jQuery内容文本值

示例：

• 普通元素内容html（）；
  可以得到标签的所有内容。
  

• 普通元素文本内容text（）；
  得到指定标签的文本内容。

• 表单的值val（）；
  得到指定标签的value值
  

  jQuery元素操作------遍历

• 语法1
  $(“需要遍历的标签名称”).each(function(index, element){ 对遍历内容添加属性})
• 语法2
  jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
  $.each(object，function (index, element) { xxx; }）
  
  其中object是Object类型，指定需要遍历的对象或数组，function是 指定的用于循环执行的函数，index是遍历元素的索引号，element是每个dom对象

jQuery元素操作------创建元素

jQuery元素操作------添加元素

• 内部添加元素

element.append(“内容”)
将内容添加到匹配元素内部最后面

element.prepend(“内容”)
将内容添加到匹配元素内容的最前面

• 外部添加元素

element.after(“内容”)
将内容放入目标元素后面
element.before(“内容”)
将内容放到目标元素前面
：内部添加元素完成后，他们的关系是父子；外部添加元素完成后，他们是兄弟。

jQuery元素操作------删除元素

element.remove(),删除匹配的元素
element.empty(),删除匹配的元素集合中的所有子节点
element.html(""),清空匹配的元素内容

• remove删除元素本身；
• empty()和html("")作用等价，元素里面的内容，只不过html()还可以设置内容。

jQuery事件注册

- 单个事件注册 element.事件(function(){ })
例如给div插件添加

jQuery事件绑定和解绑

• 绑定事件
  jQuery对象.on(事件名称，执行的功能);
  例如：$("#btn").on(“click”,function(){
  alert(“你点到我了！”)
  })

• 解绑事件
  jQuery对象.off(事件名称)

  jQuery事件的切换

• 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

• 方式一：单独定义
  $(元素).事件方法名1(要执行的功能);
  $(元素).事件方法名1(要执行的功能)；
  …

• 方式二：链式定义
  $(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能)；
  …

a