jQuery 总结
openkk
12年前
==========================
为了简化js的开发，一些js库诞生了
流行的有：jQuery, Moo Tools, Prototype, Dojo,YUI,EXT_JS,DWR
==========================
jQuery -- javascript query
轻量级js库，兼容css3,兼容各种浏览器
快速、简洁
方便处理HTML documents、events、实现动画效果，
方便的为网站提供ajax交互
文档说明全，很多成熟插件可选择
能够使html保持代码和html内容分离
==========================
什么是jquery对象
就是通过jquery包装dom对象后产生的对象
jquery对象是jquery独有的
可以使用方法$("#test").html();
意思是：获取ID为test的元素内的html代码
等同于用DOM实现：
document。getelementById("test").innerHTML;
通过id直接输出
alert($("#name").val());
注意!! DOM和JQUERY不能互相使用
约定 jquery对象前面加上$
var $var = jquery对象
var variable = DOM对象
==========================
DOM对象转成jquery对象
吧DOM对象用$()包装起来
jquery对象=$(dom对象)
jquery对象转换成dom对象
1)[index]
jquery对象是一个数组对象
var use = $use[0];
2).get(index)
jquery本身提供的方法
var use = $use.get(0);
==========================
jquery选择器 jquery的根基
对事件处理，遍历dom和ajax操作都依赖选择器
优点
简介的写法
$("#id") 等价document.getElementByid("id");
$("tagName")等价 document.getElementByTagName("tagName");
完善的时间处理机制
基本选择器
1.#id
用法：$("#myDiv"); 返回值 单个元素组成的集合
说明：这个就是直接选择html中的id="myDiv" 匹配的第一个
2.Element
用法:$("div") 返回值 集合元素
说明:element就是html已经定义的标签元素.如div,input,等
3.class
用法:$(".myClass") 返回值 集合元素
说明：这个标签直接选择html代码中class="myClass"的元素或元素族
4. *
用法:$("*") 返回值 集合元素
说明:匹配所有元素,多用于结合上下文来搜索
5.selector1,selector2, selectorN
用法:$("div.span.p.myClass") 返回值 几何元素
说明: 将每一个选择器匹配到的元素合并后一起返回,可以指定任意多个选择器
并将匹配到的元素合并到一个结果内,p.myClass表示匹配p class = "myClass"
层次选择器
通过DOM元素之间的层次关系，如后代，子，相邻，兄弟
1.ancestor descendant
用法：$("form input"); 返回值 集合元素
说明 在给定的祖先元素下匹配所有后代元素
2.parent > child
用法:$("form>input") 返回值 集合元素
说明给定的父元素下匹配所有的子元素
！！注意 子元素和后代元素
3.prev + next
用法： $("label+input") 返回值 集合元素
说明: 匹配所有紧接在prev元素后的next元素
4.prev~siblings
用法： $("form ~ input") 返回值 集合元素
说明 匹配prev元素之后的所有 siblings同辈元素， 匹配的是和prev同辈的元素，后辈元素不被匹配
siblings()方法匹配所有同辈 包括之前的
过滤选择器
通过特定的过滤规则筛选出所需的dom元素.以":"开头
按不同的过滤规则.过滤选择器分为
基本过滤,内容过滤,可见性过滤
属性过滤,子元素过滤和表单对象属性过滤选择器
基本过滤选择器
1. :first
用法 $("tr:first"); 返回值 单个元素组成的集合
说明：匹配找到的第一个元素
2. :last
用法 $("tr:last"); 返回值 集合元素
说明：匹配找到的最后一个元素，与:first相对应
3. :not(selector)
用法 $("input:not(:checked)"); 返回值 集合元素
说明：去除所有与给定选择器匹配的元素，类似于“非”
指没有被选中的input（当input的type为checkbox）
4. :even
用法 $("tr:even") 返回值 集合元素
说明: 匹配所有索引值为偶数的元素.从0开始计数
5.
dd
用法 $("tr:odd") 返回值 集合元素
说明: 匹配所有索引值为奇数的元素.与even相应，从0开始计数
6. :eq(index)
用法 $("tr:eq(0)") 返回值 集合元素
说明: 匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素，
注意括号内为索引值 不是元素排列数
7. :gt(index)
用法 $("tr:gt(0)") 返回值 集合元素
说明: 匹配所有大于给定索引值得元素。
8. :lt(index)
用法 $("tr:lt(2)") 返回值 集合元素
说明: 匹配所有小于给定索引值得元素。
9. :header(固定写法)
用法 $(":header").css("background","red") 返回值 集合元素
说明： 匹配如h1,h2,h3之类的标题元素
10. :animated(固定写法) 返回值 集合元素
说明:匹配所有正在执行动画效果的元素
内容过滤选择器
1. :contains(text)
用法：$("div:contains('John')") 返回值 集合元素
说明 匹配包含给定文本的元素，查找被标签围起来的文本内容是否符合指定的内容
2. :empty
用法 $("td:empty") 返回值 集合元素
说明：匹配所有不包含子元素或者文本的空元素
3. :has(selector)
用法 $("div:has(p)").addClass("test") 返回值 集合元素
说明：匹配含有选择器所匹配的元素的元素，给包含P元素的div加上class=‘test’
4. :parent
用法 $("td:parent") 返回值 集合元素
说明：匹配含有子元素或者文本的元素 与empty相反
可见度过滤选择器
根据元素的可见和不可见状态来选择相应的元素
1. :hidden jquery的show()显示
用法 $("tr:hidden") 返回值 集合元素
说明：匹配所有的不可见元素 css中的display:none和input type="hidden"
2. :visible
用法 $("tr:visible") 返回值 集合元素
说明：匹配所有的可见元素
属性过滤选择器 【注意 是方括号不是冒号":"】
通过元素的属性来获取相应的元素
1.[attribute]
用法:$("div[id]") 返回值 几何元素
说明： 匹配包含给定属性的元素， 选取了带id属性的div标签
2.[attribute=value]
用法:$("input[name='newsletter']").attr("checked",true) 返回值 几何元素
说明： 匹配包含给定属性是某个特定值的元素，
选取了所有name属性是newsletter的input元素
3.[attribute!=value]
用法:$("input[nam!e='newsletter']").attr("checked",true) 返回值 几何元素
说明： 匹配不含油给定属性，或者属性不等于某个特定值的元素，
等价于not(attr=value),
选取了所有name属性是newsletter的input元素
4.[attribute^=value]
用法:$("input[name^='news']") 返回值 几何元素
说明： 匹配包含给定属性是以某些值开始的元素
5.[attribute$=value]
用法:$("input[name$='letter']") 返回值 几何元素
说明： 匹配包含给定属性是以某些值结尾的元素
6.[attribute*=value]
用法:$("input[name*='man']") 返回值 几何元素
说明： 匹配包含给定属性是以包含某些值的元素
7.[attributeFilter1][attributeFilter2][attributeFilterN]
用法:$("input[id][name$='man']") 返回值 几何元素
说明：符合属性选择器，需要同时满足多个条件时使用
子元素过滤选择器
1 :nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") 返回值 集合元素
说明 匹配其父元素下的第几个子奇偶元素 索引从1开始
2. :first-child
用法: $("ul li:first-child(2)") 返回值 集合元素
说明 为每个父元素匹配第一个子元素，
3. :last-child
用法: $("ul li:last-child(2)") 返回值 集合元素
说明 为每个父元素匹配最后一个子元素，
4.nly-child
用法: $("ul li:only-child(2)") 返回值 集合元素
说明 如果某个元素师父元素中唯一的子元素，那将会匹配
表单对象属性过滤选择器
对选择的表单元素进行过滤
1. :enabled
用法: $("input:enabled") 返回值 集合元素
说明 匹配所有可用元素。 查找所有input中不带disable的input
2. :disabled
用法: $("input:disabled") 返回值 集合元素
说明 匹配所有不可用元素。 查找所有input中带disable的input
3. :checked
用法: $("input:checked") 返回值 集合元素
说明 匹配所有选中的被选中的元素(复选框,单选框,不包select中的option)
4. :selected
用法: $("input:selected") 返回值 集合元素
说明 匹配所有选中的option元素
表单选择器
1. :input $(":input")
2. :text $(":text")
3. :password $(":password")
4. :radio $(":radio")
5: :checkbox $(":checkbox")
6. :submit $(":submit")
7. :image $(":image")
8. :reset $(":reset")
9. :button $(":button")
10.:file $(":file")
11.:hidden $("input:hidden")
==========================
遍历集合
each(function(index,domEle))
参数
index: 每次索引，从0开始
domEle: 遍历集合的当前对象，是一个dom对象
this对象的使用，当前遍历的对象
jquery中的全局函数
$.each(object,function(index,domEle));用来遍历数组及任何对象
参数
index: 对象成员或数组索引
domEle: 对应变量和内容
==========================
jquery中的dom操作
dom操作的分类
dom core
html dom
使用js和dom为html编写脚本是。用的很多属性
css-dom
js中，主要用于获取和设置上腾娱乐对象的各种书新娘歌
内部插入节点
append(content)
向每个匹配元素的内部的结尾处追加内容
appendTo(content)
将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content)
向每个匹配元素的内部的开始处追加内容
prependTo(content)
将每个匹配的元素追加到指定的元素中的内部开始处
外部插入节点
after(content)
在每个匹配的元素之后插入内容
before(content)
在每个匹配的元素之前插入内容
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面
不但能将新创建的dom元素插入到文档中，也能对原有的dom元素进行移动
查找节点
查找属性节点
jquery选择器
查到后可调用jquery的attr()方法来获取各种属性值\
创建节点
使用jquery的工厂函数$() 如 $(html)
将传入的html标记字符串创建一个dom对象，并包装成一个jquery对ian
注意
动态创建的新元素节点不会被自动添加到文档
创建单个元素时，注意闭合标签和使用标准的xhtml格式
删除节点
remove()
从dom中删除所有匹配的元素,通过jquery表达式来筛选元素
empty()
清空节点- 清空元素中所有的后代节点(不包含属性节点)
替换节点
replaceWith()
将所有匹配的元素替换为制定的html或dom元素
replaceAll()
颠倒了的replaceWith()
注意:替换之前，元素上绑定的事件会随着替换一起消失
复制节点
clone()
复制的新节点不具有任何行为
clone(ture)
连同事件一起复制
属性操作
attr()
html()
text()
val()
height()
width()
css()
removeAttr()
为了简化js的开发，一些js库诞生了
流行的有：jQuery, Moo Tools, Prototype, Dojo,YUI,EXT_JS,DWR
==========================
jQuery -- javascript query
轻量级js库，兼容css3,兼容各种浏览器
快速、简洁
方便处理HTML documents、events、实现动画效果，
方便的为网站提供ajax交互
文档说明全，很多成熟插件可选择
能够使html保持代码和html内容分离
==========================
什么是jquery对象
就是通过jquery包装dom对象后产生的对象
jquery对象是jquery独有的
可以使用方法$("#test").html();
意思是：获取ID为test的元素内的html代码
等同于用DOM实现：
document。getelementById("test").innerHTML;
通过id直接输出
alert($("#name").val());
注意!! DOM和JQUERY不能互相使用
约定 jquery对象前面加上$
var $var = jquery对象
var variable = DOM对象
==========================
DOM对象转成jquery对象
吧DOM对象用$()包装起来
jquery对象=$(dom对象)
jquery对象转换成dom对象
1)[index]
jquery对象是一个数组对象
var use = $use[0];
2).get(index)
jquery本身提供的方法
var use = $use.get(0);
==========================
jquery选择器 jquery的根基
对事件处理，遍历dom和ajax操作都依赖选择器
优点
简介的写法
$("#id") 等价document.getElementByid("id");
$("tagName")等价 document.getElementByTagName("tagName");
完善的时间处理机制
基本选择器
1.#id
用法：$("#myDiv"); 返回值 单个元素组成的集合
说明：这个就是直接选择html中的id="myDiv" 匹配的第一个
2.Element
用法:$("div") 返回值 集合元素
说明:element就是html已经定义的标签元素.如div,input,等
3.class
用法:$(".myClass") 返回值 集合元素
说明：这个标签直接选择html代码中class="myClass"的元素或元素族
4. *
用法:$("*") 返回值 集合元素
说明:匹配所有元素,多用于结合上下文来搜索
5.selector1,selector2, selectorN
用法:$("div.span.p.myClass") 返回值 几何元素
说明: 将每一个选择器匹配到的元素合并后一起返回,可以指定任意多个选择器
并将匹配到的元素合并到一个结果内,p.myClass表示匹配p class = "myClass"
层次选择器
通过DOM元素之间的层次关系，如后代，子，相邻，兄弟
1.ancestor descendant
用法：$("form input"); 返回值 集合元素
说明 在给定的祖先元素下匹配所有后代元素
2.parent > child
用法:$("form>input") 返回值 集合元素
说明给定的父元素下匹配所有的子元素
！！注意 子元素和后代元素
3.prev + next
用法： $("label+input") 返回值 集合元素
说明: 匹配所有紧接在prev元素后的next元素
4.prev~siblings
用法： $("form ~ input") 返回值 集合元素
说明 匹配prev元素之后的所有 siblings同辈元素， 匹配的是和prev同辈的元素，后辈元素不被匹配
siblings()方法匹配所有同辈 包括之前的
过滤选择器
通过特定的过滤规则筛选出所需的dom元素.以":"开头
按不同的过滤规则.过滤选择器分为
基本过滤,内容过滤,可见性过滤
属性过滤,子元素过滤和表单对象属性过滤选择器
基本过滤选择器
1. :first
用法 $("tr:first"); 返回值 单个元素组成的集合
说明：匹配找到的第一个元素
2. :last
用法 $("tr:last"); 返回值 集合元素
说明：匹配找到的最后一个元素，与:first相对应
3. :not(selector)
用法 $("input:not(:checked)"); 返回值 集合元素
说明：去除所有与给定选择器匹配的元素，类似于“非”
指没有被选中的input（当input的type为checkbox）
4. :even
用法 $("tr:even") 返回值 集合元素
说明: 匹配所有索引值为偶数的元素.从0开始计数
5.
dd 用法 $("tr:odd") 返回值 集合元素
说明: 匹配所有索引值为奇数的元素.与even相应，从0开始计数
6. :eq(index)
用法 $("tr:eq(0)") 返回值 集合元素
说明: 匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素，
注意括号内为索引值 不是元素排列数
7. :gt(index)
用法 $("tr:gt(0)") 返回值 集合元素
说明: 匹配所有大于给定索引值得元素。
8. :lt(index)
用法 $("tr:lt(2)") 返回值 集合元素
说明: 匹配所有小于给定索引值得元素。
9. :header(固定写法)
用法 $(":header").css("background","red") 返回值 集合元素
说明： 匹配如h1,h2,h3之类的标题元素
10. :animated(固定写法) 返回值 集合元素
说明:匹配所有正在执行动画效果的元素
内容过滤选择器
1. :contains(text)
用法：$("div:contains('John')") 返回值 集合元素
说明 匹配包含给定文本的元素，查找被标签围起来的文本内容是否符合指定的内容
2. :empty
用法 $("td:empty") 返回值 集合元素
说明：匹配所有不包含子元素或者文本的空元素
3. :has(selector)
用法 $("div:has(p)").addClass("test") 返回值 集合元素
说明：匹配含有选择器所匹配的元素的元素，给包含P元素的div加上class=‘test’
4. :parent
用法 $("td:parent") 返回值 集合元素
说明：匹配含有子元素或者文本的元素 与empty相反
可见度过滤选择器
根据元素的可见和不可见状态来选择相应的元素
1. :hidden jquery的show()显示
用法 $("tr:hidden") 返回值 集合元素
说明：匹配所有的不可见元素 css中的display:none和input type="hidden"
2. :visible
用法 $("tr:visible") 返回值 集合元素
说明：匹配所有的可见元素
属性过滤选择器 【注意 是方括号不是冒号":"】
通过元素的属性来获取相应的元素
1.[attribute]
用法:$("div[id]") 返回值 几何元素
说明： 匹配包含给定属性的元素， 选取了带id属性的div标签
2.[attribute=value]
用法:$("input[name='newsletter']").attr("checked",true) 返回值 几何元素
说明： 匹配包含给定属性是某个特定值的元素，
选取了所有name属性是newsletter的input元素
3.[attribute!=value]
用法:$("input[nam!e='newsletter']").attr("checked",true) 返回值 几何元素
说明： 匹配不含油给定属性，或者属性不等于某个特定值的元素，
等价于not(attr=value),
选取了所有name属性是newsletter的input元素
4.[attribute^=value]
用法:$("input[name^='news']") 返回值 几何元素
说明： 匹配包含给定属性是以某些值开始的元素
5.[attribute$=value]
用法:$("input[name$='letter']") 返回值 几何元素
说明： 匹配包含给定属性是以某些值结尾的元素
6.[attribute*=value]
用法:$("input[name*='man']") 返回值 几何元素
说明： 匹配包含给定属性是以包含某些值的元素
7.[attributeFilter1][attributeFilter2][attributeFilterN]
用法:$("input[id][name$='man']") 返回值 几何元素
说明：符合属性选择器，需要同时满足多个条件时使用
子元素过滤选择器
1 :nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") 返回值 集合元素
说明 匹配其父元素下的第几个子奇偶元素 索引从1开始
2. :first-child
用法: $("ul li:first-child(2)") 返回值 集合元素
说明 为每个父元素匹配第一个子元素，
3. :last-child
用法: $("ul li:last-child(2)") 返回值 集合元素
说明 为每个父元素匹配最后一个子元素，
4.
nly-child 用法: $("ul li:only-child(2)") 返回值 集合元素
说明 如果某个元素师父元素中唯一的子元素，那将会匹配
表单对象属性过滤选择器
对选择的表单元素进行过滤
1. :enabled
用法: $("input:enabled") 返回值 集合元素
说明 匹配所有可用元素。 查找所有input中不带disable的input
2. :disabled
用法: $("input:disabled") 返回值 集合元素
说明 匹配所有不可用元素。 查找所有input中带disable的input
3. :checked
用法: $("input:checked") 返回值 集合元素
说明 匹配所有选中的被选中的元素(复选框,单选框,不包select中的option)
4. :selected
用法: $("input:selected") 返回值 集合元素
说明 匹配所有选中的option元素
表单选择器
1. :input $(":input")
2. :text $(":text")
3. :password $(":password")
4. :radio $(":radio")
5: :checkbox $(":checkbox")
6. :submit $(":submit")
7. :image $(":image")
8. :reset $(":reset")
9. :button $(":button")
10.:file $(":file")
11.:hidden $("input:hidden")
==========================
遍历集合
each(function(index,domEle))
参数
index: 每次索引，从0开始
domEle: 遍历集合的当前对象，是一个dom对象
this对象的使用，当前遍历的对象
jquery中的全局函数
$.each(object,function(index,domEle));用来遍历数组及任何对象
参数
index: 对象成员或数组索引
domEle: 对应变量和内容
==========================
jquery中的dom操作
dom操作的分类
dom core
html dom
使用js和dom为html编写脚本是。用的很多属性
css-dom
js中，主要用于获取和设置上腾娱乐对象的各种书新娘歌
内部插入节点
append(content)
向每个匹配元素的内部的结尾处追加内容
appendTo(content)
将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content)
向每个匹配元素的内部的开始处追加内容
prependTo(content)
将每个匹配的元素追加到指定的元素中的内部开始处
外部插入节点
after(content)
在每个匹配的元素之后插入内容
before(content)
在每个匹配的元素之前插入内容
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面
不但能将新创建的dom元素插入到文档中，也能对原有的dom元素进行移动
查找节点
查找属性节点
jquery选择器
查到后可调用jquery的attr()方法来获取各种属性值\
创建节点
使用jquery的工厂函数$() 如 $(html)
将传入的html标记字符串创建一个dom对象，并包装成一个jquery对ian
注意
动态创建的新元素节点不会被自动添加到文档
创建单个元素时，注意闭合标签和使用标准的xhtml格式
删除节点
remove()
从dom中删除所有匹配的元素,通过jquery表达式来筛选元素
empty()
清空节点- 清空元素中所有的后代节点(不包含属性节点)
替换节点
replaceWith()
将所有匹配的元素替换为制定的html或dom元素
replaceAll()
颠倒了的replaceWith()
注意:替换之前，元素上绑定的事件会随着替换一起消失
复制节点
clone()
复制的新节点不具有任何行为
clone(ture)
连同事件一起复制
属性操作
attr()
html()
text()
val()
height()
width()
css()
removeAttr()