1、jQuery介绍
1.1什么是jQuery ?
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
1.2 jQuery核心思想
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
1.3 jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处！
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
2、jQuery举例
2.1需求：使用jQuery给一个按钮绑定单击事件?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
2.2 jQuery常见问题
|
1.使用jQuery一定要引入jQuery库吗？ |
答案：是，必须 |
|
2.jQuery中的$到底是什么？ |
答案：它是一个函数 |
|
3．怎么为按钮添加点击响应函数的？ |
答案：1、使用jQuery查询到标签对象 2、使用标签对象.click( function(){} ); |
3、jQuery核心函数
$ 是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
1、传入参数为[ 函数 ] 时：表示页面加载完成之后。
相当于window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时： 会创建这个html标签对象
3、传入参数为 [ 选择器字符串 ] 时：
|
$(“#id属性值”); |
id选择器，根据id查询标签对象 |
|
$(“标签名”); |
标签名选择器，根据指定的标签名查询标签对象 |
|
$(“.class属性值”); |
类型选择器，可以根据class属性查询标签对象 |
4、传入参数为 [ DOM对象 ] 时：会把这个dom对象转换为jQuery对象
4、jQuery对象和DOM对象区分
4.1、什么是jQuery对象，什么是DOM对象
|
Dom对象 1.通过getElementById()查询出来的标签对象是Dom对象 2.通过getElementsByName()查询出来的标签对象是Dom对象 3.通过getElementsByTagName()查询出来的标签对象是Dom对象 4.通过createElement() 方法创建的对象，是Dom对象 注意：DOM对象Alert出来的效果是：[object HTML标签名Element] |
|
jQuery对象 1.通过JQuery提供的API创建的对象，是JQuery对象 2.通过JQuery包装的Dom对象，也是JQuery对象 3.通过JQuery提供的API查询到的对象，是JQuery对象 注意：jQuery对象Alert出来的效果是：[object Object] |
4.2、问题：jQuery对象的本质是什么？
jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数的组合。
4.3、jQuery对象和DOM对象使用区别
jQuery对象不能使用DOM对象的属性和方法，DOM对象也不能使用jQuery对象的属性和方法
4.4、DOM对象和jQuery对象互转
|
DOM对象转化为jQuery对象（*重点） |
|
1、先有DOM对象 |
|
2、$( DOM对象 ) 就可以转换成为 jQuery对象 |
|
jQuery对象转为DOM对象（*重点） |
|
1、先有jQuery对象 |
|
2、jQuery对象[下标]取出相应的DOM对象 |
5、jQuery选择器（重点）
5.1、基本选择器（重点）
|
#ID 选择器 |
根据id查找标签对象 |
|
.class 选择器 |
根据class查找标签对象 |
|
element 选择器 |
根据标签名查找标签对象 |
|
* 选择器 |
表示任意的，所有的元素 |
|
selector1，selector2 组合选择器 |
合并选择器1，选择器2的结果并返回 |
|
|
表示标签名必须是p标签，而且class类型还要是myClass |
5.2、层级选择器（重点）
|
Ancestor descendant |
后代选择器 ：在给定的祖先元素下匹配所有的后代元素 |
|
parent > child |
子元素选择器：在给定的父元素下匹配所有的子元素 |
|
prev + next |
相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 |
|
prev ~ sibings |
之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素 |
5.3、过滤选择器
基本过滤器：
|
:first |
获取第一个元素 |
|
:last |
获取最后一个元素 |
|
:not(selector) |
去除所有与给定选择器匹配的元素 |
|
:even |
匹配所有索引值为偶数的元素，从 0 开始计数 |
|
:odd |
匹配所有索引值为奇数的元素，从 0 开始计数 |
|
:eq(index) |
匹配一个给定索引值的元素 |
|
:gt(index) |
匹配所有大于给定索引值的元素 |
|
:lt(index) |
匹配所有小于给定索引值的元素 |
|
:header |
匹配如 h1, h2, h3之类的标题元素 |
|
:animated |
匹配所有正在执行动画效果的元素 |
|
:focus |
触发每一个匹配元素的focus事件。 |
内容过滤器：
|
:contains(text) |
匹配包含给定文本的元素 |
|
:empty |
匹配所有不包含子元素或者文本的空元素 |
|
:has(selector) |
匹配含有子元素或者文本的元素 |
|
:parent |
匹配含有选择器所匹配的元素的元素 |
属性过滤器：
|
匹配包含给定属性的元素 |
|
|
匹配给定的属性是某个特定值的元素 |
|
|
匹配所有不含有指定的属性，或者属性不等于特定值的元素 |
|
|
匹配给定的属性是以某些值开始的元素 |
|
|
匹配给定的属性是以某些值结尾的元素 |
|
|
匹配给定的属性是以包含某些值的元素 |
|
|
复合属性选择器，需要同时满足多个条件时使用。 |
表单过滤器:
|
:input |
匹配所有 input, textarea, select 和 button 元素 |
|
:text |
匹配所有文本输入框 |
|
:password |
匹配所有的密码输入框 |
|
:radio |
匹配所有的单选框 |
|
:checkbox |
匹配所有的复选框 |
|
:submit |
匹配所有提交按钮 |
|
:image |
匹配所有img标签 |
|
:reset |
匹配所有重置按钮 |
|
:button |
匹配所有input type=button <button>按钮 |
|
:file |
匹配所有input type=file文件上传 |
|
:hidden |
匹配所有不可见元素display:none 或 input type=hidden |
表单对象属性过滤器：
|
:enabled |
匹配所有可用元素 |
|
:disabled |
匹配所有不可用元素 |
|
:checked |
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
|
:selected |
匹配所有选中的option元素 |
6、jQuery元素筛选
过滤筛选：
|
eq() |
获取给定索引的元素 |
功能跟 :eq() 一样 |
|
first() |
获取第一个元素 |
功能跟 :first 一样 |
|
last() |
获取最后一个元素 |
功能跟 :last 一样 |
|
filter(exp) |
留下匹配的元素 |
|
|
is(exp) |
判断是否匹配给定的选择器，只要有一个匹配就返回，true |
|
|
map(callback) |
将一组元素转换成其他数组（不论是否是元素数组） |
|
|
has(exp) |
返回包含有匹配选择器的元素的元素 |
功能跟 :has 一样 |
|
not(exp) |
删除匹配选择器的元素 |
功能跟 :not 一样 |
|
slice(start,[end]) |
选取一个匹配的子集 |
功能与原来的slice方法类似 |
查找筛选：
|
children(exp) |
返回匹配给定选择器的子元素 |
功能跟 parent>child一样 |
|
closest(exp) |
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 |
|
|
find(exp) |
返回匹配给定选择器的后代元素 |
功能跟 ancestor descendant 一样 |
|
next() |
返回当前元素的下一个兄弟元素 |
功能跟 prev + next 功能一样 |
|
nextAll() |
返回当前元素后面所有的兄弟元素 |
功能跟 prev ~ siblings 功能一样 |
|
nextUntil() |
返回当前元素到指定匹配的元素为止的后面元素 |
|
|
offsetParent() |
返回第一个匹配元素用于定位的父节点。 |
|
|
parent() |
取得一个包含着所有匹配元素的唯一父元素的元素集合。 |
|
|
parents(exp) |
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） |
|
|
prev(exp) |
返回当前元素的上一个兄弟元素 |
|
|
prevAll() |
返回当前元素前面所有的兄弟元素 |
|
|
prevUnit(exp) |
返回当前元素到指定匹配的元素为止的前面元素 |
|
|
siblings(exp) |
返回所有兄弟元素 |
|
串联筛选：
|
add(exp) |
把与表达式匹配的元素添加到jQuery对象中 |
|
andSelf() |
加入先前所选的加入当前元素中 |
|
contents() |
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 |
|
end() |
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态 |