jquery更改元素属性attr()方法操作示例
本文实例讲述了jquery更改元素属性attr()方法。分享给大家供大家参考,具体如下:
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,
是js中setAttribute()和getAttribute()的简化
最基本常用的用法:
$("img").attr("src","img/a.jpg"); $("img").attr("width","100px");
attr()有四种用法,先列举表达式:
语法:
$(selector).attr(attribute) //返回被选元素的属性值。 $(selector).attr(attribute,value) //设置被选元素的属性和值。 $(selector).attr(attribute,function(index,oldvalue)) //用函数返回值设置被选元素的属性和值。 $(selector).attr({attribute:value, attribute:value ...}) //为被选一个以上的元素设置属性和值。
第一个$(selector).attr(attribute)是用来得到属性值的, 只有一个参数就是属性名
var srcImg = $('#img_1').attr("src");
第二个是最基本常用的方式:
$(selector).attr(attribute,value)
第一个参数是属性名, 第二个参数是想为该属性赋的值
$('#img_1').attr('src','img/1.jpg');
第三种是用函数的返回值给属性赋属性值, 该函数可接收并使用选择器的 index 值和当前属性值。
$(selector).attr(attribute,function(index,oldvalue))
这是W3School上一个点击按钮减少 img 50宽度的小实例
$("button").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); });
第四种其实就是上边第二种方式的拓展, 可以一次修改很多属性的属性值
$(selector).attr({attribute:value, attribute:value ...}) $('#img_1').attr({"width":80px, "height":50px});
还有可以用removeAttr删除属性:
$("img_1").removeAttr ("style");
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
Jquery属性的获取/设置及样式添加/删除操作技巧分析
本文实例讲述了Jquery属性的获取/设置及样式添加/删除操作技巧.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性
-
jQuery的操作属性详解
目录 一.操作属性 1.读取属性值:attr(属性名) 2.修改属性值 (1)attr(key,value) (2)attr(key,fn) (3)attr({属性名1:属性值,属性名2:属性值}) 3.删除属性:removeAttr(属性名) 二.操作类(class) 1.添加class属性:addClass(class属性) 2.删除class属性:removeClass(属性名) 3.交替添加/删除class属性:toggleClass(class属性) 三.操作css 1.获取CSS样式
-
jQuery HTML获取内容和属性操作实例分析
目录 获取内容和属性 获得内容 - text().html() 以及 val() 获取属性 - attr() 本文实例讲述了jQuery HTML获取内容和属性操作.分享给大家供大家参考,具体如下: 获取内容和属性 获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子
-
jQuery HTML设置内容和属性操作实例分析
目录 jQuery-设置内容和属性 设置内容-text().html()以及val() text().html()以及val()的回调函数 设置属性-attr() attr()的回调函数 本文实例讲述了jQuery HTML设置内容和属性操作.分享给大家供大家参考,具体如下: jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() 将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素
-
jQuery的操作属性你真的了解吗
目录 一.操作属性 1.读取属性值:attr(属性名) 2.修改属性值 (1)attr(key,value) (2)attr(key,fn) (3)attr({属性名1:属性值,属性名2:属性值}) 3.删除属性:removeAttr(属性名) 二.操作类(class) 1.添加class属性:addClass(class属性) 2.删除class属性:removeClass(属性名) 3.交替添加/删除class属性:toggleClass(class属性) 三.操作css 1.获取CSS样式
-
jquery选择器和属性对象的操作实例分析
本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ
-
jquery更改元素属性attr()方法操作示例
本文实例讲述了jquery更改元素属性attr()方法.分享给大家供大家参考,具体如下: jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写, 是js中setAttribute()和getAttribute()的简化 最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr("width","1
-
Python实现动态添加属性和方法操作示例
本文实例讲述了Python实现动态添加属性和方法操作.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 class Person(): def __init__(self, name, age): self.name = name self.age = age p1 = Person('ff', '28') print(p1.name, p1.age) # 给实例对象动态添加sex属性 p1.sex = 'female' print(p1.sex
-
Python实现动态给类和对象添加属性和方法操作示例
本文实例讲述了Python实现动态给类和对象添加属性和方法操作.分享给大家供大家参考,具体如下: 动态给类和对象添加属性 定义一个Person类 class Person(object): def __init__(self, name): self.name = name 给对象添加属性 # 创建2个Person,分别为p1,p2 p1 = Person('amy') print(p1.name) p1.age = 10 # 给p1对象添加属性 print(p1.age) # 输出10 p2
-
jQuery使用元素属性attr赋值详解
复制代码 代码如下: 1.$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") 2.$("Element".attr(key,value)") '某一个元素设置属性 3.$("Element".attr({key:value,key1:value,....})) '为某个元素一次性设置多个属性 4.$("Elemen
-
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: 复制代码 代码如下: <!DOCTYPE html>
-
JQuery样式与属性设置方法分析
本文实例讲述了JQuery样式与属性设置方法.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性 $("inp
-
JQuery节点元素属性操作方法
本文实例讲述了JQuery节点元素属性操作方法.分享给大家供大家参考.具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性. 获取属性和设置属性 如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称. var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节
-
正则表达式替换html元素属性的方法
正则表达式替换任意html元素任意属性,或增加任意属性. /** * 替换html中任意tag内任意attr值 * @param src_str * @param tag * @param attr * @param val * @returns {*} */ replace_html_tag_attr: function(src_str, tag, attr, val) { if(typeof src_str === 'undefined' || typeof tag === 'undefin
-
浅谈dataframe中更改列属性的方法
在读取文件时将整数变量读成了字符串, 或者需要转换列属性时,通过方法astype Python中 举例: dataframe.numbers=dataframe.numbers.astype(float) province.id=province.id.astype(str) R中 举例: data<-read.csv('data.csv',col.names = c('id','sex','numbers'),stringsAsFactors=FALSE),stringsAsFactors=F
随机推荐
- js data日期初始化的5种方法
- iOS实现轮播图banner示例
- JS trim去空格的最佳实践
- asp 自定义分段函数/求第N名成绩
- C#列表框、复选列表框、组合框的用法实例
- 详解MySQL中concat函数的用法(连接字符串)
- Linux下安装mysql-5.6.4 的图文教程
- Bootstrap源码解读表单(2)
- jquery任意位置浮动固定层插件用法实例
- 基于bootstrap3和jquery的分页插件
- JavaScript在浏览器标题栏上显示当前日期和时间的方法
- SpringBoot之Banner的使用示例
- Web项目打成war包部署到tomcat时报MySQL Access denied for user ''root''@''localhost'' (using password: YES)错误解决方案(推)
- pycharm+django创建一个搜索网页实例代码
- node下使用UglifyJS压缩合并JS文件的方法
- Java和C++通过new创建的对象有何区别?
- JDK源码分析之String、StringBuilder和StringBuffer
- javascript实现5秒倒计时并跳转功能
- vue引入js数字小键盘的实现代码
- 细述Javascript的加法运算符的具体使用