猿學~JQuery從0到大技術牛人學習之路！

一、JQuery簡介

 

1.1簡介

 

jQuery是繼prototype之後又一個優秀的JavaScript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需要定義id即可。

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。

 

1.2優點

- （1）寫少代碼,做多事情【write less do more】
-    （2）免費，開源且輕量級的js庫，容量很小
-         注意：項目中，提倡引用min版的js庫
-    （3）兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome
-         注意：jQuery不是將所有JS全部封裝，只是有選擇的封裝
-    （4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
-    （5）文檔手冊很全，很詳細
-    （6）成熟的插件可供選擇
-    （7）提倡對主要的html標籤提供一個id屬性，但不是必須的
-    （8）出錯後，有一定的提示信息
-    （9）不用再在html裏面通過<script>標籤插入一大堆js來調用命令了

 

 

 

二、JQuery的九類選擇器

 

 

 

使用jquery，首先我們需要去把jquery的包導入，這個jquery的官網上面是可以下載的，地址：https://jquery.com/，目前最新版本是3.0，一般會有兩種版本的，一個是完全的，一個是迷你版本的，兩個版本就是大小不一樣，裏面的實質性東西其實是一樣的，而這個迷你版的適合項目正式上線使用，因爲佔的體積小啊，一般學習或者練習的話就可以嘗試使用完全版的。下面以幾個案例來實際說明jquery的使用，完整的代碼會在文末提供下載鏈接，歡迎下載學習。選擇器的部分在下載的文件中的/JQuery\WebRoot\selector目錄下。

2.1 基本選擇器

 

[javascript] view plain copy  print?

1. //1)查找ID爲"div1ID"的元素個數  
2.     alert(  $("#div1ID").size());  
3.       
4.       
5.     //2)查找DIV元素的個數  
6.      alert( $("div").length);  
7.       
8.       
9.     //3)查找所有樣式是"myClass"的元素的個數  
10.     alert($(".myClass").size());  
11.       
12.   
13.     //4)查找所有DIV,SPAN,P元素的個數  
14.     alert($("div,span,p").size());  
15.       
16.   
17.     //5)查找所有ID爲div1ID,CLASS爲myClass,P元素的個數  
18.     alert($("#div1ID,.myClass,p").size());  

 

 

 

 

 

 

2.2 層次選擇器

 

[javascript] view plain copy  print?

1. //1)找到表單form裏所有的input元素的個數  
2.     alert($("form input").size());  
3.       
4.     //2)找到表單form下所有的子級input元素個數  
5.     alert($(" form > input").size());  
6.       
7.       
8.     //3)找到表單form同級第一個input元素的value屬性值  
9.     alert($("form + input").val());  
10.       
11.       
12.     //4)找到所有與表單form同級的input元素個數  
13.     alert($("form ~ input").size());  
14.       

 

 

2.3 增強基本選擇器

 

 

[javascript] view plain copy  print?

1. //1)查找UL中第一個元素li的內容  
2.     alert($("ul li:first").html());    
3.     alert($("ul li:first").text());   
4.     //html()要用在html/jsp中，不能用在xml中，而text()都可以用  
5.       
6.       
7.     //2)查找UL中最後一個元素的內容  
8.     alert($("ul li:last").text());   
9.       
10.       
11.     //3)查找所有未選中的input元素個數  
12.     alert($(":checkbox:checked").size());  //選中的    2  
13.     alert($(":checkbox:not(:checked)").size());  //未選中  
14.       
15.       
16.     //4)查找表格的1、3、5...奇數行個數  
17.     alert($("table tr:odd").size());  //3  
18.       
19.       
20.     //5)查找表格的2、4、6...偶數行個數  
21.     alert($("table tr:even").size());  //3  
22.       
23.       
24.     //6)查找表格中第二行的內容，從索引號0開始  
25.     alert($("table tr:eq(1)").text());  
26.     //html()強調的是標籤中的內容，即便標籤中有子標籤，也會顯示出來，而text()強調的是標籤中的文本內容，不會顯示子標籤  
27.       
28.       
29.     //7)查找表格中第二第三行的個數，即索引值是1和2，也就是比0大  
30.     alert($("table tr:gt(0)").size());  //5  
31.       
32.       
33.     //8)查找表格中第一第二行的個數，即索引值是0和1，也就是比2小  
34.     alert($("table tr:lt(3)").size());   
35.       
36.       
37.     //9)給頁面內所有標題<h1><h2><h3>加上紅色背景色  
38.     alert($(":header").css("background-color","red").css("color","white"));  

