JQUERY学习知识重点.doc
《JQUERY学习知识重点.doc》由会员分享,可在线阅读,更多相关《JQUERY学习知识重点.doc(22页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、.-基于属性的选择器在HTML中,几乎所有元素都具有属性,比如:1. 2. 上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:3. $(document).ready(function() 4. 5. /Alltheimageswhosewidthis600px 6. 7. $(imgwidth=600).click(function() 8. 9. alert(Youvejustselectedanimagewhosewidthis600px); 10. 11. ); 12. 13. /Alltheimages
2、havingawidthdifferentto600px 14. 15. $(imgwidth!=600).click(function() 16. 17. alert(Youvejustselectedanimagewhosewidthisnot600px); 18. 19. ); 20. 21. /Alltheinputswhosenameendswithemail 22. 23. $(inputname$=email).focus(function() 24. 25. alert(Thisinputhasanamewhichendswithemail.); 26. 27. ); 28.
3、29. );基于属性的选择器在HTML中,几乎所有元素都具有属性,比如:1. 2. 上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:3. $(document).ready(function() 4. 5. /Alltheimageswhosewidthis600px 6. 7. $(imgwidth=600).click(function() 8. 9. alert(Youvejustselectedanimagewhosewidthis600px); 10. 11. ); 12. 13. /Alltheim
4、ageshavingawidthdifferentto600px 14. 15. $(imgwidth!=600).click(function() 16. 17. alert(Youvejustselectedanimagewhosewidthisnot600px); 18. 19. ); 20. 21. /Alltheinputswhosenameendswithemail 22. 23. $(inputname$=email).focus(function() 24. 25. alert(Thisinputhasanamewhichendswithemail.); 26. 27. );
5、28. 29. );Widget组件选择器除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器:1. $(document).ready(function() 2. 3. /Allthehiddenimagesareshown 4. 5. $(img:hidden).show(); 6. 7. /Thefirstpisgoingtobeorange 8. 9. $(p:first).css(color,orange); 10. 11. /Inputwithtypepassword 12. 13. /thisis$(inputtype=password
6、) 14. 15. $(input:password).focus(function() 16. 17. alert(Thisisapassword!); 18. 19. ); 20. 21. /Divswithparagraph 22. 23. $(div:has(p).css(color,green); 24. 25. /Wecanalsocombinethem.with() 26. 27. /Allnotdisabledcheckboxes 28. 29. $(input:checkbox(:not(:disabled).hover(function() 30. 31. alert(Th
7、ischeckboxisworking.); 32. 33. ); 34. 35. );对树进行选择和转换选择就想树一样,网站结构中叶存在子与父。在jQuery中,我们可以利用这一结构。假设我们拥有相同的html,但是现在我们想要选择名为“main”的div中的p元素,但是不想对任何有关p元素的东西造成变化。我们有三种可能的方案,如下:1. $(#wrapper).children(#main).children(p).css(color,orange); 2. $(#wrapper).children().children(p).css(color,orange); 3. $(#main).
8、children(p).css(color,orange);利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器,该方法将仅选择我们需要的元素,如果不是这样,父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于:第二个选择器中我们什么也没有指定,所有每一个子元素都会被选中。此处的关键在于:在上图中wrapper这个div元素下除main之外并没有其他子元素,所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等,假设我们想要添加一个列表,如下:4. 5. 6. Dog7. 8
9、. Cat9. 10. Frog11. 12. 只是一些字符串,所以我们可以在JavaScript代码中这样写:13. varlist=n14. 15. +Dogn 16. 17. +Catn 18. 19. +Frogn 20. 21. ;现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。最后我们可以输入完整的代码,如下所示:22. $(document).ready(function() 23. 24. varlist=n25. 26. +Dogn 27. 28. +Catn 29. 30. +Frogn 31. 32. ; 33. 34. $(#wrapper)
10、.children(#main).append(list); 35. 36. );字面上我们将字符串附加到HTML中的,结果是这个列表显示在p元素之后。移除元素移除元素并不难,当我们谈到对树进行转换时,在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落(注意我们可以再次使用选择器)。1. $(#wrapper).children(#main).children(p).remove();2. 在这一代码中,位于选中元素之中的所有元素都将被移除,所以必须十分小心。如果div下有一个列表,当我们移除该div时,div和列表都会被移除。表面之下jQuery类似只露出一角的冰山,在水面之下
11、还有更多内容。这一小结中,我们将向你展示某些表面之下的内容。绑定(Bind)绑定是一种方法,利用它,我们可以将一个事件(鼠标点击、悬置等等)与一个方法连接起来。这有点类似:当用户单击此处时,调用该方法。听起来很熟悉,对吗?没错,我们经常这样做。看看以下示例:3. $(document).ready(function() 4. 5. $(#id).click(function() 6. 7. alert(Thatclickwasamazing!); 8. 9. ); 10. 11. );上文中click()方法在以下代码相对于wrapper:12. $(document).ready(funct
12、ion() 13. 14. $(#id).bind(click,function() 15. 16. alert(Thatclickwasamazing!); 17. 18. ); 19. 20. );此外,使用unbind()方法可以解除事件与元素的连接。定义你自己的jQuery方法目前我们看到了一些方法,如click、bind、hover等等,但是我们如何定义自己的方法?如何使用$(selector).mymethod()这样的语句调用这些方法?以下代码提供了这些问题的解决方案。定义一个方法,显示一个元素的值。1. /ThenamewillbealertVal 2. jQuery.fn.a
13、lertVal=function() 3. 4. varelement=$(this0);/Thatsourelement 5. 6. if(element.val() 7. 8. alert(element.val();/Thatsourelementsvalue 9. 10. ; 11. /Thisisthewaywecanuseit 12. $(selector).alertVal();回调(callback)是常用的解决方案使用回调,我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说:但你做完时,给我电话,因为我要做我的那份工作。不过现在的问题是:如何使用回调?13.
14、$(document).ready(function() 14. 15. myCallBack=function() 16. 17. alert(Imacallbackalert.); 18. 19. 20. 21. /WhenthegetfinishesthenmyCallBackisexecuted 22. 23. $.get(myhtmlpage.html,myCallBack); 24. 25. );注意:如果该函数包含参数,我们必须使用以下方式:26. $(document).ready(function() 27. 28. $.get(myhtmlpage.html,functio
15、n() 29. 30. myCallBack(param1,param2); 31. 32. ); 33. 34. ); jQuery中为我们提供了很多有用的方法和属性,文章总结了一些常用的函数和方法。个人认为在开发中会比较常用的,在实际的开发中我们可能会用到其他的方法和属性,文中只是个人认为新手初学jQuery时,必须掌握的一些方法。 51CTO推荐专题:入门到精通 jQuery开发手册 jQuery事件处理 ready(fn) 代码: $(document).ready(function() / Your code here.); 作用:它可以极大地提高web应用程序的响应速度。通过使用这
16、个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。 bind(type,data,fn) 代码: $(p).bind(click, function() alert( $(this).text() );); 作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。 toggle(fn,fn) 代码:$(td).toggle( function () $(this).addClass(selected); , function () $(this).removeClass(selec
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 学习 知识 重点
限制150内