|
1.准备操作dom
$(document).ready(function() {
// 在这里操作dom
});
2、调用js事件
// 对具体的a标记使用事件click，更多事件在api文档
// 对于每个onxxx事件，象onclick,onchange,onsubmit等，都有一个和jquery同意义的对应的事件，而其他事件，象ready,hover等，都是为某个方法提供。
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
// 表单
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
3、选择器(selector)
Jquery提供了2个方法来选择DOM元素。
第一个方法是用CSS和XPATH（比如：$(“div > ul a”)）。
第二种方法是用jQuery对象的各种方法。当然两种方法也可以结合。
$(document).ready(function() {
$("#orderedlist").addClass("red"); // 给#orderedlist添加red class
});
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
// 当鼠标移到li元素的时候，增加和删除一个Class样式：
$(document).ready(
function() {
$("#orderedlist li:last").hover( // 最后一个li
function() { $(this).addClass("green"); },
function() { $(this).removeClass("green");}
)
}
);
/*###########
# 注意事项 #
###########*/
//
另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter
()表达式元素，而not()是删除和not()表达式相反的元素。当你想选择所有的li元素，并且不包含ul子元素呢？你可以这样写：
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
// 结果是除了包含ul子元素的li，其他所有的li都得到了一个border.可能你也想选择有name属性的anchor(<a>)：
$(document).ready(function() {
$("a[@name]").background("#eee");
});
// 要匹配属性的值（value），我们可以用”*=”来代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
// 这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ，当你click问题的时候，它是怎么实现隐藏和显示的呢？代码是这样的：
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
/*
因为上面只有唯一一个选择器（#faq）,我们用chain来减少代码的长度和提高代码的易读性和表现性.这里要说明一下，如果按原文翻译过来我想很多人都看不懂，感觉他自己也没怎么说明白。我说说我自己的理解：
‘dd’和‘dt’都是#faq的子元素，find()的作用就是找到它的子元素。End()应该和next()搭配的，end()实质上是把
‘dd’过滤了，也就是next()的时候实质上是参考的’dt’。这样每个’dt’的next就是‘dd’，挺容易实现的。要是还不明白你可以边参考边
照着做一遍。
*/
//除了同属元素外，我们也可以选择父元素：
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
|
