理解jQuery

---

一、jQuery是什么？

使用jQuery之前，先了解它是一门什么技术，有什么优势，再学习如何使用它

1. What? （是什么？）

• jQuery是一个JS函数库，封装了DOM操作（CRUD）和Ajax
• slogan: Write Less, Do More

2. Why?（有哪些优点？）

• 强大的选择器，方便快速查找dom元素
• 读写合一，读/写数据用的是同一个方法。例如：html()，读取标签体文本不需要传参数，设置文本需要传一个标签体文本字符串
• 隐式遍历（迭代），可以一次性操作多个dom元素
• 链式调用，例如：jQuery(selector).show()返回的是jQuery(selector)对象，如果需要再次通过它来调用其他方法，可以写成jQuery(selector).show().hide()
• 事件处理
• 动画
• DOM操作（CUD）
• css
• 浏览器兼容，JS原生有很多浏览器不兼容的问题，用jQuery可以解决这些问题

3. How?（如何使用？）

• 引入：本地引入和CDN远程引入；分成测试版（未压缩版）和生产版（压缩版）
• 使用：jQuery向外暴露的是jQuery核心函数，可以直接使用；调用jQuery函数得到的返回值，是一个伪数组对象，这里称其为jQuery对象，jQuery函数和jQuery对象是jQuery的“两把利器”

二、jQuery的“两把利器”

1. jQuery函数

有两种用法：当成普通函数调用，和当成普通对象，使用它的属性和方法

当成普通函数调用：$(‘param’)

• param是function: 绑定文档加载完成监听
• param是选择器字符串：查找所有匹配的dom元素，并返回包含所有dom元素的jQuery对象
• param是dom元素：将dom元素封装成jQuery对象返回，常用的是$(this)
• param是标签字符串：创建dom元素对象并包装成jQuery对象返回

当成普通对象：$.xxx

• each(obj/arr , function(key, value){})：遍历一个对象/数组，回调函数内可以获取对象的属性/数组的元素
• trim(str)：去除字符串中的空格

2. jQuery对象

jQuery对象是一个伪数组，是执行jQuery函数的返回值，它的基本行为有：

• length/size()，获取dom元素的个数
• [index]，获取指定下标的dom元素
• index(), 获取当前dom元素在所有兄弟元素中的下标
• each(function(index , domEle){})，遍历dom元素, this指向正在遍历的dom元素

---

总结

本文章介绍了jQuery，它是一个优秀的JS函数库，引入jQuery之后，可以直接使用jQuery函数和jQuery对象，它们分别有很多API，会在jQuery系列文章中详细介绍