How jQuery works

Reprint (https://www.cnblogs.com/caozengling/p/5337988.html)

There is a very important saying in the opening statement of jQuery: jQuery is designed to change the coding method of javascript. From this passage, we can see that jQuery itself is not a UI component library or other general AJAX class library. JQuery changes the way javascript is encoded!

So how does it implement its declaration? Here, use the following short usage process:

1. Find (create) jQuery object: $("selector");

2. Call the method of jQuery object to complete the work we need to do: $("selector"). Doorwork();

Well, jQuery is the simplest coding logic to change the coding mode of javascript. These two steps are the core of jQuery coding logic!

Creating jQuery objects is crucial to achieve this concise coding. Therefore, jQuery's dom element lookup capability is quite powerful. In addition, the methods of jQuery object must be limited, and the limited methods can not meet the growing requirements. Therefore, the extension ability of jQuery object methods must be provided.

The powerful dom element searching ability and arbitrary method extension are the core of jQuery!

Let's take a simple example to illustrate how jQuery works:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
</head> 
<body id="bd"> 
<a href="http://www.baidu.com">baidu</a> 
</body> 
</html> 
<script type="text/javascript" src="../Script/jquery.js"></script> 
<script type="text/javascript" > 
$(function(){ 
$("a").click(function(e){//1) Find $("a"); 2)jQuery object event click;3)jQuery object method hide 
$(this).hide("slow"); 
return false; 
}); 
}); 
</script>

jQuery has the idea of "configuration", which makes the setting of object properties / events easy to understand and very simple. The following is the initialization of a drag and drop component:

$(document).ready( 
function() 
{ 
$('#drag1′).Draggable({ 
handle: "ax", //Property settings 
onStart: function(el,x,y){ //Event listener settings 
} 
}); 
} 
);

You can see that $("#drag1") is to find and create a jquery object, and then call the Draggable method to drag and start initialization. When this method is called, a "configuration object" is passed to initialize the dragging operation. This idea of "configuration" greatly simplifies some coding steps, and is quite intuitive and easy to understand.

Here are three questions and answers:

1. Q: why is the jQuery object returned after $(selector)?

A: from the source code of jQuery, we can know that VaR $= jQuery. Therefore, when we operate $(selector), it is actually jQuery(selector) and creates a jQuery object. Of course, the correct writing should be as follows: var jq = new $(selector); JQuery uses a trick to avoid new externally. Inside the jQuery method: if (window = = this) return new jQuery(selector);

2. Q: why can we write $(selector).each(function(index) {...}) after creating a jQuery object; What about traversal?
A: in fact, when the jQuery(selector) method is called, an array is returned inside the jQuery(selector) method: return this.setArray(a); The body of each method is a for loop, which is called as method.call(this[i], i).

3. Q: why can jQuery achieve the plug-in extension of jQuery object properties / methods / events?
A: if you have some object-oriented knowledge of Java sciprt, you will know that the extended properties / methods and events on the jQuery.prototype object will "extend" the jQuery object. Based on this, jQuery is written as follows: jQuery.fn = jQuery.prototype. Therefore, when we extend a plug-in function, it is as follows:

jQuery.fn.check = function() { 
return this.each(function() { 
this.checked = true; 
}); 
};

In fact:

jQuery.prototype.check = function() { 
return this.each(function() { 
this.checked = true; 
}); 
};

To sum up, jQuery has brought us a simple and convenient coding model (1 > create jQuery objects; 2 > directly use the attributes / methods / events of jQuery objects), a powerful dom element Finder ($), plug-in programming interface (jQuery.fn), and the "configuration" object idea of plug-in initialization

Attachment: implement your own jQuery

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Page</title> 
</head> 
<body> 
<div id="d">divvv</div> 
<div id="fsd">fdsf</div> 
</body> 
</html> 
<script type="text/javascript"> 
//Implement your own MyQuery framework 
var MyQuery = function(selector){ 
if ( window == this ) return new MyQuery(selector); 
//Here, we only implement simple search of dom type, hehe 
var doms = document.getElementsByTagName(selector); 
var arr = []; 
for(var i=0; i<doms .length; i++){ 
arr.push(doms.item(i)); 
} 
return this.setArray(arr); 
} 
MyQuery.prototype.setArray = function( arr ) { 
this.length = 0; 
[].push.apply( this, arr ); 
return this; 
} 
MyQuery.fn = MyQuery.prototype; 
var $ = MyQuery; 

//Plug in extension 1)each 
MyQuery.fn.each = function(method){ 
for(var i=0,l=this.length; i<l; i++){ 
method.call(this[i],i); 
} 
} 
//Show extension 2) 
MyQuery.fn.show = function(){ 
this.each(function(i){ 
alert(i+":"+this.id+":"+this.innerHTML); 
}); 
} 
//debugger 
$("div").show(); 
</script></doms></script>

Tags: Javascript

Posted on Wed, 24 Nov 2021 17:14:13 -0500 by justbane