00_jQuery常用-一些应该熟记于心的jQuery函数和技巧-02

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$("input[type='password']")  
  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("Thischeckboxisworking.");  
  32.  
  33.     });   
  34.  
  35.  }); 

如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。

理解网站的结构

网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body标签。

  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head>...</head> 
  3. <body> 
  4.  
  5.     <div id="wrapper"> 
  6.  
  7.         <div id="main"> 
  8.  
  9.             <h1>CreateanAccount!</h1> 
  10.  
  11.             <form id="myform" action="#" method="post"> 
  12.  
  13.                 <legend>PersonalInformation</legend> 
  14.  
  15.                 <input type="text" name="email_address" value="EmailAddress"/> 
  16.  
  17.                 <input type="checkbox" name="checking" value=""/> 
  18.  
  19.             </form> 
  20.  
  21.             <p>Message</p> 
  22.  
  23.         </div><!--Endmain--> 
  24.  
  25.     </div><!--Endwrapper--> 
  26.  
  27.     <div id="footer"> 
  28.  
  29.         <p>Footermessage</p> 
  30.  
  31.     </div><!--Endfooter--> 
  32.  
  33. </body> 
  34. </html> 

以上示例代码的树形图如下：

以上示例代码的树形图

很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。

posted on   shao  阅读(144)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae