jQuery 绝对入门第1/2页
更新时间：2009年04月15日 19:51:44 作者：
对于想学习jquery 的朋友可以看下这样的入门级文章。
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();
});
});
});
过滤选择器
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。
复制代码 代码如下:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:
复制代码 代码如下:
$(document).ready(function() {
$("a[name]").background("#eee"); //原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除
});
更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")[包含]的方式来代替完全匹配("=")：
复制代码 代码如下:
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：
复制代码 代码如下:
$(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' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。
相关文章
jQuery Deferred和Promise创建响应式应用程序详细介绍
接下来我们一起探索一下JavaScript中的 Deferred 和 Promise 的概念Deferred 提供了一个抽象的非阻塞的解决方案（如Ajax 请求的响应），它创建一个promise对象，其目的是在未来某个时间点返回一个响应，感兴趣的可以参考下2013-03-03
这篇文章主要为大家详细介绍了jQuery制作网页版选项卡的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
Raphael一个用于在网页中绘制矢量图形的Javascript库
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,接下来详细介绍，感兴趣的朋友可以了解下哦2013-01-01
使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频，但那时对WEB应用这个东西还比较模糊，不清楚HTML、JSP与Servlet是怎么工作的，甚至不知道JQuery包装的是什么东西。2011-02-02
本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例，非常的实用，有需要的小伙伴可以参考下。2015-06-06
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
下面小编就为大家带来一篇JavaScript 弹出子窗体并返回结果到父窗体的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
今天给大家分享一个基于jquery实现的简单验证码功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-06
这篇文章主要介绍了jQuery实现两款有动画功能的导航菜单代码,涉及jQuery动画效果的不同实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
下面小编就为大家带来一篇底部悬浮通栏可以关闭广告位的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
jqPlot是一个灰常强大的图表工具，曲线，柱状，饼图，应该有尽有，更要命的是，调用方便~~2016-06-06
最新评论