$(method();
如果您从第1课中回想起,这是jQuery中DOM操作的基本结构,而DOM操作并不是唯一可以用jQuery进行的操作当然,但这是最简单的起点,也是最常见的起点,所以这就是我们选择它的原因。
为快速回顾一下,此语句的选择器部分允许您使用类似CSS的元素名称,类或ID,以定位DOM的部分。例如,要获取所有具有 .hidden 类名的 等式的第二部分是一旦找到它们(如果它们完全存在;或者它们可能只是一个“匹配"项)就对这些DIV执行的方法。请记住,jQuery仅会 只能返回一个用于选择ID的元素,因为ID应该引用唯一的项。如果要包含多个元素,则必须将其定义为CSS中的类。 ;您可以使用还是要使用DOM吗? 首先,我上次向您介绍了 .css 方法,以便您可以将其用于测试。格式很简单: 因此,可由jQuery调整CSS定义的任何内容-颜色,透明度,位置,大小-仅举几例。更改是立即进行的。 如果您希望对CSS更改进行动画处理,那么我对您来说是个好消息;还有一种叫做 .animate()的方法。尽管有点复杂: 例如: 此时,您可能想知道花括号是什么意思;它们被称为“对象文字",通常用于创建 property:value 对的列表,如果您来自于,则类似于索引数组其他语言。您将在jQuery中使用它们很多,所以我再说一遍-习惯于正确检查是否有括号和括号! 请查看本页中有关animate方法的许多有效示例。 除了操纵CSS的属性外,您还可以使用。 text()、. html()和.val()方法来调整其内容。 (val用于表单元素的内容)。这些方法既充当 set ters,又充当 get ters;如果您未指定值,则它们将获得当前值。如果确实指定一个值,它们将替换当前值。 下面是一些简单的示例: 在注释表单中获取名称字段的当前值并将其分配给变量 comment_name : 将的值设置为从 commenter_name 获取的值: 然后,我们提供了多种方法来克隆,移动,插入或删除DOM的各个部分。 比方说,您想在content列中的每个第3段之后动态插入一个广告图像块,但是您正在用Javascript进行操作,以便可以初始加载页面保持清洁。听起来很复杂,对吧?几乎没有…… 简而言之,我们要求jQuery: 我无法在此处列出所有方法,并且您也不想阅读。关键是,有一种方法可以做很多事情,只要涉及到操纵就可以想到,因此请检查您可以使用的API。 此外,请记住,可能还有更多方法可以使用而不是一种做某事的方式。例如,如果您不能将正确的对象缩小到 insertAfter(),也许考虑考虑找到 next 子对象并使用 insertBefore() 今天最后,让我们快速介绍一下方法链接,基本上只是因为它很棒。首先,让我们考虑以下代码行: 听起来足够合理,对吧?但是,您可以在一行中执行相同的操作: 这完全相同,并且称为方法链接。由于几乎所有的jQuery方法本身都会返回一个jQuery对象,因此每个方法都可以馈入下一个。这意味着更少的代码-这总是一件好事-但它实际上也运行得更快。 为什么?嗯,每次您调用基本的jQuery $ 命令和选择器时,您都要求它在DOM树中进行搜索以查找匹配的元素。当您链接方法时,您无需再继续引用DOM,因为它知道它们现在在哪里,并且可以立即执行该方法。 今天就是这样,我认为我们可能涵盖了很多。现在,您应该具备执行一些非常繁重的DOM操作的能力,因此,可以将您的方法链接在一起,并真正弄乱页面。现在,您需要将脚本放置在页脚中,以便为页面的其余部分提供加载时间。下周我们将解决仅当所有事件都正确加载事件以及匿名函数的奇怪情况时才使jQuery做事的问题。
标签:
$('div.hidden')
.css('property','value');
.animate({'property':'value'},speed);
.animate({'opacity':'0.25','height':'100px'},'fast');
var commenter_name = $(#comment-form #name).val();
$('span.name').text(commenter_name);
方法链接
$('nav#menu').fadeIn('fast');$('nav#menu').addClass('beingShown');$('nav#menu').css('margin-right','10px');
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right','10px');