快捷導(dǎo)航

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

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

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

一：JQuery

1 JQuery知識(shí)

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

*：jquery里面有三個(gè)文件，

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

我們?cè)谑褂玫臅r(shí)候?qū)query-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其實(shí)vsdoc.js是對(duì)于前面的解釋說明，它是讓我們?cè)诰帉懘a的時(shí)候可以點(diǎn)操作出來。

*:練習(xí)《點(diǎn)擊按鈕彈出對(duì)話框的內(nèi)容》《點(diǎn)擊網(wǎng)頁里面的文字使文字一行一行消失》(“$”這個(gè)其實(shí)是個(gè)函數(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()); });//點(diǎn)擊彈出內(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(“加載完畢”);})

其實(shí)還可以這樣子寫

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

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

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

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

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

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對(duì)象，Dom對(duì)象

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

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

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

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

5 jquery選擇器

*id選擇器

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

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

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

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

* css選擇器

同時(shí)選擇多個(gè)樣式，就是給制定樣式的添加。

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

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

7 jquery的迭代

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

8 jquery的節(jié)點(diǎn)遍歷

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

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

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

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

就是很容易的通過點(diǎn)操作符來操作。

//這里是鏈?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 ：基本的過濾器

這里可以將其寫在一起，比如選擇器和過濾器，這樣子就會(huì)很強(qiáng)大。

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

案例：

（相對(duì)定位）

：這里的元素就是在定位#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+"項(xiàng):"+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>