Jquery is an excellent JavaScript framework, especially its support for CSS and XPath makes it easier for us to write JavaScript! If you are not a JS master and want to write excellent
So how does it implement its declaration? Here, we use the following short procedure:
1) Search (create) jquery object: $ ("selector ");
2) Call the jquery object method to complete the work we need to do: $ ("selector"). doourwork ();
Jquery is the simplest encoding logic to change the Javascript encoding method. These two steps are the core of jquery's encoding logic!
To implement this simple encoding method, it is essential to create a jquery object. therefore, jquery's Dom element search capabilities are quite powerful. in addition, the methods of jquery objects must be limited, and the limited methods cannot meet the increasing requirements. Therefore, the extension capability of jquery object methods must be provided.
Powerful Dom element search capabilities and arbitrary method extensions are at the core of jquery!
Here is 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> No title 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 it easy to understand and easily set attributes/events of objects, such as the initialization of the next drag-and-drop component:
$ (Document). Ready (
Function ()
{
$ ('# Drag1'). draggable ({
Handle: "ax", // attribute settings
Onstart: function (El, x, y) {// event listener settings
}
});
}
);
As you can see, $ ("# drag1") is to find and create a jquery object, and then call the draggable method to perform drag-and-drop initialization. When this method is called, a "configuration" object is passed, initialize the configuration of the drag operation. this idea of "configuration" greatly simplifies some coding steps and is quite intuitive and easy to understand.
Three questions and answers:
Therefore, when we extend a plug-in function, the following is true:
Jquery. FN. Check = function (){
Return this. Each (function (){
This. Checked = true;
});
};
Actually:
Jquery. Prototype. Check = function (){
Return this. Each (function (){
This. Checked = true;
});
};
To sum up, jquery provides us with a simple and convenient encoding model (creating jquery objects; directly using jquery Object Attributes/methods/events ), A powerful Dom element finder ($) and plug-in programming interface (jquery. FN), and the "configuration" Object idea initialized by the plug-in.
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 );
// Only simple search of the DOM type is implemented here.
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 );
}
}
// Extension 2) show
Myquery. FN. Show = function (){
This. Each (function (I ){
Alert (I + ":" + this. ID + ":" + this. innerhtml );
});
}
// Debugger
$ ("Div"). Show ();
</SCRIPT>
The author of this article has been updated
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
