jQuery是如何工作的？(关键词： jquery, JQuery) -

Lixh1986

浏览: 1112806 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery是如何工作的？(关键词： jquery, JQuery)

博客分类：

javaScript

jquery javascript 原理分析工作

How jQuery Works

1. jQuery: The Basics

This is a basic tutorial, designed to help you get started using jQuery.
If you don't have a test page setup yet, start by creating the following HTML page:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
 
    // Your code goes here.
 
    </script>
</body>
</html>

The src attribute in the <script> element must point to a copy of jQuery.
Download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file.

Note: When you download jQuery, the file name may contain a version number, e.g., jquery-x.y.z.js.
Make sure to either rename this file to jquery.js or update the src attribute of the <script> element to match the file name.

2. Launching Code on Document Ready

To ensure that their code runs after the browser finishes loading the document,
many JavaScript programmers wrap their code in an onload function:

window.onload = function() {
 
    alert( "welcome" );
 
};

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads.
To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {
 
    // Your code here.
 
});

For example, inside the ready event, you can add a click handler to the link:

$( document ).ready(function() {
 
    $( "a" ).click(function( event ) {
 
        alert( "Thanks for visiting!" );
 
    });
 
});

Copy the above jQuery code into your HTML file where it says "// Your code goes here".
Then, save your HTML file and reload the test page in your browser.
Clicking the link should now first display an alert pop-up,
then continue with the default behavior of navigating to http://jquery.com.

For click and most other events, you can prevent the default behavior
by calling event.preventDefault() in the event handler:

$( document ).ready(function() {
 
    $( "a" ).click(function( event ) {
 
        alert( "As you can see, the link no longer took you to jquery.com" );
 
        event.preventDefault();
 
    });
 
});

Try replacing your first snippet of jQuery code,
which you previously copied in to your HTML file, with the one above.
Save the HTML file again and reload to try it out.

Complete Example

The following example illustrates the click handling code discussed above,
embedded directly in the HTML <body>. Note that in practice,
it is usually better to place your code in a separate JS file and load it
on the page with a <script> element's src attribute.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
 
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });
 
    </script>
</body>
</html>

http://api.jquery.com/ready/

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

// fn is a type of function.

// 1.
$(fn);

// 2.
$(document).ready(fn);

// 3.
$("document").ready(fn);

// 4.
$("img").ready(fn);

// 5.
$().ready(fn);

// an implemention of onReady function.

// onReady function 
var onReady = function(fn){
    var old = window.onload;
    if(typeof old != 'function'){
        window.onload = fn;
    }else{
        window.onload = function(){
            old();
            fn();
        }
    }
}

// An usage of example:
onReady(function(){
    console.log(1);
});
onReady(function(){
    console.log(2);
});
onReady(function(){
    console.log(3);
});

3. Adding and Removing an HTML Class

Important: You must place the remaining jQuery examples inside the ready event
so that your code executes when the document is ready to be worked on.

Another common task is adding or removing a class.

First, add some style information into the <head> of the document, like this:

<style>
a.test {
    font-weight: bold;
}
</style>

Next, add the .addClass() call to the script:

$( "a" ).addClass( "test" );

All <a> elements are now bold.

To remove an existing class, use .removeClass():

$( "a" ).removeClass( "test" );

Special Effects

jQuery also provides some handy effects to help you make your web sites stand out. For example, if you create a click handler of:

$( "a" ).click(function( event ) {
 
    event.preventDefault();
 
    $( this ).hide( "slow" );
 
});

Then the link slowly disappears when clicked.

4. Callbacks and Functions

Unlike many other programming languages,
JavaScript enables you to freely pass functions around to be executed at a later time.
A callback is a function that is passed as an argument to another function and is
executed after its parent function has completed.

Callbacks are special because they patiently wait to execute until their parent finishes.
Meanwhile, the browser can be executing other functions or doing all sorts of other work.

To use callbacks, it is important to know how to pass them into their parent function.

4.1 Callback without Arguments

If a callback has no arguments, you can pass it in like this:

$.get( "myhtmlpage.html", myCallBack );

When $.get() finishes getting the page myhtmlpage.html, it executes the myCallBack() function.

Note: The second parameter here is simply the function name
(but not as a string, and without parentheses).

4.2 Callback with Arguments

Executing callbacks with arguments can be tricky.

4.2.1 Wrong

This code example will not work:

// call myCallback() function immediately.
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

The reason this fails is that the code executes myCallBack( param1, param2 ) immediately
and then passes myCallBack()'s return value as the second parameter to $.get().
We actually want to pass the function myCallBack(), not myCallBack( param1, param2 )'s return
value (which might or might not be a function).
So, how to pass in myCallBack() and include its arguments?

4.2.2 Right

To defer executing myCallBack() with its parameters, you can use an anonymous function as a wrapper.
Note the use of function() {}. The anonymous function does exactly one thing: calls myCallBack(),
with the values of param1 and param2.

// define an anonymous function, 
// which invoke myCallback() inside its function body.
$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

When $.get() finishes getting the page myhtmlpage.html,
it executes the anonymous function, which executes myCallBack( param1, param2 ).

<hr/>

What is the difference between these jQuery ready functions?


// what is difference between

$(function(){

});

// and
$(document).ready(function() { 

});

Answer:

Link 1.

Link 2.

The two ways are equivalent, I personally prefer the second, $(function() {}); it's just a shortcut for document ready.

About the new jQuery(document)... construct, you don't really need to use the new operator, jQuery will use it internally if you don't.

The argument that the ready handler function receives, is the jQuery object itself.

That's quite useful where you have to run jQuery in compatibility mode with other libraries, for example:

jQuery(function ($) {
// use $ here
});

The $ argument inside the callback will refer to the jQuery object, outside that function it might refer to another library like PrototypeJS.

-

分享到：

Html 文件头声明写与不写的区别 | VMWare网络设置的3中方式

2016-03-04 13:22
浏览 1156
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery是如何工作的？(关键词： jquery, JQuery)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery是如何工作的？(关键词： jquery, JQuery)

评论

发表评论

相关推荐

Javascript 测试框架之 隐式声明 之 describe

JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）

JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await

JavaScript之ECMAScript6新特性之_01_开篇

jQuery Versions - browser support

基于HTML5实现的中国象棋游戏

JavaScript之跨域请求解决方案

JavaScript之 25 道面试题

JavaScript小应用之分页算法

jQuery之empty() VS. remove()

jQuery之 prop() VS. attr()

jQuery之mouseover,mouseover,mouseout,mouseleave

javascript之JS操作iframe

javascript之面向对象编程之原型继承

HTML5之Cookie,localStorage 与 sessionStorage

jquery之live(), delegate(), on() 方法

javascript之小应用：网页在线聊天

javascript之编程序题目

javascript之面向对象编程之属性继承

javascript 之 undefined

最近访客更多访客>>

Javascript 测试框架之隐式声明之 describe