bsp ... 綁定 回調函數 框架 turn 自定義 立即執行 idt

1、jquery概念 是js的一個類庫 （對js中某些功能的封裝） 用jq實現的功能一定能用js實現 反過來 不一定 ，js實現的功能jq不一定能實現 2、jquery好處 1、代碼簡潔 2、兼容性好 最少的代碼做多的事情 性能支持比較好 節約學習成本 讓DOM操作變的簡單 jQuery框架支持鏈式寫法 jQuery框架實現了跨瀏覽器的兼容包括IE低版本 jQuery1.x版本支持低版本IE瀏覽器 可以操作css3樣式 jquery可以和原生js結合一起使用 setTimeout( function(){ jq代碼 },1000 ) 註意 ： 原生DOM對象不能使用jquery對象方法 document.getElementById("").dom的操作方式 用jq實現的用js一定能實現 反過來不一定 選擇器、屬性操作、樣式操作、內容操作、文檔操作(dom)、 動畫 、事件處理 、 ajax 、jq插件 3、jquery選擇器 $是jQuery的簡寫 含義一樣 $ 符號 是一個函數 function $() 返回值是對象object類型 同 jQuery() 也就是 $() 等價 jQuery() 註意 ： 通過jquery方式查找到的元素 不能使用js的方式操作 樣式、屬性、內容... $("").style.color = "" 錯 通過js方式查找到的元素 不能使用jq的各種方法操作 樣式、屬性、內容... document.getElementById().css() 錯 基本選擇器 ： id選擇器 $("#id名") 類選擇器 $(".class名") 標簽選擇器 $("html標簽") 組合選擇器 $("id,class") 通用選擇器 $("*") 查找所有的標簽 層級選擇器 : 空格 查找當前元素裏面的所有後代元素 > 查找當前元素裏面的所有子代元素 + 查找當前元素下面的緊鄰的兄弟節點 ~ 查找當前元素下面的所有的兄弟節點 查找過濾選擇器(都是方法) ： first() $("li").first() ：first last() :last eq(下標) 下標從0開始 等價 :eq(下標) find() $("div.box").find("span") 查找給定元素的後代 children() 查找給定元素的子代 $().children("span") $().children() next() $("p").next() $("p").next("span")指定的下一個元素 prev() 前一個 用法同next() nextAll() 下面所有的 可以指定參數 也可以不指定 prevAll() 前一個所有 siblings() 除了自身之外的所有兄弟元素（也可以指定參數） parent() 查找某個元素的父元素 filter() 參數可以是一個回調函數 $("p").filter(function(){ return 條件；返回滿足某個條件的p元素 }) not() 除了...之外 :not 4、jquery中的樣式操作 css() 獲取樣式 用法 ： .css("樣式","值") .css({ "樣式":"值" ，"樣式":"值",.....}) .addClass("類名") 添加樣式類 .removeClass() 刪除樣式類 5、jquery中查找元素下標 index() 查找該元素在同輩元素中的位置 6、jquery對象和dom對象的互換問題 dom對象轉成jq對象 ： $( dom對象 ) var obj = document.getElementById("box") $( obj ) jq對象轉化成dom對象 ： $().get(下標)---dom對象 $()[下標] ---dom對象 var $list = $("li"); $list.get(2) $list[2] 7、屬性操作 attr() 獲取或設置標簽元素的屬性 (該方法不能操作屬性值是布爾類型的屬性 比如 ： checked 操作布爾類型屬性 用 prop() ) 獲取 ： 對象.attr() 設置 ： 對象.attr("屬性","值") 對象.attr({ 屬性 ： 值, ... }) 8、jquery中的樣式操作 css() 獲取樣式 用法 ： .css("樣式","值") .css({ "樣式":"值" ，"樣式":"值",.....}) .addClass("類名") 添加樣式類 .removeClass() 刪除樣式類 判斷樣式類 hasClass 9、jquery中的內容操作 標簽 ： html() 獲取或設置 非表單元素的內容 設置內容html()方法會識別標記 獲取時只獲取第一個 text() 純文本操作 獲取時獲取所有的元素內容 表單 ： val() 獲取或設置表單元素的內 獲取：無參數 設置 ：有參數 10、jquery的文檔操作 append() 向指定的父元素後添加新子元素 appendTo() 將某個子元素添加到指定的父元素後面 prepend() 前置新內容 prependTo() after() insertAfter() before() insertBefore() empty() 清空 remove() 刪除所有 detach() 刪除某個指定的元素 clone() 克隆 wrap() 把所有的元素用新創建的元素包裹起來

replaceWith() 將所有的元素替換成指定的元素 移動不是復制

replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素 jquery的動畫 基本動畫 ： show() 沒有參數 等價 css：display：block 可以有三個參數 第一個參數 ：動畫執行的時間 第二個參數 ： 動畫執行方式 linear swing 第三個參數 ：動畫完成後的回調函數 hide() 隱藏 toggle() 切換 顯示 / 隱藏 上拉/下拉 ： slideDown() 通過高度的改變 顯示 某個元素 slideUp() 通過高度的改變 隱藏 某個元素 slideToggle() 切換 透明度 ： fadeIn(1000，function（） { }) 淡入 通過透明度的改變 顯示 某個元素 fadeOut() 隱藏 fadeToggle() 切換 fadeTo() 調整某個元素的透明度 第一個參數 ： 時間 （不能省略） 時間為0 也要寫出來 第二個參數 ： 透明度值 自定義動畫 ：animate 對象.animate( { } , 時間 , 回調函數 ) stop() 停止當前正在運行的動畫 其余動畫繼續執行 （多個相同的元素含有多個同樣的事件時 ） delay() 動畫延時 jquery遍歷 $().each( function(){ } ) 或 $.each( $() , function(){ } ) jquery中阻止冒泡方式 ：return false size()方法 length屬性 獲取jq元素的個數 jquery中的事件處理 jquery的頁面加載 ： $(document).ready(function(){ }) 簡寫成 $(function(){ }) jquery的頁面加載中的代碼 不需要等頁面所有內容全部加載完成後執行 dom元素準備就緒即可執行 jquery的頁面加載函數可以存在多個 $(document).ready( callback ) 或簡寫成 jQuery（callback） $( callback ) 事件處理 ： 事件綁定 ： bind() 用法 ： 對象.bind("事件",function(){ }) 對象.bind({ 事件 ： function(){}, 事件 : function(){}, ..... }) unbind() 解除綁定 unbind 也可以用來關閉on綁定的事件 事件委托 delegate： 對象.delegate("事件源",事件,function(){ }) 取消委托 ： undelegate 事件綁定+事件委托 ： on ---- off off可以用來關閉bind綁定的事件 事件綁定 用法 和bind() 事件委托 用法 ： 對象.on(事件 , "事件源" , function(){ }) one() 只觸發一次事件的事件處理方法 事件切換 hover 用戶 ： 對象.hover(function(){ mouseenter },function(){ mouseleave }) jquery插件 自定義插件 ： 方式一： $.extend({ 自定義工具方法 全局函數 方法名 : function(){}, .... }) 調用 ：全局調用 $.方法名() 方式二 ： $.fn.extend({ 自定義對象的方法 不是全局方法 方法名 ： function(){ }, ... }) 調用 ： 局部方法 使用 jq選擇器.方法名() 註意 ： $.fn是jQuery原型對象 擴展 ： $.函數名 = function(){ ... } $.調用 $.fn.函數名 = function(){ ... } jq對象調用 jquery的ajax 方法 ：$.ajax () $.get() $.post() $.getJson() $.getScript() load() 1、ajax的異步請求之 load 加載公共的html文件 load() 方法是一個局部的方法，通過jquery的選擇器作為開始調用load方法 load()方法是異步的，加載的信息中如果需要事件響應，必須通過回調函數來實現（或者委托），也就是說所有load加載的數據中的事件都要寫在回調函數中 load()方法如果想要請求不同結構的內容，可以把這些內容寫到一個文件中，請求數據時，在url後加一個請求容器的選擇器名稱即可（這裏選擇器建議使用基本選擇器） load()方法的參數有三個： 第一個： 請求的url 第二個： 發送的數據 json格式 {} 第三個參數 ： 回調函數 回調函數中有三個參數，分別是： function(res,type,xhr){ console.log(res); //請求數據 console.log( type );//請求的狀態 console.log(xhr); //deffered 異步對象 （類似於js中promise對象） } 2、ajax請求之 $.get 或 $.post 以 $. 開始的ajax請求方式是全局方法 $.get(三個參數) 以get方式請求數據 第一個參數：請求的路徑 第二個參數：請求數據　　json對象 ｛｝ 第三個參數： 回調函數 （回調函數中也有三個參數，同load） $.post() 以post方式請求數據 用法同$.get() 3、ajax請求之 $.getJson() $.getScript() $.getJson("xxx.json"，data, 回調函數) 通過這種方式請求json數據 三個參數 ： url data function(){} $.getScript("xxx.js"，回調) 通過這種方式請求js腳本數據 ，立即執行請求的腳本代碼 4、$.ajax jquery的ajax請求服務器傳遞過來的數據一般都是object對象（請求的數據是object類型） 用法： $.ajax({ type:"get", 請求數據方式 url:"http://127.0.0.1/jqAjx1706/data.json";, 請求路徑 success:function(){ 服務器通過 success 方法 獲取處理的結果 console.log("成功"); } }); 或 $.ajax 方法返回一個deffered對象 （類似promise） 如果請求數據成功，通過done方法獲取服務器的數據 var deff = $.ajax({ type:,url: }) deff.done(function(){ }) 關於deffered方法描述 ： deferred對象是jQuery的回調函數的解決方案。 deferred對象有done方法，表示成功時要調用的回調函數。 deferred對象有fail方法，表示失敗時要調用的回調函數。 when方法表示都成功是再調用對應的回調函數。 常用方法： $.ajax({ type:"get", url:"http://127.0.0.1/jqAjax1706/data.json";, datatype:"json",//指定請求數據的類型 請求數據類型如果是json 表示正常ajax請求 如果是jsonp，表示跨域請求 data:{"name":"admin"},//向服務器發送數據 success:function(res){ //alert(typeof res); //此處處理服務器返回數據的業務邏輯 } }); ajax跨域： https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+txt+"&cb=fn $.ajax({ type:"get", url:"https://api.douban.com/v2/book/search?q=css&callback=fn&start=0&count=10";, dataType:"jsonp", jsonCallback:"fn" //設置回調函數 }); function fn(msg){ alert( msg ); }

JQuery的基本用法總結