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.
 |
DOM = Document Object Model DOM defines standards for accessing HTML and XML documents: "The W3C Document Object Model is a platform- and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." |
|---|
Get content - text(), html() and val()
Three simple and useful jQuery methods for DOM manipulation:
- text() - sets or returns the text content of the selected element
- html() - Sets or returns the content of the selected element (including HTML markup)
- val() - set or return the value of the form field
The following example demonstrates how to get content through the jQuery text() and html() methods:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>Show Value</button>
<p id="test">This is the <b>bold</b> text in the paragraph. </p>
<button id="btn1">display text</button>
<button id="btn2">显示 HTML</button>
Get attribute - attr()
The jQuery attr() method is used to get the attribute value.
The following example shows how to get the value of the href attribute in a link:
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.xinlang.com" id="runoob"></a></p>
<button>Display the value of the href attribute</button>
Callbacks for text(), html() and val()
The three jQuery methods above: text(), html() and val() also have callbacks. The callback function takes two parameters: the index of the current element in the list of selected elements, and the original (old) value. Then return the string you wish to use with the new value of the function.
The following example demonstrates text() and html() with callback functions:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph with <b>bold</b> words. </p>
<p id="test2">This is another paragraph with <b>bold</b> words. </p>
<button id="btn1">Show new/old text</button>
<button id="btn2">Show new/old HTML</button>
set attribute - attr()
The jQuery attr() method is also used to set/change attribute values.
The following example shows how to change (set) the value of the href attribute in a link:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
// Modify the link name by modifying the title value
title = $("#runoob").attr('title');
$("#runoob").html(title);
});
});
</script>
</head>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>Modify href and title</button>
<p>After clicking the button to modify, you can check whether the href and title have changed. </p>
attr() callback function
The jQuery method attr() also provides a callback function. The callback function takes two parameters: the index of the current element in the list of selected elements, and the original (old) value. Then return the string you wish to use with the new value of the function.
The following example demonstrates the attr() method with a callback function:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>Modify href value</button>
<p>After clicking the button to modify, you can click the link to check whether the href attribute has changed. </p>