JQuery是一個JavaScript庫，極大的簡化JavaScript編程勤家。
- jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數(shù)
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
JQuery的使用
jQuery 庫位于一個 JavaScript 文件中，其中包含了所有的 jQuery 函數(shù)。
１、下載
可以通過下載JQuery庫陈莽，然后把它包含在希望使用的網(wǎng)頁中。
<head>
<script src="jquery.js"></script>
</head>
下載地址
2、如果不想下載走搁，可以通過CDN(內(nèi)容發(fā)布到網(wǎng)絡(luò)）引用它独柑。
- 從谷歌引用JQuery
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
- 從微軟引用jQuery
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.９.0.js">
</script>
</head>
實例
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="jquery-3.3.1.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.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 type="button">Click me</button>
</body>
</html>
jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執(zhí)行某些操作私植。
基礎(chǔ)語法是：$(selector).action()
美元符號定義jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
JQuery語法實例
-
$(this).hide()隱藏當(dāng)前的HTML元素忌栅。 -
$("#test").hide()隱藏id="test"的元素。 -
$("p").hide()隱藏所有<p>元素曲稼。 -
$(".test").hide()隱藏所有class="test"的元素索绪。
文檔就緒函數(shù)
所有 jQuery 函數(shù)都位于一個 document ready函數(shù)中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
如果在文檔沒有完全加載之前就運行函數(shù)贫悄，操作可能失敗瑞驱。下面是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全加載的圖像的大小
jQuery 選擇器
jQuery元素選擇器和屬性選擇器允許可以通過標(biāo)簽名，屬性名或內(nèi)容對HTML元素進(jìn)行選擇窄坦。
jQuery元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素唤反。
-
$('p')選取<p>元素。 -
$("p.into")選取所有class="intro"的<p>元素嫡丙。 -
$("p#demo")選取所有id="demo"的<p>元素拴袭。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素读第。
-
$("[href]")選取所有帶有href屬性的元素曙博。 -
$("[href='#']")選取所有帶有href值等于"#"的元素。 -
$("[href!='#']")選取所有帶有href值不等于“Ａ鳎”的元素父泳。 -
$("[href$='.jpg']")選取所有href值以“.jpg”結(jié)尾的元素。
jQuery CSS 選擇器
jQuery CSS選擇器可用于改變HTML元素的CSS屬性吴汪。
例：將所有p元素的背景顏色改為紅色惠窄。
$("p").css("background-color","red");
jQuery事件
jQuery事件是為事件處理特別設(shè)計的。
jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)漾橙。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法杆融。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用。
通常會把 jQuery 代碼放到 <head>部分的事件處理方法中霜运。
$("button").click(function() {..some code... } )
實例：
$("button").click(function(){ $("p").hide(); });
單獨文件中的函數(shù)
如果網(wǎng)頁中包含許多的頁面脾歇，并且希望jQuery函數(shù)易于維護(hù)，就可以把jQuery函數(shù)放在獨立的.js文件中淘捡，通過src屬性來引用文件)
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名稱沖突
jQuery使用 符號。
jQuery 使用名為 noConflict() 的方法來解決該問題焦除。
var jq=jQuery.noConflict()激况，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在運行！");
});
});
</script>
jQuery中常用的事件方法
-
$(document).ready(function)將函數(shù)綁定到文檔的就緒事件(當(dāng)文檔完成加載時). -
$(selector).click(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點擊事件乌逐。
-$(selector).dblclick(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件竭讳。 -
$(selector).focus(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點事件。 -
$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件浙踢。
