一、什么是jQuery？
jQuery是一款比較優秀的js框架。是將js中比較常用的方法封裝底層。口號是"write less，do more"。
二、如何使用jQuery呢？（使用jQuery的整體思路）
1、頁面加載完之后
2、找到對象
3、執行你要的事件
4、聲明一個事件（function（））
5、完成事件里面的內容
三、第一個jQuery程序
注意小點：1、引入jQuery文件的時候，把jQuery的文件放js文件之前（頁面由上而下執行）。
2、$的作用 一個是頁面加載 還有一個是找jQuery對象
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>第一個jQuery小程序</title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/demo.js"></script> 8 </head> 9 <body> 10 <input type="button" value="第一個jQuery小程序" id="btn"/> 11 </body> 12 </html>
jquery代碼如下：
1 /// <reference path="_references.js" /> 2 $(function () { //頁面加載 3 $("#btn").click( //找到jq對象 執行事件 4 function () { //聲明事件 5 alert("第一個jQuery");//執行事件里面的內容 6 } 7 ); 8 });
js方法實現點擊時間（dom對象）
/// <reference path="_references.js" /> $(function () { //頁面加載 //$("#btn").click( // function () { // alert("第一個jQuery"); // } // ); document.getElementById("btn").onclick = function () { alert("使用dom對象實現點擊效果"); } });
小結：jQuery對象只能用jQuery方法。dom對象只能用js方法。兩者不可混淆。
jQuery對象和dom對象互轉
/// <reference path="_references.js" /> $(function () { //頁面加載 // jq對象轉dom對象 $("#btn")[0].onclick = function () { alert("jq對象轉dom對象需要加【0】"); } });
/// <reference path="_references.js" /> $(function () { //頁面加載 // dom對象轉jQuery對象 $(document.getElementById("btn")).click( function () { alert("dom對象轉jQuery對象"); } ); });
四、在VS中新建jq項目：
新建web窗體時選擇第二個：
將系統生成的多余文件夾刪掉，僅留下Scripts和Web.config：
將Scripts文件夾改名為我們熟悉的js（也可以不改，僅推薦改），並新建文件夾css和image，並在對應位置添加頁面，html、css、js
將上圖鼠標所指的.min.js文件拖動到html中，將自己新建的js文件拖動到它下方，如圖：
*兩者上下位置關系千萬別弄飯了，min.js一定要在最上面。
將Script文件夾中的第一個js文件（_references.js），拖動到自己新建的js文件里的最上面，如圖：
*此步驟作用：讓jq顯示智能提示，方便寫代碼。
完成以上步驟，即可開始正常程序編寫。
五、jq選擇器寫法（與js寫法的區別）：
【例】對按鈕聲明一個事件，點擊后彈出“aaaa”：
js寫法：
html中： <input type=”button” value=”我是一個按鈕” onclick=”A()” /> //出現一個點擊事件A() js中： function A() //聲明事件A()的作用 { alert(“aaaa”); //彈出框，顯示aaaa }
jq寫法：
html中： <input type=”button” value=”我是一個按鈕” id=”btn” /> //設置一個id選擇器，名字為btn js中： $(function(){ //對頁面進行加載，加載完后執行jq（要用jq就需要先寫這句話，這是固定語句，內部寫的才是jq內容） $(“#btn”).click(function(){ //查找到id選擇器btn，對它執行一個點擊click事件，事件用function聲明一下，內容為： Alert(“aaaa”); ///彈出框，顯示aaaa }); });
*相當於js是將整個事情分散到html和js中來寫，只能用這么一次；jq是類似css那樣設置一個選擇器，然后對選擇器進行事件設置，可以用很多次。
總結：
（1）Js和jq可以互相轉換。
（2）jq執行過程分為下面5個步驟：
2.1、 對頁面進行加載：$(function(){ });
2.2、 找到對象，如id標簽：$(“#btn”)
2.3、 執行對象相應事件：click();
2.4、 聲明事件：function(){ }
2.5、 執行事件內容：alert（）;
（3）優先級問題：當css和jq中同時設置了樣式時，遵循就近原則，此時的jq寫法，類似於在html標簽內加一個style樣式來寫，所以優先jq。
六、id選擇器：$(“#btn”)
類似css那樣，先在html中聲明一個id選擇器：id=”btn”，然后在js頁面中查找到此id選擇器：$(“#btn”)，再對它進行事件操作。
七、class類選擇器：$(“.btn”)
先在html中聲明一個class選擇器：class=”btn”，然后在js頁面中查找到此id選擇器：$(“.btn”)，再對它進行事件操作。
八、標簽選擇器：$(“tr”)
根據html中已寫出的標簽，如tr、td等，在js頁面中查找到此標簽選擇器：$(“tr”)，對它進行事件操作。
九、奇偶選擇器：odd（偶）、even（奇）
$(“tr:odd”)， 選擇所有位於偶數行的< tr >標記
$(“tr:even”) ，選擇所有位於奇數行的< tr >標記
【例】隔行換色表格：
$(function(){ $(“tr:odd”).css(“background”,”#f8f3d2”); //偶數行的背景顏色為#f8f3d2 $(“tr:even”).css(“background”,”#ffcdcd”); //奇數行的背景顏色為#ffcdcd });
十、eq(n)選擇器：$("X:eq(n)")
對X標簽的第n+1個X標簽進行選擇，也可以寫作$(“X”).eq(n)。
如：$(“tr”).eq(2)，是指第三行。
十一、nth-child(n)選擇器：$(“X:nth-child(n)”)
對X標簽的第n個X標簽進行選擇。
如：$(“td:nth-child(3)”) ，是指第3列； $(“li:nth-child(4)”)，就是第4個li標簽。
【補充】eq(n)與nth-child(n)區別：
eq(n)：對全部X標簽不分父級子級依次排序下來的第n+1個X標簽進行選擇，整體頁面只選中一個X標簽。
nth-child(n)：對全部X標簽會分父級、子級、孫級，每個級別依次排列出第n個標簽，將它們全部挑選出來，可選中多個標簽。
十二、子元素選擇器：$(“li>a”)
$(“li>a”)，返回<li>標記的所有子元素<a>,但不包括孫標記。
【例】查找li下的所有子標簽a，文字顏色為紅色：
<ul> <li> <a href="#“>XXXX</a> <div><a href="#">YYYY</a></div> <a href="#">XXXX</a> <a href="#"></a> </li> </ul> $(“li>a”).css(“color”,”red”);
效果：僅XXXX為紅色，YYYY不變，因為YYYY對於li是孫標簽（li>div>a）。
十三、功能函數前綴：
$.trim(s); 去掉s字符串的前后空格。
【例】去掉字符串中間空格：（把字符串變成字符數組，然后把空格替換成無）
var s="das das"; var aChar=s.split(""); //將字符串變為字符數組 for(var i=0; i<aChar.length;i++) { if(aChar[i]==" ") //當遇到某個字符是空格時 { s=s.replace(" ",""); //將此空格替換成無（從空格替換到連空格都不是） } } alert(s); //打印s
十四、屬性選擇器：
$(“某標簽[某屬性]”)：選出帶有某種屬性的某標簽。如：
（1）$("a[target]") 選出帶有target屬性的a標簽；
（2）$(“a[href=’b.html’]”) 選出帶有href=’b.html’屬性的a標簽；
（3）$(“a[href^=http://]”) 選出以http://開頭的a標簽；
（4）$(“a[href$=html]”) 選出以html結尾的a標簽
（5）$(“a[href*=bbb]”) 選出含有bbb的a標簽
十五、包含選擇器
$(“某標簽:has(某屬性)”)：選出包含某屬性的所有某標簽。如：$(“li:has(a)”) 包含超鏈接的所有li標記
十六、位置選擇器
$(“某標簽:某位置”) ：選出某特定位置的某標簽。如：
（1）$(“p:first”) 選擇頁面中的第一個p標簽
（2）$(“p:last”) 選擇頁面中的最后一個p標簽
（3）$(“p:first-child”) 選擇所有的p標記，且這些p標記是其父標記的第一個標記。
（4）$(“p:last-child”) 選擇所有的p標記，且這些p標記是其父標記的最后一個標記。
（5）$(“p:nth-child(odd)”).addClass(“myClass”) 選擇所有的p標記，且這些p標記是其父標記的偶數行。
（6）$(“p:odd”).addClass(“myClass”) 整個頁面的偶數行p標記
（7）$(“p:eq(4)”).addClass(“myClass”) 第五個p標記
（8）$(“p:gt(n)”).addClass(“myClass”) 第n個（從0開始，不包括n本身）p標記之后的所有p標記，也就是從第n+2個標記開始算，如$(“p:gt(2)”)就是從第四個p開始。
十七、過濾選擇器
*備注：$(":file") 等價於$(“input[type=file]”)
| $(“:button”) |
所有按鈕 |
| $(“:checkbox”) |
所有復選框,等同於$(“input[type=’checkbox’]”) |
| $("div:contains(' foo ')") |
所有包含了文本“foo”的元素 |
| $(“:disable”) |
所有被禁用的元素（此寫法有問題，代替寫法：$("input[disabled=disabled]").attr("value", "aaa");） |
| $(“:enable”) |
所有沒有被禁用的元素 |
| $(“:file”) |
所有上傳控件 |
| $(“:input”) |
所有表單元素 |
| $(“:selected”) |
所有下拉菜單中被選中的項 |
| $(“:visible”) |
所有可見的元素 |
| $(“:submit”) |
所有提交按鈕 |
十八、反向過濾器：
$(“標簽:not(:某屬性)”)：選出所有不具備某屬性的某標簽。
意思為：過濾掉所有含有“某屬性”的標簽，留下其它不具備該屬性的標簽。
如：$(“a:not(:target)”),意思就是選出所有沒寫target的a標簽。