这个代码给所有带有name属性的链接加了一个背景色
jQuery起点教程之使用选择器和事件
jQuery提供两种方式来选择html的elements:
- 第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));
- 第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").在jQuery中,我们这样做:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(ordered list )背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
这样,所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
还有大量的类似的CSS和XPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!)
每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。其他的一些事件,如ready和hover,也提供了相应的方法。
你可以在Visual jQuery找到全部的事件列表,在Events栏目下.
用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!
$(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文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
(译者Keel注:这里作者将form的id也写成了form,源文件有<form id="form">,这是非常不好的写法,你可以将这个ID改成form1或者testForm,然后用$("#form1")或者$("#testForm")来表示它,再进行测试。)
这个代码选择了所有ID为"form"的元素,并在其第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
(译者Keel注:请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会!必要时要观察starterkit.html的html代码)
这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。
$(document).ready(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()2881064151 来找到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例子中,可以这样:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
现在,我们手上有了这些基础的知识,我们可以更进一步的探索其它方面的东西,就从AJAX开始!
这个代码给所有带有name属性的链接加了一个背景色的更多相关文章
- js代码突然在花括号回车自动多加了一个大括号
js代码突然在花括号回车自动多加了一个大括号. 检查发现,前面有一个行带有左括号的注释行.
- Java面试题之类的静态代码块和静态属性等的加载顺序
如以下面试题: /** * @author hjs * @date 2019/3/62:41 * @Dec */public class B { public static B t1 = new B( ...
- js 代码大全(各种方法、属性)
事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElemen ...
- 《Entity Framework 6 Recipes》中文翻译系列 (23) -----第五章 加载实体和导航属性之预先加载与Find()方法
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-2 预先加载关联实体 问题 你想在一次数据交互中加载一个实体和与它相关联实体. ...
- 《Entity Framework 6 Recipes》中文翻译系列 (26) ------ 第五章 加载实体和导航属性之延缓加载关联实体和在别的LINQ查询操作中使用Include()方法
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-7 在别的LINQ查询操作中使用Include()方法 问题 你有一个LINQ ...
- “无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性 “之解决
今天在学习插件系统设计的时候遇到一个问题:“System.Reflection.ReflectionTypeLoadException: 无法加载一个或多个请求的类型. 于是百度一下,很多内容都差不多 ...
- Linux内核启动代码分析二之开发板相关驱动程序加载分析
Linux内核启动代码分析二之开发板相关驱动程序加载分析 1 从linux开始启动的函数start_kernel开始分析,该函数位于linux-2.6.22/init/main.c start_ke ...
- ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取
前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...
- 计算型属性 vs 懒加载
只实现 getter 方法的属性被称为计算型属性,等同于 OC 中的 ReadOnly 属性 计算型属性本身不占用内存空间 不可以给计算型属性设置数值 计算型属性可以使用以下代码简写 var titl ...
随机推荐
- linux环境中,如何通过手动创建crontab文件的方式来设置crontab定时调度任务?
需求描述: 之前在创建定时任务的时候,都是通过cronab -e的方式进行创建,今天在做通过脚本部署定时任务的时候, 就想,通过crontab -e编辑的定时任务存放在哪个文件里,是否,可以手动的编辑 ...
- linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?
需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...
- ios的AutoresizingMask【转】
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum { UIViewAutoresi ...
- PHP基本连接数据库
最简单的代码 connect.php <?php $host="localhost"; $db_user="root"; $db_pass="& ...
- jsoup Cookbook(中文版)-Jsoup解析HTML
jsoup Cookbook(中文版) 入门 1. 解析和遍历一个html文档 如何解析一个HTML文档: String html = "<html><head& ...
- [转]PHP判断字符串是纯英文、纯汉字或汉英混合(GBK)
PHP判断字符串是否为中文(或英文)的方法,除了正则表达式判断和拆分字符判断字符的值是否小于128 外还有一种比较特别的方法. 使用php中的mb_strlen和strlen函数判断 方法比较简单:分 ...
- ios开发之--实现TextView提示文字并且输入字数限制
实现字数控制和限制,并展示当前输入的字符串长度,以及按钮的点击状态,代码如下: 1,设置代理 @interface FKViewController ()<UITextViewDelegate& ...
- java List分批处理
java List分批处理,例如对List中的数据进行批量插入. 方法一: /** * ClassName:Test List分批处理 * @author Joe * @version * @sinc ...
- 《C++ Primer Plus》第17章 输入、输出和文件 学习笔记
流是进出程序的字节流.缓冲区是内存中的临时存储区域,是程序与文件或其他I/O设备之间的桥梁.信息在缓冲区和文件之间传输时,将使用设备(如磁盘驱动器)处理效率最高的尺寸以大块数据的方式进行传输.信息在缓 ...
- PHP curl登录 跳过验证码
<?php switch($_GET['do']){ case 'vc': $cookieFile = "./test.tmp"; $url = 'http://localh ...