获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容 - text()、html() 以及 val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
设置属性 - attr()
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
添加新的 HTML 内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#p1").after("<div style='background-color: black;width: 30px;height: 30px;'></div>")
$("#p2").append("<div style='background-color: red;width: 30px;height: 30px;'></div>")
})
});
</script>
</head>
<body>
<p id="p1" style="border: 1px black solid;">after</p>
<p id="p2" style="border: 1px black solid;">append</p>
<button id="b1">点击</button>
</body>
</html>
after()和append()都是在元素后添加 区别是
after在元素外后面追加,append元素内后面追加
删除元素/内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#p2").remove();
})
});
</script>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<button id="b1">点击</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#p1").empty();
})
});
</script>
</head>
<body>
<p id="p1">p1<span>span</span></p>
<button id="b1">点击</button>
</body>
</html>
jQuery 操作 CSS
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red{
background-color: red;
}
.fontsize{
font-size: 40px;
}
</style>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div").addClass("red fontsize");
})
$("#b2").click(function(){
$("div").removeClass("red"); //只移除红色样式
// $("div").removeClass(); //移除全部样式
})
});
</script>
</head>
<body>
<div style="border: 1px black solid;width: 60px;height:60px">div</div>
<button id="b1">添加红色背景</button>
<button id="b2">移除红色背景</button>
</body>
</html>
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
下面的例子将返回首个匹配元素的 background-color 值:
$("p").css("background-color");
下面的例子将为所有匹配元素设置 background-color 值:
$("p").css("background-color","yellow");