前端学习笔记之jQuery选择器一
一 jQuery基本概念
1.什么是：第三方，快速，简洁的javascript函数库
2.为什么：
（1）DOM操作的终极简化：
学jquery还是在学DOM，只不过API更简单
核心DOM：万能,API太繁琐
HTML DOM：简洁，不是万能
jQuery简化了：
1.DOM四大操作：查找，修改，删除，添加
2.事件处理
3.动画操作：
4.Ajax操作：
（2）屏蔽浏览器兼容性问题：
凡是jQuery让使用，都没有兼容性问题
3.如何：
第三方：不是浏览器内置的，也不是开发人员自己编写
由其它第三方组织或个人编写的
下载:jQuery.com
版本：1.x 兼容旧浏览器
jquery-1.x.js 为压缩版本 可读写好，体积大
----学习
jQuery-1.x.min.js 压缩版本体积小，可读性差
-----生产环境
CDN网络：内容分发网络
共享的资源在网络中多台服务器上都有副本
客户端请求资源时，CDN网络会智能选择离客户端最近，网络最近的服务器下载资源。
为什么：就近快速获得资源
何时:只要公共的/通用的库/框架到从CDN网络中调用
script src="http://CDN地址"
使用jQuery之前，必须先引入jQuery.js文件：
二 jQuery对象：
1.什么是：用jQuery工厂函数包装jQuery简化版API之前，都有将DOM对象包装为jQuery对象
2.何时：只要希望使用jquery简化版API之前，都要将DOM对象包装为jquery对象
3.如何：
(1).将现有DOM对象包装为jQuery对象
var $xxx = jQuery(DOM对象)
(2)何时：如何已经获得了一个DOM对象，想用简化版API。比如：this, e.target,转化为jQuery对象
var $this=jQuery(this);
var $target = jQuery(e.target);
4.直接用jquery工厂函数查找：
var $xxx= jquery("选择器")
何时：绝对多数情况，在未获得任何元素中，首选用jquery工厂函数直接查找元素。
引入jquery，js文件时：3件事：
（1）向window中添加了一个jquery工厂函数，用于创建Jquery类型的对象
（2）为jquery工厂函数添加了一个原型对象
在jquery工厂函数的原型对象中封装了所有简化版API。
每次使用jquery工厂函数获得的jquery结果中对象继承自jquery原型对象，可直接使用原型对象中保存的简化版API
（3）向window中添加全局变量$，引用jquery工厂函数。——所有jquery都可用$代替。
问题：如果选择器查找到多个元素，如何保存
其实:jquery对象是一个类数组对象
找到的每个DOM对象都是类数组对象中的一个元素
且 Jqeury简化版API都自带forEach效果
只需要调用一次，即可自动应用到每个DOM对象上
小知识：
chrome控制台中也可以使用$("选择器")查找元素：
chrome控制台也提供了$函数类似于jquery的$,但无需引入jquery也可以使用。
如何；只查找一个:$("选择器")相当于jquerySelector
找多个:$$("选择器")相当于querySelectorAll
一.查找
1.选择器：css jquery新增
基本:5个 同css
#id elemenet .class * selector1,selector2,...
层级:4个 通css
parent child parent>son
prev + next prev~siblings
实例：1.事件绑定:$(...)事件名(function(){...})
2.修改css样式：$（...）.css("css属性名"，"值")
强调：对$(...)调用一次API,相当于自动对$(...)找到的每个DOM元素分别调用API——自带forEach
按选择器查找：过滤选择器
1.基本过滤 ：位置过滤--------jquery独有， css没有
什么是：根据元素在查找结果集合中的下标位置选择元素
强调：1.将所有元素查找到集合中 再按照下标过滤
2.下标从0开始
3.和元素在父元素中的相对位置无关
何时使用：只要希望根据元素在结果集合中的位置查找元素
如何使用：
包括：
（1） elem(s):first/last 获取结果集合中第一个/最后一个元素
（2） elem(s):even/odd 获取结果结合中偶数/奇数位置的元素
（3） elem(s):lt/gt/eq(i) 获取结果集合中小于/大于/等于i位置的元素
基本过滤中特殊： animated 选择正在播放动画的元素
（4） elem(s):animated
（5） elem(s):not(selector) 否定伪类，同css
练习过程中的问题：
一个 .css 只能设置一个css属性
解决： $(...). css({
css属性 ：值，
... : ...
});
强调：1.css属性必须去横线变驼峰
强烈建议，只要在js中使用css属性，都去横线变驼峰
2.如果属性值为数字，可不加引号，且可省略单位
2.子元素过滤：同css
什么是：根据元素在其父元素中的相对位置选择
强调：1.序号从1开始
2.序号相对于父元素内部编号
何时：只要根据元素在其父元素中的位置选择
如何： 包括：
（1）:first/last-child 获取作为其父元素下一个第一个子元素的所有元素
（2）:nth-child(n|2n|2n+1|eveb|odd)
（3）:only-child 获取作为独生子女的子元素
3.内容过滤：根据元素的内容查找
：contains(tetx) 查找内容中包含tetx的元素
比如：span:contains("购物车")
强调：只能是文字中包含text的，如果是标签中包含，则不选择
（1）：empty 查找内容为空的元素
（2）：parent 查找内容不为空的元素 -> :not(:empty)
强调：只要包含内容(子元素或文本)就选择
（3）：has(selector) 选择包含符合selector要求的子元素的父元素
比如：li:has(.active) 选择包含class为active的子元素的父元素li
4.可见性过滤：
：hidden ：选择所有不可见的元素
让网页不可见：4种：
display:none,
visibility:hidden,
opactiy:0
type="hidden"
但是：
：hidden只能选择display :none 的type ="hidden"的
：visible :选择所有可见的元素
5.属性过滤：同css的属性选择器
什么是：按照任意属性的任意值选择元素
何时：只要按除id，元素，class之外的其他属性作为条件查找时，甚至模糊查找时
如何：
[属性名] 选择包含指定属性的元素
[属性名 = 值] 选择属性的值等于指定值的元素
[属性名 ^=值] 选择属性值以指定值开头的元素
[属性名$= 值] 选择属性值以指定值结尾的元素
[属性名 *=值] 选择属性值包含指定值的元素
[属性名 != 值] 选择属性值不等于指定值的元素
其实：：not([属性名 !=值])
强调：即选择包含title属性，但值不符合
也选择不包含title属性的
特殊：且
[属性选择器1][属性选择器2]...
表单元素过滤：
什么是:利用表单元素的标签名和type属性值选择表单中元素
何时：只要查找表单中的表单元素时
如何；包含：
（1）：input 选择所有表单元素:inout selecttextarea button
每种type都对应一个选择器：
（2）：text：password :radio :checkb ox:submit:reset
:file :button :hidden :iamge
6.状态过滤：
什么是：选择处于三大状态之一的元素
何时：只要根据元素的状态选择元素
如何：包含
（1）：disabled
（2）：checked
（3）:selected
练习：问题 1:.css智能修改css属性
解决：.attr("属性名"，"新值")
可修改标准属性
.attr("属性名") 获取属性值
总结：jquery API第二大特点：
一个函数两用：没提供新值，就读取属性现有的值
提供了新值，就修改属性为新值
问题:2 attr 无法访问三大状态属性
解决：pop()专门操作三大状态属性
总结：
什么时候用选择器查找
没有任何元素，执行首次查找时
