节点操作（一） 节点的添加、删除、修改、查询

查找节点
$(function(){
      var $para = $("p"); // 获取<p>节点
  var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点

  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
  var ul_txt =  $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
  var li_txt =  $li.text();    // 输出第二个<li>元素节点的text

  alert(ul_txt);
  alert(li_txt);
  alert(p_txt);
  });



$(function(){
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='香蕉' 就是创建的属性节点
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='雪梨' 就是创建的属性节点 


var $parent = $("ul"); // 获取<ul>节点。<li>的父节点

$parent.append($li_1);     // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2);     // 等价于：$parent.append($li_1).append($li_2);
  });




节电的额插入
$(function(){
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //  创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //  创建第二个<li>元素
var $li_3 = $("<li title='其它'>其它</li>"); //  创建第三个<li>元素


var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点
var $two_li = $("ul li:eq(1)"); //  获取<ul>节点中第二个<li>元素节点
  
$parent.append($li_1);      //  append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2);      //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li);   //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  });


  $(function(){
var $one_li = $("ul li:eq(1)"); //  获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)"); //  获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li);    //移动节点
  });


节点的删除
$(function(){
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
  });

  $(function(){
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
  });

$(function(){
  $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除
  });

  $(function(){
$("ul li:eq(1)").empty(); // 获取第二个<li>元素节点后，清空此元素里的内容
  });