jQuery 绝对入门第1/2页

1．jQuery GO
jQuery 提供了功能强大的读取和处理文档DOM的方式,为动态操作文档DOM提供了方便。
代码如下:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

单击文档中任一个连接都会触发alert() 事件
$号是 jQuery类的一个别称，因此$()构造了一个新的jQuery 对象。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这样的使用编码更有结构与行为分开的感觉。
2．选择器和事件
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用
代码如下:
<ul id=”orderedlist”>
<li>食品</li>
<li>服装</li>
<li>电子</li>
</ul>

使用jQuery 查找文档中的ul如下：取代js document.getElementById(‘orderlist');
代码如下:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

$(“#..”)的方式可以找到指定ID的元素。
为其子节点添加样式，如下：
代码如下:
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

在鼠标移到或移开<li>项时样式切换,如下：
代码如下:
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});

$(#orderedlist li) 与 $(“#orderedlist > li”) 的区别，前者是父元素下所有匹配的子元素，后都仅是其子元素中匹配的元素。
代码如下:
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本
一个ajax 方式提交后的重置表单的操作，如下：
代码如下:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});

当然可以重置个表单
代码如下:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

过滤选择器