2.4 內容選擇器

 

[javascript] view plain copy  print?

1. //1)查找所有包含文本"John"的div元素的個數  
2.     alert($("div:contains('John')").size());  //2  
3.       
4.       
5.     //2)查找所有p元素爲空的元素個數  
6.     alert($("p:empty").size());  //2  
7.       
8.       
9.     //3)給所有包含p元素的div元素添加一個myClass樣式  
10.     $("div:has(p)").addClass("myClass");  
11.       
12.       
13.     //4)查找所有含有子元素或者文本的p元素個數,即p爲父元素  
14.     alert($("p:parent").size());  //2  

 

 

2.5 可見性選擇器

[javascript] view plain copy  print?

1. //1)查找隱藏的tr元素的個數  
2.         alert($("table tr:hidden").size());  //1  
3.           
4.           
5.         //2)查找所有可見的tr元素的個數  
6.         alert($("table tr:not(:hidden)").size());  
7.         alert($("table tr:visible").size());  //2  

2.6 屬性選擇器

[java] view plain copy  print?

1. //1)查找所有含有id屬性的div元素個數  
2.         alert($("div[id]").size());  //1  
3.           
4.           
5.         //2)查找所有name屬性是newsletter的input元素，並將其選中  
6.          $("input[name='newsletter']").attr("checked","checked");  
7.         
8.         //3)查找所有name屬性不是newsletter的input元素，並將其選中  
9.         $("input[name!='newsletter']").attr("checked","true"); //1  
10.           
11.           
12.         //4)查找所有name屬性以'news'開始的input元素，並將其選中  
13.         $("input[name^='news']").attr("checked","true");  //3  
14.           
15.           
16.         //5)查找所有name屬性以'letter'結尾的input元素，並將其選中  
17.         $("input[name$='letter']").attr("checked","true");   //2  
18.           
19.           
20.         //6)查找所有name屬性包含'news'的input元素，並將其選中  
21.          $("input[name*='news']").attr("checked","true");   //3  
22.           
23.           
24.         //7)找到所有含有id屬性，並且它的name屬性是以"letter"結尾的input元素，並將其選中  
25.         $("input[id][name$='letter']").attr("checked","true");   

2.7 子元素選擇器

 

 

[javascript] view plain copy  print?

1. //1)迭代[each]每個ul中第1個li元素中的內容,索引從1開始  
2.         $("ul li:first-child").each(function(){  
3.             alert($(this).text());  
4.         });  
5.           
6.           
7.         //2)迭代每個ul中最後1個li元素中的內容,索引從1開始  
8.         $("ul li:last-child").each(function(){  
9.             alert($(this).text());  
10.         });  
11.           
12.           
13.         //3)在ul中查找是唯一子元素的li元素的內容  
14.         $("ul li:only-child").each(function(){  
15.             alert($(this).text());  
16.         });  
17.           
18.           
19.         //4)迭代每個ul中第2個li元素中的內容,索引從1開始  
20.         $("ul li:nth-child(2)").each(function(){  
21.             alert($(this).text());  
22.         });  

 

2.8 表單選擇器

 

[javascript] view plain copy  print?

