jquery知识大全.docx
- 文档编号:5608831
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:15
- 大小:21.48KB
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中添加“
Hello
# */
#/*
# functionjq(){
# $("
Hello
# }
#*/
#
#/**(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;
# * 说明:
执行完后在界面可看见执行效果
# */
# /*
# functionjq(){
# $("#test").after("Hello");
#}
#*/
#/**(3)
# * after(elem)或after(elems)
# * 运行:
将指定对象elem或对象组elems插入到在匹配元素后
# * 说明:
执行后相当于
# */
#/*
# 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(){
# $("
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 知识 大全