JQ 1
1. 什么是jQuery
2. 查找
1. 什么是jQuery
jQuery是快速的，简洁的第三方javascript库
为什么:
1. DOM操作的终极简化:
DOM的问题: 核心DOM: 万能，繁琐
HTML DOM: 简洁，不是万能
jQuery在DOM操作的4个方面提供了终极简化:
1. 查找元素, 操作元素(添加，删除，修改(内容,属性,样式))
2. 事件处理:
3. 动画效果: (了解)
4. AJAX操作:
2. 屏蔽了绝大多数浏览器兼容性问题:
只要jQuery让我们用的，都是兼容的
何时: 今后绝大多数公司的项目和绝大多数前端框架都是使用jQuery开发的。
如何:
1. 关于版本:
1.x: 兼容旧浏览器
未压缩: jquery-1.11.3.js ——可读性好，便于学习，大
压缩: jquery-1.11.3.min.js ——生产环境使用，小
三方面: 去掉注释, 去掉换行和空字符, 极简化变量名
2.x: 不再兼容旧浏览器
2. 手册:
day1 核心和选择器
day2 选择器,属性，文档处理和css样式
day3 事件和动画
3. 开始使用:
Step1: 下载jquery.js 保存在项目js文件夹下
Step2: 在页面用<script src 引入jquery.js文件
向window中添加了jQuery对象
jQuery对象是封装所有简化版DOM操作API的全局对象
window.jQuery=window.$=jQuery
Step3: 使用jQuery简化版API执行DOM操作
$("选择器") 查找元素
$底层其实使用的还是:
getElementById
getElementsByTagName,ClassName,...
querySelectorAll
问题: 使用DOM API返回的结果不能使用jQuery简化版API
$的返回值: jQuery结果集对象——类数组对象
只有$返回的结果，才能使用简化版API
普通DOM API返回的是标准DOM对象，不能使用简化版API。
jQuery API和DOM API 不能混用，也不通用
$(...).click(function(){...})
鄙视题: DOM对象 vs jQuery对象
DOM对象: W3C的DOM标准规定，浏览器厂商已经实现的现成的对象。能使用DOM API——繁琐
jQuery对象: 由jQuery库创建的，由第三方实现的。
本质: 一个封装找到的一组DOM对象的类数组对象—集合
并在父对象中提供了简化版API
要想使用jQuery简化版API，必须先获得jQuery结果集合对象:
如何: 1. 用$("选择器")直接查找对象，返回的就是
2. 如果已经获得一个DOM对象:
用$(DOM对象), 创建一个结果集合对象，并将DOM对象放入其中。
jQuery结果集合对象的核心API:
$(...).size() => $(...).length 找到的元素个数
$(...).get(i) => $(...)[i] 从jQuery结果中取出DOM对象
何时: 如果有jQuery实现不了的功能
就要见DOM对象从jQuery结果中取出
继续使用DOM API
$(...).index($("要查找的元素"))
返回要查找的元素在整个结果集中的位置
2. 查找:
按选择器查找: jQuery支持所有css选择器
只要jQuery允许使用的css选择器，都屏蔽了兼容性问题
包括:
基本选择器: 同CSS
#id .class element * selector1,selector2,...
规律: $("...")返回的jQuery结果集合的所有API都自带forEach
后续的修改操作，会自动作用到每个找到的元素上
层次选择器: 同CSS
select1 select2 后代
select1>select2 直接子代
select1+select2 紧邻的下一个兄弟
select1~select2 之后所有符合条件的兄弟
过滤选择器:
基本过滤: 位置过滤: 根据元素在结果集中的下标位置选择
:first/last : 在结果集中选择第一个和最后一个元素
*以下选择器下标从0开始！*
:even/odd: 选择结果集中*下标*为偶数/奇数的元素
:eq/gt/lt(i): 选择下标=,>或<i位置的其他元素
何时: 只要根据元素在结果集合中的下标位置选择元素
子元素过滤: 选择在父元素下指定位置的子元素
强调: 参照的不是在结果集合中的位置
而是在父元素下的位置
:first-child/last-child
*以下选择器下标从1开始*
:nth-child(n/odd/even/2n/2n+1)
:not(selector): 同css， 否定选择器,可否定一切选择器
1. 查询:
练习:
$(...).API() : 规律: 1. 自带forEach
2. 每个API都返回原结果集合
内容过滤: (了解) 根据元素的内容查找
:contains(text)： 查找内容中包含指定文本的元素
span:contains("购物车"): 找内容中包含"购物车"的span
:empty : 查找不包含任何内容的空元素
:parent : 查找只要包含内容的父元素
:has(selector) : 选择包含满足selector要求的子元素的父元素
比如: div:has(.active) 包含class为active的子元素的div
可见性过滤: 同CSS (了解)
:visible : 匹配所有可见的元素
:hidden : 匹配所有不可见的元素display:none
和type="hidden"的
属性过滤选择器: 同CSS
[属性] : 查找拥有该属性的元素
[属性="值"] : 查找指定属性的值为"值"的元素
[属性!="内容"] : 查找指定属性的值不为"值"的元素
[属性^="内容"] : 查找指定属性的值以"内容"开头的
[属性$="内容"] : 查找指定属性的值以"内容"结尾的
[属性*="内容"] : 查找指定属性的值包含"内容"的
[条件1][条件2]... : 查找同时满足条件1,2...的元素
按节点间关系查找:
1. 父子关系:
$(parent).children() 查找parent下所有直接子元素
.children(selector) 查找parent下符合条件的元素
$(parent).find(selector) 查找parent下所有后代元素中符合条件的
$(child).parent() 获得child的父元素
2. 兄弟关系:
$(...).next/prev([selector]) 获得下/前一个兄弟元素
$(...).nextAll/prevAll([selector]) 获得之后/之前所有的兄弟元素
$(...).siblings([selector]) 获得前后所有的兄弟元素
练习:
获取css样式属性的值:
var 属性值=$(...).css("css属性名")
.css默认获取的就是计算后的完整样式！
.css默认设置的是内联样式
问题: css样式属性修改，代码量大
解决: 用class代替单独修改css样式
$(...).addClass("类名") 向选中的元素添加类名
$(...).removeClass("类名") 从选中的元素上移除类名
$(...).hasClass("类名") 判断选中的元素上是否包含指定类名
如果希望在有/没有"类名"之间切换:
$(...).toggleClass("类名");