jQuery語法：
jQuery 語法是為 HTML 元素的選取而編製的，可以對元素執行某些動作。 此是重點，初學一定要知道你學的東西的用途是做什麼。
基礎語法是：$(selector).action()。 所有的jQuery就是圍繞著這個進行的，選取頁面的元素再對元素進行某些操作。
範例
$(this).hide() - 隱藏目前元素
文件就緒函數：
是為了防止文件在完全載入（就緒）之前執行jQuery 程式碼。由jQuery的約定，所有的JavaScript程式碼最好都放在這裡面。
$(document).ready(function(){
});jQuery元素選擇器和屬性選擇器：它們允許您透過標籤名稱、屬性名稱或內容對HTML 元素進行選擇。 對應$(selector).action()的前半部。
jQuery 元素選擇器：
$("p") 選取
元素。
$("p.intro") 選取所有 class="intro" 的
元素。
$("p#demo") 選取所有 id="demo" 的
元素。
jQuery 屬性選擇器：
$("[href]") 選取所有帶有href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器：
#$("p").css("background-color","red");
如需完整的jquery選擇器的參考手冊：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。
<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>| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) | 將函數綁定到文件的就緒事件（當文件完成載入時） |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
| #$(selector).mouseover(function) | 觸發或將函數綁定到被選元素的滑鼠懸停事件 |
完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
约定：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 效果：对应$(selector).action()的后半部分。
隐藏、显示、切换，滑动，淡入淡出，以及动画
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
这是一个段落。
这是另一个段落。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
这是一个段落。
这是另一个段落。
jQuery 淡入淡出方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
可以用animate() 方法來操作所有CSS 屬性， 需要記住一件重要的事情：當使用animate() 時，必須使用Camel 標記法書寫所有的屬性名，例如，必須使用paddingLeft 而不是padding-left，使用marginRight 而不是margin-right，等等。
它把
元素移到左邊，直到left 屬性等於250 像素為止：
點擊這裡，向下滑動面板< /p>
Hello world!
#Callback 函數在目前動畫100% 完成之後執行。
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden" );
});
完整的動畫：http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
#jQuery 擁有可操作HTML 元素和屬性的強大方法。
jQuery DOM 操作：
DOM = Document Object Model（文件物件模型）， 「W3C 文件物件模型獨立於平台和語言的介面，允許程式和腳本動態存取和更新文件的內容、結構以及樣式。個簡單實用的DOM 操作的jQuery 方法：
html () - 設定或傳回所選元素的內容（包括HTML 標記）
val() - 設定或傳回表單欄位的值
});
$("#btn2").click (function(){$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
$("button").click(function(){
alert($("#w3s").attr("href"));
});
#
設定DOM值：
$("#btn1").click(function(){
$("#test1") .text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及val() 的回呼函數， 回呼函數由兩個參數：被選元素清單中目前元素的下標，以及原始（舊的）值。然後以函數return 的傳回內容作為使用的新值。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2")# });
});
$("#btn2").click (function(){
$("#test2").html(function(i,origText){
(index: " + i + ")";
});
});
#$("button").click(function() {
return origValue + "/jquery";
});
})) ;
#在DOM中加入新的值：
$("p").prepend("Some prepended text.");
$("img").before(" Some text before");
#刪除DOM中的元素：
$("#p1").empty();
此參數可以是任何 jQuery 選擇器的語法。
This is a paragraph in the p.
This is another paragraph in the p.
This is another paragraph in the p.
#
#jQuery CSS
這是p 中的一個段落。
<p>這是p>
<p 中的另一個段落。
這也是段落。
元素（索引號1）：
#
###
我是唐老鴨(index 0)。
###唐老鴨 (index 1)。
我住在 Duckburg (index 2)。
我最好的朋友是米老鼠 (index 3)。
filter() 方法可讓您規定一個標準。不符合這個標準的元素會被從集合中刪除，符合的元素會被回傳。
我是唐老鴨。
我住在 Duckburg。
我愛 Duckburg。
我最好的朋友是 Mickey。
not() 方法傳回所有不符合標準的元素。提示：not() 方法與 filter() 相反。
以上是jQuery基本語法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
