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

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

---

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

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

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

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

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

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

#　　$("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("e388a4556c0f65e1904146cc1a846beeHere is some new content.94b3e26ee717c64999d7867364b1b4a3");/*修改内容*/

• # 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中文網其他相關文章！