1. //1)查找所有input元素的個數  
2.         alert($("input").size());  //10  
3.         alert($(":input").size());  //13  
4.           
5.         //2)查找所有文本框的個數  
6.         alert($(":text").size());  //1  
7.           
8.         //3)查找所有密碼框的個數  
9.         alert($(":password").size());  //1  
10.           
11.         //4)查找所有單選按鈕的個數  
12.         alert($(":radio").size());  
13.           
14.         //5)查找所有複選框的個數  
15.         alert($(":checkbox").size());  
16.           
17.         //6)查找所有提交按鈕的個數  
18.         alert($(":submit").size());  
19.           
20.           
21.         //7)匹配所有圖像域的個數  
22.         alert($(":images").size());  
23.           
24.           
25.         //8)查找所有重置按鈕的個數  
26.         alert($(":reset").size());  
27.           
28.         //9)查找所有普通按鈕的個數  
29.         alert($(":button").size());  
30.           
31.         //10)查找所有文件域的個數  
32.         alert($(":file").size());  //1  
33.           
34.           
35.         //11)查找所有input元素爲隱藏域的個數  
36.         alert($(":input:hidden").size());  //1  

 

 

2.9 表單對象屬性選擇器

[javascript] view plain copy  print?

1. //1)查找所有可用的input元素的個數  
2.         alert($("input:enabled").size());  
3.           
4.         //2)查找所有不可用的input元素的個數  
5.         alert($("input:disabled").size());  
6.           
7.         //3)查找所有選中的複選框元素的個數  
8.         alert($(":checkbox:checked").size());  
9.           
10.         //4)查找所有未選中的複選框元素的個數  
11.             alert($(":checkbox:not(:checked)").size());  
12.           
13.         //5)查找所有選中的選項元素的個數  
14.         alert($("select option:selected").size());  
15.         alert($("#provinceID  option:not(:selected)").size());  

三、JQuery的方法API的使用

 

jquery的方法非常多，其實都挺簡單的，使用jquery大大降低了開發難度。該部分內容在下載的文件中的\JQuery\WebRoot\method目錄中。

 

 

 each()：是jQuery中專用於迭代數組的方法，參數爲一個處理函數，this表示當前需要迭代的js對象

 append()：追加到父元素之後

prepend()：追加到父元素之前

after()：追加到兄弟元素之後

 before()：追加到兄弟元素之前

attr(name)：獲取屬性值

 attr(name,value)：給符合條件的標籤添加key-value屬性對

$("<div id='xxID'>HTML代碼</div>")：創建元素，屬性，文本   

 remove()：刪除自已及其後代節點 

val()：獲取value屬性的值

 val("")：設置value屬性值爲""空串，相當於清空

text()：獲取HTML或XML標籤之間的值

 text("")：設置HTML或XML標籤之間的值爲""空串

clone()：只複製樣式，不復制行爲

clone(true)：既複製樣式，又複製行爲

replaceWith()：替代原來的節點

removeAttr()：刪除已存在的屬性

addClass()：增加已存在的樣式

 removeClass()：刪除已存在的樣式

 hasClass()：判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式

toggleClass()：如果標籤有樣式就刪除，否則增加樣式

offset()：獲取對象的left和top座標

offset({top:100,left:200})：將對象直接定位到指定的left和top座標

width()：獲取對象的寬

width(300)：設置對象的寬

height()：獲取對象的高

height(500)：設置對象的高

children()：只查詢子節點，不含後代節點

 next()：下一下兄弟節點

prev()：上一下兄弟節點

siblings()：上下兄弟節點

show()：顯示對象

 hide()：隱藏對象

fadeIn()：淡入顯示對象

 fadeOut()：淡出隱藏對象

slideUp()：向上滑動

slideDown()：向下滑動

slideToggle()：上下切換滑動，速度快點

下面來看一些實例：

1、關於循環：

 

[javascript] view plain copy  print?

1. //用JSON語法創建一個一維數組，存入object類型的編號和姓名，再迭代  
2.         var nameArray=[  
3.             {id:1,name:"張三 "},  
4.             {id:2,name:"王明" },  
5.             {id:3,name:"李水" }  
6.           
7.         ];  
8.         var _nameArray=$(nameArray);  
9.           
10.         _nameArray.each(function(){  
11.             //this代表object類型  
12.             alert(this.id+":"+this.name);  
13.           
14.         });  

