(1)html()
获取标签内的html内容
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show HTML</button>
</body>
</html>
获取的是This is some <b>bold</b> text in a paragraph.
实际上就相当于原生js的document.getElementById("test").innerHTML
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert(document.getElementById("test").innerHTML);
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show HTML</button>
</body>
</html>
(2)text()
获取标签内的内容,忽略HTML标签
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Text: " + $("#test").text());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show Text</button>
</body>
</html>
结果为This is some bold text in a paragraph.
实际上作用相当于原生js的document.getElementById("test").innerText
(3)val()
获取表单中的值
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test"></p>
<button>Show Value</button>
</body>
</html>
实际上相当于原生js中的document.getElementById("test").value
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert(document.getElementById("test").value);
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test"></p>
<button>Show Value</button>
</body>
</html>
(3)attr()
获取标签中属性
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Show href Value</button>
</body>
</html>
相当于原生js中的document.getElementById("w3s").getAttribute("href")(4)设置值
1.设置标签内(即HTML和Text)、表单值value
将设置的值直接作为参数即可<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
原生js中相当于
document.getElementById("test").innerHTML = 值 document.getElementById("test").innerText = 值 document.getElementById("test").value=值
如果赋的值比较复杂,可以使用回调函数
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#test").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test">This is a <b>bold</b> paragraph.</p>
<button id="btn">Show Old/New Text</button>
</body>
</html>
2.设置标签属性
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3cschool.cc/jquery");
});
});
</script>
</head>
<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
相当于原生js的document.getElementById("w3s").setAttribute("href","http://www.baidu.com")
当然标签中属性会有多个,所以可以一次性设置多个
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Cschool jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
</body>
</html>