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

使用jQuery构建未来Web应用程序(3)

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

与所有其他的属性函数类似，这些函数也有相应的setter方法。第一个是html()函数，它能返回某个标记的所有innerHTML。另一个是text()，它能返回某个标记内的所有文本。那么二者有何区别呢？html()函数能返回包括HTML标记在内的文本，而text()则会分离二者，只返回内含的文本。以下示例展示了它们的不同之处。
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		清单7.html()与text()的对比  
    2. 
	
  2. 
		//thiswillexamineevery<td>tag,andifthevalueisblank,itwillinsert  
    3. 
	
  3. 
		//a"-"intoit,asaplaceholder.  
    4. 
	
  4. 
		$("td").each(function(){  
    5. 
	
  5. 
		//checkthetextofthetablecell  
    6. 
	
  6. 
		if($(this).text()=="")  
    7. 
	
  7. 
		$(this).text("-");  
    8. 
	
  8. 
		});  
    9. 
	
  9. 
		 
    10. 
	
  10. 
		//thiswillconverteveryparagraph'stexttolowercase  
    11. 
	
  11. 
		$("p").each(function(){  
    12. 
	
  12. 
		varoldText=$(this).text();  
    13. 
	
  13. 
		varnewText=oldText.toLowerCase();  
    14. 
	
  14. 
		$(this).text(newText);  
    15. 
	
  15. 
		});  
    16. 
	
  16. 
		 
    17. 
	
  17. 
		<--Thisshowsthedifferencebetweentext()andhtml()--> 
    18. 
	
  18. 
		<dividdivid="sample"><b>Thisistheexample</b></div> 
    19. 
	
  19. 
		 
    20. 
	
  20. 
		$("#sample").html();//willreturn"<b>Thisistheexample</b>"  
    21. 
	
  21. 
		$("#sample").text();//willreturn"Thisisanexample" 
    22. 




	此外，最近还向jQuery库添加了用于属性的data()函数。它源自jQueryUI项目并且已纳入jQuery的整体项目之中。起初，UI项目开发人员只是觉得他们不想破坏某些页面元素的可用属性，于是就想到要找到一种方法，用来根据自己的需要创建能存储信息的属性。



	回顾上文提到过的选项卡的例子。我其实“破坏”了此DIV的ID内的链接，而这显然不是最理想的方法。但是，受jQuery以前版本的限制，这在当时是惟一的选择。有了data()函数之后，这个问题就有了更好的解决方案。不妨将data()函数视为用来访问包含在每个页面元素的内部Map的一种方式。



	一个Map实际上就是键-值对的集合。这就让开发人员可以创建他们想要给页面元素提供的任何定制属性，并能给该属性附加任意值。最终的结果就是代码的编写更简单，而且当项目规模不断增大时，代码的维护也更容易。接下来，让我们用新的data()函数重写上文提到的示例：

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




    
	
  1. 
		清单8.新的data()函数  
    2. 
	
  2. 
		//createthedivlikewedidabove,butwithoutanyspecificinformation.Inthis  
    3. 
	
  3. 
		//waywecancreateagenericHTMLlayoutandcustomizeitinourjQuerycode.  
    4. 
	
  4. 
		 
    5. 
	
  5. 
		<td> 
    6. 
	
  6. 
		<divclassdivclass="tab"></div> 
    7. 
	
  7. 
		</td> 
    8. 
	
  8. 
		 
    9. 
	
  9. 
		//NowcustomizeeachtabinthejQuerycode.  
    10. 
	
  10. 
		 
    11. 
	
  11. 
		$(".tab").eq(0).text("Messages");  
    12. 
	
  12. 
		$(".tab").eq(0).data("link","messages.jsp");  
    13. 
	
  13. 
		$(".tab").click(function(){  
    14. 
	
  14. 
		window.parent.frames['content'].location=$(this).data("link");  
    15. 
	
  15. 
		});  
    16. 
	
  16. 
		 
    17. 
	
  17. 
		//Takingthisastepfurther,youcanpictureallthisinformationcomingfrom  
    18. 
	
  18. 
		//anexternalpropertiesfileviaaJavaarray.ThiswouldbethecodeonaJSP  
    19. 
	
  19. 
		//page.  
    20. 
	
  20. 
		 
    21. 
	
  21. 
		<%  
    22. 
	
  22. 
		//arraycontainingtabnames  
    23. 
	
  23. 
		String[]tabNames;  
    24. 
	
  24. 
		//arraycontainingtablinks  
    25. 
	
  25. 
		String[]links;  
    26. 
	
  26. 
		 
    27. 
	
  27. 
		for(inti=0;i<tabNames.length;i++){  
    28. 
	
  28. 
		%> 
    29. 
	
  29. 
		$(".tab").eq(<%=i%>).text("<%=tabNames[i]%>");  
    30. 
	
  30. 
		$(".tab").eq(<%=i%>).data("link","<%=links[i]%>");  
    31. 
	
  31. 
		<%}%> 
    32. 
	
  32. 
		 
    33. 
	
  33. 
		$(".tab").click(function(){  
    34. 
	
  34. 
		window.parent.frames['content'].location=$(this).data("link");  
    35. 
	
  35. 
		}); 
    36. 




	CSS处理



	本文最后的这个部分将要介绍如何在不调整样式表或重载此页面的情况下动态地处理页面的CSS。我们将能够通过简单更改颜色、字体等向页面添加一些基本效果。jQuery的CSS实际上是整个库最初的创意来源。其目标是让页面上的CSS编程更容易。



	正如您所见，此项目随后得到了充分的发展。但是项目的初衷并没有改变，jQuery的确简化了CSS编程。不过，我还是先要说明一点，即jQuery为处理CSS所提供的那些传统函数实际上已经不能适应当今的Web环境。然后，我会介绍可以使用的其他函数（也是jQuery内的）。



	有两个基本函数可用来处理页面上的CSS。可以先以字符串传递单个属性，然后再以字符串传递单个值，也可以用字符串/字符串数组的形式一次传递。这两个函数的功能基本相同，并且可以很容易地更改页面的CSS。




    
	
  1. 
		清单9.css()函数  
    2. 
	
  2. 
		//changethebackgroundofeverydivtored  
    3. 
	
  3. 
		$("div").css("backgroundColor","#ff0000");  
    4. 
	
  4. 
		//-or-  
    5. 
	
  5. 
		$("div").css("backgroundColor","red");  
    6. 
	
  6. 
		//-or-  
    7. 
	
  7. 
		$("div").css({backgroundColor:"#ff0000"});//noticethebracesandlackofquotes 
    8. 




	可以看出这些函数非常简单直观，很容易理解和掌握。不过，考虑到目前Web页面设计的潮流，这些函数还存在一些问题。常规的Web页面都是从页面删除样式，然后在样式表中填入一个外部文件或代码片段。如果能采用其他办法，您肯定不希望将样式代码放入JavaScript代码中。否则，将来更改站点的外观将十分困难。



	幸运的是，现在已经有了替代函数，它既能提供所需的代码分离，又能让CSS处理简单直观。这些函数允许从页面元素添加和删除类。通过将这些类的样式放入外部样式表，就能分离样式、数据和事件，这种分离对于复杂的页面至关重要。请看以下这些示例：




    
	
  1. 
		清单10.更佳的CSS处理-addClass()和removeClass()  
    2. 
	
  2. 
		$(":textfield").each(function(){  
    3. 
	
  3. 
		if($(this).val()=="")  
    4. 
	
  4. 
		{  
    5. 
	
  5. 
		$(this).next().text("Error");  
    6. 
	
  6. 
		//thiswillturnthetextfield'sborder/textred  
    7. 
	
  7. 
		$(this).addClass("input_error");  
    8. 
	
  8. 
		}  
    9. 
	
  9. 
		//thistestsifthetextfieldhastheclassattachedalready  
    10. 
	
  10. 
		elseif($(this).hasClass("input_error"))  
    11. 
	
  11. 
		{  
    12. 
	
  12. 
		$(this).next().text("");  
    13. 
	
  13. 
		//thiswillremovetheclass,restoringanormalborder/text  
    14. 
	
  14. 
		$(this).removeClass("input_error");  
    15. 
	
  15. 
		}  
    16. 
	
  16. 
		}); 
    17. 




	如这个示例所示，通过引用在外部样式表内定义的类来调整CSS是一种更可取的处理CSS的方法。它让Web站点创建者通过更改样式表就能改变整个站点错误消息的处理方式，而不再像采用css()方法时那样，必须追究代码的每个实例。虽然这些方法直观易用，但是不太适合大型Web应用程序，应该避免采用addClass()和removeClass()方法。

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


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机