JQuery

jQuery · 發表 2018-09-17 14:28:06

摘要： jQuery Query是目前使用最廣泛的javascript函式庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。 jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列相容低版本的瀏覽...

jQuery

Query是目前使用最廣泛的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>

JQ入口函式

將獲取元素的語句寫到頁面頭部，會因為元素還沒有載入而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

......

});

</script>

可以簡寫為：

<script type="text/javascript">

$(function(){

......

});

</script>

JQ選擇器

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); //選擇第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的元素的所有子元素
$('#box').siblings(); //選擇id是box的元素的同級元素
$('#box').find('.myClass'); //選擇id是box的元素內的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>

JQ樣式操作

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");

//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"})

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")//移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

事件

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>

<body>
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
</body>
<script>
$('input').click(function() {
// this當前的事件源 點選那個選擇那個
$(this).css({
'background': 'pink'
})
// 返回當前點選的索引值
alert($(this).index())
})
</script>

</html>

排他思想

<!--<!DOCTYPE html>-->
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
span {
width: 100px;
height: 100px;
background: #ccc;
font-size: 50px;
text-align: center;
margin: 50px;
display: inline-block;
}
</style>
</head>

<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>

<script>
// 排他思想 當前變化，其餘恢復原形
$('span').click(function() {
// 自己高亮
$(this).css({
'background': 'pink'
})
// 其餘恢復原狀
$(this).siblings().css({
'background': '#ccc'
})
})
</script>

</html>

JQ動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式。

animate引數：

引數一：要改變的樣式屬性值，寫成字典的形式

引數二：動畫持續的時間，單位為毫秒，一般不寫單位

引數三：動畫曲線，預設為‘swing’，緩衝運動，還可以設定為‘linear’，勻速運動

引數四：動畫回撥函式，動畫完成後執行的匿名函式

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>

<body>
<input type="button" value="變形" />
<div></div>
</body>
<script>
$('input').click(function() {
$('div').animate({
'width': '500px',
'height': '500px'
}, 2000, 'linear',function(){
// 回撥函式，當動畫執行完之後，會呼叫這裡的程式
alert('執行完畢')
})
})
</script>

</html>

JQ特殊效果

顯示隱藏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>

<body>
<input type="button" value='隱藏' />
<input type="button" value='顯示隱藏' />
<input type="button" value='顯示隱藏切換' />
<hr />
<img src="img/tim4.jpg" />
</body>

<script>
//隱藏
$('input').eq(0).click(function() {
$('img').hide(500)
})

//顯示
$('input').eq(1).click(function() {
$('img').show(500)
})

// 顯示隱藏切換
$('input').eq(2).click(function() {
$('img').toggle(500)
})
</script>

</html>

淡入淡出切換

<script>
//淡入
$('input').eq(0).click(function() {
$('img').fadeOut(2000)
})

//淡出
$('input').eq(1).click(function() {
$('img').fadeIn(2000)
})

// 顯示隱藏切換
$('input').eq(2).click(function() {
$('img').fadeToggle(2000)
})
</script>

捲起動畫

需要設定寬高

<script>
//向上捲起
$('input').eq(0).click(function() {
$('img').slideUp(2000)
})

//向下拉伸
$('input').eq(1).click(function() {
$('img').slideDown(2000)
})

// 切換
$('input').eq(2).click(function() {
//stop():停止排隊機制
$('img').stop().slideToggle(2000)
})
</script>

JQ屬性設定

1、html() 取出或設定html內容

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>

<body>
<h1>文字</h1>
</body>
<script>
// 獲取HTML內容
alert($('h1').html())
// 設定html內容
$('h1').html('我是JQ生成的')
</script>

</html>

2、prop() 取出或設定某個屬性的值

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>

<body>
<!-- title='' 提示資訊-->
<a href="#" title="百度很好">百度</a>
<input type="text" value="文字" />
</body>
<script>
// 設定屬性
$('a').prop({
'href': 'http://www.baidu.com',
'title': '谷歌表示不服'
})
// 獲取屬性
alert($('a').prop('href'))
// 獲取value的值
alert($('input').val())
</script>

</html>

焦點事件

獲取、失去焦點事件

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
input {
/*去掉輪廓線*/
outline: none;
}
</style>
</head>

<body>
<input type="text" />
</body>
<script>

// 自動觸發焦點事件
$('input').focus()

// 獲得焦點事件
$('input').focus(function() {
// 當點選文字框後，文字框形狀改變
$(this).css({
'border': '4px solid pink'
})
})
//失去焦點事件
$('input').blur(function() {
// 當點選文字框以外的地方後，文字框形狀改變
$(this).css({
'border': '1px solid #ccc'
})
})
</script>

</html>

移入、移出事件

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>

<body>
<input type="button" value="按鈕" />
</body>

<script>
// 移入
$('input').mouseenter(function() {
alert('移入')
})

// 移出
$('input').mouseleave(function() {
alert('移出')
})

// 移入移出簡寫 
$('input').hover(function() {
alert('移入')
}, function() {
alert('移出')
})
</script>

</html>

總結

blur() 元素失去焦點

focus() 元素獲得焦點

click() 滑鼠單擊

mouseover() 滑鼠進入（進入子元素也觸發）