2、子元素插入到父元素內

 

 

[javascript] view plain copy  print?

1. //DIV標籤插入到UL標籤之後(父子關係)  
2.         $("ul").append($("div"));  
3.           
4.           
5.         //DIV標籤插入到UL標籤之前(父子關係)  
6.           
7.         $("ul").prepend($("div"));  

3、子元素插入到父元素外

 

 

[javascript] view plain copy  print?

1. //DIV標籤插入到UL標籤之後(兄弟關係)  
2.         $("ul").after($("div"));  
3.           
4.           
5.         //DIV標籤插入到UL標籤之前(兄弟關係)  
6.           
7.         $("ul").before($("div"));  

4、獲取屬性

 

 

[javascript] view plain copy  print?

1. //取得form裏第一個input元素的type屬性  
2.     alert($("form input:first").attr("type"));  //text  
3.       
4.     //設置form下最後一個input元素的爲只讀文本框  
5.     $("form input:last").attr("readonly","readonly");   
6.       
7.     $(":password").attr("readonly","readonly");   
8.       
9.     //獲取密碼框的值  
10.     alert($(":password").val());   

5、創建元素

 

 

[javascript] view plain copy  print?

1. //創建div元素，添加"哈哈"文本，ID屬性，並添加到文檔中  
2.           
3.         //js方式  
4.          var divElement=document.createElement("div");  
5.         divElement.innerHTML="哈哈";  
6.         divElement.setAttribute("id","2016");  
7.         //document.getElementsByTagName("body")[0].appendChild(divElement);  
8.         document.body.appendChile(divElement);  
9.            
10.           
11.         //jquery方式  
12.         var _div=$("<div id='2016'>哈哈</div>");  
13.     //  $("body").append(_div);  
14.           
15.         $(document.body).append(_div);  

6、刪除元素

 

 

[javascript] view plain copy  print?

1. //刪除ID爲secondID的LI元素  
2.         $("#secondID").remove();  
3.           
4.         //刪除所有LI元素  
5.         $("ul li").remove();  
6.           
7.         //刪除UL元素  
8.         $("ul").remove();  
9.         //$(""#b").remove();  

7、獲取文本內容

 

 

[javascript] view plain copy  print?

1. //取得<div>中的內容  
2.         alert($("div").text());  
3.           
4.         //取得<option>的值和描述  
5.         var _option=$("#city option");  
6.         var value=_option.val();  
7.         var text=_option.text();  
8.         alert(value+":"+text);  

8、複製元素

 

 

[javascript] view plain copy  print?

1. //複製原input元素，添加到原input元素後，與其同級  
2.         var _old=$(":button");  
3.         var _new=_old.clone();  //在內存中  
4.         _new.val("新按鈕");  //無參代表取值，有參代表賦值  
5.         _old.after(_new);  
6.           
7.         //爲原input元素動態添加單擊事件，且複製原input元素，  
8.         var _old=$(":button");  
9.         _old.click(function(){  
10.             alert("動態事件");  
11.           
12.         });  
13.           
14.         //添加到原input元素後，與其同級，且和原按鈕有一樣的行爲  
15.         var _new=_old.clone();  
16.         _new.val("新按鈕");  
17.         _old.after(_new);  

9、替換元素

 

 

[javascript] view plain copy  print?

1. //雙擊<div>中的文本，用文本框替換文本  
2.         $("div").dblclick(function(){  
3.             var _text=$("<input type='text'  style='width:165px;height:23px'  />");  
4.             //文本框替代文本框標籤  
5.             $(this).replaceWith(_text);  
6.               
7.         });  

10、刪除屬性

 

 

[javascript] view plain copy  print?

1. //爲<table>元素添加屬性border/align/width  
2.         $("table").attr("border","2").attr("align","center").attr("width","40%");  
3.           
4.           
5.         //將<table>元素的align屬性刪除  
6.         $("table").removeAttr("align");  

