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");
以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。
分享到:
相关推荐
使用jQuery操作元素的属性与样式 详细讲解 很适合初学者
Web JQuery框架操作元素的属性与样式
主要介绍了jquery更改元素属性attr()方法,结合实例形式简单分析了jquery更改元素属性attr()方法基本功能、语法及相关使用技巧,需要的朋友可以参考下
本文实例讲述了JQuery节点元素属性操作方法。分享给大家供大家参考。具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。 获取属性和设置属性 如果要获取p元素的属性...
今天主要总结一下jQuery操作元素属性的一些知识,学习jquery的朋友可以参考下
本文实例讲述了jQuery操作元素的内容和样式。分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作元素的样式和内容</title> <meta charset="UTF-8"/> [removed]...
主要介绍了jQuery元素属性操作的方法,结合实例形式分析了jQuery针对页面元素的设置、获取及删除等操作相关技巧,需要的朋友可以参考下
该文档包含了样式操作,内容及Value属性值操作,节点操作,节点属性操作,节点遍历操作的基础知识,也许不够详细,但内容也应该足够平时操作了,希望能帮到大家
Web前端开发实例教程——jQuery的基本操作,元素属性的操作,元素样式的操作...
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。 回忆:DOM = Document Object Model(文档对象模型) 1、jQuery获得元素 三个简单实用的用于DOM操作的jQuery方法。 text() //设置或返回...
本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 31 一.摘要 31 二.前言 31 三. 区分DOM属性和元素属性 31 四. 操作"DOM属性" 32 五. 操作"元素属性" 32 六,修改CSS样式 34 七.获取常用属性 35 八.总结 39 ...
09-操作元素之修改元素属性.html 10-分时问候并显示不同图片案例.html 11-操作元素之表单属性设置.html 12-仿京东显示隐藏密码.html 13-操作元素之修改样式属性.html 14-关闭淘宝二维码案例.html 15-循环精灵图.html...
主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery...
掌握使用jQuery操作元素样式的方法 掌握jQuery事件的使用 掌握jQuery操作属性方法的使用 掌握jQuery操作元素尺寸和位置方法的使用 任务1 认识JQuery 什么是jQuery JavaScript Web前端开发技术 认识jQuery jQuery是一...