jQuery 基礎知識
阿新 • • 發佈:2017-10-22
first cte nextall eight 當前 基本選擇器 eve msg all
一、序言
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後的又一個優秀的JavaScript代碼庫(JavaScript框架)。jQuery設計的宗旨是"Write Less, Do More",即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和AJAX交互。
jQuery的核心特性可以總結為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的CSS選擇器,並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。
二、jQuery對象
Query對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的。
如果一個對象是jQuery對象,那麽它就可以使用jQuery裏的方法:$("#test").html();
$("#test").html()
//意思是指:獲取ID為test的元素內的html代碼。其中html()是jQuery裏的方法
這段代碼等同於用DOM實現代碼:document.getElementById("test").innerHTML;
雖然jQuery對象是包裝DOM對象後產生的,但是jQuery無法使用DOM對象的任何方法
同理DOM對象也不同使用jQuery裏的方法
約定:如果獲取的是jQuery對象,那麽要在變量前面加上$
var $variable = jQuery對象 var variable = DOM對象 $variable[0]:jquery對象轉換為dom對象 $("#msg").html(); -> $("#msg")[0].innerHTML; //jquery的基礎語法:$(selector).acttion()
三、jQuery框架分類
- 核心
- 選擇器
- 屬性
- CSS
- 文檔處理
- 篩選
- 效果
- 事件
- 事件對象
- 延遲對象
- 回調函數
- AJAX
- 工具
四、選擇器
4.1 基本選擇器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
4.2 層級選擇器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
4.3 基本篩選器
$("li:fister") $("li:eq(2)") $("li:even") $("li:gt(1)")
4.4 屬性選擇器
$(‘[id="div1"]‘) $(‘[name="abc"[id]]‘)
4.5 表單選擇器
$("[type=‘text‘]") ----> $(":text") //註意只適用於input標簽: $("input:checked")
4.6 表單屬性選擇器
:enabled
:disabled
:checked
:selected
五、篩選器
5.1 過濾篩選器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
5.2 查找篩選器
// 查找子標簽: $("div").childred(".test"); $("div").find(".test"); //向下查找兄弟標簽: $(".test".next()); $(".test".nextAll(); $(".test").nextUntil(); //向上查找兄弟標簽: $("div").prev(); $("div").prevAll(); $("div").prevUntil(); //查找所有兄弟標簽: $("div").siblings(); //查找父標簽: $(".test").parent(); $(".test").parents(); $(".test").parentUntil();
六、 事件
//頁面載入 read(fn) //到DOM載入就緒可以查詢及操作時綁定一個要執行的函數 #(document).ready(function(){} //也可以寫成 $(function(){} 文檔就緒事件 //事件綁定
//語法:標簽對象.事件(函數) eg:$("p").click(function(){}) //事件委派 $("").on(eve,[selector],[data],fn) //在選擇元素上綁定一個或多個時間處理函數 //事件切換 hover :一個模仿懸停事件(鼠標移動到一個對象上面及移除這個對象)的方法。這個一個自定義的方法,它為頻繁使用的任務提供了一種"保持在其中“de ”的狀態 over:鼠標移到元素上要觸發的函數 out:鼠標移除元素要觸發的函數
七、 屬性操作
//CSS類 $("").addClass(class|fn) $("").removeClass([class|fn]) //屬性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); //HTML代碼/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) $("#c1").css({"color":"red", "fontSize":"35px"}) //attr使用方法: <input id="chk1" type="checkbox" /> <input id="chk2" type="checkbod" checked="checked" /> <script> //對於HTML元素本身就帶有的固定屬性,在處理時,使用prop方法 //對於HTML元素我們自己定義的DOM屬性,在處理時,使用attr方法 //像checkbox, radio和select這樣的元素,選中屬性對應"checked"和"selected",這些屬於固有屬性,因此 //需要使用prop方法去操作才能獲得正確的結果 $("#chk1").attr("checked") // undefined $("#chk1").prop("checked") //false //手動選中的時候attr()獲得到沒有意義的undefined //$("#chk1").attr("checked") // undefined //$("#chk1").prop("checked") //true console.log($("#chk1").prop("checked")); //false console.log($("#chk2").prop("checked")); //true console.log($("#chk1").attr("checked")); //undefined console.log($("#chk2").attr("checked")); //checked </script>
八、 工具-each循環
我們知道
$("p").css("color","red")
是將css操作加到所有的標簽上,內部維持一個循環;但如果對於選中標簽就行不同處理,這時就需要
對所有標簽數組就行循環遍歷
//jQuery支持兩個循環方式: //方式1: $.each(obj,fn) arr = [10, 20, 30, 40]; dic = {name:"abc", sex:"male"}; $.each(arr, function(i,x){ console.log(i,x) }) //方式2://$(this)指當前循環標簽 $("").each(fn) $("tr").each(function(){ console.log($(this).html()) })
九、 文檔節點處理
//創建一個標簽對象 $("<p>") //內部插入 $("").append(content|fn) --->$("p").append("<b>Helo</b>"); $("").appendTo(content) --->$("p")>appendTo("div"); $("").prepend(content|fn) --->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) --->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) --->$("p").after("<b>Hello</b>"); $("")>before(content|fn) --->$("p").before("<b>Hello</b>"); $("").insertAfter(content) --->$("p").insertAfter("#foo"); $("").insertBefore(content)--->$("p").insertBefore("#foo"); //替換 $("").replaceWith(content|fn) --->$("p").repalceWith("<b>Paragraph.</b>"); //刪除 $("").empty() $("").remove([expr]) //復制 $("").clone([Even[,deepEven]])
十、動畫效果
//顯示隱藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquest.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ #("p").hide(1000); }); $("show").click(function(){ #("p").show(1000); }); //用於切換被選元素的hide()與show()方法 $("#toggle").click(function(){ $("p").toggle(); }); }) </script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <p>hello<p> <button id="hid">隱藏</button> <button id="show>顯示</button> <button id="toggle">切換</button> </body> </html>
滑動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); #("#slideUp").click(function(){ $("#content").slideUo(1000); }); #("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); <style> #content{ text-align: center; background-color: lightblue; border: solid 1px red; display: none; padding: 50px; } </style> </head> <body> <div id="slideDown>出現</div> <div id="slideUp">隱藏</div> <div id="slideToggle">toggle</div> <div id="content">helloworld</div> </body> </html>
淡入淡出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display:none; width: 80px; height: 80px; background-color: blue;</div> </body> </html>
十一、回調函數
callbacks.add(callbacks) 回調列表中添加一個回調或回調的集合
callbacks.disable() 禁用回調列表中的回調
callbacks.empty() 從列表中刪除所有回調
callbacks.fire(arguments) 禁用回調列表中的回調
callbacks.fired() 用給定的參數調用所有的回調
callbacks.fireWith([c][,a]) 訪問給定的上下文和參數列表中的所有回調
callbacks.has(callback) 確定是否提供回調列表
callbacks.lock() 鎖定在其當前狀態的回調列表
callbacks.locked() 確定是否已被鎖定的回調列表
callbacks.remove(callbacks) 刪除回調或回調列表的集合
jQuery。callbacks(flags)
一個多用途的回調列表對象,提供了強大的方式來管理回調函數列表。
$.callback()的內部提供了jQuery的$.ajax()和$.Deferred()基本功能組件。它可以用來作為類似基礎定義的新組件的功能。
$.callbacks()支持的方法,包括callbacks.add(),callbacks.remove(),callbacks.fire(),callbacks.disable()
十二、CSS操作
//css位置操作
$("").offset([coordinates])
$("").positon()
$("").scrollTop)([val])
$("").scrollLeft)([val])
//尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([options])
$("").outWidth([options])
十三、擴展方法(插件機制)
jQuery.extend(object) //擴展jQuery對象本身 //用來在jQuery命名空間上增加新函數 //在jQuery命名空間上增加兩個函數: <script> jQuery.extent({ min:function(a, b) {return a<b ? a:b;}, max:function(a, b) {return a>b ? a:b;} }); jQuery.min(2,3); //2 jQuery.max(4,5); //5 </script> jQuery.fn.extend(object) //擴展jQuery元素集來提供新的方法(通常用來制作插件) //增加兩個兩個插件方法: <body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.js"></script> <script> jQuery.fn.extend({ check: function(){ $(this).attr("checked", true); }, uncheck: function(){ $(this).attr("shecked", false); }, }); $(":checkbox":gt(0).check() </script> </body>
jQuery 基礎知識