正课:
-
什么是jQuery
-
如何使用jQuery
-
查找
-
什么是jQuery
jQuery是第三方提供的执行DOM操作的极简化的函数库
第三方: 先下载,才能用
执行DOM操作: 学jQuery还是在学DOM的增删改查,事件绑定
极简化: jQuery是对DOM API的终极简化
函数库: jQuery是用函数解决一切问题!
为什么: 2个主要原因:
- API极简化: 4个方面: 增删改查,事件绑定,动画,ajax
- 解决了大部分兼容性问题: 凡是jQuery让用的都没有兼容性问题
何时: 几乎所有项目或框架都用jQuery开发。
- 如何使用jQuery:
下载:
版本: 1.x 兼容旧浏览器
压缩版: 去掉空字符,注释,极简化变量名
体积小,便于下载
可读性查
何时: 生产环境中才用
未压缩版: 包含完备的空字符,注释,以及见名知意的变量名
可读性好
体积大,下载慢
何时: 学习和开发时使用
2.x 不再兼容旧浏览器
3.x 不兼容旧浏览器
鄙视: jQuery 3.x的新特性:
1. 所有代码运行在严格模式下
2. 支持for…of循环遍历(以前用.each()函数)
3. 新的动画API: requestAnimationFrame()
4. 支持Promise
引入: 2种方式: - 引入项目本地文件夹中的jquery.js文件
- 引入CDN网络中共享的jquery.js文件
原理:
引入jquery.js其实是在window中添加一个新类型jQuery
包括: 1. 构造函数: 创建该类型的子对象
2. 原型对象: 保存该类型的子对象共用的API
要使用jQuery简化版API,必须先创建jQuery类型的子对象。
因为jQuery是执行DOM操作的API,所以jQuery对象都要封装一个或多个DOM元素。
如何创建jQuery对象: 2种:
- 用选择器查找DOM元素,并封装进jQuery对象中:
var $jq=new jQuery(“选择器”)
用选择器查询DOM元素,并封装进新创建的jQuery对象中
因为: function jQuery(){
return new xxxx()
}
所以: 创建jQuery对象时,不用写new
var j q = j Q u e r y ( " 选 择 器 " ) 因 为 : w i n d o w . jq= jQuery("选择器") 因为: window. jq=jQuery("选择器")因为:window.=jQuery
所以: 可进一步简化为: var j q = jq= jq=(“选择器”) - 直接将获得的DOM元素封装为jQuery对象
var j q = jq= jq=(DOM元素)
什么是jQuery对象: jQuery对象是封装一组DOM元素对象,并提供操作DOM对象的简化版API的 类数组对象
jQuery API三大特性:
-
一个函数两用: 没给新值,默认读取
给了新值,变为修改 -
自带遍历效果: 对jQuery对象调用一次API,等效于自动对内部每个DOM元素都调用一次API
-
?
-
查找: 按选择器查找:
如何: var j q = jq= jq=(“选择器”)
包括: jQuery支持所有CSS选择器,并扩展了部分新选择器 -
基本选择器: 同CSS
5个: #id, element, .class, *, select1,select2,…