一、了解jQuery
1,是什么(What)
- 一个JS函数库
- 封装简化DOM操作(CRUD)/Ajax
2,为什么用它(Why)
- 强大的选择器:方便快速查找DOM元素
- 隐式遍历(迭代):一次操作多个元素
- 读写合一:读数据/写数据用的是一个函数
- 链式调用:可以通过,不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
3,如何使用(How)
引入jQuery库
本地引入与CDN远程引入
测试版与生产版(压缩版)使用jQuery
使用jQuery函数:$/jQuery
使用jQuery对象:执行$()得到的
二、jQuery的两把利器
1,jQuery函数:$/jQuery:
jQuery向外暴露的就是jQuery函数,可以直接使用
当成一般函数使用:$(param)
param是function: 相当于window.onload = function(文档加载完成的监听)
- param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
- param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
- param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
- 当成对象使用: $.xxx
- each(obj/arr, function(key, value){}) 遍历
- trim(str) 去除首尾空格
2,jQuery对象
- 包含所有匹配的n个DOM元素的伪数组对象
- 执行$()返回的就是jQuery对象
基本行为:
- length/size(): 得到dom元素的个数
- [index]: 得到指定下标对应的dom元素
- each(function(index, domEle){}): 遍历所有dom元素
- index(): 得到当前dom元素在所有兄弟中的下标
三、属性/文本操作
- 操作标签的属性, 标签体文本
- attr(name) / attr(name, value): 读写非布尔值的标签属性
- prop(name) / prop(name, value): 读写布尔值的标签属性
- removeAttr(name)/removeProp(name): 删除属性
- addClass(classValue): 添加class
- removeClass(classValue): 移除指定class
- val() / val(value): 读写标签的value
- html() / html(htmlString): 读写标签体文本