1、jQuery常用選擇器 篩選： $('div').has('p'); // 選擇包含p元素的div元素 $('div').not('.myClass'); //選擇class不等於myClass的div元素 $('div').eq(5); //選擇第6個div元素 選擇器的轉移： $('#box... ...
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('伺服器超時，請重試！'); } });
