(2)入门指南——(7)添加jquery代码(Adding our jQuery code)
来源:互联网 发布:淘宝更改付款方式 编辑:程序博客网 时间:2024/06/06 16:25
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});
我们的普通的代码将书写在后面的现在还是空的js的文件中,我们在html中使用<script src="01.js"></script>把文件包含进去。比如我们只需要下面这样的三行代码:
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});
Finding the poem text
查找元素
The fundamental operation in jQuery is selecting a part of the document. This is done with the $()function. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all of the <div>elements in the document that have the poem-stanzaclass applied to them, so the selector is very simple. However, we will cover much more sophisticated options through the course of the book. We will step through many ways of locating parts of a document in Chapter 2, Selecting Elements.
jquery最根本的操作是查找文档的一部分,这一点使用$()方法来做到。一般来说,它使用一个字符串作为参数,其中可以包含css选择表达式。在这种场景下,我们希望查找到文档中所有有着poem-stanza类的div元素,所以选择器将会很简单。然而,我们希望通过这本书的教程,我们可以学会更加复杂的操作。我们将在第二章"查找元素"中逐步使用多种方法定位文档的部分。
When called, the $()function returns a new jQuery object instance, which is the basic building block we will be working with from now on. This object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page, and we will accomplish this by changing the classes applied to the poem text.
当$()被调用的时候,会返回一个新的jquery对象实例,从现在开始这将是我们将要处理的基本的构建内容。这个对象封装了零个或者更多的dom元素,同时允许我们使用多种方法去影响他们。在这种情况下,我们希望修改网页中这些部分的表现形式,我们将修改附加到网页中的类的方法实现这一目标。
Injecting the new class
注入新的类
The .addClass()method, like most jQuery methods, is named self-descriptively; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass(), will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the highlightclass, which our stylesheet has defined as italicized text with a gray background and a border.
.addClass()方法和大多数的jquery方法一样,是使用自己的功能描述来为自己命名的。他将为我们选中的网页中的那一部分添加新的类,他唯一的参数是需要被添加的类的名称。只要我们找到对我们有效的不同的选择器,这个方法和他相应的方法.removeClass()让我们可以很容易的使用jquery。现在,我们的例子只是简单的添加了一个highlight类,我们在css文件中把他定义为有着灰色背景和边框的斜体文本。
• Executes functions passed to $(document).ready()even if they are added after the browser event has already occurred
• Handles the event scheduling asynchronously to allow scripts to delay it if necessary
• Simulates a DOM ready event in some older browsers by repeatedly checking for the existence of a DOM method that typically becomes available at the same time as the DOM
function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});
$('div.poem-stanza').addClass('highlight');
});
- (2)入门指南——(7)添加jquery代码(Adding our jQuery code)
- (2)入门指南——(4)我们第一个使用jquery的网页(Our first jQuery-powered web page)
- (2)入门指南——(8)原始的js代码和jquery对比(Plain JavaScript vs. jQuery)
- (2)入门指南——(2)jQuery可以做什么(What jQuery does)
- (2)入门指南——(5)下载jquery(Downloading jQuery)
- (2)入门指南——(3)为什么jquery工作的很好(Why jQuery works well)
- JQuery 入门指南(4):添加删除元素
- (2)入门指南——(6)在html文档中引入jquery(Setting up jQuery in an HTML document)
- jQuery——入门(四)JQuery 事件
- 数据添加(jquery)
- JQuery Mobile入门——添加按钮
- jQuery性能优化指南(2)
- jQuery性能优化指南(2)
- jQuery性能优化指南(2)
- jQuery性能优化指南(2)
- jQuery权威指南(第2版)
- jQuery 性能优化指南(2)
- jQuery(一)——入门
- adb、fastboot权限不足的处理方法
- 亢奋的2013百度世界大会
- 模块间通信 --linux
- C++变量作用域
- 关于计算机语言
- (2)入门指南——(7)添加jquery代码(Adding our jQuery code)
- struts2 上传文件 parseRequest()解析request为空 解决办法
- Java NIO系列教程(十一) Pipe
- OA系统项目需求
- jQuery选择器举例
- Java I/O Reader and Writer
- Java NIO系列教程(十二) Java NIO与IO
- 11个在线编码大赛,与全球程序员PK
- 侧信道(Side Channel)攻击对加密Web应用造成的敏感信息泄露