<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.x{
color:red;
}
.xx{
color:pink;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("img").attr({ src: "1.jpg"});
});//设置或返回被选元素的属性值。
$("#but2").click(function(){
$("img").attr("src","2.jpg");
});//设置被选元素的属性值。
$("#but3").click(function(){
$("img").removeAttr("src");
});//将所选元素的属性删除
$("#but4").click(function(){
$("p").addClass("x");
});//给元素添加一个class
$("#but5").click(function(){
$("p").removeClass("x");
});//给元素删除一个class
$("#but6").click(function(){
$("p").toggleClass("xx");
});//给元素替换class
$("#but7").click(function(){
$("p").html("hello<p>world</p>");
});//设置所有 p 元素的内容
$("#but8").click(function(){
$("p").text("hello world");
});//返回p元素的文本内容。
$("#but9").click(function(){
$("input:text").val("内容");
});//获取文本框中的值
});
$(document).ready(function(){
$("button").click(function(){
var x = $("div");
x.prop("color","FF0000");//方法设置或返回被选元素的属性和值。
x.append("color 属性值为: " +x.prop("color"));//
x.removeProp("color");//删除
x.append("<br>现在 color 属性值为: " + x.prop("color"));
});
});
</script>
<input id="but1" type="button" value="配张图">
<input id="but2" type="button" value="换张图">
<input id="but3" type="button" value="删图">
<input id="but4" type="button" value="添加class">
<input id="but5" type="button" value="删除class">
<input id="but6" type="button" value="替换class">
<input id="but7" type="button" value="设置">
<input id="but8" type="button" value="返回文本">
<input id="but9" type="button" value="获取框内值">
<img>
<br />
<button>添加和删除属性</button>
<br />
<div></div>
<br />
<p>改变元素的class</p>
<br />
<input type="text">
</body>
</html>
