[前端笔记021]JavaScript之jQuery

前言

• 本笔记参考视频，李立超:BV1mG411h7aD p182-p199
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git

jQuery简介

• jQuery是JavaScript库，使DOM事件，动画，AJAX等操作变得更简单
• 可以自己下载然后在<script>标签引入，也可以使用公共CDN，公共服务器上的静态资源，使用网址链接引入
• 常用版本为，1.x和3.x，主要是兼容性不同，需要兼容IE6-8的时候使用1.x
• 核心函数，$获取jQuery，有两种使用方式，一种作为对象使用，‘$.isArray()`使一个工具类，封装了一些方法和属性；第二种是作为函数调用，根据参数的不同发挥不同的作用，函数/选择器/DOM对象/HTML代码，jQuery(函数)。
• 函数作为jQuery参数时，函数会在文档加载完毕之后执行，
• 选择器字符串作为jQuery参数时，jQuery会自动在网页中查找元素，但得到的对象不是原生DOM对象，而是包装后的新对象，不能直接调用原生DOM的方法，可以用$命名开头加以区分。
• DOM对象作为jQuery参数时，可以将DOM对象转化为jQuery对象，从而使用jQuery对象的方法
• 将HTML代码作为参数，会根据HTML代码来创建元素对象。

jQuery对象

• 通过jQuery核心函数获取到的对象就是jQuery对象，可以简化DOM操作，本质是一个DOM对象的数组，可以通过索引获取jQuery对象中的DOM对象，这个DOM对象是原生的
• 当修改jQuery对象时，会自动修改jQuery中的所有元素，这称为隐式迭代，比如$li.text(‘hhh’)，li的本文全为hhh。
• $li.text()读取文本时，返回所有标签的中的文本；‘$li.attr(‘id’)`读取属性时，返回第一个标签的属性。
• 通常情况下，jQuery对象的返回值依然是一个jQuery对象，这样就可以在调用一个方法后继续调用其他方法，这称为链式调用，如$li.text(‘hhh’).attr(‘id’)

常用方法：

• addClass(字符串/字符串数组/函数)，添加一个或多个class；使用函数时，函数中的形参可以获取当前元素的Index和className，方便操作，同时此时this为元素对应的原生DOM对象，若想使用jQuery的方法，可以用$()转换
• clone()，深拷贝jQuery对象，参数为true是同时复制jQuery对象的绑定事件
• unwrap() 删除外层父元素，wrap()为当前元素添加容器，wrapAll() 为当前的所有元素作为整体在外添加一个容器，wrapInner()为当前元素添加一个内部容器，参数可以查文档了解
• append()，向父元素的子元素后边添加一个子元素；appendTo()将子元素添加到父元素的子元素后边；preappend()，向父元素的子元素前边添加一个子元素；appendTo()将子元素添加到父元素的子元素前边；text()，html()，获取设置元素的文本内容/HTML代码。
• 还有各种添加删除兄弟元素的方法，还有删除所有子元素，移除元素，替换元素的方法
• 读取/设置属性，attr()/prop()，两者在读取布尔值属性是有区别，设置属性时是两个参数；还有删除属性等方法
• 样式操作，大部分使用css()完成，还有其他一些设置和获取样式的方法，像height()/innerHeight()这些
• 筛选jQuery对象，eq()，参数为数字，表示索引为num的元素，直接返回jQuery对象，还有odd()/even()等方法；slice()，切片，包括前面不包括后边；filter(‘选择器’)，在多个元素对象中筛选合适的元素。还有not()，去除符合的；has()，选择有该元素的；is()，选择是的。end()将jQuery对象恢复到筛选前的状态，方便链式调用。add()向jQuery对象中添加元素。contents()，获取jQuery对象中所有元素的内容。addBack()，用过对象.contents()再使用addBack()可以将对象自己加回去。

事件处理

• 可以通过指定方法来为jQuery对象绑定事件，对象.click(function(){})等，可以在回调函数中使用return false来取消默认行为和冒泡，回调函数同样有事件对象，是包装后的新对象。
• 也可以使用on(‘事件’,function(){})，来绑定事件；使用off()取消绑定，使用on(‘事件’,‘选择器’,function(){})来快速完成事件的委派；one()来绑定一次性事件。