版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
jQuery常用函数和技巧/art/201006/205042.htm
2010-06-1109: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("You'vejustselectedanimagewhosewidthis600px");
});
//Alltheimageshavingawidthdifferentto600px
$("img[width!=600]").click(function(){
alert("You'vejustselectedanimagewhosewidthisnot600px");
});
//Alltheinputswhosenameendswith'email'
$("input[name$='email']").focus(function(){
alert("Thisinputhasanamewhichendswith'email'.");
});
});
在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。多重选择器如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单，最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。$(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(thealt'svaluedoesn'tmatter)
$("img[alt][src$='.jpg']").click(function(){
alert("Youselectedajpgimagewiththealtattribute.");
});
});
Widget组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：$(document).ready(function(){
//Allthehiddenimagesareshown
$("img:hidden").show();
//Thefirstpisgoingtobeorange
$("p:first").css("color","orange");
//Inputwithtypepassword
//thisis$("input[type='password']")
$("input:password").focus(function(){
alert("Thisisapassword!");
});
//Divswithparagraph
$("div:has(p)").css("color","green");
//Wecanalsocombinethem.with()
//Allnotdisabledcheckboxes
$("input:checkbox(:not(:disabled))").hover(function(){
alert("Thischeckboxisworking.");
});
});
如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。理解网站的结构网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body标签。<html
xmlns="/1999/xhtml">
<head>...</head>
<body>
<div
id="wrapper">
<div
id="main">
<h1>CreateanAccount!</h1>
<form
id="myform"
action="#"
method="post">
<legend>PersonalInformation</legend>
<input
type="text"
name="email_address"
value="EmailAddress"/>
<input
type="checkbox"
name="checking"
value=""/>
</form>
<p>Message</p>
</div><!--Endmain-->
</div><!--Endwrapper-->
<div
id="footer">
<p>Footermessage</p>
</div><!--Endfooter-->
</body>
</html>
以上示例代码的树形图如下：很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。对树进行选择和转换选择就想树一样，网站结构中叶存在子与父。在jQuery中，我们可以利用这一结构。假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。我们有三种可能的方案，如下：$("#wrapper").children('#main').children('p').css("color","orange");
$("#wrapper").children().children('p').css("color","orange");
$("#main").children('p').css("color","orange");
利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：<ul>
<li>Dog</li>
<li>Cat</li>
<li>Frog</li>
</ul>
只是一些字符串，所以我们可以在JavaScript代码中这样写：var
list=
"<ul>\n"
+
"<li>Dog</li>\n"
+
"<li>Cat</li>\n"
+
"<li>Frog</li>\n"
"</ul>";
现在我们要在html中某个地方添加字符串。比如，在之前我们选择的p元素之后。最后我们可以输入完整的代码，如下所示：$(document).ready(function(){
var
list=
"<ul>\n"
+
"<li>Dog</li>\n"
+
"<li>Cat</li>\n"
+
"<li>Frog</li>\n"
"</ul>";
$("#wrapper").children('#main').append(list);
});
字面上我们将字符串附加到HTML中的</p>，结果是这个列表显示在p元素之后。移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。$("#wrapper").children('#main').children('p').remove();
在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div下有一个列表，当我们移除该div时，div和列表都会被移除。表面之下jQuery类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。绑定（Bind）绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：$(document).ready(function(){
$("#id").click(function(){
alert("Thatclickwasamazing!");
});
});
上文中click()方法在以下代码相对于wrapper：$(document).ready(function(){
$('#id').bind('click',
function
(){
alert("Thatclickwasamazing!");
});
});
此外，使用unbind()方法可以解除事件与元素的连接。定义你自己的jQuery方法目前我们看到了一些方法，如click、bind、hover等等，但是我们如何定义自己的方法？如何使用$(’selector’).mymethod()这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。//ThenamewillbealertVal
jQuery.fn.alertVal=
function(){
var
element=$(this[0]);
//That'sourelement
if
(element.val())
alert(element.val());
//That'sourelement'svalue
};
//Thisisthewaywecanuseit
$("selector").alertVal();
回调（callback）是常用的解决方案使用回调，我们可以在其他方法完
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 小学四年级下班主任工作计划范文
- 教师教学工作计划范文五篇
- 三年级上学期语文教学计划合集5篇
- 心理工作计划
- 2022年高中德育工作计划
- 高中数学教学工作计划模板汇编五篇
- 2022高考满分作文写酒
- 银行主任竞聘演讲稿三篇
- 下学期工作计划
- 2022国庆节创意活动方案流程策划
- 英语演讲技巧与实训学习通超星期末考试答案章节答案2024年
- 智慧水产养殖解决方案10.9
- 《预防未成年人犯罪》课件(图文)
- 2024-2030年全球及中国环境健康与安全（EHS）行业市场现状供需分析及市场深度研究发展前景及规划可行性分析研究报告
- 2024年浙江省能源集团应届生招聘高频难、易错点500题模拟试题附带答案详解
- 材料工程管理人员个人年终工作总结范文
- 黑龙江金融服务支持中俄贸易的现状、不足和展望
- 福建省公路水运工程试验检测费用参考指标
- （小学组）全国版图知识竞赛考试题含答案
- 四种“类碰撞”典型模型研究（讲义）（解析版）-2025年高考物理一轮复习（新教材新高考）
- 2024年新人教版七年级上册数学教学课件 第六章 几何图形初步 综合与实践 设计学校田径运动会比赛场地
评论
0/150
提交评论