jQuery - get content and attributes
1. jQuery DOM manipulation
A very important part of jQuery is the ability to manipulate the DOM.
jQuery provides a set of DOM-related methods that make it easy to access and manipulate elements and attributes.
2. Get content - text(), html() and val()
Three simple and practical jQuery methods for DOM manipulation:
1) text() - sets or returns the text content of the selected element
2) html() - sets or returns the content of the selected element (including HTML markup)
3) val() - sets or returns the value of the form field
Case: Get text content, value and attribute value
case code
<html>
<head>
<meta charset="UTF-8">
<title>dom get form value</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
</head>
<script type="text/javascript">
$(function(){ //document ready function
$("#btn1").click(function(){
var t1 = $("#test").text();
alert("Text: "+t1);
});
$("#btn2").click(function(){
var t1 = $("#test").html();
alert("html: "+t1);
});
});
function getName(){
var t3 =$("#name").val();
alert("Name is: "+t3);
}
function getSx(){
var t4 =$("#url").attr("href");
alert("Get attribute (href) value: "+t4);
}
</script>
<body>
<fieldset id="test01">
<legend>1. Get text</legend>
<div style="margin-top: 10px;">
<p id="test">Get DOM value <font color="blue">text</font>. </p>
</div>
<div style="margin-top: 10px;">
<input type="button" id="btn1" value="显示文本"/>
<input type="button" id="btn2" value="显示HTML"/>
</div>
</fieldset>
<fieldset id="test02" style="margin-top:10px;">
<legend>2. Get the form field value</legend>
<div style="margin-top: 10px;">
姓名：<input type="text" id="name" value=""/>
</div>
<div style="margin-top: 10px;">
<input type="button" id="btn3" value="获取姓名" onclick="getName();"/>
</div>
</fieldset>
<fieldset id="test03" style="margin-top:10px;">
<legend>3. Get attribute value-attr()</legend>
<a id="url" href="www.baidu.com">百度</a><br>
<input type="button" id="btn4" value="获取属性值" onclick="getSx();"/>
</fieldset>
</body>
</html>
（-end-）