jquery知识大全.docx
《jquery知识大全.docx》由会员分享，可在线阅读，更多相关《jquery知识大全.docx（15页珍藏版）》请在冰豆网上搜索。
jquery知识大全
-------基础语法---------
添加一个下属节点
var$h=$（"
第一段文字
"）;
$（"#h11"）.append（$h）;
添加一个样式
$（"li"）.addClass（"normalStyle"）;
添加一个属性
$（"li"）.css（"color","blue"）;
移除id为tr1的第二个表框
$（"#tr1td:
eq
（1）"）.remove（）;
克隆一个按钮并显示在id为tr1的元素后面
$（"#btn"）.click（function（）{
$（this）.clone（）.insertAfter（$（"#tr1"））;
}）;
设置id为key的属性
$（"#key"）.attr（"color","#ccc"）;
点击以动画出现toggle表示它下面的方法依次调用
$（function（）{
$（"h2"）.toggle（function（）{
$（this）.next（"p"）.slideUp（）;
},function（）{
$（this）.next（"p"）.slideDown（）;
}）;
}）;
点击出现下面
60px;background:
#faa;border:
solid1px#d00;">一段文字
#////////////////////////////////////////////////////////////////////////////////
#// 目 录 //
#// //
#//1:
核心部分 //
#//2:
DOM操作 //
#//3:
css操作 //
#//4:
javascript处理 //
#//5:
动态效果 //
#//6:
event事件 //
#//7:
ajax支持 //
#// //
#////////////////////////////////////////////////////////////////////////////////
#
#
#////////////////////////////////////////////////////////////////////////////////
#// 一：
核心部分 //
#////////////////////////////////////////////////////////////////////////////////
#
#/**
（1）
# *$（）
# *运行：
点击文档中所有a标签时将弹出对话框
# *说明：
$（"a"）是一个jQuery选择器；$本身表示一个jQuery类，所有$（）是构造一个jQuery对象；
# * click（）是这个对象的方法。
同理$（document）也是一个jQuery对象，ready（fn）是$（document）的方法，
# * 表示当document全部下载完毕时执行函数。
# */
#/*
# $（document）.ready（function（）{
# //dosomethinghere
# $（"a"）.click（function（）{
# alert（"Helloworld!
"）;
# }）;
#
#}）;
#*/
#
#/**
（2）
# * html（）
# * 运行：
当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
# */
#/*
# functionjq（）{
# alert（$（"div>p"）.html（））;
# }
#*/
#
#/**（3）
# * appendTo（）
# * 运行：
当点击id为test的元素时，向body中添加“
”
# */
#/*
# functionjq（）{
# $（"
"）.appendTo（"body"）;
# }
#*/
#
#/**（4）
# *css（）
# *运行：
当点击id为test的元素时，背景色变成黑色
# *说明：
原文为$（document.body）.background（"black"）;在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
# */
#/*
# functionjq（）{
# $（document.body）.css（"background-color","black"）;
# }
#*/
#
# /**（5）
# *$（elems）
# *运行：
当点击id为test的元素时，隐藏form1表单中的所有元素。
# *说明：
限制jQuery作用于一组特定的DOM元素
# *参数：
elem：
一组通过jQuery对象压缩的DOM元素
# */
# /*
# functionjq（）{
# $（form1.elements）.hide（）;
#}
#*/
#
#/**（6）
# *$（obj）
# *运行：
当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。
# *说明：
复制一个jQuery对象
# */
# /*
# functionjq（）{
# varf=$（"div"）;
# alert（$（f）.find（"p"）.html（））;
#}
#*/
#
#/**（7）
# *each（fn）
# *运行：
当点击id为test的元素时，img标签的src都变成了2.jpg
# *说明：
将函数作用于所有匹配的对象上
# */
# /*
# functionjq（）{
# $（"img"）.each（function（）{
# "+this.src="}）;
#}
#*/
#
#/**（8）
# *get（num）
# *运行：
当点击id为test的元素时，alert对话框显示：
Soisthis，即第二个
标签的内容
# *说明：
获取匹配元素，get（num）返回匹配元素中的某一个元素
# *参数：
get（Number）:
期望限制的索引，从0开始
# *注意：
get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$（"p"）.eq
（1）对象的内容用jQuery方法html（），而取$（"p"）.get
（1）的内容用innerHTML
# */
# /*
# functionjq（）{
# alert（$（"p"）.get
（1）.innerHTML）;
#}
#*/
#
#/**（9）
# *eq（pos）
# *运行：
当点击id为test的元素时，alert对话框显示：
Soisthis，即第二个
标签的内
# *说明：
减少匹配对象到一个单独的dom元素
# *参数：
pos（Number）:
期望限制的索引，从0开始
# *注意：
get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$（"p"）.eq
（1）对象的内容用jQuery方法html（），而取$（"p"）.get
（1）的内容用innerHTML
# */
# /*
# functionjq（）{
# alert（$（"p"）.eq
（1）.html（））
#}
#*/
#
#/**（10）
# *index（obj）
# *运行：
当点击id为test的元素时，两次弹出alert对话框分别显示0，1
# *说明：
返回对象索引
# *参数：
obj（Object）:
要查找的对象
# */
# /*
# functionjq（）{
# alert（$（"div"）.index（document.getElementById（'test1'）））;
# alert（$（"div"）.index（document.getElementById（'test2'）））;
#}
#*/
#
#/**（11）
# *size（）或Length
# *运行：
当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
# *说明：
当前匹配对象的数量，两者等价
# */
#/*
# functionjq（）{
# //alert（$（"img"）.length）;
# alert（$（"img"）.size（））;
#}
#*/
#
#
#////////////////////////////////////////////////////////////////////////////////
#// 二：
DOM操作 //
#////////////////////////////////////////////////////////////////////////////////
#/**
（1）
# * attr（"属性名"）或attr（"属性名","属性值"）
# * 运行：
先弹出对话框显示id为test的连接url（1.html），在将其url改为2.html，当弹出对话框后会看到转向到2.html
# * 说明：
jquery自1.2.3版本取消了直接的href等相关操作属性的方法，只能使用attr方式。
包括src属性等
# */
# /*
#functionjq（）{
# alert（$（"#test"）.attr（"href"））;
# $（"#test"）.attr（"href","2.html"）;
#}
#*/
#
#/**
（2）
# * after（"html代码"）
# * 运行：
在匹配元素后插入一段htmlHello；Hello
# * 说明：
执行完后在界面可看见执行效果
# */
# /*
# functionjq（）{
# $（"#test"）.after（"Hello"）;
#}
#*/
#/**（3）
# * after（elem）或after（elems）
# * 运行：
将指定对象elem或对象组elems插入到在匹配元素后
# * 说明：
执行后相当于 jQuery</a>after
# */
#/*
# functionjq（）{
# $（"#test"）.after（$（"#hello"））;
#}
#*/
#
#/**（4）
# * append（html）
# * 运行：
在匹配元素内部，且末尾插入指定html
# * 说明：
同理还有append（elem） append（elems）before（html）before（elem）before（elems）请执行参照append和after的方来测试、理解！
# */
# /*
# functionjq（）{
# $（"#test"）.append（"Hello"）;
#}
#*/
#/**（5）
# * appendTo（html）
# *运行：
在匹配元素内部，且末尾插入指定html
# *说明：
appendTo（）与append（）正好相反
# */
# /*
#functionjq（）{
# $（"Hello"）.appendTo（$（"#test"））;
#}
#*/
#/**（6）
# *appendTo（html）
# *运行：
复制一个id为hello的对象并且放在id为test的元素内部未尾
# *说明：
原元素无保持无变化
# */
# /*
#functionjq（）{
# $（"#hello"）.clone（）.appendTo（$（"#test"））;
#}
#*/
#/**（7）
# *empty（）
# *运行：
删除匹配对象的所有子节点
# */
# /*
#functionjq（）{
# $（"#delete"）.empty（）;
#}
#*/
#/**（8）
# *prepend（elem/elems/html）
# *运行：
在匹配元素的内部且开始处插入
# *说明：
比较：
append（elem）,appendTo（expr）,prepend（elem）,append在匹配元素内部结束处插入,appendTo与append匹配相反
# */
# /*
# functionjq（）{
# $（"#delete"）.prepend（$（"#test1"））
# alert（$（"#delete"）.html（））;
#}
#*/
#/**（8）
# *after（elem）
# *运行：
在匹配元素的外部后面开始插入
# *说明：
比较：
before（elem）在匹配元素的外部前面开始插入,insertAfter（elem）与after相反匹配,insertBefore（elem）与before匹配相反
# */
# /*
#functionjq（）{
# $（"#delete"）.before（$（"#test1"））
#}
#*/
#/**（9）
# *remove（）
# *运行：
移除匹配对象
# *说明：
注意区分empty（），empty（）移出匹配对象的子节点，remove（），移出匹配对象
# */
# /*
# functionjq（）{
# $（"#delete"）.remove（）;
#}
#*/
#/**（10）
# *wrap（htm）
# *运行：
将匹配对象包含在给出的html代码内
# *说明：
wrap（elem）将匹配对象包含在给出的对象内（只是一种包装，原对象不变）
# */
# /*
# functionjq（）{
# //$（"#delete"）.wrap（""）;
# $（"#delete"）.wrap（$（"#content"））;
#}
#*/
#/**（11）
# * add（el）
# * 运行：
在匹配对象的基础上在附加指定的dom元素
# * 说明：
add（els）在匹配对象的基础上在附加指定的一组对象，els是一个数组
# */
#/*
#functionjq（）{
# varf=$（"p"）.add（"b"）;
# //varf=$（"p"）.add（[document.getElementById（"a"）,document.getElementById（"b"）]）
# for（vari=0;i<$（f）.size（）;i++）{
# alert（$（f）.eq（i）.html（））;}
#}
#*/
#/**（12）
# *parents（）
# *运行：
一依次以匹配结点的父节点的内容为对象,一般一个文档还有
和，依次类推下去
# *说明：
parents（expr）在parents（）的基础上之取符合表达式的对象
# *注意：
新版本中取代老版本的ancestors（）
# */
# /*
# functionjq（）{
# varf=$（"span"）.parents（）;
# for（vari=0;i<$（f）.size（）;i++）{
# alert（$（f）.eq（i）.html（））;}
#}
#*/
#
#/**（13）
# *children（）
# *运行：
返回匹配对象的所有子结点
# *说明：
children（expr）返回匹配对象的子介点中符合表达式的节点,与之对应的有parent（）和parent（expr）
# */
#
# /*
# functionjq（）{
# //alert（$（"#delete"）.children（"span"）.html（））;
# alert（$（"#delete"）.children（）.html（））;
#}
#*/
#
#/**（14）
# * contains（Stringtext）returnsArray
# * 运行：
匹配元素根据提供的test
# * 说明：
contents（）returnsjQuery
# */
# /*
#functionjq（）{
# //$（"p:
contains（'just'）"）.css（"text-decoration","underline"）;//pass
# //alert（$（"p:
contains（'just'）"）.css（"text-decoration","underline"）.html（））;//pass
# //$（"p"）.contents（）.wrap（""）; //pass Findallthetextnodesinsideaparagraphandwrapthemwithaboldtag.
# //$（"p"）.not（".green,#blueone"）.css（"text-decoration","underline"）//passemoveselementsmatchingthespecifiedexpressionfromthesetofmatchedelements.
#}
#*/
#
#/**（15）
# *filter（Functionfn）returnsjQuery
# *运行：
首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素，并且设置其css
# *说明：
过滤元素，把不匹配的filter中定义的方法都过滤掉（当functionreturntrue时选择，否则过滤）
# */
# /*
# functionjq（）{
# $（"
升级会员 