The Story behind the Succinctly Series of Books

The Story behind the Succinctly Series of Books ................................................................... 8

About the Author ...................................................................................................................... 10

Introduction ............................................................................................................................... 11

Preface ....................................................................................................................................... 12

jQuery semantics ..................................................................................................................... 12

How the book is structured ......................................................................................................

12

More code, less words ............................................................................................................. 12

Why oh why did I use alert() for code examples? ............................................................... 12

Color coding ............................................................................................................................. 13

Completely grok jQuery text() before reading this book ....................................................... 13

Code examples ........................................................................................................................ 14

Chapter 1 Core jQuery .......................................................................................................... 15

Base concept behind jQuery .................................................................................................... 15

the central concept behind jQuery is "find something, do something." More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods.

The concept, behind the concept, behind jQuery .................................................................... 16

the concept behind jQuery could be extended to include first creating something new, selecting it, and then doing something with it.

jQuery requires HTML to run in standards mode or almost-standards mode .......................... 16

There are known issues with jQuery methods not working correctly when a browser renders an
HTML page in quirks mode. Make sure when you are using jQuery that the browser interprets
the HTML in standards mode or almost standards mode by using a valid doctype.


Waiting on the DOM to be ready

Waiting on the DOM to be readyjQuery fires a custom event named ready when the DOM is loaded and available for manipulation. Code that manipulates the DOM can run in a handler for this event. This is a common pattern seen with jQuery usage. The following sample features three coded examples of this custom event in use. Sample: sample3.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script>
// Standard.
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above.
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts.
});
</script>
</head>
<body></body>
</html>

Keep in mind that you can attach as many ready() events to the document as you would like.

Executing jQuery code when the browser window is completely loaded

Typically, we do not want to wait for the window.onload event. That is the point of using a custom event like ready() that will execute code before the window loads, but after the DOM is ready to be traversed and manipulated.
However, sometimes we actually do want to wait. While the custom ready() event is great for executing code once the DOM is available, we can also use jQuery to execute code once the entire Web page (including all assets) is completely loaded. This can be done by attaching a load event handler to the window object. jQuery provides the load() event method that can be used to invoke a function once the window is completely loaded. Below, I provide an example of the load() event method in use.

Sample: sample4.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script>
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut.
jQuery(window).load(function(){ alert('The page and all its assets
are loaded!'); });
</script>
</head>
<body></body>  

Include all CSS files before including jQuery

As of jQuery 1.3, the library no longer guarantees that all CSS files are loaded before it fires the custom ready() event. Because of this change in jQuery 1.3, you should always include all CSS files before any jQuery code. This will ensure that the browser has parsed the CSS before it moves on to the JavaScript included later in the HTML document. Of course,images that arereferenced via CSS may or may not be downloaded as the browser parses the JavaScript.

Using a hosted version of jQuery



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值