jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
官方網站：http://jquery.com/
中文網：http://jquery.cuishifeng.cn/
js與JQuery的不同
- 入口函數 $(匿名函數)
- 元素的獲取 $()
- 顯示隱藏 show()/hide()
- 內容操作 html()
- JQuery兩大特性 鏈式編程/隱式迭代
原生js入口函數：
window.onload = function(){
......
};
JQuery入口函數：
$(document).ready(function(){
......
});
簡寫爲：
$(function(){
......
});
$ = jQuery
上面也可寫成：
jQuery(function(){
......
})
原生js顯示盒子，並設置內容
<script>
window.onload = function(){
// 1.獲取元素
var btn = document.getElementById('btn')
var divArr = document.getElementsByTagName('div')
// 2.綁定事件
btn.onclick = function(){
// 3.遍歷數組，獲取每一個div，然後操作讓他們顯示，並設置內容
for(var i=0;i<divArr.length;i++){
// 顯示
divArr[i].style.display = 'block';
// 設置內容
divArr[i].innerHTML = '顯示顯示'
}
}
}
</script>
......
<button id="btn">顯示盒子</button>
<div></div>
<div></div>
<div></div>
JQuery實現，顯示盒子，並設置內容
<script src="js/jquery-1.11.1.js"></script>
<script>
// 2.JQuery入口函數
$(function(){
// 3.獲取元素，綁定事件
$('#btn').click(function(){
// 顯示盒子，並設置內容能: JQuery兩大特點: 隱式迭代,連式編程。
$("div").show().html('忠厚傳家久，詩書濟世長...')
// show(): 顯示標籤(style.display)。 html(): 設置內容。(innerHMTL)
})
})
</script>
......
<button id="btn">顯示盒子</button>
<div></div>
<div></div>
<div></div>
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').eq(5); //選擇下標爲5的div元素
選擇集轉移
$('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素
$('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素
$('#box').next(); //選擇id是box的元素後面緊挨的同輩元素
$('#box').nextAll(); //選擇id是box的元素後面所有的同輩元素
$('#box').siblings(); //選擇id是box的元素的同級元素
$('#box').parent(); //選擇id是box的元素的父元素
$('#box').children(); //選擇id是box的元素的所有子元素
$('#box').find('.myClass'); //選擇id是box的元素內的class等於myClass的元素
$("#box").index(); // 元素在父盒子中，所有子元素排列對應的索引值
判斷是否選擇到了元素
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>
樣式操作
操作行間樣式
// 獲取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 divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
綁定click事件
給元素綁定click事件
$('#btn1').click(function(){
// 內部的this指的是原生對象
// 使用jquery對象用 $(this)
})
自定義動畫
通過animate方法可以設置元素某屬性值上的動畫，可以設置一個或多個屬性值，動畫執行完成後會執行一個函數。
/*
animate參數：
參數一：要改變的樣式屬性值，寫成字典的形式
參數二：動畫持續的時間，單位爲毫秒，一般不寫單位
參數三：動畫曲線，默認爲‘swing’，緩衝運動，還可以設置爲‘linear’，勻速運動
參數四：動畫回調函數，動畫完成後執行的匿名函數
*/
// 第一個參數必傳
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
jquery特殊效果
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切換淡入淡出
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素
hide() 隱藏元素
show() 顯示元素
toggle() 切換元素的可見狀態
<script>
$(window).ready(function(){
// 綁定事件演示
$("button").click(function(){
// 1.show()/hide()/toggle(): 顯示隱藏
// $("div").show(1000, function(){
// alert('已完成')
// }) // 無參直接顯示。 帶參就變爲動畫。 可以寫回調函數
// 隱藏一樣
// $("div").hide(1000)
// 切換一樣
// $("div").toggle(1000)
// 2.slideDown()/slideUp()/slideToggle(): 滑入滑出(捲簾門)
// $("div").slideDown(1000,function(){
// alert('已完成')
// }) // 無參默認400毫秒, 可以寫回調函數
// 滑出
// $("div").slideUp(1000)
// 切換
// $("div").slideToggle(1000)
// 3.fadeIn()/fadeOut()/fadeToggle() / fadeTo() : 淡入淡出
// $("div").fadeIn(1000,function(){
// alert('已完成')
// }) // 無參默認400毫秒, 可以寫回調函數
// 淡出
// $("div").fadeOut()
// 切換
// $("div").fadeToggle()
// 半透明程度: 必須傳遞時間
// $("div").fadeTo(400, 0.4)
})
})
</script>
......
<button>特殊動畫</button>
<div style="width:200px; height:200px; background:red"></div>
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元素
屬性操作
attr(), prop()
對於自定義屬性：attr()可以獲取自定義屬性值，prop()獲取不到自定義屬性值返回undefined
獲取值沒有的情況下：attr()返回undefined，prop()返回false
<script>
$(function(){
// 屬性操作: 1.普通屬性 2.特殊屬性。
// 1.普通屬性: id/title/src/href/name...
// 1.1 attr(): 操作普通屬性。
// console.log($("input").attr('id')) // 獲取值
// $("input").attr('name', 'bbb') // 賦值
// 1.2 prop(); selcted/checked/disabled
// console.log($("option").eq(1).attr('selected')) // 沒有返回undefined
// $("option").eq(1).attr('selected', 'selected') // 操作不方便
console.log($("option").eq(1).prop('selected')) // false
$("option").eq(1).prop('selected', true) // 選中
$("option").eq(1).prop('selected', false) // false: 設置爲不選中
// 總結: 普通屬性用attr(), 表單屬性: prop()
// 2.特殊屬性。innerHTML/className/style/value...
// 原生js -- > jquery
// innerHTML --> html()
// className --> addClass()/removeClass()/toggleClass()
// style --> css()
// value --> val()
// 驗證!!!
// html()
// console.log($('#box').html()) //獲取值
// $('#box').html('我是div') //賦值
// var str1 = $("input").val() // 獲取值
// console.log(str1)
// $("input").val('我是input的賦值') // 賦值
})
</script>
......
<input type="text" id="aaa" name="haha" value="111">
<select name="" id="">
<option value="0">北京</option>
<option value="0">上海</option>
<option value="0">廣州</option>
<option value="0">深圳</option>
</select>
<div id="box">div</div>
jquery事件
事件函數列表：
blur() 元素失去焦點
focus() 元素獲得焦點
click() 鼠標單擊
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
mouseenter() 鼠標進入（進入子元素不觸發）
mouseleave() 鼠標離開（離開子元素不觸發）
hover() 同時爲mouseenter和mouseleave事件指定處理函數
ready() DOM加載完成
submit() 用戶遞交表單
正則表達式
正則表達式的寫法
var re=new RegExp(‘規則’, ‘可選參數’);
var re=/規則/參數;
規則中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）轉義字符匹配：
\d 匹配一個數字，即0-9
\D 匹配一個非數字，即除了0-9
\w 匹配一個單詞字符（字母、數字、下劃線）
\W 匹配任何非單詞字符。等價於[^A-Za-z0-9_]
\s 匹配一個空白符
\S 匹配一個非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
. 匹配一個任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配純數字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false
量詞：對左邊的匹配字符定義個數
? 出現零次或一次（最多出現一次）
+ 出現一次或多次（至少出現一次）
* 出現零次或多次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次
任意一個或者範圍
[abc123] : 匹配’abc123’中的任意一個字符
[a-z0-9] : 匹配a到z或者0到9中的任意一個字符
限制開頭結尾
^ 以緊挨的元素開頭
$ 以緊挨的元素結尾
修飾參數：
g： global，全文搜索，默認搜索到第一個結果接停止
i： ingore case，忽略大小寫，默認大小寫敏感
常用函數
test
用法：正則.test(字符串) 匹配成功，就返回真，否則就返回假
正則默認規則
匹配成功就結束，不會繼續匹配，區分大小寫
常用正則規則
//用戶名驗證：(數字字母或下劃線6到20位)
var reUser = /^\w{6,20}$/;
//郵箱驗證：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密碼驗證：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手機號碼驗證：
var rePhone = /^1[34578]\d{9}$/;
事件冒泡
什麼是事件冒泡
在一個對象上觸發某類事件（比如單擊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();
// return false;
})
合併阻止操作
阻止冒泡和阻止默認行爲合併起來寫，合併寫法可以用
// event.stopPropagation();
// event.preventDefault();
// 合併寫法：
return false;
事件委託
事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
$(function(){
// 問題: 新創建出來的元素，沒有老事件。
// 1.點擊按鈕，在ul中創建一個新的li標籤。
$("button").click(function(){
// 創建新標籤。
var str = '<li class="newBg">我是新創建的li標籤</li>'
$("ul").html($("ul").html() + str)
})
// // 整個頁面的li標籤綁定點擊事件,新創建出來的標籤沒有點擊事件
// $("li").click(function(){
// alert('我是li標籤')
// })
// 讓新創建出來的標籤也有事件，就是事件委託!!!
// 方法1: 事件委託。
$('ul').delegate('li','click',function(){
alert(111)
})
// 方法2： 事件委託
// $("ul").on('click', 'li', function(){
// alert(222)
// })
// 無事件委託
// $("li").on('click', function(){
// alert(222)
// })
// 無事件委託: click(); $('li').bind('click', function(){})
// 有事件委託: delegate(); on()
})
</script>
......
<button>添加li標籤</button>
<ul>
<li>我是原生土著li1</li>
<li>我是原生土著li2</li>
<li>我是原生土著li3</li>
</ul>
總結:
- 以後如果出現創建新元素，那麼綁定事件的時候最好用事件委託。
- 冒泡: a.出問題的時候學會取消/阻止冒泡。 b.知道事件委託的底層原理就是冒泡。
DOM操作
Dom操作也叫做元素節點操作，它指的是改變html的標籤結構，它有兩種情況：
1、移動現有標籤的位置
2、將新創建的標籤插入到現有的標籤中
創建新標籤
var $div = $('<div>'); //創建一個空的div
$div.html('這是一個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();
以上內容僅供參考 -_- …爲作者邊學習，邊摘抄和總計的內容