jQuery学习大总结(三)jQuery操作元素属性

上次总结了下，jQuery包装集，今天主要总结一下jQuery操作元素属性的一些知识。

先看一个例子

<a id="easy" href="#">http://www.jquery001.com</a> 

现在要得到a标签的属性id。有如下方法：

jQuery("#easy").click(function() { 


    alert(document.getElementById("easy").id); //1 


    alert(this.id); //2 


    alert(jQuery(this).attr("id"));  //3 


}); 

方法1使用的是javascript原始方法；方法2用到了this，this就相当于一个指针，返回的是一个dom对象，本例中返回a标签对象。所以 this.id可直接得到id。方法3将dom对象转换成了jQuery对象，再利用jQuery封装的方法attr()得到a标签的ID。

可见，有时候用javascript配合jQuery会很方便。下边着重总结一下jQuery操作元素属性。

• attr(name)             取得元素的属性值
• attr(properties)    设置元素属性，以名/值形式设置
• attr(key,value)       为元素设置属性值
• removeAttr(name) 移除元素的属性值

下边以实例说明每种方法的具体用法。

<div id="test"> 


    <a id="hyip" href="javascript:void(0)">jQuery学习</a> 


    <a id="google" href="javascript:void(0)">谷歌</a> 


    <img id="show" /> 


</div>

jQuery("#test a").click(function() { 


    //得到ID 


    jQuery(this).attr("id"); //同this.id 


 


    //为img标签设置src为指定图片;title为谷歌. 


    var v = { src: "http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", title: "谷歌" }; 


    jQuery("#show").attr(v); 


 


    //将img的title设置为google，同上边的区别是每次只能设定一个属性 


    jQuery("#show").attr("title", "google"); 


 


    //移除img的title属性 


    jQuery("#show").removeAttr("title"); 


}); 

大家可能已经发现了，在jQuery中attr()方法，既可以获得元素的属性值，又能设置元素的属性值。是的，在jQuery中，类似的方法还有很多，现在将它们总结下来，以后用起来也会比较容易。

方法有：

• html()  获取或设置元素节点的html内容
• text()  获取或设置元素节点的文本内容
• height()  获取或设置元素高度
•  width()  获取或设置元素宽度
•  val()  获取或设置输入框的值

以html()为例，其余的相似：

<div id="showhtml">google</div>

//获得html，结果为google 


jQuery("#showhtml").html(); 


//设置html，结果为I love google 


jQuery("#showhtml").html("I love google");