JQuery节点元素属性操作方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery节点元素属性操作方法。分享给大家供大家参考。具体分析如下:

在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。

获取属性和设置属性

如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。

var $para = $("p"); //获取<p>节点  
var p_txt = $para.attr("title"); //获取<p>元素节点属性title

如果要设置<p>元素的属性title的值,也可以使用同一个方法,不同的是,需要传递两个参数即属性名称和对应的值。

$("p").attr("title", "your title");
//设置单个的属性值

如果需要一次性为同一个元素设置多个属性,可以使用下面的代码来实现:

$("p") .attr({"title" : "your title", "name": "test"});   
//将一个“名/值”形式的对象设置为匹配元素的属性

JQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,既能设置元素属性的值,也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。

删除属性

在某些情况下,需要删除文档中某个元素的特定属性,可以使用removeAttr()方法来完成该任务。

如果需要删除p元素的title属性,可以使用下面的代码实现:

$("p").removeAttr("title");
//删除<p>元素的属性title

在Firebug下可以看得非常清楚。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
JQuery包裹DOM节点的方法
Jun 11 #Javascript
JQuery替换DOM节点的方法
Jun 11 #Javascript
JavaScript中实现map功能代码分享
Jun 11 #Javascript
JQuery复制DOM节点的方法
Jun 11 #Javascript
JavaScript中标识符提升问题
Jun 11 #Javascript
JQuery删除DOM节点的方法
Jun 11 #Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
You might like
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
自制PHP框架之设计模式
2017/05/07 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
loading动画特效小结
2017/01/22 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Python修改列表值问题解决方案
2020/03/06 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Python 实现集合Set的示例
2020/12/21 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Java基础知识面试题
2014/03/25 面试题
公司年会策划方案
2014/05/17 职场文书
敬老模范事迹
2014/05/21 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python