快捷導(dǎo)航

JQuery學(xué)習(xí)總結(jié)【一】

更新時間：2016年12月01日 14:46:14 作者：—阿輝

本文主要介紹了JQuery的基本知識，如：jquery內(nèi)置函數(shù)，JQuery對象，Dom對象，jquery選擇器，jquery的迭代，jquery的節(jié)點遍歷等等，有助于對JQuery基本知識的學(xué)習(xí)與鞏固。需要的朋友可以參考下

一：JQuery

1 JQuery知識

*：就是讓我們學(xué)會調(diào)用JQ插件，其實內(nèi)部就是對JS的封裝。

*：jquery里面有三個文件，

第2個和第3個其實里面的內(nèi)容是一樣的，只是第三個對其進行了壓縮，使瀏覽器對其的訪問時間變短。

我們在使用的時候?qū)query-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其實vsdoc.js是對于前面的解釋說明，它是讓我們在編寫代碼的時候可以點操作出來。

*:練習(xí)《點擊按鈕彈出對話框的內(nèi)容》《點擊網(wǎng)頁里面的文字使文字一行一行消失》(“$”這個其實是個函數(shù))

<head> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
 $(function() { 

 $("#btn").click(function () { alert($("#un").val()); });//點擊彈出內(nèi)容 

 $("div").click(function() { $(this).hide("slow"); });//文字消失 

 }); 
</script> 
</head> 
<body> 
<input type="text"id="un"/> 
<input type="button" id="btn"/> 
<div>文字內(nèi)容</div> 
</body>

2 JQuery里面的Ready 《在網(wǎng)頁剛開始就彈出內(nèi)容》

$(dounction).ready(function(){alert(“加載完畢”);})

其實還可以這樣子寫

$(function(){alert(“加載完畢”);});

<解析：”$”這個函數(shù)將匿名函數(shù)function()注冊為Ready執(zhí)行。>

3 jquery內(nèi)置函數(shù)

.map(array,fn)對數(shù)組中array中的每一個元素調(diào)用fn函數(shù)進行處理，fn函數(shù)將處理返回，最后得到一個新的數(shù)組。.map(array,fn)對數(shù)組中array中的每一個元素調(diào)用fn函數(shù)進行處理，fn函數(shù)將處理返回，最后得到一個新的數(shù)組。map不能處理Dictionary風(fēng)格的數(shù)組。要用下面的$.each來處理。

$.each(array.fn)對數(shù)組arr每個元素調(diào)用fn函數(shù)進行處理，沒有返回值。

var arr=[3,5,7]; 
Var arr2=$map.(arr,function(item){return item*2}) 函數(shù)式編程。 
Var arr={“tom”;”檀木”,”xiaozhang”;”小張”} 
$.each(arr,function(key,value){alert(key+”=”+value);});

4 JQuery對象，Dom對象

<dom就是瀏覽器的一些標(biāo)記，比如層，按鈕，標(biāo)簽等，數(shù)組是jq的對象。>

Jquery對象就是通過jquery包裝Dom對象后產(chǎn)生。而且jquery對象只能調(diào)用jquery對象封裝的方法。不能調(diào)用Dom對象的方法。

$(function(){$(“#id”).css(“background”,”red”)});

上面的代碼是復(fù)制，就是將背景色設(shè)置為紅色，若.css中的屬性為一個則為得到值，2個即為設(shè)置值。

5 jquery選擇器

*id選擇器

$(“#div”).html();

*TabName選擇器<標(biāo)簽選擇器>

$(“div”).click(function（）｛alert(“你好我是p”);｝);

這里就是將網(wǎng)頁中所有的div標(biāo)簽都選擇了，都向其添加了click事件。

* css選擇器

同時選擇多個樣式，就是給制定樣式的添加。

$(“div”).click(function(){alert(“這是信息”)});

6 多條件選擇器/層次選擇器

7 jquery的迭代

就是里面的錯誤程序不會給提示出錯，我們自己要添加if/elae語句進行判斷。

8 jquery的節(jié)點遍歷

就是運用next（）,nextall()方法來進行遍歷的。就好像在數(shù)組那里的遍歷是一樣的。這里只是得到它的下一個元素的值。

Siblings()：獲取所有元素的同輩元素(兄弟節(jié)點)。

*:jquery的鏈?zhǔn)骄幊?/p>

$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});

就是很容易的通過點操作符來操作。

//這里是鏈?zhǔn)讲僮?減少了使用if/else等操作。改變了編程風(fēng)格。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#tables td").html("<img src='images/1.jpg'/>")
 .mouseover(function () {
 $("#tables td") .html("<img src='images/1.jpg'/>");
 $(this).nextAll().html("<img src='images/2.jpg'/");
 });
 });
 </script>
</head>
<body>
 <table id="tables">
 <tr><td></td><td></td><td></td><td></td></tr>
 </table>
</body>
</html>

9 ：基本的過濾器

這里可以將其寫在一起，比如選擇器和過濾器，這樣子就會很強大。

不僅可以使用選擇器進行絕對定位，還可以進行相對定位，只要在$()指定第二個參數(shù)，第二個參數(shù)為相對的元素。

案例：

（相對定位）

：這里的元素就是在定位#tables tr 下的td的定位

10 屬性過濾器

Eg：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="js/jquery-1.4.2.js"></script>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <title></title>
 <script type="text/javascript">
 $(function() {
 $("input[value=顯示選中的內(nèi)容]").click(function() {
 alert($("input:checked").val());
 });
 });
 </script>
</head>
<body>
 <input type="checkbox" value="上海"/>上海<br/>
 <input type="checkbox" value="寶雞"/>寶雞<br/>
 <input type="checkbox" value="深圳"/>深圳<br/>
 <input type="checkbox" value="西安"/>西安<br/>
 <input type="checkbox" value="北京"/>北京<br/>
 <input type="submit" value="顯示選中的內(nèi)容"/>
</body>
</html>

11 元素的each <通過一些過濾器和選擇器來遍歷each一些元素。>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="js/jquery-1.4.2.js"></script>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <title></title>
 <script type="text/javascript">
 $(function() {
 $("input[name=names]").click(function() {
 var arr = new Array();
 $("input[name=names]:checked").each(function (key, value) {
 arr[key] = $(value).val();
 });
 $("#msgNames").text("共選中"+arr.length+"項:"+arr.join(","));
 });
 });
 </script>
</head>
<body>
 <input type="checkbox" name="names" value="張輝"/>張輝
 <input type="checkbox" name="names" value="媽媽"/>媽媽
 <input type="checkbox" name="names" value="媽媽"/>媽媽
 <input type="checkbox" name="names" value="媽媽"/>媽媽
 <p id="msgNames"></p>
</body>