1、jQuery常用選擇器 篩選： $(`div`).has(`p`); // 選擇包含p元素的div元素 $(`div`).not(`.myClass`); //選擇class不等於myClass的div元素 $(`div`).eq(5); //選擇第6個div元素 選擇器的轉移： $(`#box`).prev(); //選擇id是box的元素前面緊挨的同輩元素 $(`#box`).prevAll(); //選擇id是box的元素之前所有的同輩元素 $(`#box`).next(); //選擇id是box的元素後面緊挨的同輩元素 $(`#box`).nextAll(); //選擇id是box的元素後面所有的同輩元素 $(`#box`).parent(); //選擇id是box的元素的父元素//通過兒子找爸爸 $(`#box`).children(); //選擇id是box的元素的所有子元素//通過爸爸找兒子（可指定）children(`li`) $(`#box`).siblings(); //選擇id是box的元素的同級元素//可以找到同級中的一個（可指定）siblings(`li`)具有很強的排他性 $(`#box`).find(`.myClass`); //選擇id是box的元素內的class等於myClass的元素 .eq 根據下標找元素 與 .index獲取元素下標 一般是一起使用 還有一類選擇器就是css中的選擇器 2、具備jQuery特有的方法 jQuery物件.css() jQuery物件.addClass() 設定class等屬性 jQuery物件.addClass() 新增類名 jQuery物件.removeClass() 刪除的是類名中的一個值 jQuery物件.toggleClass() 切換類 特點：在removeClass()中不寫參數列示全部刪除 3、jQuery動畫的實現 1、jQuery物件.animate() jQuery物件.animate(引數一：要改變的樣式屬性值，寫成字典的形式，引數二：動畫持續的時間，單位為毫秒，一般不寫單位， 引數三：動畫曲線，預設為‘swing’，緩衝運動，還可以設定為‘linear’，勻速運動，引數四：動畫回撥函式， 動畫完成後執行的匿名函式) 2、更便捷的動畫實現 jQuery物件.hide() 隱藏 jQuery物件.show() 顯示 jQuery物件.toggle() 切換隱藏顯示 jQuery物件.fadeIn() 淡入 jQuery物件.fadeOut() 淡出 jQuery物件.fadeToggle() 切換淡入淡出 jQuery物件.slideUp() 捲起 jQuery物件.slideDown() 展開 jQuery物件.slideToggle() 切換捲起展開 jQuery物件.fadeTo(時間，透明度（寫成小數）) 設定透明度 4、對元素的操作 jQuery物件.prop("src") 根據src獲取src的值 jQuery物件.prop("src","具體的值") 設定src的值 jQuery物件.prop({}) 可以寫多個鍵值對 jQuery物件.val() 把value單獨提出來，獲取value的值 jQuery物件.val("具體的值") 設定value的值 5、jq中的迴圈 $(`li`).each(function(aa){ //形參表示的就是標籤的索引值 alert() }) js中引數非常的隨意 獲取焦點 focus 失去焦點 blur 擁有更多的時機做事情 進入的子元素或者觸發或者不觸發命令 推到：標籤父子級，命令繫結到父級 hover(function(){},function(){}) 進入 移出 6、jQuery物件.submit()提交表單 表單提交不會直接選擇form標籤選擇器html5中一個HTML頁面可以有很多個form標籤，為了保證一致性都是id的形式選擇器 工作中不是直接的提交需要條件判斷：如果所有表單控制元件合法提交否則報錯不能提交資料 preventDefault()和return false 都是阻止預設時間的發生 7、事件冒泡： 父子級標籤且都繫結相同的事件，觸發子級的命令會逐層像父級觸發 event.stoppropagation() 和 return false 都是阻止事件冒泡 事件的冒泡是客觀存在的現象，不會因為沒有響應表示沒有冒泡 根據自己的需求來確定在哪return false 阻止冒泡 看不見的遍歷是隱式迭代浪費資源 8、事件委託/事件代理：委託給這個標籤的父標籤 $(`ul`).delegate(事件實際發生在誰身上,事件屬性,匿名函式寫命令) 作用：1、提高程式碼的執行效率 2、可以給未來元素繫結命令 擴充：on(事件屬性，匿名函式)只能給未來元素繫結命令 DOM 文件物件模型 document object model js內建：內建的一個結構化表現手法，通過結構化表現手法把所有標籤實現了一個倒置的樹狀結構圖 針對性的尋找標籤 標記 == 標籤 == 元素 小於 節點(標籤，標籤的屬性，標籤的內容) 增加刪除 增加標籤：子級和同級 刪除標籤：1、宣告變數儲存節點標籤資料 2、使用追加函式節點變數追加到相應的位置 var $li = $(`<li>666</li>`) 子級： $(`ul`)append($li) 新增到子級之後 $li.appendTo($(`ul`)) $(`ul`).prepend($li) 新增到子級之前 $li.prependTo($(`ul`)) 同級： $(`ul`).after($div) 新增到同級之後 $div.insertAfter($(`ul`)) $(`ul`).before($div) 新增到同級之前 $div.insertBefore($(`ul`)) 刪除： $(`ul`).remove() 刪除節點 $(`ul`).empty() 清空節點 $(function(){}) 匿名函式 $(`div`)選擇器 $(`<li>666</li>`)標籤 $(this)原函式 9、$.ajax使用方法 常用引數： 1、url請求地址 2、type請求方式，預設是`GET`，常用的還有`POST` 3、dataType設定返回的資料格式，常用的是`json`格式，也可以設定為`html ` 4、data設定傳送給伺服器的資料 5、success設定請求成功後的回撥函式 6、error設定請求失敗後的回撥函式 7、async設定是否非同步，預設值是`true`，表示非同步 $.ajax({ url: `/change_data`,介面的請求地址介面：為了得到資料的叫介面 type: `GET`, dataType: `json`,通用資料格式 success:function(dat){ alert(dat.name); }, error:function(){ alert(`伺服器超時，請重試！`); } });