11、添加樣式

 

 

[javascript] view plain copy  print?

1. //爲無樣式的DIV添加樣式  
2.         $("div:first").addClass("myClass");  
3.           
4.         //爲有樣式的DIV刪除樣式  
5.         $("div:last").removeClass("myClass");  
6.           
7.         //切換樣式，即有樣式的變成無樣式，無樣式的變成有樣式  
8.         $("div").toggleClass("myClass");  
9.           
10.         //最後一個DIV是否有樣式  
11.         var flag=$("div:last").hasClass("myClass");  
12.         alert(flag?"有":"無");  

12、獲取座標，座標設置

 

 

[java] view plain copy  print?

1. //獲取圖片的座標  
2.         var offset=$("img").offset();  
3.         var x=offset.top;  
4.         var y=offset.left;  
5.         alert(x+":"+y);  
6.           
7.           
8.         //設置圖片的座標  
9.         $("img").offset({  
10.             top:200,  
11.             left:200  
12.           
13.         });  
14.           
15.           
16.         //獲取圖片的寬高  
17.         var w=$("img").width();  
18.         var h=$("img").height();  
19.         alert(w+":"+h);  
20.           
21.           
22.         //設置圖片的寬高  
23.         var w=$("img").width(500);  
24.         var h=$("img").height(500);  

13、獲取父元素的子元素

 

[javascript] view plain copy  print?

1. //取得div元素的直接子元素內容，不含後代元素  
2.         var _span=$("div").children();  
3.         var content=_span.html();  
4.         alert(content);  
5.           
6.         //取得div元素的下一個同級的兄弟元素內容    
7.         var _p=$("div").next();     
8.         alert(_p.text());  
9.           
10.         //取得div元素的上一個同級的兄弟元素內容  
11.         var _p=$("div").prev();     
12.         alert(_p.text());  
13.           
14.           
15.         //依次取得div元素的上下一個同級的所有兄弟元素的內容  
16.         var _all=$("div").siblings();  
17.         _all.each(function(){  
18.             alert($(this).text());  
19.           
20.         });  
21.           
22.         //只找p  
23.             var _all=$("div").siblings("p");  
24.         _all.each(function(){  
25.             alert($(this).text());  
26.           
27.         });  

14、動畫漸變（顯示，隱藏）

 

 

[java] view plain copy  print?

1. //圖片隱蔽  
2.         //$("img").hide(5000);  //5秒之後隱藏  
3.           
4.         //隱藏的動畫結束後調用一個函數  
5.         $("img").hide(5000,function(){  
6.             alert("完成");  
7.         });  
8.           
9.         //暫停3秒後繼續隱藏  
10.         window.setTimeout(function(){  
11.               
12.             $("img").show(5000);  
13.           
14.         },3000);  
15.           
16.           
17.         //圖片顯示  
18.         $("img").show(5000);  

15、圖片的淡入淡出

 

 

[javascript] view plain copy  print?

1. //淡入顯示圖片  
2.         $("img").fadeIn(5000);  
3.           
4.         //淡出隱蔽圖片  
5.         $("img").fadeOut(5000);  

16、標籤的滑動

 

 

[javascript] view plain copy  print?

1. //向上下滑動  
2.         $(":button").click(function(){  
3.             //div標籤上下移動  
4.             $("div").slideToggle(1000);  
5.           
6.         });  

四、JQuery的事件API

 

1、頁面加載

[javascript] view plain copy  print?

1. //定義a()和b()二個方法  
2.         function a(){  
3.             alert("JS方式");  
4.         }  
5.         function b(){  
6.             alert("JQUERY方式");  
7.         }  
8.         //使用JS方式加載a()和b()二個方法  
9.         window.οnlοad=function(){  
10.             a();  
11.             b();  
12.         };   
13.       
14.         //使用jQuery方式加載a()和b()二個方法  
15.         $(document).ready(function(){  
16.             a();  
17.             b();  
18.         });  
19.           
20.           
21.         //使用jQuery最簡方式加載a()和b()二個方法  
22.         $(function(){  
23.             a();  
24.             b();  
25.           
26.         });  
27.         //js方式的onload與jquery方式的ready對比，ready更快。  

