jQuery的基本概念以及this和${this}的使用

一、基本概念理解

1.JQuery的方法可以链式操作，是基于每个方法返回的是当前操作的jQuery对象

演示代码如下：

$('.box').css('width','100px').css('background','red');

2.jQuery下最大的对象是:jQuery对象 ，可以简写为$

window.jQuery=window.$=$=jQuery;

3.原生js和jQuery对象元素的转化

3.1原生js转为JQuery对象的方法是通过$()

例如$(this),&(document),$(window) 即可将原生js转为JQuery对象

document.querySelect('.box');//表示原生的js对象
$(document.querySelect('.box'));//表示jQuery对象
let box=$('.box');//表示JQuery的对象，并且可利用此方法获取到类名为.box的元素，将其保存在变量box中

3.2jQuery对象转为原生js对象，通过使用get（）或者利用中括号实现

$('.box').get(0);//$('.box')返回的结果相当于是一个伪数组，通过调用get(index)方法获得原生的js对象。index表示索引



$('.box')[0];//中括号加索引的方式实现

二、jQuery使用面向对象时，其中this和$(this)中的使用

1.jQuery使用面向对象时，其this指向当前操作的实例对象

2.jQuery中 事件函数中的回调函数，其中的this指向当前操作的元素对象。$(this)是在方法click内，此处的$(this)表示的是当前调用click方法的对象$(".btn")，就是表示当前对象，当前调用该方法的对象

this.btnList=$('.btn');
this.btnList.on('mouseover', function() {  //不可以用箭头函数   因为这里的使用到了当前元素 如果使用箭头函数则${this}就指向了父级
// $(this):当前操作的按钮btnList
// $(this).index():当前操作的按钮索引，按钮的索引和图片的索引是一一匹配的，知道按钮的索引，也就知道图片的索引。这里的${this}是原生js中的this转为Jquery的元素对象，事件处理的回调函数中的this指向当前的操作元素
    });

注意，如果回调函数使用箭头函数的方式编写，则其内部的this 将会指向事件处理函数的父级