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

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

先看一个例子

 
 
 
    
  
  
  
  1. http://www.jquery001.com
    2.

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

 
 
 
    
  
  
  
  1. jQuery("#easy").click(function() {
    2. 
  
  
  
  2.     alert(document.getElementById("easy").id); //1
    3. 
  
  
  
  3.     alert(this.id); //2
    4. 
  
  
  
  4.     alert(jQuery(this).attr("id"));  //3
    5. 
  
  
  
  5. });
    6.

方法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) 移除元素的属性值

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     jQuery学习
    3. 
  
  
  
  3.     谷歌
    4. 
  
  
  
  4.     
    5. 
  
  
  

 
 
 
    
  
  
  
  1. jQuery("#test a").click(function() {
    2. 
  
  
  
  2.     //得到ID
    3. 
  
  
  
  3.     jQuery(this).attr("id"); //同this.id
    4. 
  
  
  
  4. 
  
  
  
  5.     //为img标签设置src为指定图片;title为谷歌.
    6. 
  
  
  
  6.     var v = { src: "http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", title: "谷歌" };
    7. 
  
  
  
  7.     jQuery("#show").attr(v);
    8. 
  
  
  
  8. 
  
  
  
  9.     //将img的title设置为google，同上边的区别是每次只能设定一个属性
    10. 
  
  
  
  10.     jQuery("#show").attr("title", "google");
    11. 
  
  
  
  11. 
  
  
  
  12.     //移除img的title属性
    13. 
  
  
  
  13.     jQuery("#show").removeAttr("title");
    14. 
  
  
  
  14. });
    15.

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

方法有：

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

 
 
 
    
  
  
  
  1. google

 
 
 
    
  
  
  
  1. //获得html，结果为google
    2. 
  
  
  
  2. jQuery("#showhtml").html();
    3. 
  
  
  
  3. //设置html，结果为I love google
    4. 
  
  
  
  4. jQuery("#showhtml").html("I love google");
    5.

以上这些就是jQuery操作元素属性的一些基本方法了，经过本次的总结，相信大家在使用jQuery时，会更加的熟练。

网站题目：jQuery学习大总结(三)jQuery操作元素属性
当前链接：http://www.shufengxianlan.com/qtweb/news45/353445.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

同城分类信息

子晨包装　　 　成都网站优化　　 　瑞杰管理　　 　德阳服务器托管　　 　眉山电信机房托管　　 　成都网站建设　　 　成都网络推广　　 　重庆机房托管　　 　绵阳电信机房　　 　西部信息服务器托管　　 　云主机　　 　成都网站建设公司　　 　广汉锦华建材　　 　鸿艺文化传播　　 　贵州义龙电信机房　　 　蓬安网站建设　　 　广安做网站　　 　商标注册　　 　响应式报价　　 　成都定制网站建设