属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body>
<img src="../img/qiuqian.jpg" alt="秋千" id="img" title="qiuqian">
<button onclick="changeImg()">换图</button>
<button onclick="deleteAlt()">变提示</button>
</body>
<script src="../js/jquery.min.js"></script>
<script>
var src = $("#img").attr("src");
console.log(src);
function changeImg() {
var img = {
src: "../img/city.jpg",
alt: "city"
};
$("#img").attr(img);
}
function deleteAlt() {
$("#img").removeAttr("alt")
}
</script>
</html>
分别给不同的元素添加不同的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分别给不同的元素添加不同的属性</title>
</head>
<body>
<ul>
<li id="l1">北京大学1</li>
<li id="l2">北京大学2</li>
<li>北京大学3</li>
<li>北京大学4</li>
</ul>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$("li").attr("id", function (i, att) {
console.log(att);
return "li" + (i + 1);
});
</script>
</html>
样式类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.h1{
color:red;
text-align: center;
font-family: 宋体;
}
.h2{
color: #7db5ff;
text-align: center;
font-family: 宋体;
}
.h3{
color: #31ff22;
text-align: center;
font-family: 宋体;
}
.h4{
color: #ffff20;
text-align: center;
font-family: 宋体;
}
.h5{
color: #3c42ff;
text-align: center;
font-family: 宋体;
}
</style>
<title>样式类</title>
</head>
<body>
<h1 class="title">
如月制衡日只剩!
</h1>
<ul>
<li>北京大学1</li>
<li>北京大学2</li>
<li>北京大学3</li>
<li>北京大学4</li>
</ul>
</body>
<script src="../js/jquery.min.js"></script>
<script>
$("li").addClass(function (i) {
return "h"+(i+1);
});
</script>
</html>
移除和切换样式类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.qh{
color: #585858;
font-size: 50px;
text-align: center;
}
</style>
<title>移除和切换样式类</title>
</head>
<body>
<div class="qh" id="jredu">清华大学</div>
<button onclick="toggleCss()">切换样式类</button>
</body>
<script src="../js/jquery.min.js"></script>
<script>
function toggleCss() {
$("#jredu").toggleClass("qh")
}
function toggleCss() {
$("#jredu").toggleClass("qh",true)
}
</script>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html</title>
</head>
<body>
<div>jieruijiaoyu</div>
<div>jieruijiaoyu2</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
console.log($("div").html());
$("div").html("ccy");
$("div").html(function (index,val) {
return "杰瑞教育"+(index+1);
});
</script>
</html>
文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
</head>
<body>
<div>jieruijiaoyu</div>
<div>jieruijiaoyu2</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
console.log($("div").text());
$("div").text(function (index,val) {
return val+"hh";
});
</script>
</html>