鑑於我學過一點基礎知識，所以這裏做一些知識點歸納。
1，一個輕量級的JS庫，可以極大的簡化JS操作和代碼量。
2，語法實例：
在實際運用中可以慢慢領會。
$(this).hide()
演示jQueryhide()函數，隱藏當前的HTML元素。
$("#test").hide()
演示jQueryhide()函數，隱藏id="test"的元素。
$("p").hide()
演示jQueryhide()函數，隱藏所有<p>元素。
$(".test").hide()
演示jQueryhide()函數，隱藏所有class="test"的元素。
$("p.test").hide()-隱藏所有class="test"的段落。3，語法基礎
jQuery語法是爲HTML元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
美元符號定義jQuery
選擇符（selector）“查詢”和“查找”HTML元素
jQuery的action()執行對元素的操作4，注意
- 所有jQuery函數位於一個documentready函數中
-
$(document).ready(function(){ --- jQuery functions go here ---- });
- 防止網頁沒有加載完就運行，出現無法找到的標籤定義等等。
- 5，jQuery元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對HTML元素進行選擇。
jQuery元素選擇器
jQuery使用CSS選擇器來選取HTML元素。
$("p")選取<p>元素。
$("p.intro")選取所有class="intro"的<p>元素。
$("p#demo")選取id="demo"的第一個<p>元素。
jQuery屬性選擇器
jQuery使用XPath表達式來選擇帶有給定屬性的元素。
$("[href]")選取所有帶有href屬性的元素。
$("[href='#']")選取所有帶有href值等於"#"的元素。
$("[href!='#']")選取所有帶有href值不等於"#"的元素。
$("[href$='.jpg']")選取所有href值以".jpg"結尾的元素。
jQueryCSS選擇器
jQueryCSS選擇器可用於改變HTML元素的CSS屬性。下面的例子把所有p元素的背景顏色更改爲紅色：
實例:
$("p").css("background-color","red");
6,jQuery名稱衝突
jQuery使用$符號作爲jQuery的簡介方式。
某些其他JavaScript庫中的函數（比如Prototype）同樣使用$符號。
jQuery使用名爲noConflict()的方法來解決該問題。
varjq=jQuery.noConflict()，幫助您使用自己的名稱（比如jq）來代替$符號。
- 7,jQuery事件
下面是jQuery中事件方法的一些例子：
|
Event函數 |
綁定函數至 |
|
$(document).ready(function) |
將函數綁定到文檔的就緒事件（當文檔完成加載時） |
|
$(selector).click(function) |
觸發或將函數綁定到被選元素的點擊事件 |
|
$(selector).dblclick(function) |
觸發或將函數綁定到被選元素的雙擊事件 |
|
$(selector).focus(function) |
觸發或將函數綁定到被選元素的獲得焦點事件 |
|
$(selector).mouseover(function) |
觸發或將函數綁定到被選元素的鼠標懸停事件 |
例子：
<scripttype="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
<html>
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<h2>Thisis a heading</h2>
<pid="box">This is a paragraph.</p>
<p>Thisis another paragraph.</p>
<buttonid="start">Click me</button>
<p>
<button>Click me2</button>
</p>
</body>
</html>我們可以通過以上例子測試一下，發現要想移動Html元素做出效果，需要設置position屬性。
8，jQuery效果
|
函數 |
描述 |
|
$(selector).hide() |
隱藏被選元素 |
|
$(selector).show() |
顯示被選元素 |
|
$(selector).toggle() |
切換（在隱藏與顯示之間）被選元素 |
|
$(selector).slideDown() |
向下滑動（顯示）被選元素 |
|
$(selector).slideUp() |
向上滑動（隱藏）被選元素 |
|
$(selector).slideToggle() |
對被選元素切換向上滑動和向下滑動 |
|
$(selector).fadeIn() |
淡入被選元素 |
|
$(selector).fadeOut() |
淡出被選元素 |
|
$(selector).fadeTo() |
把被選元素淡出爲給定的不透明度 |
|
$(selector).animate() |
對被選元素執行自定義動畫 |
本段小結：
由於jQuery是爲處理HTML事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：
-
把所有jQuery代碼置於事件處理函數中
-
把所有事件處理函數置於文檔就緒事件處理器中
-
把jQuery代碼置於單獨的.js文件中
-
如果存在名稱衝突，則重命名jQuery庫
