文章目录
一、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系列文章中详细介绍