jQuery简单入门练习

上传人：7*** IP属地：湖北上传时间：2022-02-25 格式：DOCX 页数：34 大小：74.89KB 积分：25 举报 版权申诉

已阅读5页，还剩29页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、01 简单的jQuery程序<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>&

2、lt;!- 引入外部独立的jQuery.js文件 -><script type="text/javascript" src="./js/jquery-1.8.3.js"></script></head><body><!- 文本标签 -><input type="text" value="zhang" id="username" name="username" /></body><s

3、cript type="text/javascript">/DOM var username = document.getElementById("username");alert(username.value);/jQuery var $username = $("#username");alert($username.val();</script></html>1. JQuery 要进行使用，导入外部的js文件2. jQuery的写法使用$作为标示符3. 获取它的id，格式：$(“#id”);4. 获

4、取id的值，格式：.val();02 /DOM 对象转换成jQuery对象：$(DOM对象)<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>

5、Insert title here</title><!- 引入js文件 -><script type="text/javascript" src="./js/jquery-1.8.3.js"></script></head><body><input type="text" value="zhang" id="username" name="username"/></body><

6、;script type="text/javascript">var username = document.getElementById("username");/DOM 对象转换成jQuery对象：$(DOM对象)var $username = $(username);alert($username.val();</script></html>1. 在进行DOM 对象转换成jQuery对象，格式：$(DOOM对象)03 jQuery对象转换成DOM对象<!DOCTYPE html PUBLIC "-/W3

7、C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src=&q

8、uot;./js/jquery-1.8.3.js"></script></head><body><input type="text" value="zhang" name="username" id="username" /></body><script type="text/javascript">/jQuery var $username = $("#username");/jQuer

9、y对象是数组对象：jQuery对象索引值/jQuery对象转换成DOM对象var username = $username.get(0);alert(username.value);</script></html>1. 由于jQuery是数组对象：jQuery对象索引值2. Jquery就提供了一个get()方法获取其下标3. 转换完成之后，通过DOM提供的value属性，获取DOM的value的值04 对比事件处理机制<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" &qu

10、ot;/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="./js/jquery-1.8.3.js"></sc

11、ript></head><body><input type="text" value="zhang" id="username" value="username" /><input type="text" value="88888" id="psw" name="psw" /></body><script type="text/javascript&quo

12、t;>/DOM /var username = document.getElementById("username!");/if(!username) /alert("id 不存在");/else /alert(username.value);/jQueryvar $username = $("#username111");alert($username.val();</script></html>1. 在jQuery事件处理机制方式中，如果没有这个值的时候会输出undefined01 基本选择器<

13、!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!- 引入jQuery和css

14、樣式 -><script src="./js/jquery-1.4.2.js" type="text/javascript"></script><script src="./script/assist.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="./css/style.css" /

15、><script type="text/javascript">/<input type="button" value="选择 id为 one 的元素." id="btn1"/> $(document).ready(function()$("#btn1").click(function()$("#one").css("background","yellow"););/<input type="

16、;button" value="选择 class 为 mini 的所有元素." id="btn2"/>$("#btn2").click(function()/支持类似于批操作$(".mini").css("background","yellow"););/<input type="button" value="选择元素名是 div 的所有元素." id="btn3"/>$("#

17、btn3").click(function()$("div").css("background","yellow"););/<input type="button" value="选择所有的元素." id="btn4"/>$("#btn4").click(function() $("*").css("background","yellow"););/<input ty

18、pe="button" value="选择所有的span元素和id为two的元素." id="btn5"/>$("#btn5").click(function()$("span,#two").css("background","yellow");););</script></head><body> <button id="reset">手动重置页面元素</button>

19、 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!- 控制按钮 -> <input type="button" value="选择 id为 one 的元素." id=&

20、quot;btn1"/> <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> <input type="button" value="选择元素名是 div 的所有元素." id="btn3"/> <input type="button" value="选择所有的元素." id="btn4"/&

21、gt; <input type="button" value="选择所有的span元素和id为two的元素." id="btn5"/> <br /><br /> <!- 测试的元素 -> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <di

22、v class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div>

23、 <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one">

24、<div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="dis

25、play:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="m

26、over">正在执行动画的span元素.</span><!- Resources from -></body></html>1. 先进行引入js 和各种各样的文件2. $(document).ready(function();3. 在function里面进行onlick操作后进行4. $("#one").css("background","yellow");进行设置背景颜色02 层次选择器<!DOCTYPE html PUBLIC "-/W3C/DTD

27、HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!- 引入js和css文件和jQuery -><script type="text

28、/javascript" src="./js/jquery-1.4.2.js"></script><script type="text/javascript" src="./script/assist.js"></script><link rel="stylesheet" type="text/css" href="./css/style.css"/><script type="text/java

29、script">$(document).ready(function()/<input type="button" value="选择 body内的所有div元素." id="btn1"/>/祖先元素与后代元素的关系$("#btn1").click(function()$("body div").css("background","yellow"););/<input type="button" val

30、ue="在body内,选择子元素是div的。" id="btn2"/>/父子元素的关系$("#btn2").click(function()$("body>div").css("background","yellow"););/<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>$("#btn3").cl

31、ick(function()$("one+div").css("background","yellow"););/<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>$("btn4").click(function()$("#twodiv").css("background","yellow"););/&l

32、t;input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/>$("#btn5").click(function()$("#two").siblings("div").css("background","yellow");););</script></head><body> <h3>层次选择器.</h3>

33、<button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选择 body内的所有div

34、元素." id="btn1"/> <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> <input type="button" value="选择 id为two的元素后面的所有div兄弟元素.

35、" id="btn4"/> <input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/> <br /> <br /> <!- 测试的元素 -> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini<

36、/div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为t

37、est</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <di

38、v class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div

39、> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> <

40、/div> <span id="mover">正在执行动画的span元素.</span><!- Resources from -></body></html>1. 祖先元素与后代元素的关系 "body div"2. 父子元素的关系 "body>div"3. 下一个div元素 "#one+div"4. div兄弟元素 "#twodiv"5. div兄弟元素 $("#two").siblings("

41、div")03 基本过滤器选择器<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</tit

42、le><!- 引入jQuery -><script type="text/javascript" src="./js/jquery-1.4.2.js"></script><link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript">$(document).ready(function

43、()/<input type="button" value="选择第一个div元素." id="btn1"/>$("#btn1").click(function()$("div:first").css("background","yellow"););/<input type="button" value="选择最后一个div元素." id="btn2"/>$("

44、#btn2").click(function()$("div:last").css("background","yellow");)/<input type="button" value="选择class不为one的所有div元素." id="btn3"/>$("#btn3").click(function()/获取class不为one的，包含没有class属性的$("div:not('.one')&quo

45、t;).css("background","yellow");)/<input type="button" value="选择索引值为偶数的div元素." id="btn4"/>$("#btn4").click(function()$("div:even").css("background","yellow");)/<input type="button" value=&quo

46、t;选择索引值为奇数的div元素." id="btn5"/>$("#btn5").click(function()$("div:odd").css("background","yellow");)/<input type="button" value="选择索引值等于3的元素." id="btn6"/>$("#btn6").click(function()$("div:eq(3

47、)").css("background","yellow");)/<input type="button" value="选择索引值大于3的元素." id="btn7"/>$("#btn7").click(function()$("div:gt(3)").css("background","yellow");)/<input type="button" value=&q

48、uot;选择索引值小于3的元素." id="btn8"/>$("#btn8").click(function()$("div:lt(3)").css("background","yellow");)/<input type="button" value="选择所有的标题元素." id="btn9"/>$("#btn9").click(function()$(":header&qu

49、ot;).css("background","yellow");)/<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>function move() $("#mover").slideToggle("slow",move)move() $("#btn10").click(function()$(":animated").css("

50、background","yellow"););</script></head><body> <h3>基本过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下

51、列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选择第一个div元素." id="btn1"/> <input type="button" value="选择最后一个div元素." id="btn2"/> <input type="button" value="选择class不为one的所有div元素.&qu

52、ot; id="btn3"/> <input type="button" value="选择索引值为偶数的div元素." id="btn4"/> <input type="button" value="选择索引值为奇数的div元素." id="btn5"/> <input type="button" value="选择索引值等于3的元素." id="btn6"

53、;/> <input type="button" value="选择索引值大于3的元素." id="btn7"/> <input type="button" value="选择索引值小于3的元素." id="btn8"/> <input type="button" value="选择所有的标题元素." id="btn9"/> <input type="butt

54、on" value="选择当前正在执行动画的所有元素." id="btn10"/> <br /><br /> <!- 测试的元素 -> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="tw

55、o" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one">

56、<div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">c

57、lass为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none&q

58、uot;>style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</sp

59、an><!- Resources from -></body></html>1. 选择第一个$(div:first)2. 选择最后一个div元素$("div:last")3. 不为one的 ("div:not('.one')")4. 索引值为偶数 $("div:even")5. 索引值为奇数 $("div:odd")6. 索引值等于3的元素 $("div:eq(3)")7. 索引值大于3的元素 $("div:gt(3)"

60、;)8. 索引值小于3的元素. $("div:lt(3)")9. 选择所有的标题元素 $(":header")04 内容过滤选择器<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/htm

61、l; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="./js/jquery-1.4.2.js"></script><script type="text/javascript" src="./script/assist.js"></script><link rel="stylesheet"

62、; type="text/css" href="./css/style.css" /> <script type="text/javascript">$(document).ready(function()/<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>$("#btn1").click(function()$("div:contains('

63、di')").css("background","yellow");)/<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>$("#btn2").click(function()$("div:empty").css("background","yellow");)/<input type="bu

64、tton" value="选取含有class为mini元素的div元素." id="btn3"/>$("#btn3").click(function()$("div:has('.mini')").css("background","yellow");)/<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/&

65、gt;$("#btn4").click(function()$("div:parent").css("background","yellow");)</script></head><body> <h3>内容过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset&quo

66、t; checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id=

67、"btn2"/> <input type="button" value="选取含有class为mini元素的div元素." id="btn3"/> <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/><br /><br /> <!- 测试的元素 -> <div class="one" id=

68、"one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为oth

69、er</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">

70、;class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div cla

71、ss="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input

72、的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</span><!- Resources from -></body></html>1. 选取含有文本“di”的div元素 $("div:contains('di')")2. 不包含子元素(或者文本元素)的div空元素 $(

73、"div:empty")3. 选取含有class为mini元素的div元素 $("div:has('.mini')")4. 含有子元素(或者文本元素) $("div:parent")05 可见性过滤器<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http

74、-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!- 引入jQuery -><script type="text/javascript" src="./js/jquery-1.4.2.js"></script><script type="text/javascript" src="./

75、script/assist.js"></script><link rel="stylesheet" type="text/css" href="./css/style.css"/><script type="text/javascript">$(document).click(function()/<input type="button" value=" 选取所有可见的div元素" id="b1"/

76、>$("#b1").click(function()$("div:visible").css("background","yellow")/<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>$("#b2").click(function()$("div:hidden").show(3000

77、).css("background","yellow");)/<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>$("#b3").click(function()var $inputs = $("input:hidden")$inputs.each(function(index,domEle)alert(domEle.value);)</script></he

78、ad><body> <h3>可见性过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> <br/><br/> <input t

79、ype="button" value=" 选取所有可见的div元素" id="b1"/> <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值&quo

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

jQuery简单入门练习

文档简介

温馨提示

最新文档

评论

jQuery简单入门练习

文档简介

温馨提示

最新文档

评论

相关文档