高级选择器(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="http://www.w3.org/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看做一棵树,不过我们想做的是程序员,这些植物学的理论有什么用处?答案就在下一个要点之中。
分享到:
相关推荐
在.NET框架中,ADO.NET(ActiveX Data Objects for .NET)是用于访问和管理数据的强大工具集,广泛应用于各种应用程序的数据处理中。本章节将从T-SQL语言的基础查询开始,深入探讨与ADO.NET相结合时的基本用法。 ##...
3. **字段选择**:通过`SELECT`语句来指定需要显示的字段,这里选择了`OrderDate`、`OrderCount`、`ProductName`、`ProductPrice` 和 `ProductArea` 这五个字段。 4. **数据来源表**:`Orders` 表和 `Products` 表是...
### 一些应该熟记于心的jQuery函数和技巧 - **链式调用**:通过链式调用可以连贯地进行一系列DOM操作。 - **事件委托**:使用`.on()`方法将事件绑定到父元素上,子元素触发事件时也会被处理,这样可以减少事件监听器...
30°、45°、60°这些角度的三角函数值是必须熟记于心的,它们是解题过程中的基础工具。 扇形面积的计算是涉及到面积公式的运用,选择题3给出了一个扇形面积的计算问题,扇形面积公式是S扇形=αr²/2,其中α是扇形...
在复习三角函数时,建议考生不仅要熟记定义和公式,还要能够灵活运用,尤其是解决实际问题时。对于弧度制和三角函数概念,要确保能够熟练转换角度和弧度,理解终边相同角的表示,并能根据点在单位圆上的位置确定三角...
这个“jQuery学习文档”包含了一系列的资源,旨在帮助开发者深入理解jQuery的核心概念和应用技巧,以便构建交互性更强、用户体验更佳的动态网页。 首先,`jQuery1.10.x.chm`文件可能是一个关于jQuery 1.10.x版本的...
下面将详细阐述初中三角函数的基本概念、重要性质和解题技巧。 首先,三角函数包括正弦(sin)、余弦(cos)和正切(tan)三个基本函数,以及它们的反函数:反正弦(asin或arcsin)、反余弦(acos或arccos)和反正...
这类题目不仅考察了对正切函数的理解,还锻炼了学生运用三角函数和勾股定理解决实际问题的能力。 选择题3和4则涉及到了菱形和正方形的几何性质,以及特殊角度(30°,45°,60°)的三角函数值的运用。菱形的对角线...
对于一些常见角度(如0°,30°,45°,60°,90°等)的正弦、余弦和正切值,需要熟记。例如,sin 45° = cos 45° = 1/√2,sin 90° = 1,cos 90° = 0,tan 45° = 1。 4. 易误点: - 在应用平方关系开方时,...
在本节《正弦函数、余弦函数的性质(二)》的教学设计中,主要目标是让学生深入理解和掌握正弦函数和余弦函数的单调性,并学会如何运用这些性质来比较三角函数值的大小以及确定函数的单调区间。教学重点在于正弦函数...
对于网络工程师,TCP/IP协议栈、OSI模型应熟记于心。 2. **项目经验与实战能力**:讲述你的项目经验,包括项目背景、目标、你在其中的角色以及所遇到的问题和解决方案。这将展示你的实际操作能力和问题解决技能。 ...
1. **变量函数库**:提供了如`call_user_func`用于调用用户定义的函数,`doubleval`用于获取变量的双精度浮点值,以及`isset`、`unset`等用于检测和删除变量的函数。`gettype`和`settype`则分别用于获取和设置变量的...
4. **特殊角的三角函数值**:一些特定角度如30°、45°、60°的正弦、余弦和正切值需要熟记,这对于快速解决问题非常有帮助。 5. **对称性质**:例如,cos(π-α)=-cosα,sin(π-α)=sinα,这些对称性质在解题中...
中考政治解题方法与熟记技巧.pdf
不定积分和定积分是微积分学中的核心概念,对于学习高等数学(高数)的学生,尤其是准备期末考试或考研的学生来说,掌握这些公式至关重要。...只有公式熟记于心,技巧运用自如,才能在面对复杂的积分问题时游刃有余。
总之,掌握好三角函数和解三角形的知识对于高考数学复习至关重要,这不仅要求学生能够熟记公式和定义,还需要他们能够灵活应用这些知识解决各种复杂问题。通过系统的学习和大量的练习,学生可以逐步提高在这部分知识...
三角函数是高中数学中的核心概念,主要包含正弦函数、余弦函数和正切函数。这些函数在物理、工程、经济等多个领域都有广泛应用。复习三角函数的图像和性质,主要关注以下几个方面: 1. **定义域与值域**: - 正弦...
- 熟记同角三角函数的基本关系式,反复练习化简和求值问题,提升计算速度和准确性。 - 掌握各种变换技巧,如“切化弦”和“弦化切”,以适应不同题目的需求。 - 应用方程思维解决问题,建立三角函数间的等量关系...
三角函数,作为高中数学的核心内容,涵盖了正弦函数、余弦函数和正切函数等基本函数。这些函数在定义域内表现出独特的性质,其中周期性、单调性和对称性是基础中的基础。例如,正弦和余弦函数的周期为2π,意味着每...
同时,对于常见的三角函数值,如sin 30°、sin 45°、cos 30°、cos 45°等,也应该熟记于心,以便于快速计算。在解决实际问题时,不仅要理解公式背后的几何意义,还要能够根据题目条件选择合适的公式和方法进行求解...