1:jQuery提供两种方式来选择html的elements。
第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));
第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
2:
第一种方式的几个选择器例子::
$("#orderedlist").addClass("red");
$("#orderedlist > li").addClass("blue");或$("#orderedlist li").addClass("blue");
$("#orderedlist li:last").removeClass("green");
还有大量的类似的CSS和XPath例子(更多的例子和列表查看:http://docs.jquery.com/Selectors)。
3:
每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。其他的一些事件(http://docs.jquery.com/Events),如ready和hover,也提供了相应的方法。
你也可以在Visual jQuery(http://visualjquery.com/)找到全部的事件列表,在Events栏目下。
4:
用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!
$(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文本。
5:重置一个表单的操作:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});
$("form")[0] 相当于 document.forms[0] 。
重置所有表单的操作:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form").each(function(){
this.reset();
});
});
});
6:
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。
filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项.
例子1:
$("a[name]").css("background-color","#eee");
//这个代码给所有带有name属性的链接加了一个背景色。
例子2:
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere likes '/content/gallery'
});
//你可能需要选择一个有特点href属性的链接。注:部分匹配("*=")的方式来代替完全匹配("="):
例子3:
$("li").not("[ul]").css("border", "1px solid black");或是:
$("li").not(":has(ul)").css("border", "1px solid black");
//这个代码选择了所有的li元素,然后去除了有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。
7:
<dl id="faq">
<dt>Question1</dt>
<dd>Answer1</dd>
<dt>Question2</dt>
<dd>Answer2</dd>
<dt>Question3</dt>
<dd>Answer3</dd>
</dl>
到现在为止,选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来,jQuery代码如下:
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
answer.toggle("slow");
});
在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案。
8:
<p> SUNSHUXIN
<a id="reset" href="#">Reset!</a>
</p>
除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个:
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
测试效果可以看到,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样。
9:
更多的AJAX方法可以从这里(http://docs.jquery.com/Ajax) 找到,或者看看API(http://visualjquery.com/)文档 下面的AJAX filed under AJAX.
10:
很多不错的效果可以访问interface plugin collection(http://interface.eyecon.ro/)。 这个站点提供了很多demos和文档。
11:关于插件(Plagin)
使用tablesorter插件(表格排序)。
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用:
$(document).ready(function() {
$("#large").tableSorter(); // 其中 large 是一个 table 的 ID。tableSorter()是 插件定义的方法,直接调用就行。
});
关于这个插件的更多例子和文档可以在 tablesorter首页(http://motherrussia.polyester.se/jquery-plugins/tablesorter/)找到。
经常更新的插件列表可以从jQuery官方站插件栏(http://jquery.com/plugins/)找到.
12:制作自己的插件
<1>:为你的插件取一个名字,在这个例子里面我们叫它"foobar".
<2>:创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js
<3>:创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
jQuery.fn.foobar = function() {
// do something
};
好了,再就可以调用它了:$("...").foobar();
一个例子:
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如下面的调用方法都可以:
$('input:checkbox').check();
$('input:checkbox').check('on');
$("input[type='checkbox']").check('off');
$("input[type='checkbox']").check('toggle');
13:
如果你想做更好的javascript开发,建议你使用一个叫 FireBug(http://getfirebug.com/)的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能。