一.概述

• jQuery是一个JS库
• 所谓的库实际上就是一个JS文件，里面封装了很多预定义的函数，目的是在使用时直接调用，不需要重复定义，简化了JS的编程

二.基本语法

1.对象获取和转换

• jQuery本质上虽然也是JavaScript，但如果想要使用jQuery的属性和方法那么必须保证该对象是jQuery对象，而不是JavaScript方式获得的DOM对象，二者的API方法不能混合使用，如果想要使用那么就要进行对象的转换

• JavaScript对象转为jQuery对象
  let jQuery对象 = $(JavaScript对象);

• jQuery对象转为JavaScript对象
  let JavaScript对象 = jQuery对象[索引];或let JavaScript对象 = jQuery对象.get(索引);

2.事件

• jQuery将事件封装成了方法，并且去掉了JavaScript中的.on语法，如 | 事件 | 说明 | | —- | —- | | load | 某个页面或图片加载完成 | | submit | 表单提交 | | click | 鼠标单击 | | dblclick | 鼠标双击 | | blur | 元素失去焦点 | | focus | 元素得到焦点 | | change | 改变域的内容 |

• 事件的绑定

  • 方法一：jQuery对象.事件名(执行的功能);如

    let jq = $("#btn");//根据属性获取jQuery对象
    jq.click(function(){
    事件触发时执行的代码;
    });//使用匿名方法指定触发事件时执行的功能

• 方法二：jQuery对象.on(事件名,执行的功能);如

  let jq = $("#btn");//根据属性获取jQuery对象
  jq.on("click",function(){
  事件触发时执行的代码;
  });//给jq对象绑定click事件，注意click需要加上双引号，并且使用匿名方法指定触发事件时执行的功能

• 事件的解绑

  • 语法：
    jQuery对象.off(事件名);

  • 如

    jq.off("click");//将click事件从该对象解除

• 注意：如果不指定需要解除的事件名，会将该对象绑定的所有事件都解除

3.遍历操作

• 方式一

  for(let i=0;i<容器长度;i++){
    执行功能;
  }

• 方式二

  容器对象.each(function(index,ele){
    执行功能;
  });

• 方式三

  $.each(容器对象,function(index,ele){
    执行功能;
  });

• 方式四

  for(ele of 容器对象){
    执行功能;
  }

三.选择器

1.基本选择器

• 类似于css中的选择器，用于获取元素

• jQuery中选择器的语法：$()

• 基本选择器如下： | 选择器 | 语法 | 作用 | | —- | —- | —- | | 元素选择器 | $(“元素名称”) | 根据类名获取元素对象数组 | | id选择器 | $(“#+id属性的属性值”) | 根据id属性获取元素对象 | | 类选择器 | $(“.+class属性的属性值”) | 根据类属性获取元素对象数组 |

2.层级选择器

• A和B是指标签名

3.属性选择器

• A是指标签名

4.过滤器选择器

• A表示标签名

5.表单属性选择器

四.DOM

1.操作文本

• 常用方法 | 方法 | 作用 | | —- | —- | | html() | 获取标签中的文本 | | html(value) | 设置标签的文本内容，如果文本含有html代码也会解析 |

2.操作对象

• 常用方法 | 方法 | 作用 | | —- | —- | | $(“元素”) | 创建一个元素对象 | | append(element) | 将子元素添加为最后一个子元素，由父元素对象调用 | | appendTo(element) | 将子元素添加为最后一个子元素，由子元素调用 | | prepend(element) | 将子元素添加为第一个子元素，由父元素对象调用 | | prepandTo(element) | 将子元素添加为第一个子元素，由子元素调用 | | before(element) | 将元素添加到调用该方法的元素前面 | | after(element) | 将元素添加到调用该方法的元素后面 | | remove() | 删除指定元素（删除自己） | | empty() | 清空子元素，自己仍然存在 |

3.操作样式

• 常用方法 | 方法 | 作用 | | —- | —- | | css(name) | 根据样式属性名获取css样式 | | css(name,value) | 设置css样式，name是样式属性名，value是值 | | addClass(value) | 给指定对象添加样式，value是样式的类名 | | removeClass(value) | 给指定对象删除样式，value是样式的类名 | | toggleClass(value) | 如果没有该样式则添加，如果有则删除，value是样式类名 |

4.操作属性

• 常用方法 | 方法 | 作用 | | —- | —- | | attr(name) | 获取指定属性的值 | | attr(name,value) | 设置指定属性的值 | | prop(name) | 获取指定属性的值（用于checked，selected属性），值为true或false | | prop(name,value) | 设置指定属性的值（用于checked，selected属性），值为true或false |