首頁 > web前端 > js教程 > 主體

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

零下一度
發布: 2017-06-26 15:17:15
原創
1714 人瀏覽過

jQuery能夠有效率地操作頁面元素。


關於DOM和CSS的頁面元素選擇:

#  $("span");     //全部span元素

  $( "#elem");   //id為elem的元素

  $(".classname");  //類別為classname的元素

  $("div#elem"); /id為elem的

元素

  $("ul li a.menu");  //類別為」menu」的標籤

#  $("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").fadeIn(500,function(){

     ////淡入後的操作

#     ///淡入後的操作

 ) ;

  

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

      //淡入或

#      //淡入或

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

  });

 

  2.滑動,類似淡入淡出

  slideDown();

  slideUp();

  slideToggle();

 

  3.動畫

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

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

 指令鏈 

 jQuery指令鏈的長度沒有什麼限制,可以對同一組元素連續進行很多的操作:


  $("#elem").text("Hello from jQuery"). fadeOut().fadeIn();

######### ####

以上是jQuery高效能操作頁面元素的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板