随着web2.0到来,Ajax,RSS的火热,js越来越多的被使用,jQuery是一个强大的js框架,他能令我们写更少的代码,越来越少,啦啦啦啦,越来越少,啦啦啦啦。
让我来边学边写,耶!
1.先看这个
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$(document).ready(function() 就是传说中的onload,$("a")是获取所有a标签,就是链接标签:) .click(function(){})是为所有连接标签加上一个onclick方法,这个方法干什么?就是alert("Hello world!");
2.再看这个
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
$("#orderedlist")是获取id为orderelist的element(请允许我这样称呼),
.addClass("red");给这个element加上一个css:("red")
3.继续来看
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
$(document).ready(function() {
$("#orderedlist li:last").addClass("blue");
});
$("#orderedlist > li") 获取id为orderelist的element下的所有的<li>标签。
$("#orderedlist li:last")获取id为orderelist的element下的最后一个<li>标签
4.不要停
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
$("#orderedlist").find("li")就等于$("#orderedlist li")
.each()迭代了所有的li,并可以在此基础上作更多的处理。
.html()是获取对象的html代码 .html("xxx")是设置"xxx"为对象的html代码
5.继续啊
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
$("li").not("[ul]")是选择所有li,除去有ul子元素的li元素
"[ ]"是用来表示一个元素的子元素或者属性
$(document).ready(function() {
$("a[@href*=/content/gallery]").background("#eee");
});
$("a[@href*=/content/gallery]")是选择href为/content/gallery的连接,要注意的是,"*="是部分匹配,而"="是完全匹配,不能乱搞!
6.来点高级的
$(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').find('dd').hide().end()选择id为faq的元素,找他名为dd的子元素并隐藏,之后结束这次find,并进行下一次find,找到dt元素,给他加上click事件。
.next();是取得一个匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
.is()用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true,如果没有元素符合这个表达式,或者表达式是无效的,都返回false。
hide(),show(),隐藏/显示匹配元素。
slideToffle(),slideUp(),slideDown()通过高度变化使匹配的元素以“滑动”的方式隐藏或显示。
fadeTo(),fadeIn(),fadeOut(),通过不透明度的变化来实现所有匹配元素的淡入淡出效果。
7.还不够劲?
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
parent(),parents(),children(),next(),prev()等等等等.......
8.累了,下次再来!
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习
jquery学习资料--jquery代码和学习教程
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
jquery 教程 jQuery学习资料 jQuery学习
Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...
jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习
该 JQuery学习手册.rar 里面包含了JQuery学习的详细信息!非常棒的学习资料!
精选 jquery 学习资料,这里面的notes.txt 是对文件夹里面文件的的介绍
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量
jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结
jquery学习进阶使用
jQuery学习示例 大全 最新
learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的:如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考,具有相对较低的贡献。...
jQuery学习指南 和手册一起用,多看看没坏处
jquery的详细学习列子,由浅入深非常详细的指导jquery的学习
压缩文件中,包含jquery使用的js脚本文件,jquery介绍文档(包括pdf和教程),对应出学者是一个很好的学习资料
资源名称:Jquery学习文档 中文WORD版内容简介:本文档主要讲述的是Jquery学习文档;jQuery是继Prototype之后有一个优秀的Javascript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要...
NULL 博文链接:https://lxy19791111.iteye.com/blog/163447
jQuery学习教程.CHM jQuery学习教程.CHM