jQuery（八）：属性操作
一、获取或设置元素的属性值
attr()获取或设置匹配元素的属性值，语法如下：
获取元素属性值示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性操作</title>
<style>
*{
margin: 0px;
padding: 0px;
}
td{
width: 100px;
border: 1px solid #cccccc;
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("img").click(function(){
// 获取属性的值
alert($("img").attr("src")) ;
});
});
</script>
</head>
<body>
<img src="../qq.jpg" />
</body>
</html>
效果：
设置单个元素属性值示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性操作</title>
<style>
*{
margin: 0px;
padding: 0px;
}
td{
width: 100px;
border: 1px solid #cccccc;
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("img").click(function(){
// 获取属性的值
//alert($("img").attr("src")) ; // 添加单个属性
$("img").attr("alt","QQ斗地主");
alert($("img").attr("alt")) ;
});
});
</script>
</head>
<body>
<img src="../qq.jpg" />
</body>
</html>
效果：
添加多个属性值示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性操作</title>
<style>
*{
margin: 0px;
padding: 0px;
}
td{
width: 100px;
border: 1px solid #cccccc;
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("img").click(function(){
// 获取属性的值
//alert($("img").attr("src")) ; // 添加单个属性
//$("img").attr("alt","QQ斗地主");
//alert($("img").attr("alt")) ; // 添加多个属性
$("img").attr({"alt":"QQ斗地主","title":"斗地主"});
console.log($(this).attr("alt"));
console.log($(this).attr("title"));
});
});
</script>
</head>
<body>
<img src="../qq.jpg" />
</body>
</html>
效果：
二、删除属性值
removeAttr()匹配的元素中删除一个属性，语法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性操作</title>
<style>
*{
margin: 0px;
padding: 0px;
}
td{
width: 100px;
border: 1px solid #cccccc;
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("img").click(function(){
// 获取属性的值
//alert($("img").attr("src")) ; // 添加单个属性
//$("img").attr("alt","QQ斗地主");
//alert($("img").attr("alt")) ; // 添加多个属性
//$("img").attr({"alt":"QQ斗地主","title":"斗地主"});
//console.log($(this).attr("alt"));
//console.log($(this).attr("title")); // 删除属性
$(this).removeAttr("src");
});
});
</script>
</head>
<body>
<img src="../qq.jpg" />
</body>
</html>
效果：
jQuery（八）：属性操作的更多相关文章
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- jQuery系列（四）：jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- jQuery的属性操作
下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...
- 前端jQuery之属性操作
属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...
- 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑
jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...
随机推荐
- Linux 命令 统计进程数目
ps -efL | grep python | wc -l 此命令的意思是查看 Python的进程数目 ps -ef|grep python|grep -v grep|cut -c -|xargs k ...
- 自动化无线网破解工具wifite2
自动化无线网破解工具wifite2 wifite是一款自动化wifi密码破解工具,特点是支持多个wep.wpa加密的wifi网络,不支持windows和osx. wifite的特点是可以同时攻击多个采 ...
- Linux 密码过期（WARNING:Your password has expired ）
最近遇到两次这个问题,我们公司用的是开源的堡垒机Jumpserver但是最近有两个同学遇到了 WARNING:Your password has expired 第一次遇到这个问题也没有往深了去查,当 ...
- Atitit js es5 es6新特性 attilax总结
Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...
- lua -- string
table.keys 返回指定表格中的所有键. 格式: keys = table.keys(表格对象) 用法示例: , b = , c = } local keys = table.keys(t) - ...
- http post multipart/mixed的文件.
依赖. <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>ht ...
- 【转载】关于Java String, StringBuilder, StringBuffer, Hashtable, HashMap的面试题
REF: http://blog.csdn.net/fightforyourdream/article/details/15333405 题目是一道简单的小程序,像下面这样:[java] view p ...
- LeetCode: Palindrome Partitioning II 解题报告
Palindrome Partitioning II Given a string s, partition s such that every substring of the partition ...
- python 获取环境变量
python 获取环境变量 参考 https://docs.python.org/2/library/os.html 使用os.environ获取环境变量字典 import os env_dist = ...
- mysql查询字段为null 返回0
SELECT IF(AVG(字段) IS NULL,0, 字段) as 重命名 From xxx