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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
杏林同学录(八)
2006/10/09 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
yii的CURD操作实例详解
2014/12/04 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
浅谈Python中的继承
2020/06/19 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
普通简短的个人自我评价
2014/02/15 职场文书
《日月潭》教学反思
2014/02/28 职场文书
国旗下的演讲稿
2014/05/08 职场文书
大班上学期个人总结
2015/02/13 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
python如何在word中存储本地图片
2021/04/07 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
spring 项目实现限流方法示例
2022/07/15 Java/Android