jquery学习笔记（一）
1,DOM对象：在传统的javascript开发中，都是首先获取DOM对象。
document.getElementById（" "）;
document.getElementByTagName（" "）; 根据标签名获取DOM对象。
另外在事件函数中，可以通过在方法函数中使用this引用事件触发对象，或者使用even对象的targe或者srcElement获取到引发事件的Dom对象。
Dom对象的类型：input，div，span等等。Dom对象只有有限的属性和对象：
align appendChild attributes childNodes className cloneNode dir firstChild getAttribute getAttributeNode
2，jquery包装集：可以说是Dom对象的扩充，在jquery的世界中将所有的对象都封装成一个jquery包装集。
比如包含一个元素的jquery包装集：
var jqueryobject = $（"#testDiv"）
注意：jquery包装集都是作为一个对象一起调用的，jquery包装集拥有丰富的属性和方法：
ajaxStart ajaxStop ajaxSuccess andSelf append appendTo attr before bind
3，Dom对象和jquery对象的转换：
（1）Dom转jquery包装集：如果要使用jquery提供的函数，就要首先构造jquery包装集：
使用jquery选择器直接构造jquery包装集：$("#testDFiv"); 这里的包装集只有一个id是testDiv的元素。
或者：var div = document.getElementById（"testDiv"）;
var domToJqueryObject = $(div);
(2)jquery包装集转换Dom对象：
var domToJqueryObject = $("#testDiv")[0];
通过索引器返回的不再是jquery包装集，而是一个Dom对象。
可以通过each（）方法遍历集合：
$("#test").each(function(){alert(this)})
4，jquery选择器：
jquery提供了异常强大的选择器来帮助我们获取页面上的对象，并将对象以jquery包装集的形式返回。
#id：根据元素id选择 $("divid")选择id为divid的元素
element:根据元素的名称选择 $("a") 选择所有<a>元素
.class：根据元素的css类选择 $（".bgred"） 选择所用css为bgred的元素
*:选择所有元素 $(*)
selector1,select2,selectN:可以将几个选择器用顿号分隔开，然后在拼成一个选择器字符串，会同时选中这几个选择器匹配的内容。
$(""#divid,a, .bgred)
5,层次选择器（Hierarchy）：
6，基本过滤器：
:first ：匹配找到第一个元素 查找表格的第一行：$("tr:first")
:last ：匹配找到最后一个元素
:not() ：去除所有与给定选择器匹配的元素
:even ：匹配所有索引值为偶数的元素，从0开始计数 $("tr:even")
:odd ：匹配所有索引值为奇数的元素，从0开始计数
:eq(index)：匹配一个给定索引值的元素 找找第二行：$("tr:eq(1)")
:gt(index)：匹配所有大于给定索引值的元素 index从0开始计数
:lt(index)：选择结果集中索引小于索引值的元素
:header ：选择所有h1，h2一类的header标签 给页面内所有标题加上背景色：$(":header").css("#eee")
7，内容过滤器：
:contains(text)——匹配包含所给定文本的元素 查找所有包含"john"的元素：$("div:contains('john')")
:empty——匹配所有不包含子元素或者文本的空元素 $("td:empty")
:has(selector)——匹配包含有选择器所匹配的元素的元素 给所有包含p元素的div元素添加一个text类：$("div:has(p)").addClass()
:parent——匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的td元素：$("td:parent")
8，可见性过滤器（visibility filter）：
:hidden——匹配所有的不可见元素 查找所有不可见的tr元素：$("tr:hidden")
:visible——匹配所有可见元素
9，属性过滤器（attribute filters）：
[attribute]:匹配包含给定属性的元素 查找所有含有id属性的div元素：$("div[id]")
[attribute=value]:匹配给定的属性是某个特定值的元素 查找所有name属性是new的input元素：$("input[name='new']").attr("checked",true);
[attribute!=value]:匹配给定的属性不是某个特定值的元素
[attribute^=value]:匹配给定的属性是以某些值开始的元素
[attributefilter1][attributefilter2][attributefilterN]:符合性选择器，需要同时满足多个条件时使用
10，子元素过滤器（child filters）：
（1）：nth-child(index/even): 匹配其父元素下的底N个子或及奇偶元素。比如在每个ul查找第二个li——$("ul li:nth-child(2)")
（2）：first-child ：匹配第一个子元素。
（3）：last-child ：匹配最后一个子元素。
（4）：only-child ：如果某元素是父元素中唯一的子元素，那将会被匹配，如果父元素含有其他元素，将不会被匹配。
11，表单选择器forms：
（1）：input----匹配所有input，textarea，select和button元素------比如查找所有的input元素：$("：input")
（2）：text----匹配所有的文本框------比如查找所有文本框：$(":text")
（3）：password---匹配所有密码框
（4）：radio-----匹配所有单选按钮
（5）：checkbox---匹配所有复选框
（6）：submit---匹配所有提交按钮
（7）：image---匹配所有图像域
（8）：reset---匹配所有重置按钮
（9）：file----匹配所有文件域
12，表单过滤器form filters：
（1）：enabled---匹配所有可用元素--------比如查找所有可用的input元素：$("input:enabled")
（2）：disabled---匹配所有不可用元素
（3）：checked---匹配所有选中的被选中元素（复选框，单选框等，不包括select中的option）
（4）：selected---匹配所有选中的option元素，比如：查找所有选中的选项元素：$("select option:selected")
13,（1）jquery（html，owerDocument）：根据html原始字符串动态创建dom元素，返回一个jquery。其中html是一个字符串，
当html是没有属性的元素时.
jquery内部使用document.createElement创建元素：
$("<div/>").css("border","solid 1px #ff0000").html("动态创建的div").appendTo(testdiv);
否则使用innerHTML方法创建元素：
$("<div style=\"border:solid 1px #ff0000\"> 动态创建的div</div>").appendTo(testDiv);
（2）将元素添加到对象上：
jquery使用动态创建的$(document).ready(function)方法：
$(document).ready(
function(){
testDiv.innerHTML = "<div style=\"border:solid 1px #ff000\">使用动态创建的$(document).ready(function)方法</div>";
}
);
14,管理jquery包装集元素：使用动态创建元素，就需要将这些元素放入到我们的jquery包装集中。
（1）过滤：
eq（index）：获取第N个元素————比如获取第二个元素：$("p").eq(1)
filter(expr): 筛选出与制定表达式匹配的元素集合---------保留带有select类的元素：$("p").filter(".selected")
filter(fn) :筛选出与指定函数返回值匹配的元素集合-------比如保留子元素中不含有ol的元素：
$("div").filter(
function(index){
return $("ol",this).size() == 0;
}
);
(2)查找：
add（expr）：把与表达式匹配的元素添加到jquery对象中-------比如动态生成一个元素并添加至匹配的元素
中：$("p").add("<span>again</span>")
children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合-------查找div中的每个子元素：$("div").children()
closest([expr]) :取得与表达式匹配的最新父元素
contents（）：查找匹配元素内部所有的子节点（包括文本节点）-------查找所有文本节点并加粗：
$("p").contents().not("nodeType=1").wrap("<b>");
find(expr) ：搜索所有与指定表达式匹配的元素----------从所有段落开始，进一步搜索下面的span元素：$("p").find("span")
next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合-----找到每个段落后面紧邻的同辈元素：$("p").next()
nextAll([expr]):查找当前元素之后所有元素的同辈元素--------给第一个div之后的所
有元素家个类：$("div:first").nextAll().addClass("after");
offsetParent():返回第一个有定位的父类（比如relative或absolute）
parent([expre]):取得一个包含着所有匹配元素的唯一父元素的元素集合-------查找每个段落的父元素：$("p").parent()
parents([expr]):取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）----------找到每个span元素的所有祖先元素：
$("span").parents()
prev([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合------找到每个段落紧邻的前一个同辈元素：$("p").prev()
prevAll([expr]):查找当前元素之前所有的同辈元素
siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合-----比如找到每个div的所有同辈元素：$("div").sibings()
串联：
andSelf（）：加入先前所选的加入当前元素中------比如选取所有div以及内部的p，并加上border类：
$("div").find().andSelf().addClass("border")
end()：回到最近一个“破坏性”操作之前。也就是将匹配的元素列表变为前一次的状态。
15，操作元素属性（id，src，alt）：
attr（name）：取得第一个匹配元素的属性值------返回文档中第一个图像的src属性值：$("img").attr("src");
attr (properties)：将一个“名/值”形式的对象设置为所有匹配元素的属性------为所有图像设置src和alt属性：
$("img").attr({src:"test.jpg",alt:"testImage"});
removeAttr(name)：从每一个匹配的元素中删除一个属性-------将文档中图像的src属性删除：$("img").removeAttr("src");
16,修改css类：
toggleClass（class）：如果存在就删除，不存在就增加一个类-----比如为匹配的元素切换‘selected’类：$("p").toggleClass("selected");
toggleClass(class,switch):当switch是true时添加类，当switch是false时删除类
17，jquery中的事件：
bind（type，[data],fn）：为每一个匹配元素的特定事件（如click）绑定一个事件处理器函数-------当每个段落被点击的时候，弹出其文本：
$("p").bind("click",function(){ alert( $(this).text );});
one(type,[data],fn)：为每一匹配元素的特定事件（如click）绑定一个一次性的事件处理函数-------当所有段落被第一次点击的时候，显示
所有其文本：$("p").one("click",function(){ alert( $(this).text );});
trigger（event，[data]）：在每一个匹配的元素上出发某类事件----$("p").click(function(even,a,b){}).trigger("click",["foo","bar"]);
一个普通的点击事件，a和b是未定义类型，如果用下面的语句触发，那么a指向“foo”，b指向“bar”
18，Ajax快餐：
（1）load（url，[data],[callback]）:返回对象是query包装集，load方法能够载入远程html文件代码并插入至DOM中，默认使用get方式，
如果传递了data参数则使用post方式。
（2）jquery.get(url,[data],[callback],[type]):
返回对象是XMLHttpRequest。通过远程http get请求载入信息。请求成功后可调用回调函数，如果需要在出错时执行函数，请使用$.ajax
回调函数的标签如下：
function(data,textStatus){this;}
其中：
data是返回的数据，testStatus表示状态码，可能是：timeout，error，notmodified，success，parsererror
type参数是指data数据的类型，可能是：xml，html，script，json，jsonp，text。默认为html
（3）jquery.getJSON(url,[data],[callback]):
返回对象是XMLHttpRequest。相当于jquery.get(url,[data],[callback],"json").
通过http get请求载入JSON数据
注：和上面的函数不同在于数据类型不同。
（4）jquery.getScript（url,[callback]）
返回对象是XMLHttpRequest。相当于jquery.get(url,[data],[callback],"script").
只能回调同域js文件。
(5)jquery.post(url,[data],[callback],[type]):
返回对象是XMLHttpRequest。
（6）jquery.ajax(options)
返回对象是XMLHttpRequest。根据请求加载远程数据，
19，Ajax相关函数
（1）jquery.ajaxSetup（options）：无返回值，设置全局ajax默认options选项
（2）serialize（）：返回值为string，序列表表格内容为字符串，用于ajax请求。序列化最常用在将表单数据发送到服务器端时，被序列化
后的数据是标准格式，可以被几乎所有的服务器端支持。
20,全局ajax事件：
ajaxComplete（callback）：ajax请求完时执函数行。
ajaxError（callback）：ajax请求错误时执行函数。
ajaxSend（callback）：ajax请求发送时执行。
ajaxStart（callback）：ajax请求开始时执行。
ajaxStopajax请求结束时执行函数。
ajaxSuccess（callback）：请求成功时执行函数。
21，jquery的动画函数：
基本动画函数：既有透明度渐变，又有滑动效果，是最常用的动画效果函数。
滑动动画函数：仅用滑动渐变效果。
淡入淡出动画函数：仅用透明度渐变效果。
22，基本动画函数：
（1）show（）：显示隐藏的匹配元素------比如显示所有段落：$("p").show()
（2）show（speed,[callback]）：以优雅的动画显示所有匹配的元素，并在显示完成之后可选的出发一个回调函数------比如用缓慢的动画将
隐藏的段落显示出来，历时600毫秒：$("p").show(600)
（3）hide（）：隐藏显示的元素--------比如隐藏所有段落：$("p").hide()
（4）hide（speed，[callback]）:以优雅的动画隐藏所有匹配的元素，并在显示完成之后可选的出发一个回调函数。
（5）toggle（）：切换元素的可见状态，如果元素是可见的，切换为隐藏；如果是隐藏，切换为可见------比如切换所有段落的可见状态：
$("p").toggle()
（6）toggle（switch）：根据switch参数切换元素的可见状态（true为可见，false为隐藏）--------比如切换所有段落的可见状态：
var flip=0;
$("button").click(function(){ $("p").toggle(flip++%2 == 0) });
(7)toggle(speed,[callback])：以优雅的动画切换所有匹配的元素，并在显示完成之后可选的出发一个回调函数------用200毫秒将段落
迅速切换显示状态，之后弹出一段话：$("p").toggle("fast",function(){ alert("Animation Done"); });
23,滑动动画函数：
（1）slideDown（speed，[callback]）:通过高度变化（向下增大）来动态的显示所有匹配的元素，并在显示完成之后可选的出发一个回调
函数-----比如用600毫秒缓慢的将短路滑下：$("p").slideDown("slow");
（2）slideUp(speed,[callback]):通过高度变化（向上减小）来动态的隐藏所有匹配的元素，隐藏完成后可选的出发一个回调函数-----
比如用600毫秒缓慢的将段落滑上：$("p").slideUp("slow");
(3)slideToggle(speed,[callback])：通过高度变化来切换所有匹配元素的可见性，并在切换完成之后可选的出发一个回调函数-----比如
用600毫秒缓慢的将段落滑上或滑下：$("p").slideToggle("show");
24,淡入淡出动画函数：
(1)fadeIn（speed,[callback]）：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成之后可选的出发一个回调函数---比如
用600毫秒缓慢的将段落淡入：$("p").fadeIn("slow");
(2)fadeOut(speed,[callback]) ：淡出
（3）fadeTo(speed,[callback]) ：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成之后可选的出发一个回调
函数。参数取值0-1，比如0.66表示透明度为60%
