​开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第八天，点击查看活动详情

一.概述

• 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 容器对象){
      执行功能;
  }