一、jQuery简介
jQuery是一个JavaScript库，特性丰富，包含若干对象和很多函数，可以替代传统DOM编程的操作方式和操作风格
jQuery通过对DOM API、DOM事件的封装，提供了一套全新的API，更简单和灵活
jQuery宗旨：write less，do more。
jQuery解决了不同浏览器之间的兼容性问题，不用考虑兼容性
示例代码：
<script type="text/javascript" src="引入的jQuery库的地址"></script> //引入要使用的jQuery文件
<script type="text/javascript">
//使用document对象的ready函数
$(document).ready(function(){
$("div").css("backgroundColor","lightgray");//使用div对象的css函数
});
</script>
二、$对象、jQuery对象
和DOM编程的入口是document对象一样，jQuery编程的入口是$对象，它是jQuery的核心对象
$对象也是一个函数对象，可以使用$()的形式调用它，传递给$()不同的参数可以做不同的操作
$函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象
变量命名规则：$对象在变量前面加上$！！！！
$对象：
1，$函数可以直接把DOM对象包装成jQuery对象，或者通过选择器
示例代码：
var divs = document.getElementsByTagName("div");
alert(divs);//打印出的是divs对象
2，DOM对象支持属性操作和方法操作，jQuery对象一般只进行方法操作
3，jQuery对象不能再调用DOM对象的方法，DOM对象也不能调用jQuery对象的方法
jQuery对象：
1，jQuery对象本质上是数组对象，把DOM对象作为数组元素
2，jQuery对象的很多方法具有隐式迭代特性，即方法内部会迭代遍历所有元素，把方法的效果应用到每一个元素上
三、文档加载完成事件
第一种全写形式：
$(document).ready(function(){ });
示例代码：
//第一种写法：
//1，将document对象传递给$()函数
//2，调用$(document)对象的ready()函数，并传入一个事件处理函数function(){}
$(document).ready(function(){
alert("");
});
第二种写法：
示例代码：
//将事件处理函数function(){}直接传递给$()函数，是第一种方式的简写，效果一样
$(function(){
alert("");
});
四、jQuery选择器
1，jQuery的编程思路和DOM一样：
先获得要操作的元素，然后再操作该元素
2，为了方便获取元素，jQuery直接复制了CSS选择器语法。另外除了伪类选择器外大部分和CSS选择器相同
3，jQuery选择器有：
标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器
4，属性选择器：通过元素的属性进行选择
[元素属性] 选择有该属性的元素
[属性名=属性值] 选择对应属性值的元素
[属性名^=部分属性值] 选择以部分属性名开头的元素
[属性名$=部分属性值] 选择以部分属性名结尾的元素
[属性名*=部分属性名] 选择包含部分属性名的元素
[attr] 选择有attr属性的元素
[attr=val] 选择以attr属性值为val的元素
[attr^=val] 选择以attr属性值以val开头的元素
[attr$=val] 选择以attr属性值以val结尾的元素
[attr*=val] 选择以attr属性值中包含val的元素
5，伪类选择器：与属性选择器配合，筛选其中的元素
:first 第一个元素
:last 最后一个元素
:even 第偶数个元素
:odd 第奇数个元素
重点：
:eq(index) 第index个元素
:gt(index) 第index之后的元素
:lt(index) 第index之前的元素
:not(选择器名称) 对括号里的选择器取反的元素
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
示例代码：
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//标签选择器
$("div").css("backgroundColor","lightgreen");
//id选择器
$("#div02").css("backgroundColor","red");
//类选择器
$(".c03").css("backgroundColor","blue");
//属性选择器
$([id])
});
</script>
语法：
$("选择器名称")
$("选择器名称","")
6，复合选择器：选择器可以进行多种形式的组合
selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)
selector1>selector2 在1选中的元素中，使用2筛选其子元素
selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素
selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素
selector1,selector2 各个选择器的并集
selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）
五、隐式迭代和显式迭代
迭代，可以理解为数组对象的遍历。
隐式迭代就是默认情况下，对数组对象中所有对象遍历后的效果
显式迭代就是jQuery对象的each()方法，按照循环的方式，主动选择其中对象，进行操作
隐式迭代示例代码：
$(document).ready(function(){
//此操作会将所有div全部设置成lightgray，称之为隐式迭代
$("div").css("backgroundColor","lightgray");
});
显式迭代示例代码：
$(document).ready(function(){
$("div").each(function(index,domElement){
//遍历所有元素
alert(index+"+"+domElement);
//选择遍历
if(index ==0){
domElement.style.backgroundColor="lightgray";
}else if(index==1){
domElement.style.backgroundColor="lightblue";
}else if(index==2){
domElement.style.backgroundColor="red";
}else{
domElement.style.backgroundColor="black";
}
});
});
六、jQuery操作元素属性
使用attr()函数来进行操作
三种方式：
1，attr(attrName) 获取第一个元素的该属性的值
2，attr(attrName,value) 设置所有元素的该属性的值（先为所有元素增加该属性，然后赋值）
3，attr(attrName,function(index,value){ }) 设置所有元素该属性的值，值由函数的返回值决定，index表示元素的索引，value表示该元素的原值
示例代码：
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//传入一个参数，获取div元素的id属性的值，但是只能获取第一个，没有发生隐式迭代
var value = $("div").attr("id");
//传入两个参数，设置所有元素的属性的值
$("div").attr("class","xx");
//传入两个参数，第二个参数为一个函数，返回值决定了第二个参数的值
$("div").attr("xxx", function (index,value) {
return "c"+index;
})
});
</script>
attr()函数对HTML元素固有的属性和自定义属性都有效，但是对于类似复选框的checked属性，一级元素的5个只读属性无效
需要使用jQuery对象的prop()函数来操作，但是prop()函数对自定义属性无效
七、jQuery操作元素的CSS样式
操作元素的style属性：
css(propName); 获取当前的样式属性的值
css(propName,value); 给propName属性赋值
css(propName,function(index,value){ }); 给propName属性赋值，函数的返回值决定赋值的值
操作元素的class属性：
addClass(class) 增加class属性的值
removeClass(class) 去除class属性的值
toggleClass(class) 切换class(如果存在就删除，如果不存在就添加)
也可以使用attr()函数来操作style属性和class属性，但是会出现覆盖的情况
八、操作元素的文本内容、子节点、元素值
html() 获取第一个元素的HTML内容(包括子元素和文本内容)
html(string) 设置所有元素的HTML内容 效果等于DOM对象的innerHTML属性
val() 获取第一个元素的value属性的值(如果有value属性的话，没有就是空字符串)
val(string) 设置所有元素的value属性的值
九、操作元素节点
$(html) 创建元素节点
append(content) 插入子节点
before(content) 插入兄弟节点
remove() 删除元素自己
children() 获得元素的子元素
parent() 获得元素的父元素
prevall() 获得元素之前的兄弟元素
nextall() 获得元素之后的兄弟元素
siblings() 获得兄弟元素
十、jQuery事件处理
jQuery提供了一系列如click(),focus(),mouseover()等方法，给元素注册对应事件处理函数
示例代码：
$("div").click(function(){
alert('xx')
});//给所有的div元素的点击事件注册了处理函数
重点：
1，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，不必等到页面的图片等资源也加载完成
2，这些函数都可以多次使用。不会发生覆盖
十一、$(this)的使用
因为jQuery的隐式迭代特性，使用jQuery注册的时间处理函数中的this实际上是DOM对象，因此可以调用DOM API，也可以使用$(this)调用jQuery API
示例代码：
$(document).ready(function(){
$("div").click(function(){
alert(this);//这里的this是div对象
});
});
十二、链式编程
更优雅、可以对一个jQuery对象实现一组操作
为了支持链式编程，大部分jQuery方法的返回值还是此jQuery对象本身
如：$("div").mouseout().click();//始终是对div对象进行操作
如果jQuery方法返回的不是原来的对象，就会发生“断链”。这时使用end()方法返回断链之前的状态
如：$("#div01").siblings().html("other").end().html("div01");//接回之前的状态
但是如果返回值不是jQuery对象的方法，就没法接上了
如：$("div").html();//返回值是字符串，不是原来的div对象了
十三、jQuery动画效果
//time的单位是毫秒
hide(time,function(){
$("div").show(time);//在time时间内发生function函数的事件
});
show(time,function) 是元素在指定事件内渐渐展开
相关文章
