jQuery高效能操作頁面元素的實例詳解

#　　$("p> ;span");　　//p的直接子元素span

　　$("input[type=password]");　　//指定型別的input元素

　　$("p:first ");　　//頁的第一個段落

　　$("p:even");　　//全部偶數段落

　　$(":header") ;　　//標題元素（h1到h6）

　　$(":button");　　//全部按鈕元素

　　$(":radio");

　」　$ (":checkbox");　　

　　$(":checked");　　　//選中狀態的選擇框或段選框

• html()  獲取元素或一組元素的HTML內容，類似與JavaScript的innerHTML,會獲得全部的HTML（包括文字）。

var htmlContent=$("#elem").html();

$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/

• # text() 僅取得元素的文字內容，取得及修改內容如下：

var textContent=$("#elem").text();
$("#elem").text("new content");     //修改内容
$("#elem").append("<p>Here is some new content.</p>")   //添加文本内容

• attr() 傳回一個元素特定的屬性值，當用於一組時，傳回第一個元素的值。

var title=$("#elem").attr("title");    //返回属性值

$("#elem").attr("title","new title");    //修改属性值

• show()    //顯示元素    $("div").show();

• hide()     //   隱藏元素 ,slow的值大約是600毫秒

　　　　 $("#elem").hide("slow",function(){

　　　　　　　　　　　　//隱藏後的操作

　　　　　　　　　});　

 元素動畫

1.淡入淡出，如：

　　$("#elem").fadeOut("slow",funtion(){

　　　　　//淡出後的操作

#　　　　　///淡入後的操作

　) ;

　　$("#elem").fadeTo(3000,0.5,function(){

　　　　　　//淡入或

#　　　透明度，表示最終不透明度淡入或淡出為0.5

　　});

　　2.滑動，類似淡入淡出

　　slideDown();

　　slideUp();

　　slideToggle();

　　animate()可以套用於很多的CSS樣式。如把元素高度寬度改變後再淡出隱藏。

$("#elem").animate(
    {
        width:400px;
        height:400px;
       },1500,function(){
               $(this).fadeOut("slow");
                }
  );

　指令鏈