mouseout() 滑鼠離開（離開子元素也觸發）

mouseenter() 滑鼠進入（進入子元素不觸發）

mouseleave() 滑鼠離開（離開子元素不觸發）

hover() 同時為mouseenter和mouseleave事件指定處理函式

ready() DOM載入完成

submit() 使用者遞交表單

正則

1、什麼是正則表示式：

能讓計算機讀懂的字串匹配規則。

2、正則表示式的寫法：

var re=new RegExp('規則', '可選引數');

var re=/規則/引數;

3、規則中的字元

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

4、量詞：對左邊的匹配字元定義個數

? 出現零次或一次（最多出現一次）

出現一次或多次（至少出現一次）

出現零次或多次（任意次）

{n} 出現n次

{n,m} 出現n到m次

{n,} 至少出現n次

5、任意一個或者範圍

[abc123] : 匹配‘abc123’中的任意一個字元

[a-z0-9] : 匹配a到z或者0到9中的任意一個字元

6、限制開頭結尾

^ 以緊挨的元素開頭

$ 以緊挨的元素結尾

7、修飾引數：

g： global，全文搜尋，預設搜尋到第一個結果接停止

i： ingore case，忽略大小寫，預設大小寫敏感

8、常用函式

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() 來阻止

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
.grandfather {
width: 400px;
height: 400px;
background: pink;
}

.father {
width: 300px;
height: 300px;
background: green;
}

.son {
width: 150px;
height: 150px;
background: purple;
position: absolute;
top: 420px;
left: 0px;
}
</style>
</head>

<body>
<div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
</div>
</body>

<script>
// 事件冒泡 當子集和長輩都寫了觸發事件，點選子集後，長輩也會觸發
$('.grandfather').click(function() {
alert('grandfather')
})
$('.father').click(function() {
alert('father')
// 阻止表單提交阻止事件冒泡
return false
})
$('.son').click(function() {
alert('son')
return false
})
</script>

</html>

Dom操作

Dom操作也叫做元素節點操作，它指的是改變html的標籤結構，它有兩種情況：

1、移動現有標籤的位置

2、將新建立的標籤插入到現有的標籤中

1、建立新標籤

var $div = $('<div>'); //建立一個空的div
var $div2 = $('<div>這是一個div元素</div>');

2、移動或者插入標籤的方法

1)、append()和appendTo()：在現存元素的內部，從後面放入元素

<body>
<ul>
<li>預設的0</li>
<li>預設的1</li>
<li>預設的2</li>
<li>預設的3</li>
</ul>
</body>
<script>
// 建立一個節點（建立一個標籤）
var oLi = '<li>JQ生成的</li>'
//$('ul').html($('ul').html()+oLi)
//在元素內部最後追加資料
$('ul').append(oLi)
</script>

2)、prepend()和prependTo()：在現存元素的內部，從前面放入元素

3)、after()和insertAfter()：在現存元素的外部，從後面放入元素

4)、before()和insertBefore()：在現存元素的外部，從前面放入元素

3、刪除標籤

$('#div1').remove();

事件委託委託

事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作。

一般繫結事件的寫法

$(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(){
// 事件委託寫法
// $(點選元素的父集).delegate('需要點選的元素','執行的事件',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資料互動

JavaScript物件

javascript中的物件，可以理解成是一個鍵值對的集合，鍵是呼叫每個值的名稱，值可以是基本變數，還可以是函式和物件。

建立javascript物件有兩種方法：

一種是通過頂級Object類來例項化一個物件，然後在物件上面新增屬性和方法：

var person = new Object();

// 新增屬性：
person.name = 'tom';
person.age = '25';

// 新增方法：
person.sayName = function(){
alert(this.name);
}

// 呼叫屬性和方法：
alert(person.age);
person.sayName();

一種是通過物件直接量的方式建立物件：

var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}

// 呼叫屬性和方法：
alert(person2.age);
person2.sayName();

json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript物件表示法，這裡說的json指的是類似於javascript物件的一種資料格式物件，目前這種資料格式比較流行，逐漸替換掉了傳統的xml資料格式。

json資料物件類似於JavaScript中的物件，但是它的鍵對應的值裡面是沒有函式方法的，值可以是普通變數，不支援undefined，值還可以是陣列或者json物件。

與JavaScript物件寫法不同的是，json物件的屬性名稱和字串值需要用雙引號引起來 ，用單引號或者不用引號會導致讀取資料錯誤。

json格式的資料：

{
"name":"tom",
"age":18
}

json的另外一個數據格式是陣列，和javascript中的陣列字面量相同:

["tom",18,"programmer"]

還可以是更復雜的資料機構：

{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":'North Andover, MA'
}
}

ajax

ajax一個前後臺配合的技術，它可以讓javascript傳送http請求，與後臺通訊，獲取資料和資訊。ajax技術的原理是例項化xmlhttp物件，使用此物件與後臺通訊。jquery將它封裝成了一個函式$.ajax()，我們可以直接用這個函式來執行ajax請求。

ajax需要在伺服器環境下執行。

$.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',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('伺服器超時，請重試！');
}
});

推薦寫法：

$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('伺服器超時，請重試！');
});

簡寫：

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});

$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});