-
核心功能
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
-
JavaScript 特效和动画
- $("#msg").show("fast");
- $("#msg").hide("slow");
- $("#msg").fadeIn();
- $("#msg").fadeOut();
- $(selector).fadeIn(speed,callback);
- $(selector).slideDown(speed,callback);
- $(selector).animate({params},speed,callback);
- HTML DOM 遍历和修改
-
AJAX
- $.ajax({
async : false,
type: "POST",
url: "example.php",
data: "name=John&location=Boston"
}).done(function(msg){
alert("Data Saved: " + msg);
}).fail(function(xmlHttpRequest,statusText,errorThrown) {
alert(
"Your form submission failed.\n\n"
+ "XML Http Request: " + JSON.stringify(xmlHttpRequest)
+ ",\nStatus Text: " + statusText
+ ",\nError Thrown: " + errorThrown);
});
- Utilities
-
语法
-
$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
-
选择器
- jQuery 使用 sizzle引擎,支持css选取,Xpath选取等方式
-
XPath 表达式
- $("p") 选取全部 <p> 元素。
- $("p.intro") 选取所有包含class为"intro"的 <p> 元素。
- $("#demo") 选取 id为"demo" 的元素。
- $("[href]") 选取所有带有 href 属性的元素。
- $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
- $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
- $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
- $("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。
- $("p.intro") 所有 class="intro" 的 <p> 元素 元素选择器
- $(".intro") 所有 class="intro" 的元素 类选择器
- $("#intro") id="intro" 的第一个元素 id 选择器
- 更多详细信息请参见jQuery API的Selectors部分。
-
Event函数
- $(document).ready(function)
- $(selector).click(function)
- $(selector).dblclick(function)
- $(selector).focus(function)
- $(selector).mouseover(function)
-
核心理念
- write less,do more
- John Resig