节点的操作（二）

节点的复制
  $(function(){
$("ul li").click(function(){
     $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
})  
  });


  $(function(){
$("ul li").click(function(){
     $(this).clone(true).appendTo("ul"); // 注意参数true
     //可以复制自己，并且他的副本也有同样功能。
})  
  });


节点的替换
  $(function(){
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
  });


包裹节点
$("strong").wrap("<i></i>");//用<b>元素把<strong>元素包裹起来
   $("strong").wrap("<u></u>");//用<b>元素把<strong>元素包裹起来
});

$("strong").wrap("<i></i>");//用<b>元素把<strong>元素包裹起来
   $("strong").wrapAll("<u></u>");//用<b>元素把<strong>元素包裹起来
});




属性操作
  $(function(){
      //设置<p>元素的属性'title'
      $("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
  });
      //获取<p>元素的属性'title'
  $("input:eq(1)").click(function(){
alert( $("p").attr("title") );
  });
      //删除<p>元素的属性'title'
  $("input:eq(2)").click(function(){
$("p").removeAttr("title");
  });  

  });




样式操作
$(function(){
      //获取样式
      $("input:eq(0)").click(function(){
alert( $("p").attr("class") );
  });
      //设置样式
  $("input:eq(1)").click(function(){
$("p").attr("class","high");
  });
      //追加样式
  $("input:eq(2)").click(function(){
$("p").addClass("another");
  });   
  //删除全部样式
  $("input:eq(3)").click(function(){
$("p").removeClass();
  }); 
   //删除指定样式
  $("input:eq(4)").click(function(){
$("p").removeClass("high");
  });  
  //重复切换样式
  $("input:eq(5)").click(function(){
$("p").toggleClass("another");
  }); 
  //判断元素是否含有某样式
  $("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
  }); 
  });



样式操作
$(function(){
      //获取样式
      $("input:eq(0)").click(function(){
alert( $("p").attr("class") );
  });
      //设置样式
  $("input:eq(1)").click(function(){
$("p").attr("class","high");
  });
      //追加样式
  $("input:eq(2)").click(function(){
$("p").addClass("another");
  });   
  //删除全部样式
  $("input:eq(3)").click(function(){
$("p").removeClass();
  }); 
   //删除指定样式
  $("input:eq(4)").click(function(){
$("p").removeClass("high");
  });  
  //重复切换样式
  $("input:eq(5)").click(function(){
$("p").toggleClass("another");
  }); 
  //判断元素是否含有某样式
  $("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
  }); 
  });



设置和获取HTML,文本和值
$(function(){
      //获取<p>元素的HTML代码
      $("input:eq(0)").click(function(){
alert(  $("p").html() );
  });
      //获取<p>元素的文本
  $("input:eq(1)").click(function(){
alert(  $("p").text() );
  });
      //设置<p>元素的HTML代码
  $("input:eq(2)").click(function(){
$("p").html("<strong>你最喜欢的水果是?</strong>");
  });   
   //设置<p>元素的文本
  $("input:eq(3)").click(function(){
$("p").text("你最喜欢的水果是?");
  }); 
  //设置<p>元素的文本
  $("input:eq(4)").click(function(){
$("p").text("<strong>你最喜欢的水果是?</strong>");
  }); 
  //获取按钮的value值
  $("input:eq(5)").click(function(){
alert( $(this).val() );
  });  
  //设置按钮的value值
  $("input:eq(6)").click(function(){
    $(this).val("我被点击了!");
  }); 
  });




$(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
var txt_value =  $(this).val();   // 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){ 
                $(this).val("");              // 如果符合条件，则清空文本框内容
}
  });
  $("#address").blur(function(){   // 地址框失去鼠标焦点
      var txt_value =  $(this).val();   // 得到当前文本框的值
if(txt_value==""){
                $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容
}
  })

  $("#password").focus(function(){
var txt_value =  $(this).val();
if(txt_value=="请输入邮箱密码"){
                $(this).val("");
}
  });
  $("#password").blur(function(){
      var txt_value =  $(this).val();
if(txt_value==""){
                $(this).val("请输入邮箱密码");
}
  })
  });


$(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
var txt_value =  $(this).val();   // 得到当前文本框的值
if(txt_value==this.defaultValue){ 
                $(this).val("");              // 如果符合条件，则清空文本框内容
}
  });
  $("#address").blur(function(){   // 地址框失去鼠标焦点
      var txt_value =  $(this).val();   // 得到当前文本框的值
if(txt_value==""){
                $(this).val(this.defaultValue);// 如果符合条件，则设置内容
}
  })

  $("#password").focus(function(){
var txt_value =  $(this).val();
if(txt_value==this.defaultValue){
                $(this).val("");
}
  });
  $("#password").blur(function(){
      var txt_value =  $(this).val();
if(txt_value==""){
                $(this).val(this.defaultValue);
}
  })
  });


设置被选中
  $(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
$("#single").val("选择2号");
  });
      //设置多选下拉框选中
  $("input:eq(1)").click(function(){
    $("#multiple").val(["选择2号", "选择3号"]);
  });
      //设置单选框和多选框选中
  $("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
  });   

  });


$(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
    $("#single option").removeAttr("selected");  //移除属性selected
$("#single option:eq(1)").attr("selected",true); //设置属性selected
  });
      //设置多选下拉框选中
  $("input:eq(1)").click(function(){
    $("#multiple option").removeAttr("selected");  //移除属性selected
$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
  });
      //设置单选框和多选框选中
  $("input:eq(2)").click(function(){
$(":checkbox").removeAttr("checked"); //移除属性checked
$(":radio").removeAttr("checked"); //移除属性checked
$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
$("[value=radio2]:radio").attr("checked",true);//设置属性checked
  });  
  });