jQuery是JavaScript的一個庫，極大的簡化了JavaScript編程兵琳，很容易學習
jQuery 是一個“寫的更少狂秘，但做的更多”的輕量級 JavaScript 庫。
需要對HTML躯肌、CSS者春、JavaScript有了解
安裝jQuery
共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）清女。
這兩個版本都可從 jQuery.com 下載钱烟。兩個版本有所區(qū)別
- Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮嫡丙。
- Development version - 用于測試和開發(fā)（未壓縮拴袭，是可讀的代碼）
庫的替代
Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不愿意在自己的計算機上存放 jQuery 庫曙博，那么可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件稻扬。
- 使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>```
* 使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>```
簡單示例$("p").hide()方法
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){<!-- jQuery方法一般放在 document ready 函數(shù)中，防止在頁面未加載完成時允許jQuery代碼羊瘩，可能會操作失敗泰佳，如隱藏一個未加載出來的對象 -->
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>點我，我就死給你看</p>
<p>點我尘吗，我也死給你看</p>
<p>我不想死5555</p>
</body>
</html>
常用語法
| 方法名 | 用法 |
|---|---|
| $(this).hide() | 隱藏當前的HTML元素 |
| $("p").hide() | 隱藏所有的< p >元素 |
| $("test").hide() | 隱藏所有的class = "test"的元素 |
| $("#test").hide() | 隱藏所有ID為test的元素 |
特性
HTML元素選取逝她、HTML元素操作、CSS操作睬捶、HTML事件函數(shù)黔宛、JavaScript特效和動畫、HTML DOM遍歷和修改擒贸、AJAX臀晃、utilites
向需要的頁面添加jQuery庫
<head>
<script type="text/javaScript" src ="jquer.js"></script> <!--注意script標簽應該位于<head>標簽之中,
在 HTML5 中，不必在 <script> 標簽中使用 type="text/javascript" 介劫。JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認腳本語言徽惋。 -->
</head>
jQuery選擇器
| 名稱 | 作用 |
|---|---|
| jQuery選擇器 | 通過標簽名、屬性名或內容對 HTML 元素進行選擇座韵。 |
| jQuery元素選擇器 | 使用CSS選擇器來選取HTML元素险绘，$("p") 選取 <p> 元素踢京，$("p.intro") 選取所有 class="intro" < p> 元素$("p#demo") 選取所有 id="demo" 的 < p > 元素。 |
| jQuery屬性選擇器 | 使用 XPath 表達式來選擇帶有給定屬性的元素宦棺，$("[href]") 選取所有帶有 href 屬性的元素瓣距，$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素，$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素代咸，$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素蹈丸。 |
| jQuery CSS選擇器 | 可用于改變 HTML 元素的 CSS 屬性 |
常用選擇器實例
| 名稱 | 作用 |
|---|---|
| $(this) | 當前的HTML元素 |
| $("p") | 所有的< p>元素 |
| $("p.test") | 所有的class=test的< p>元素 |
| $(".test") | 所有的class=test的元素 |
| $("#test") | 所有的ID=test的元素 |
| $("ul li:first") | 每個ul元素的第一個< li>元素 |
| $("[href$='.jpg']" | 所有帶有.jpg結尾的屬性值的href屬性 |
| $("div#test.head") | 所有ID=test的<div>元素中class=head的元素 |
jQuery事件函數(shù)
** 事件處理程序指的是當 HTML 中發(fā)生某些事件時所調用的方法。術語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用呐芥。
通常會把 jQuery 代碼放到 <head>部分的事件處理方法中**
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
單獨文件中的函數(shù)
一般在開發(fā)中白华，將函數(shù)單獨放在一個單獨的文件中
- 實例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
名稱沖突問題
** jQuery使用$符號作為jQuery的簡介方式，在其他JavaScript庫中的函數(shù)（比如prototype）同樣使用$符號贩耐，此時使用noConfilict()方法來解決問題
如 var jq=jQquery.noConfilict()，來代替$符號**
結論
由于 jQuery 是為處理 HTML 事件而特別設計的厦取，那么當您遵循以下原則時潮太，您的代碼會更恰當且更易維護
把所有 jQuery 代碼置于事件處理函數(shù)中
- 把所有事件處理函數(shù)置于文檔就緒事件處理器中
- 把 jQuery 代碼置于單獨的 .js 文件中
- 如果存在名稱沖突，則重命名 jQuery 庫
事件函數(shù)
| 事件函數(shù) | 綁定函數(shù)至事件觸發(fā) |
|---|---|
| $(document).ready(function) | 將函數(shù)綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function) | 觸發(fā)或將函數(shù)綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發(fā)或將函數(shù)綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發(fā)或將函數(shù)綁定到被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 觸發(fā)或將函數(shù)綁定到被選元素的鼠標懸停事件 |
