筆記2:JQuery
阿新 • • 發佈:2020-07-20
一、基礎
1--jquery-xxx.js 與 jquery-xxx.min.js區別: 1、jquery-xxx.js 開發版本。給程式設計師看的,有良好的縮排和註釋。體積大一些 2、jquery-xxx.min.js 生產版本。程式中使用,沒有縮排。體積小一些。程式載入更快 2--jq物件和js物件轉換 1、jq -- > js jq物件[索引] 或者 jq物件.get(索引) 2、js -- > jq $(js物件) 3--入口函式 $(function () { }); 4--選擇器 作用:獲取元素物件 用法:$(選擇器型別) 1、基本選擇器 1. 標籤選擇器(元素選擇器) 語法: $("html標籤名") 獲得所有匹配標籤名稱的元素 2. id選擇器 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素 3. 類選擇器 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素 4. 並集選擇器: 語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素 2、 層級選擇器 1. 後代選擇器 語法: $("A B ") 選擇A元素內部的所有B元素 2. 子選擇器 語法: $("A > B") 選擇A元素內部的所有B子元素 3、屬性選擇器 1. 屬性名稱選擇器 語法: $("A[屬性名]") 包含指定屬性的選擇器 2. 屬性選擇器 語法: $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器 3. 複合屬性選擇器 語法: $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器 4、.過濾選擇器 1. 首元素選擇器 語法: $(標籤名:first) 獲得選擇的元素中的第一個元素 2. 尾元素選擇器 語法: :last 獲得選擇的元素中的最後一個元素 3. 非元素選擇器 語法: :not(selector) 不包括指定內容的元素 4. 偶數選擇器 語法: :even 偶數,從 0 開始計數 5. 奇數選擇器 語法: :odd 奇數,從 0 開始計數 6. 等於索引選擇器 語法: :eq(index) 指定索引元素 7. 大於索引選擇器 語法: :gt(index) 大於指定索引元素 8. 小於索引選擇器 語法: :lt(index) 小於指定索引元素 9. 標題選擇器 語法: :header 獲得標題(h1~h6)元素,固定寫法 5. 表單過濾選擇器 1. 可用元素選擇器 語法: :enabled 獲得可用元素 2. 不可用元素選擇器 語法: :disabled 獲得不可用元素 3. 選中選擇器 語法: :checked 獲得單選/複選框選中的元素 4. 選中選擇器 語法: :selected 獲得下拉框選中的元素 5--DOM操作 ---內容操作 1. jq物件.html() 獲取/設定元素的標籤體內容 <a><font>內容</font></a> --> <font>內容</font> 2. text() 獲取/設定元素的標籤體純文字內容 <a><font>內容</font></a> --> 內容 3. val() 獲取/設定元素的value屬性值 ---屬性操作 ----通用屬性操作 jq物件.attr("屬性","值") 獲取/設定元素的屬性 jq物件.removeAttr("屬性") 刪除屬性 prop() 獲取/設定元素的屬性 removeProp() 刪除屬性 說明:attr和prop區別? 1. 如果操作的是元素的固有屬性,則建議使用prop 2. 如果操作的是元素自定義的屬性,則建議使用attr ----對class屬性操作 jq物件.addClass("值") 新增class屬性值 jq物件.removeClass("值") 刪除class屬性值 jq物件.toggleClass("one") 如果元素物件上存在class="one",則將屬性值one刪除掉。 如果元素物件上不存在class="one",則新增 jq物件.css("屬性","值") 修改物件的css樣式 jq物件.css("屬性") 獲取css屬性值 ---CRUD操作: 用法:jq物件1.方法(jq物件2) 1--插入物件到物件內(父子)外(兄弟): jq物件2到jq物件1中 ------父子關係 jq物件1.append(jq物件2) prepend() ------兄弟關係 after() before() jq物件1到jq物件2中 ------父子關係 appendTo(): prependTo(): ------兄弟關係 insertAfter() insertBefore() 2--其他方法 物件.remove() 移除元素 物件.empty() 清空元素的所有後代元素 物件.clone() 克隆元素並保留原來的
二、高階
1--動畫 引數: 1----speed:動畫的速度。三個預定義的值或毫秒數 slow normal fast 或表示動畫時長的毫秒數值(如:1000) 2----easing:用來指定切換效果,預設是"swing",可用引數"linear" swing 動畫執行時效果是 先慢,中間快,最後又慢 linear 動畫執行時速度是勻速的 3----fn:在動 畫完成時執行的函式 ---預設方式 ----jq物件.show([speed,[easing],[fn]]) 顯示 ----jq物件.hide([speed,[easing],[fn]]) 隱藏 ----jq物件.toggle([speed],[easing],[fn]) 切換 ---滑動方式 ----slideDown([speed],[easing],[fn]) ----slideUp([speed,[easing],[fn]]) ----slideToggle([speed],[easing],[fn]) ---淡入淡出方式 ----fadeIn([speed],[easing],[fn]) ----fadeOut([speed],[easing],[fn]) ----fadeToggle([speed,[easing],[fn]]) 2--遍歷 ---js的遍歷方式 * for(初始化值;迴圈結束條件;步長) ---jq的遍歷方式 回撥函式返回值: true:如果當前function返回為false,則結束迴圈(break)。 false:如果當前function返回為true,則結束本次迴圈,繼續下次迴圈(continue) ----jq物件.each(callback) jquery物件.each(function(index,element){}); * index 就是元素在集合中的索引 * element 就是集合中的每一個元素物件 * this 集合中的每一個元素物件 ----$.each(object, [callback]) ----for..of: jquery 3.0 版本之後提供的方式 用法:for(元素物件 of 容器物件) 3--事件繫結 ---jq物件.方法名(回撥函式); 註釋:如果呼叫事件方法,不傳遞迴調函式,則會觸發瀏覽器預設行為。 例子: 表單物件.submit();//讓表單提交 ----click() 單擊事件 ----mouseover() 滑鼠事件 ----mouseout() 滑鼠事件 ----focus() 獲取焦點 ----submit() 表單提交 鏈式程式設計:jq物件.方法1(回撥函式).方法2(回撥函式) 例子:$("#lizi").mouseover(function(){alert("滑鼠來了")}).mouseover(function(){alert("滑鼠走了")}); ---on繫結事件/off解除繫結 jq物件.on("事件名稱",回撥函式) 例子:$("#lizi").on("click",function(){alert("on方法執行了")}); jq物件.off("事件名稱") * 如果off方法不傳遞任何引數,則將元件上的所有事件全部解綁 ---jq物件.toggle(fn1,fn2...):當單擊jq物件對應的元件後,會執行fn1.第二次點選會執行fn2..... 最後一個fn執行完後再點選會返回到第一個fn 說明:1.9版本 .toggle() 方法刪除,jQuery Migrate(遷移)外掛可以恢復此功能。 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> <!--引入外掛--> 4--外掛:增強JQuery的功能 1. $.fn.extend(object) 增強通過Jquery獲取的物件的功能 增強$("#id")這個物件功能 <script type="text/javascript"> //定義jquery物件外掛 $.fn.extend({ //定義的方法,所有的jq物件都可以呼叫該方法 check:function(){ //讓複選框選中 //this 呼叫該方法的jq物件 this.prop("checked",true); }, uncheck:function(){ //讓複選框不選中 this.prop("checked",false); } }); $(function(){ //獲取按鈕 $("#btn-check").click(function(){ //獲取複選框物件 $("input[type='checkbox']").check(); }); $("#btn-uncheck").click(function(){ //獲取複選框物件 $("input[type='checkbox']").uncheck(); }); }); </script> 2. $.extend(object) 增強JQeury物件自身的功能 增強$/jQuery這個自身物件功能 $.extend({ max:function (a,b) { //返回兩數中的較大值 return a >= b ? a:b; }, min:function (a,b) { //返回兩數中的較小值 return a <= b ? a:b; } }); //呼叫全域性方法 var max = $.max(4,3); //alert(max); var min = $.min(1,2); alert(min);