当前位置: 网学 > 编程文档 > Ajax > 正文

jQuery中文入门指南

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 12/10/19
下载{$ArticleTitle}原创论文样式
ady(function() { $("li").not("[ul]").css("border", "1px solid black"); });

这个代码选择了所有的li元素,然后去除了没有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。

(译者Keel注:请注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢?像这样:$("li").not("[ul]").css("border", "1px solid black").css("color","red");)

上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() { $("a[@name]").background("#eee"); });

这个代码给所有带有name属性的链接加了一个背景色。(译者Keel注:这个颜色太不明显了,建议写成$("a[@name]").background("red");)

更常见的情况是以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'')。

在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案

(译者Keel注:这个例子真是太酷了,FAQ中的答案可以收缩!从利用next()的思路到实现这些效果都有很多地方需要我们消化,注意 if (answer.is('':visible''))用法,注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档)

除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个:

$(document).ready(function() { $("a").hover(function() { $(this).parents("p").addClass("highlight"); }, function() { $(this).parents("p").removeClass("highlight"); }); });

测试效果可以看到,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样。

(译者Keel注:highlight是core.css中定义的样式,你也可以改变它,注意这里有第二个function()这是hover方法的特点,请在API文档中查阅hover,上面也有例子说明)

在我们继续之前我们先来看看这一步: jQuery会让代码变得更短从而更容易理解和维护,下面是$(document).ready(callback)的缩写法:

$(function() { // code to execute when the DOM is ready });

应用到我们的Hello world例子中

网学推荐

免费论文

原创论文

浏览:
设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved
湘ICP备09003080号