2、觸發改變事件

 

[javascript] view plain copy  print?

1. //當<select>標籤觸發onchange事件,顯示選中<option>的value和innerHTML屬性的值  
2.         $("#city").change(function(){  
3.             var $option=$("#city option:selected");  
4.             var value=$option.val();  
5.             var text=$option.text();  
6.             alert(value+":"+text);  
7.         });  
8.           

3、獲得焦點

 

[javascript] view plain copy  print?

1. //加載頁面時獲取光標並選中所有文字  
2.     $(function(){  
3.         //光標定位文本框  
4.         $(":text").focus();  
5.         //選中文本框所有文本  
6.         $(":text").select();  
7.       
8.     });  

4、按鍵事件

 

[javascript] view plain copy  print?

1. //當按鍵彈起時，顯示所按鍵的code碼  
2.     $(function(){  
3.         $(document).keyup(function(){  
4.             //獲取按鍵的unicode編碼  
5.             var code=event.keyCode;  
6.             alert(code);  
7.         });  
8.     });  

5、獲得鼠標的移動事件

 

[javascript] view plain copy  print?

1. //顯示鼠標移動時的X和Y座標  
2.       
3.     $(function(){  
4.         $(document).mousemove(function(){  
5.             var x=event.clientX;  
6.             var y=event.clientY;  
7.             $("#xID").val(x);  
8.             $("#yID").val(y);  
9.               
10.         });  
11.     });  

6、mouseover和mouseout事件

 

 

[javascript] view plain copy  print?

1. //鼠標移到某行上，某行背景變色  
2.         $("table tr").mouseover(function(){  
3.             $(this).css("background-color","pink");  
4.         });  
5.           
6.         //鼠標移出某行，某行還原  
7.         $("table tr").mouseout(function(){  
8.             $(this).css("background-color","white");  
9.         });  
10.           
11.         //鼠標移到某圖片上，爲圖片加邊框  
12.         $("img").mouseover(function(){  
13.             $(this).css("border-color","red");  
14.           
15.         });  
16.           
17.         //鼠標移出圖片，圖片還原  
18.         $("img").mouseout(function(){  
19.             $(this).css("border-color","white");  
20.           
21.         });  

7、submit事件

 

 

[javascript] view plain copy  print?

1. <form action="06_mouseover_mouseout.html" method="post">  
2.     用戶名：<input type="text"/>  
3.     <input type="submit" value="表單提交"/>  
4. </form>  
5.   
6. <script type="text/javascript">  
7.     //當表單提交前檢測  
8.     $(function(){  
9.         //將光標定位於文本框中  
10.         $(":text").focus();  
11.   
12.      });  
13.       
14.     $("form").submit(function(){  
15.         var flag=false;  
16.         //獲取文本框中的內容  
17.         var name=$(":text").val();  
18.         //去掉兩邊空格  
19.         name=$.trim(name);  
20.           
21.         if(name.length==0){  
22.             alert("用戶名不能爲空");  
23.             $(":text").focus();  
24.             $(":text").val("");       
25.               
26.         }else{  
27.               
28.             flag=isChinese(name);  
29.             //不是中文  
30.             if(!flag){  
31.                 alert("用戶名必須是中文");  
32.             }else{  
33.                   
34.             }  
35.         }  
36.         return flag;  
37.     });  
38.       
39.     //檢查是否爲中文  
40.     function isChinese(str){  
41.         if(/^[\u4e00-\u9fa5]+$/.test(str)){  
42.             return true;  
43.         }else{  
44.             return false;  
45.         }  
46.     }  
47.       
48. </script>  
49.  
50. 關注QQ公衆號【黑客聯盟】學習更多黑客技術!