- 1、本文档共12页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
jQuery常用函数和技巧
/art/201006/205042.htm
?2010-06-11 09:19 ?司马牵牛 译 ?51CTO.com ?我要评论(10)
文章将为读者讲述一些优秀的实现方法和技巧,正确地使用这些方法和技巧就能够充分利用这一框架为我们所提供的所有优点。
【51CTO独家特稿】现在使用jQuery的网站数不胜数,它能够成为成最为知名的JavaScript框架,肯定存在着某种原因。作为开发者,我们必须更深入地思考问题,应该能够使用每一种我们想要了解的语言和框架所具有最高级技巧。
高级选择器(selector)
在jQuery中,我们可以使用各种各样的选择器,这使得选择器的使用变得非常精确。51CTO也曾经和读者分享过jQuery选择器深入分析:避免不必要的调用,下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。
基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
img?src=?alt=?width=?height=?border=0?/?
input?type=text?name=email?value=?size=80?/?
上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:
$(document).ready(function(){ ?
?
????//Alltheimageswhosewidthis600px ?
?
????$(img[width=600]).click(function(){ ?
?
???????alert(Youvejustselectedanimagewhosewidthis600px); ?
?
????}); ?
?
??//Alltheimageshavingawidthdifferentto600px ?
?
????$(img[width!=600]).click(function(){ ?
?
????????alert(Youvejustselectedanimagewhosewidthisnot600px); ?
?
????}); ?
?
?//Alltheinputswhosenameendswithemail ?
?
????$(input[name$=email]).focus(function(){ ?
?
???????alert(Thisinputhasanamewhichendswithemail.); ?
?
????}); ?
?
});?
在官方文档中,我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的,属性和属性值。
多重选择器
如果你开放的是一个较为大型的网站,选择器的使用会变得困难。有时为了让代码变得更为简单,最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识,不过非常有用,我们应该把这些知识熟记于心。
$(document).ready(function(){ ?
?
????//Alltheimageswhosewidthis600pxORheightis400px ?
?
????$(img[width=600],img[height=400]).click(function(){ ?
?
???????alert(Selectedanimagewhosewidthis600pxORheightis400px); ?
?
????}); ?
?
?//Allpelementswithclassorange_text,divsandimages. ?
?
????$(p.orange_text,div,img).hover(function(){ ?
?
????????alert(Selectedapelementwithclassorange_text,adivORanimage.); ?
?
????});? ?
?
//Wecanalsocombinetheattributesselectors ?
?
????//Allthejpgimageswithanaltattribute(thealtsvaluedoesntmatter) ?
?
????$(img[alt][src$=.jpg]).click(function(){ ?
?
???????alert(Youselectedajpgimagewiththealtattribute.); ?
?
????}); ?
?
});?
Widget组件选择器
除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器:
$(document).ready(function(
您可能关注的文档
最近下载
- 管理学-PPT课件(全).pptx
- 高峰数字(四)_原创精品文档.pdf VIP
- “深圳工匠杯”深圳市第十四届职工技术创新运动会暨2024年深圳技能大赛碳排放管理员技能竞赛理论题库及答案(300题).docx VIP
- 粉针剂包装技术与设备.pptx
- 全文解读新修订的2021《中国共产党统一战线工作条例》ppt精品.pptx VIP
- 白蚁防治服务合同协议书范本.docx VIP
- (2022年新版)义务教育初中英语课程标准详细解读 (新课标解读讲座培训课件).pptx VIP
- 湖南《住宅工程质量常见问题防治技术规程》.docx
- 葡萄酿酒有限公司生产安全事故应急预案.docx VIP
- 路基爆破设计及施工组织方案.doc
文档评论(0)