[09/50周主题] – JQuery入门

周三赶鸭子上架的组织了一次JQuery入门培训，由于时间上的原因，自己没做Demo，拿官方现成的，主要是认识JQuery，了解JQuery核心函数，介绍一些常用的选择器，还有事件处理，以及Ajax的使用，这里简单分享下：
本周主题：JQuery
一、JQuery核心认识
$ 表示JQuery类，$(...) 构造一个JQuery类，这里的JQuery类是一个集合数组对象，而非Dom对象。
jQuery(expression,[context])
[code lang="html"]
$("div > p");
$("input:radio", document.forms[0]);
$("div", xml.responseXML);
[/code]
jQuery( html )
[code lang="html"]
$("<div>Hello</div>").appendTo("body");
[/code]

主要用来加载html
jQuery( elements )
[code lang="html"]
$(document.body).css("background-color", "black");
$(myForm.elements).hide();
[/code]
jQuery( callback )
[code lang="html"]
$(function(){
alert('hello');
});
[/code]

JQuey中执行方法是在页面加载结束后，官方解释是：A shorthand for $(document).ready().

二、JQuery选择器
JQuery选择器是JQuery的一大亮点，快捷，高效的遍历整个HTML文档，常用的如下面几种：

[code lang="html"]
$("#id");
$("div");
$(".className");
$("div,span,p.myClass")
$("form input")
$("form > input")
[/code]

强烈建议直接看官方文档：http://docs.jquery.com/Selectors
三、JQuery事件
[code lang="html"]
$("p").bind("click", function(e){});
$("p").click(function() {})
trigger( event, data ) //触发事件
triggerHandler( event, data ) //触发事件，但不触发浏览器的默认事件
$("p").live("click", function(){ //在p以及p的下面的子elements上都加上click事件
$(this).after("<p>Another paragraph!</p>");
});
[/code]

更多，参见官方文档：http://docs.jquery.com/Events
四、JQuery Ajax
ajax这块感觉和其他框架没多少差别，用起来基本类似：
1、$.post(...) 和 $.get(...)
[code lang="js"]
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
[/code]
2、$.ajax(...)
[code lang="js"]
$.ajax({
url: 'getdata.action',
type: 'GET',
dataType: 'html',
Timeout: 1000,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(html){
// do something with html
},
complete: function(){
// Handle the complete event
},
error: function(){
alert('Error loading HTML document');
},
});
[/code]

五、推荐阅读

1、http://jquery.com/
2、jQuery 1.3 API 中文参考文档
3、http://jqueryui.com/
4、http://jquery.org.cn/
5、有关Ajax的一个中文文章