思洋互动网站建设学前班

属性

页面交互性的一个体现就是它从页面的某个区域获得信息并将信息传送到其他位置的能力。这可以很具体，比如从一个文本字段获得信息后将信息放入一个表内；也可以很宽泛，比如从一个组合框获得信息后将信息传给服务器，然后将服务器的响应再放入另外一个不同的组合框内。交互性的核心就是页面信息的传递。
广州网站建设,网站建设,广州网页设计,广州网站设计

在页面上保存信息有很多不同的方式，在页面的某个元素内存储信息的方法就更多样了。您可能会想，一个简单的<p>所包含的信息肯定没有一个文本字段那么多（这不一定正确），因而，访问信息也有很多不同的函数。

同样地，您自己可能已经有了这样的结论：如果能从页面元素获得信息，那么也应该可以在这些元素上放置信息。实际上，每个页面元素都是一个数据对象，其中包含由getter/setter方法封装的变量。JavaBean模型和jQuery的实际差异是方法名称和某些元素不适合特定函数的限制。

在深入研究这些方法之前，让我们先来看看什么信息能存储到页面元素内。简单一些的，像a<p>，可能只包含CLASS或ID信息。而像<img>则可能包含更多信息，比如“src”、“alt”、“width”和“height”。而复杂一些的，像<inputtype="password">则可能包含“defaultValue”、“maxLength”、“readOnly”或“accessKey”等信息。这种潜在变量的多样性促使jQuery创建了一种广义函数来访问它们。这个函数是attr(name)，可用来访问来自任何页面元素的信息。我们将通过几个示例来了解其工作原理。

1. 清单3.jQueryattr()函数  
2. <imgsrcimgsrc="/images/space.gif"id="spacer"class="abc"alt="blank"> 
3. //Callstotheattr()functionwillreturnthefollowing  
4. $("#spacer").attr("src");//willreturn"/images/space.gif"  
5. $("#spacer").attr("alt");//willreturn"blank"  
6. //Similarly,youcanaccesstheIDinthesameway  
7. $(img).each(function(){  
8. $(this).attr("id");//willreturn"spacer"  
9. }); 

在试图向页面添加交互性时，此函数十分有用。实际上，在添加data()函数（如下所示）之前，通常都必须将所需信息压缩到一个可用变量内。例如，假设有一个页面具有两个框架，第一个框架显示选项卡，底部框架显示每个选项卡的内容，那么可以这样设置：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. 清单4.应用attr()  
2. <!--Thiswouldappearinthetopframeasatab.TheCSSfilewouldcontrolhow  
3. thetabappears,andtheonlyHTMLcodeneededwouldbethis--> 
4. <td> 
5. <divclassdivclass="tab"id="/messages.jsp">Messages</div> 
6. </td> 
7.  
8. $(".tab").click(function(){  
9. window.parent.frames['content'].location=$(this).attr("id");  
10. }); 

除了获得每个元素上的属性值外，还可以设置这些值。其效果与以编程方式更改元素外观或行为相同。

1. 清单5.利用attr(str)更改属性  
2. //willchangetheimagesource,andtheimagedisplayedonthepagewillchange  
3. $("img").attr("src","myimage.jpg");  
4.  
5. //willchangeallthelinksonthepagetogotoonespecificpage  
6. $("a").attr("href","mypage.html");  
7.  
8. //willchangethemaxLengthonallpasswordfieldsto10characters  
9. $(":password").attr("maxLength","10"); 

页面上的Form元素具有一个特殊的函数，该函数可以针对这些元素调用以获得附加到元素的值。在处理表单和验证时，这一点尤其便利，而且在用Form元素创建交互Web站点时更有可能会用到这些函数。

1. 清单6.Form元素的val()函数  
2. //willgetthetextcontainedinthetextfieldandcheckthatit'snotblank  
3. $(":textfield").each(function(){  
4. //usetheval()functiontogetthetextinsidethetextfield  
5. if($(this).val()=="")  
6. $(this).next().text("Error");  
7. });  
8.  
9. //onanewpasswordpage,thiswillcomparethenewonewiththeconfirmation,  
10. //tomakesuretheyareequal  
11. if($("#newPassword").val()!=$("#confirmPass").val())  
12. $("#newPassword").next().text("Error"); 

还有其他一些函数，可用来获得包含在某些标记之内的信息。那么这有什么用途呢？比如说，您可以获得包含在某个<td>标记内的所有信息并进行替换，或者您也可以将所有<p>内的文本变成小写的。获得这些信息的方式有两种，但不能为此使用attr()函数。