<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<title>Dom operation in jquery</title>
<script src="../jquery/jquery-1.4." type="text/javascript"></script>
</head>
<body>
<p title="Select your favorite fruit">What is your favorite fruit? </p>
<ul>
<li title="Apple">Apple</li>
<li title="banana">banana</li>
<li title="Watermelon">Watermelon</li>
</ul>
<strong>What is your favorite fruit? </strong>
<strong>What is your favorite fruit? </strong><br />
<input type="button" value="Find node" />
<input type="button" value="create node" />
<input type="button" value="Delete node" />
<input type="button" value="Copy node" />
<input type="button" value="replace node" />
<input type="button" value="Package Node" />
<script type="text/javascript">
$(function(){
$("#btnFind").click(function(){
//Find element nodes
var getValue= $("ul li:eq(1)").text();//Get the value of the second element
alert(getValue);
//Find attribute node The parameters of the attr() method can be one or two. When the parameter is one, it is the name of the attribute to be queryed. When two, it is the assignment.
var para=$("p");
var p_text=("title");//Get title of <p> element node attribute
alert(p_text);
alert(("title","change your favorite fruit").attr("title"));//First change the value of the title, and then take the value of the title
});
//Create node append(), prepend() loads the inside of the element, for the parent-child relationship, after(), before() is added before and after the element, for the brotherly light system
$("#btnCreate").click(function(){
var html=$("<li title= 'peach'>peach</li><li title= 'pineapple'>pineapple</li>");
// $("ul").append(html);// By default, it will be added to the end of ul
// var li2=$("ul li:eq(1)").after(html);//Add after the second li
var li2=$("ul li:eq(1)").before(html);//Add in front of the second li
});
$("#btnDelete").click(function(){
// var li2=$("ul li:eq(1)").remove();//Delete the second li element
//$("ul").append(li2);//Add the node I just deleted to the ul element again
var li2=$("ul li:eq(1)").empty();//Clear the second node
});
$("#btnCopy").click(function(){
$("p").clone().appendTo("ul");
});
$("#btnReplace").click(function(){
$("p").replaceWith("<strong>What is your least favorite fruit? Haha</strong>");
});
$("#btnWrap").click(function(){
// $("strong").wrap("<b></b>");//Wrap the <strong> elements with the <b> tag, wrapping all the elements separately
// $("strong").wrapAll("<b></b>");//wrapAll() wraps all elements together, and can be viewed through firebug
$("strong").wrapInner("<b></b>");// is to wrap strong content (including text nodes) with <b>
});
})
</script>
</body>
</html>