一、jQuery?
JS的封装,简化了JS.
优势
轻量级
强大的选择器
简化DOM操作
链式操作等
JQuery对象
jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象，它是一个数组对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象,
那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
- jQuery对象和DOM对象
DOM-->jQuery $(DOM)
jQuery-->DOM $(jQuery).[0] 或 $(jQuery).get(0)
可以互相转换,但方法不能混用
$(this) & this：两个this跟Java等语言中this的涵义相同，都是指代调用当前方法的“这个”对象本身。不同的是一个是jQuery对象，只能使用jQuery的方法；this是JS对象，只能使用JS的方法。
- 简单的jQuery实例
<script src="../js/jquery-3.1.1.js"></script>
<script>
//页面加载完成事件
//$==jquery
$(document).ready(function(){
alert("hello jQuery");
});
$(function(){
alert("hello $");
});
</script>使用前需要先引入jquery的包，即<script src="../js/jquery-3.1.1.js"></script>。
$(document).ready(function(){}); 和 $(function(){});功能相同，都是页面加载事件。
- jQuery和JS加载事件的区别
$(document).ready() && window.onload区别
1. ready()加载完DOM树结构之后执行jQury代码，不必等待加载完毕; onload()还要加载图片等其他所有的静态资源
2. 编写的个数不同，onload不能编写多个，如果有多个，只会执行一个；ready可编写多个，且都可执行。
二、jQuery选择器
- 基本选择器:
标签: $("p")；
ID: $("#p1")；
类: $(".class_p")；
通配符: $("*")
- 层次选择器:
| 类型 | 符号标记：实例 | 对应就jQuery元素选择方法 |
|---|---|---|
| 直接子元素 | ">"：$("parent>child") | $("parent").children() |
| 所有子元素 | " " ：$("parent child") | |
| 下一个同辈元素 | "+" ：$("prev+next") | .next() |
| 后面所有的兄弟元素 | "~" ：$("prev~nextall") | .nextall() |
| 所有同辈元素 | .sibling() | |
| 上一个元素 | .prev() | |
| 查找元素 | .find() | |
| 其它 | eq() first() last() parent() parents() |
- 过滤选择器
基本过滤选择器：
1. :first 第一个子元素
2. :last
3. :even 所有的下标为偶数的子元素，从0开始
4. :odd
5. :eq(index) 示例:$("ul li:eq(3)") 第四个元素
6. :gt(no) 示例:$("ul li:gt(3)") index 大于 3 的元素
7. :hidden 所有隐藏的子元素
8. :visible
9. [attribute] 示例:$([href]) 所有带有href属性的元素
10.[attribute=value] 示例:$([href='#']) 所有 href 属性的值等于 "#" 的元素
11.[attribute!=value]
属性过滤选择器：
$("div[id]") 选择所有含有id属性的div元素
$("input[name='username']") 选择所有name属性等于'username'的input元素
$("input[name!='username']")
$("input[name^='user']") 所有name属性以'user'开头的input元素
$("input[name$='name']") 所有name属性以'name'结尾的input元素
$("input[name*='erna']") 所有name属性包含'erna'的input元素
$("input[id][name$='man']") 所有含有id属性并且name属性以man结尾的元素（多属性联合选择）
- 表单选择器
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素，下同。
:password $(":password")
:radio $(":radio")
:checkbox $(":checkbox")
:submit $(":submit")
:reset $(":reset")
:button $(":button")
:image $(":image")
:file $(":file")
:select $(":selected")
- 元素选择方法
获取文本 text() text("设置文本内容")
获取html html() html("设置标签")
三、jQuery的DOM操作
查找结点属性 attr() prop()
创建节点 元素节点 文本节点 属性节点
插入节点 append() appendTo()
删除节点 remove() empty()
修改节点 clone(true)
属性操作 attr() removeAttr()
样式操作 addClass() removeClass() hasClass()
四、jQuery事件和动画
DOM加载事件
事件绑定 bind()
合成事件 hover() toggle()
动画 hide() show()
五、jQUery中数组的遍历
两种foreach方法：
