Home思洋影视事业部网站建设知识库
0 Comments

一些应该熟记于心的jQuery函数和技巧(2)

发布于：2013-06-29  |   作者：广州网站建设  |   已聚集：人围观

Widget组件选择器

除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		$(document).ready(function(){  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		    //Allthehiddenimagesareshown  
    4. 
	
  4. 
		 
    5. 
	
  5. 
		    $("img:hidden").show();         
    6. 
	
  6. 
		 
    7. 
	
  7. 
		//Thefirstpisgoingtobeorange  
    8. 
	
  8. 
		 
    9. 
	
  9. 
		    $("p:first").css("color","orange");  
    10. 
	
  10. 
		 
    11. 
	
  11. 
		 //Inputwithtypepassword  
    12. 
	
  12. 
		 
    13. 
	
  13. 
		    //thisis$("input[type='password']")  
    14. 
	
  14. 
		 
    15. 
	
  15. 
		    $("input:password").focus(function(){  
    16. 
	
  16. 
		 
    17. 
	
  17. 
		       alert("Thisisapassword!");  
    18. 
	
  18. 
		 
    19. 
	
  19. 
		    });                    
    20. 
	
  20. 
		 
    21. 
	
  21. 
		//Divswithparagraph  
    22. 
	
  22. 
		 
    23. 
	
  23. 
		    $("div:has(p)").css("color","green");  
    24. 
	
  24. 
		 
    25. 
	
  25. 
		//Wecanalsocombinethem.with()  
    26. 
	
  26. 
		 
    27. 
	
  27. 
		    //Allnotdisabledcheckboxes  
    28. 
	
  28. 
		 
    29. 
	
  29. 
		    $("input:checkbox(:not(:disabled))").hover(function(){  
    30. 
	
  30. 
		 
    31. 
	
  31. 
		       alert("Thischeckboxisworking.");  
    32. 
	
  32. 
		 
    33. 
	
  33. 
		    });   
    34. 
	
  34. 
		 
    35. 
	
  35. 
		 }); 
    36. 




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



	理解网站的结构



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

	广州网站建设,网站建设,广州网页设计,广州网站设计




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




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



	以上示例代码的树形图



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

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机