jQuery .attr()和.removeAttr()方法操作元素属性示例
1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr());
2 .removeAttr():jQuery中的.removeAttr()方法主要用来删除一个元素的一个(或多个)属性(详情参考.removeAttr())。
下面先来简单看一下.attr()和.removeAttr()两种方法的语法格式:
.attr()方法
.attr()方法有两种功能,第一种是读取元素的属性值,第二个是修改元素的属性值
读取属性的语法
.attr(attributeName );//attributeName 为需要获取的元素的属性名
上面返回的是字符串“string”,值得注意的是.attr()方法只获取第一个匹配元素的属性值,如果你需要每个单独的元素的属性值,需要依靠jQuery的.each()或者.map()方法来实现。
为元素设轩属性值的语法
.attr(attributeName, value);//其中attributeName为元素需要设置的属性名,value是对应的元素值
上面返回的是一个对象,主要用来为指定元素设置一个或多个属性。
.removeAttr()方法
.removeAttr(attributeName);//其中attributeName 是要移除的属性名
.removeAttr()方法使用原生的javaScript中的removeAttribute()函数,但是它的优点是能够直接被jQuery对象访问调用。
上面我们一起简单的了解了一下.attr()和.removeAttr()方法的语法,下面我们一起来看看其具体的应用,首先我们来看一个简单的html Demo:
这种方法用来制作图片翻转是很方便的,如:
html:
js:
$(".img").hover(function(){
$(this).attr({
"src":"images/b.jpg",
"alt":"change the page"
})
},function(){
$(this).attr({
"src":"images/a.jpg",
"alt":"header"
});
});
});
jQuery .attr()和.removeAttr()方法操作元素属性示例的更多相关文章
- 使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...
- 3 、操作元素 (属性 CSS 和 文档处理)
3 操作元素-属性 CSS 和 文档处理 3.1 属性操作 $("p").text() $("p").html() $(":check ...
- 003——VUE操作元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue.js操作元素属性
vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- dom操作------操作元素属性的若干方法
// 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
随机推荐
- CentOS添加SSH登录提示
前言 使用阿里云服务器的应该都注意到每次ssh登录后都能看见类似下面这样的欢迎语: Last login:xxxxxxxxxxxxx Welcome to Alibaba Cloud Elastic ...
- 撩课-Java每天5道面试题第16天
111.什么是乐观锁(Optimistic Locking)? 悲观锁,正如其名, 它指的是对数据被外界 包括本系统当前的其他事务, 以及来自外部系统的事务处理 修改持保守态度, 因此,在整个数据处理 ...
- Maven学习总结(八):Myecplise中配置maven
第一步:下载maven安装包,配置环境变量M2_HOME;变量值为maven的解压目录. 第二步:在eclipse4.0之前的版本需要安装maven插件,方法即:将maven插件包复制到eclipse ...
- SEO之网站被惩罚
- vue项目创建
使用命令行工具npm新创建一个vue项目 使用vue开发项目的前期工作可以参考前面写的: Vue环境搭建及node安装过程整理 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. ...
- C语言——无向带权图邻接矩阵的建立
#include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...
- mybatis 关联表心得
1,例如订单表与用户表的关联,一个订单对应一个用户,这是一对一关联: 用代码实现是这样: A(用resultType去实现的话,如下) 1,使用到继承, OrderUser extend Order{ ...
- 分布式服务框架dubbo原理解析
alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产 ...
- [翻译] TWRPickerSlider
TWRPickerSlider https://github.com/chasseurmic/TWRPickerSlider Usage Add the dependency to your Podf ...
- Win10 mysql容器启动命令
docker run --name mysql -it -p : -e MYSQL_ROOT_PASSWORD=Hongfund5013 -e MYSQL_USER=hongfund_os -e MY ...