正课:
1. 什么是jQuery
2. 如何使用jQuery
3. 查找
1. 什么是jQuery
第三方开发的 执行DOM操作的 极简化的 函数库
第三方: 下载
执行DOM操作: 学习jQuery，还是在学DOM
极简化: jQuery是DOM操作的终极简化: 4个方面:
1. 增删改查
2. 事件绑定
3. 动画
4. Ajax
函数库: jQuery中一切都是函数
为什么: 2个原因:
1. 终极简化
2. 解决了大部分浏览器兼容性问题:
凡是jQuery让用的，都没有兼容性问题
如果不兼容，jQuery在底层用程序模拟实现
2. 如何使用:
3步:
1. 上官网看是什么:
2. 看快速入门:
3. 下载手册，备查:
下载: 版本:
1.x 兼容旧浏览器
未压缩: jquery-1.11.3.js
具有: 完备的注释，代码格式和见名知意的变量名
可读性好，体积大——开发和学习阶段使用
压缩: jquery-1.11.3.min.js
移除所有注释, 清除所有空字符格式，极简化变量名
体积小，可读性差——生产环境
2.x 不再兼容旧浏览器
3.x 也不兼容旧浏览器，还增加了新功能
1. 所有代码运行在严格模式下
2. 支持for...of，代替原有each()
3. 新动画API: requestAnimationFrame()
4. 支持Promise
引入: 2种:
1. 将js文件下载的项目本地
2. 引入CDN网络中的js文件
CDN网络: 内容分发网络
可根据客户端据不同服务器的网络状况，自动选择最优的服务器下载资源
原理:
引入jquery.js，其实是在全局创建了一种新类型: 2部分
1. 构造函数: 创建jQuery类型的子对象
2. 原型对象: 保存所有jQuery类型的子对象共有API
创建jQuery类型的子对象:
什么是jQuery类型的子对象: 专门封装一个或多个DOM元素，并提供操作DOM元素的简化版API
本质是一个类数组对象。
为什么: 普通DOM元素不是jQuery类型，不能用简化版API
只有将找到的DOM元素，放入jQuery对象中，才能使用简化版API
何时: 只要想使用jQuery的简化版API，都要先创建jQuery对象
如何: 2种:
1. 用选择器查找DOM元素，并创建jQuery对象:
var $elems=new jQuery("selector")
先找到符合selector要求的DOM元素,再创建一个jQuery类型的子对象，保存找到的DOM元素
简化: var jQuery=function("selector"){//工厂函数
return new 构造函数("selector")
}// jQuery("selector") 等效于 new 构造函数()
更简化: window.jQuery = window.$ = jQuery;
//调用$() 等效于调用jQuery()
对原型对象的简化: jQuery.fn = jQuery.prototype = {
jQuery.fn也是jQuery类型的原型对象的别名
2. 直接将获得的DOM元素封装进jQuery对象:
var $elem=$(dom元素对象);
3. 查找:
1. 按选择器查找:
jQuery支持所有CSS选择器，并扩展了部分自有的选择器
基本选择器: 5个 同CSS
#id element .class * selector1,selector2,...
层级选择器: 4个 同CSS
parent child parent>sub prev+next prev~nextsiblings
子元素过滤: 4个 同CSS
特点: 在各自父元素内分别编号，从1开始
:first-child :last-child :nth-child(n) :only-child
基本过滤(位置过滤): 7个 jQuery中新增
特点: 先取出所有符合条件的元素放入一个集合中统一编号。编号从0开始
:first/last :even/odd :eq/gt/lt(i)
属性过滤: 同CSS
[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
[属性名!=值]
input.txt[title=用户名]
何时:代替class选取多个元素，添加行为
可见性过滤: 2个:
:visible :hidden(display:none input type="hidden")
内容过滤: 2组:
1. 用子元素或内容的特征判断父元素:
1. 以内容文本作为特征: :contains(text)
2. 以子元素特征: :has(选择器)
2. 以是否有子元素或内容为条件:
:parent 非空
:emty 空
表单元素过滤:
:input 选择所有表单元素(input select textarea button)
每种type都有专门的选择器:
:text :password :radio :checkbox :file :submit...
状态过滤: :enabled :disabled :checked :selected
2. 按节点间关系查找:
2大类:
1. 父子:
$elem.parent() 父元素
$parent.children() 直接子元素
$parent.children().first()
$parent.children().last()
2. 兄弟:
$elem.next()
$elem.prev()
$elem.is("selector") 判断$elem是否符合selector选择器的要求
$elem.show()/hide() 代替display="block"/"none"
$elem.css("CSS属性名","属性值") style.css属性名=值
$elem.html("内容") innerHTML="内容"
jQuery API三大规律:
1. 自带遍历: 对整个jQuery对象调用API等效于对其中每个DOM元素都调用一次API
2. 一个函数两用: 给新值，就修改。没给新值，就返回旧值
3. 返回当前正在操作的jQuery对象本身