1. 什么是jQuery:
jQuery是第三方开发的执行DOM操作的极简化的函数库
第三方: 下载才能用
执行DOM操作: jQuery还是在执行DOM操作:
学jQuery还是在学DOM
极简化: jQuery是对DOM操作的终极简化
但是没有改变DOM的四步
仅是对每个API进行了简化
函数库: jQuery都是用函数解决一切问题!
为什么:
1. jQuery是对DOM操作的终极简化:
增删改查
事件绑定
动画
ajax
2. 解决了绝大部分兼容性问题
凡是jQuery让用的,都没有兼容性问题:
何时: PC端的大项目和框架都用jQuery开发
2. 如何使用:
官网: jquery.com
下载:
版本:
1.x 支持IE8
uncompressed development 未压缩版本
具有完备的注释,代码格式和见名知意的变量名
优: 可读性好
缺: 体积大,不便于下载
适合于学习和开发之用
compressed production 压缩版
1. 删除注释和代码格式
2. 极简化变量名
优: 体积小,便于下载
缺: 可读性差
适合于生产环境
2.x 不再支持IE8
3.x 不再支持IE8
引入jquery.js:
先引入jQuery.js,再编写自定义脚本
原理:
引入<script src="jquery.js"
其实是向全局添加一种新的类型: jQuery,包含2部分
1. 构造函数: function jQuery(){}
2. 原型对象: jQuery.prototype={ 所有简化版API }
限制: 只有jQuery创建的子对象,才能使用jQuery简化版API
所有,如果想用jQuery简化版API操作DOM元素,都要先创建一个jQuery对象,封装要操作的DOM元素
如何创建: 2种:
1. 先查找,再创建
本来: var $btn1=new jQuery("选择器")
但是: 因为new jQuery使用非常频繁,所以:
jQuery构造函数进行了改造:
function jQuery(){
return new jQuery();
}
$=jQuery()
所以,创建jQuery对象,只要: var $btn1=$("选择器")
执行: 先创建jQuery对象
再用选择器找到要操作的DOM元素对象,保存进jQuery对象中
调用API时: 对jQuery对象调用API,等效于对其内部封装的DOM元素调用对等的API.
2. 直接封装已经获得的DOM元素:var $btn=$(this)
this默认返回DOM元素,不能使用jQuery家的API
$(this)是将this返回的DOM元素封装成一个jQuery对象
创建jQuery对象的结果是:
jQuery对象其实是一个封装多个DOM元素的类数组对象
jQuery API的三大特点:
1. 一个函数两用: 没给新值,默认就读取内容;给了新值,就变成修改内容
2. jQuery函数都自带遍历功能: 对jQuery对象(类数组对象)调用一次API,等效于对jQuery内封装的多个DOM元素,每个都调用一次API.
3. 每个函数都自动返回正在使用的jQuery对象本身,就可使用链式操作,简化代码。
3. 查找:
按选择器查找:
jQuery支持所有CSS3的选择器
复习: CSS3选择器:
基本选择器: #id element .class * select1,select2,
层次选择器: 父 后代 父>子 兄+弟 兄~弟
子元素过滤选择器:
:first-child :last-child :nth-child(i) :only-child
属性选择器:
[属性名]
[属性名=值]
[属性名^=开头]
[属性名$=结尾]
[属性名*=部分]
[属性名!=值]
并扩展了部分jQuery新增的选择器
基本过滤选择器: 先将所有符合条件的元素放入一个集合中,再统一编号,然后选择集合中指定位置的元素
:first/last :even/odd :eq/gt/lt(i)
按节点间关系查找
4. 修改:
内容
属性
样式
5. 添加/删除:
6. 事件绑定: