-
jquery介紹
jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作爲他們的官方庫。
jQuery的版本分爲1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>jquery的口號和願望 Write Less, Do More（寫得少，做得多）
- 1、http://jquery.com/ 官方網站
- 2、https://code.jquery.com/ 版本下載
-
jquery加載
將獲取元素的語句寫到頁面頭部，會因爲元素還沒有加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。
<script type="text/javascript"> $(document).ready(function(){ ...... }); </script>可以簡寫爲：
<script type="text/javascript"> $(function(){ ...... }); </script>
-
jquery選擇器
-
jquery用法思想
選擇某個網頁元素，然後對它進行某種操作
-
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$('#myId') //選擇id爲myId的網頁元素 $('.myClass') // 選擇class爲myClass的元素 $('li') //選擇所有的li元素 $('#ul1 li span') //選擇id爲爲ul1元素下的所有li下的span元素 $('input[name=first]') // 選擇name屬性等於first的input元素 -
對選擇集進行過濾
$('div').has('p'); // 選擇包含p元素的div元素 $('div').not('.myClass'); //選擇class不等於myClass的div元素 $('div').filter('.myClass'); //選擇class等於myClass的div元素 $('div').eq(5); //選擇第6個div元素 -
選擇集轉移
$('div').prev(); //選擇div元素前面緊挨的同輩元素 $('div').prevAll(); //選擇div元素之前所有的同輩元素 $('div').next(); //選擇div元素後面緊挨的同輩元素 $('div').nextAll(); //選擇div元素後面所有的同輩元素 $('div').parent(); //選擇div的父元素 $('div').children(); //選擇div的所有子元素 $('div').siblings(); //選擇div的同級元素 $('div').find('.myClass'); //選擇div內的class等於myClass的元素 -
判斷是否選擇到了元素
jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。
var $div1 = $('#div1'); var $div2 = $('#div2'); alert($div1.length); // 彈出1 alert($div2.length); // 彈出0 ...... <div id="div1">這是一個div</div> -
-
jquery樣式操作
-
jquery用法思想
同一個函數完成取值和賦值
-
操作行間樣式
// 獲取div的樣式 $("div").css("width"); $("div").css("color"); //設置div的樣式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"}); -
特別注意
選擇器獲取的多個元素，獲取信息獲取的是第一個，比如：$(“div”).css(“width”)，獲取的是第一個div的width。 -
操作樣式類名
$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2 $("#div1").removeClass("divClass") //移除id爲div1的對象的class名爲divClass的樣式 $("#div1").removeClass("divClass divClass2") //移除多個樣式 $("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式 -
獲取元素的索引值
有時候需要獲得匹配元素相對於其同胞元素的索引位置，此時可以用index()方法獲取
var $li = $('.list li').eq(1); alert($li.index()); // 彈出1 ...... <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul>
-
-
jquery特殊效果
fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); }); fadeOut() 淡出 fadeToggle() 切換淡入淡出 hide() 隱藏元素 show() 顯示元素 toggle() 切換元素的可見狀態 slideDown() 向下展開 slideUp() 向上捲起 slideToggle() 依次展開或捲起某個元素
-
jquery鏈式調用
jquery對象的方法會在執行完後返回這個jquery對象，所有jquery對象的方法可以連起來寫：
$('#div1') // id爲div1的元素 .children('ul') //該元素下面的ul子元素 .slideDown('fast') //高度從零變到實際高度來顯示ul元素 .parent() //跳到ul的父元素，也就是id爲div1的元素 .siblings() //跳到div1元素平級的所有兄弟元素 .children('ul') //這些兄弟元素中的ul子元素 .slideUp('fast'); //高度實際高度變換到零來隱藏ul元素
-
jquery動畫
通過animate方法可以設置元素某屬性值上的動畫，可以設置一個或多個屬性值，動畫執行完成後會執行一個函數。
$('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); });參數可以寫成數字表達式：
$('#div1').animate({ width:'+=100', height:300 },1000,'swing',function(){ alert('done!'); });
-
尺寸相關、滾動事件
-
1、獲取和設置元素的尺寸
width()、height() 獲取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height -
2、獲取元素相對頁面的絕對位置
offset() -
3、獲取瀏覽器可視區寬度高度
$(window).width(); $(window).height(); -
4、獲取頁面文檔的寬度高度
$(document).width(); $(document).height(); -
5、獲取頁面滾動距離
$(document).scrollTop(); $(document).scrollLeft(); -
6、頁面滾動事件
$(window).scroll(function(){ ...... })
-
-
jquery屬性操作
-
1、html() 取出或設置html內容
// 取出html內容 var $htm = $('#div1').html(); // 設置html內容 $('#div1').html('<span>添加文字</span>'); -
2、prop() 取出或設置某個屬性的值
// 取出圖片的地址 var $src = $('#img1').prop('src'); // 設置圖片的地址和alt屬性 $('#img1').prop({src: "test.jpg", alt: "Test Image" });
-
-
jquery循環
對jquery選擇的對象集合分別進行操作，需要用到jquery循環操作，此時可以用對象上的each方法：
$(function(){ $('.list li').each(function(i){ $(this).html(i); }) }) ...... <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
-
jquery事件
-
事件函數列表：
blur() 元素失去焦點 focus() 元素獲得焦點 click() 鼠標單擊 mouseover() 鼠標進入（進入子元素也觸發） mouseout() 鼠標離開（離開子元素也觸發） mouseenter() 鼠標進入（進入子元素不觸發） mouseleave() 鼠標離開（離開子元素不觸發） hover() 同時爲mouseenter和mouseleave事件指定處理函數 ready() DOM加載完成 resize() 瀏覽器窗口的大小發生改變 scroll() 滾動條的位置發生變化 submit() 用戶遞交表單 -
綁定事件的其他方式
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); }); }); -
取消綁定事件
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); // $(this).unbind(); $(this).unbind('mouseover'); }); });
-
-
事件冒泡
-
什麼是事件冒泡？
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
-
事件冒泡的作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
-
阻止事件冒泡
事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止
$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); }); }) ...... <div class="father"> <div class="son"> <div class="grandson"></div> </div> </div> -
阻止默認行爲
阻止表單提交
$('#form1').submit(function(event){ event.preventDefault(); }) -
合併阻止操作
實際開發中，一般把阻止冒泡和阻止默認行爲合併起來寫，合併寫法可以用
// event.stopPropagation(); // event.preventDefault(); // 合併寫法： return false;
-
-
事件委託
事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
-
一般綁定事件的寫法
$(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> -
事件委託的寫法
$(function(){ $list = $('#list'); $list.delegate('li', 'click', function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
jquery元素節點操作
-
創建節點
var $div = $('<div>'); var $div2 = $('<div>這是一個div元素</div>'); -
插入節點
-
1、append()和appendTo()：在現存元素的內部，從後面插入元素
var $span = $('<span>這是一個span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div> -
2、prepend()和prependTo()：在現存元素的內部，從前面插入元素
-
3、after()和insertAfter()：在現存元素的外部，從後面插入元素
-
4、before()和insertBefore()：在現存元素的外部，從前面插入元素
-
刪除節點
$('#div1').remove();
-
-
-
滾輪事件與函數節流
-
jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可以使用jquery的滾輪事件插件jquery.mousewheel.js。
-
函數節流
javascript中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，可以巧妙地使用定時器來減少觸發的次數，實現函數節流。
-
-
json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是類似於javascript對象的一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。
javascript自定義對象：
var oMan = { name:'tom', age:16, talk:function(s){ alert('我會說'+s); } } -
json格式的數據：
{ "name":"tom", "age":18 }與json對象不同的是，json數據格式的屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。
json的另外一個數據格式是數組，和javascript中的數組字面量相同。
["tom",18,"programmer"]
-
ajax與jsonp
ajax技術的目的是讓javascript發送http請求，與後臺通信，獲取數據和信息。ajax技術的原理是實例化xmlhttp對象，使用此對象與後臺通信。ajax通信的過程不會影響後續javascript的執行，從而實現異步。
-
同步和異步
現實生活中，同步指的是同時做幾件事情，異步指的是做完一件事後再做另外一件事，程序中的同步和異步是把現實生活中的概念對調，也就是程序中的異步指的是現實生活中的同步，程序中的同步指的是現實生活中的異步。
-
局部刷新和無刷新
ajax可以實現局部刷新，也叫做無刷新，無刷新指的是整個頁面不刷新，只是局部刷新，ajax可以自己發送http請求，不用通過瀏覽器的地址欄，所以頁面整體不會刷新，ajax獲取到後臺數據，更新頁面顯示數據的部分，就做到了頁面局部刷新。
-
同源策略
ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：
XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. -
$.ajax使用方法
1、url 請求地址
2、type 請求方式，默認是’GET’，常用的還有’POST’
3、dataType 設置返回的數據格式，常用的是’json’格式，也可以設置爲’html’
4、data 設置發送給服務器的數據
5、success 設置請求成功後的回調函數
6、error 設置請求失敗後的回調函數
7、async 設置是否異步，默認值是’true’，表示異步 -
以前的寫法：
$.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1} success:function(data){ alert(data.name); }, error:function(){ alert('服務器超時，請重試！'); } }); -
新的寫法(推薦)：
$.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1} }) .done(function(data) { alert(data.name); }) .fail(function() { alert('服務器超時，請重試！'); }); // data.json裏面的數據： {"name":"tom","age":18} -
jsonp
ajax只能請求同一個域下的數據或資源，有時候需要跨域請求數據，就需要用到jsonp技術，jsonp可以跨域請求數據，它的原理主要是利用了
-
$.ajax({
url:'js/data.js',
type:'get',
dataType:'jsonp',
jsonpCallback:'fnBack'
})
.done(function(data){
alert(data.name);
})
.fail(function() {
alert('服務器超時，請重試！');
});
// data.js裏面的數據： fnBack({"name":"tom","age":18});
-
本地存儲
本地存儲分爲cookie，以及新增的localStorage和sessionStorage
-
1、cookie 存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬，可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設置的過期時間之前有效。
jquery 設置cookie $.cookie('mycookie','123',{expires:7,path:'/'}); jquery 獲取cookie $.cookie('mycookie'); -
2、localStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在所有同源窗口中共享，數據一直有效，除非人爲刪除，可作爲長期數據。
//設置： localStorage.setItem("dat", "456"); localStorage.dat = '456'; //獲取： localStorage.getItem("dat"); localStorage.dat //刪除 localStorage.removeItem("dat"); -
3、sessionStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。
localStorage 和 sessionStorage 合稱爲Web Storage , Web Storage支持事件通知機制，可以將數據更新的通知監聽者，Web Storage的api接口使用更方便。
iPhone的無痕瀏覽不支持Web Storage，只能用cookie。
-
end…