標籤：win 提交 名稱 可見 ima title 連續 函數 高度
DOM對象：直接使用JavaScript擷取的節點對象：var objDOM = document.getElementById("title");var objHTML=objDOM.innerHTML;jQuery對象：使用jQuery封裝DOM對象後產生的對象，它能夠使用jQuery中的方法：$("#title").html();等同於document.getElementById("title").innerHTML;DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用 jQuery對象轉DOM對象：1、jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象：var $txtName=$(".txtName"); //jQuery對象var txtName=$txtName[0]; //DOM對象2、通過get(index)方法得到相應的DOM對象：var $txtName = $(".txtName"); //jQuery對象var txtName = $txtName.get(0); //DOM對象 使用$()函數進行轉化：$(DOM對象)var txtName=document.getElementById("txtName"); //DOM對象var $txtName = $(txtName); //jQuery對象 注意：1、jQuery對象命名一般約定以$開頭2、常使用$(this)來擷取觸發該事件的當前jQuery對象 JSON(JavaScript Object Notation)一種輕量級的資料互動格式var JSON = { 名稱：值，名稱：值，...}; //JSON的數值可以是數字、字串、布爾值、數組或者 對象、nullJSON的取值方法:點號標記法來擷取 追加樣式：addClass("class") 或 addClass(" class1 class2..")移除樣式：removeClass("class") 或 removeClass("class1 class2 ..") HTML代碼操作：html()可以對HTML代碼進行操作，類似於原生JavaScript中的innerHTML:$("div.left").html();或$("div.left").html("<div class=‘content‘>...</div>");文本操作：text()可以擷取或設定元素的常值內容：$("div.left").text();或$("div.left").text("<div class = ‘content‘> ...</div>");value值操作：val()可以擷取或設定元素的value屬性值：$(input).val(); //擷取value值或$(input).val("值"); //設定value值 節點操作：jQuery中節點操作主要分為：尋找節點建立節點插入節點刪除節點替換節點複製節點 建立節點元素：工廠函數$()用於擷取或建立節點：$(selector)：通過選取器擷取節點$(element)：把DOM節點轉化成jQuery節點$(html)：使用HTML字串建立jQuery節點var $newNode2=$("<li title=‘標題為千與千尋’>千與千尋</li>");建立含文本與屬性<li>元素節點 插入子節點：元素內部插入子節點：append(content) $(A).append(B)表示將B追加到A中如：$("ul").append($newNode1);appendTo(content) $(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo(“ul”)；prepend(content) $(A).prepend(B)表示將B前置插入到A中如：$("ul").prepend($newNode1);prependTo(content) 插入同輩節點：元素外部插入同輩節點：after(content) $(A).after(B)表示將B插入到A之後如：$("ul").after($newNode1);insertAfter(content) $(A).insertAfter(B)表示將A插入到B之後如：$newNode1.insertAfter(“ul”)；before(content)insertBefore(content) 替換節點：replaceWith()和replaceAll()用於替換節點： 複製節點：clone()用於複製節點：$(A).clone(true).appendTo(B);提示：clone()有個副作用就是會複製id，要麼避免對有id的元素複製，要麼使用class代替 id的作用 刪除節點：jQuery提供了三種刪除節點的方法：1、remove()：刪除整個節點2、detach()：刪除整個節點，保留元素的綁定事件、附加的資料3、empty()：清空節點 屬性操作：attr()擷取或設定匹配元素的屬性值：//擷取元素的某屬性的值$(selector).attr("屬性名稱")；//設定元素的屬性值$(selector).attr("屬性名稱"，"值")；//設定一個屬性值$(selector).attr({"屬性1"：“值1”，“屬性2”，“值2”})；//設定多個屬性值 removeAttr()匹配的元素中刪除一個屬性：$(selector).removeAttr("屬性名稱")； 遍曆子項目：children()方法可以用來擷取元素的所有子項目：$("body").children(); //擷取<body>元素的子項目，但不考慮後代元素及文本節點遍曆同輩元素：jQuery可以擷取緊鄰其後、緊鄰其前和位於該元素前與後的所有同輩元素：next([expr]) 用於擷取緊鄰匹配元素之後的元素，如：$("li:eq(1)").css("background-color","#F06");prev([expr]) 用於擷取緊鄰匹配元素之前的元素，如：$("li:eq(1)").prev().css("background-color","#F06");siblings([expr]) 用於擷取位於匹配元素前面和後面的所有同輩元素，如：$("li:eq(1)").siblings().css("background-color","#F06")；遍曆前輩元素：jQuery中可以遍曆前輩元素，方法：parent() 擷取元素的父級元素parents() 擷取元素的祖先元素遍曆--其它方法：jQuery遍曆 - each() ：以每一個匹配的元素作為上下文來執行一個函數：$("img").each(function(i){this.src = "test" + i + ".jpg";}) 尋找方法 - find() ：搜尋所有與指定運算式匹配的元素：$("p").find("span"); //在所有p元素的後代節點中尋找span元素 CSS-DOM操作：除css()外，還有擷取和設定元素高度、寬度、相對位置等的樣式操作方法：height([value]) 設定或返回匹配元素的高度width([value]) 設定或返回匹配元素的寬度offset([value]) 返回以像素為單位的top和left座標。此方法僅對可見元素有效 jQuery的事件：jQuery事件是對JavaScript事件的封裝，常用事件分類如下：基礎事件：window事件滑鼠事件鍵盤事件表單事件複合事件是多個事件的組合：滑鼠游標懸停滑鼠連續點擊 滑鼠事件：click(fn) ：單擊滑鼠時mouseover(fn) ：滑鼠移過時mouseout(fn) ：滑鼠移出時 鍵盤事件：keydown(fn) ：按下鍵盤時keyup(fn) ：釋放按鍵時keypress(fn) ：產生可列印的字元時 表單事件：focus(fn) ：獲得焦點blur(fn) ：失去焦點submit(fn) ：表單提交時 事件綁定：bind()方法 - 事件綁定：$(selector).bind(type[,data],fn)//例如：$("#btn").bind("click",fn);$("#btn").bind("click dblclick",fn);$("#btn").bind({click:function(){},mouseover:function(){}});unbind()方法 - 解除事件綁定：$(selector).unbind()//例如：$("#btn").unbind()$("#btn").unbind("click")$("#btn").unbind("click",handler);//指定的事件處理函數 on()方法 - 事件綁定：$(selector).on(events[,selector][,data],fn)//例如:$("#form").on("click",".btn",{},fn);off()方法 - 解除事件綁定：$(selector).off(events,[selector],[handler])$(selector).off(events,[selector])$(selector).off(events)$(selector).off()注意：建議用on()方法綁定事件，效率更高 滑鼠游標懸停事件：hover(fn1,fn2)方法：相當於mouseover與mouseout事件的組合//滑鼠在父級菜單移入移出，子功能表隱藏與顯示：$("#parentMenu").hover(function(){$("#childMenu").css("display","block");//mouseover},function(){$("#childMenu").css("display","none");//mouseout});滑鼠連續click事件：toggle()方法用於類比滑鼠連續click事件：$("body").toggle(function(){},//第1,4,7...次點擊時觸發function(){},//第2,5,8...次點擊時觸發function(){},//第3,6,9...次點擊時觸發); jQuery的動畫效果：1、控制元素顯示與隱藏2、控制元素淡入淡出3、改變元素高度 顯示及隱藏元素：show([duration][,complete])hide([duration][,complete])$(".tipsbox").show("slow");注意：顯示速度可以取如下值：毫秒（如1000）、slow、normal、fast 淡入淡出效果：fadeIn()和fadeOut()可以通過改變元素的透明度實現淡入淡出效果$("input[name=fadein_btn]").click(function(){$("img").fadeIn("slow");});$("input[name=fadeout_btn]").click(function(){$("img").fadeOut(1000);}); 切換元素可見狀態：toggle()除了可以類比滑鼠的連續單擊事件外，還能用於切換元素的可見狀態$("li:gt(5):not(:last)").toggle(); 改變元素的高度：slideDown() 可以使元素逐步延伸顯示slideUp() 則使元素逐步縮短直至隱藏$("h2").click(function(){$(".txt").slideUp("slow");$(".txt").slideDown("slow");}); 自訂動畫：animate()方法用於建立自訂動畫的函數：$(selector).animate(params [,speed] [,easing] [,fn]); params:規定產生動畫效果的CSS樣式和值speed:三種預定速度之一的字串（“slow”，“normal”，“fast”）或表示動畫時間長度的毫秒數值（如：1000）easing:要使用的擦除效果的名稱（需要外掛程式支援）.預設jQuery提供“linear”和“swing”fn:在動畫完成時執行的函數，每個元素執行一次jQuery 基礎知識點梳理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
