I have known jquery for a long time, but I have never used it. Today I plan to learn some simple functions and the effects that are often used in daily projects.
Official Website: http://jquery.com/: http://code.google.com/p/jqueryjs/downloads/detail? Jquery-1.3.2.min.js & downloadbtn =
Its purpose is to write less, do more, and write lessCodeTo do more things.
1. First, let's look at a click instance:
HTML code:
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Divclick"). Click (function () {alert ("Hello jquery ");});
});
</SCRIPT>
</Head>
<Body>
<Div id = "divclick"> 1. triggered when you click the mouse -- click here </div>
<HR/>
</Body>
</Html>
Analysis:
$ (Document). Ready (function () {}); event after the file object is loaded. It is equivalent to writing onload (function () {}) in the body tag (){}).
$ ("# Divclick "). click (function () {alert ("Hello jquery") ;}); processes a mouse click event for an object with the ID divclick. $ ("# divclick ") it is equivalent to document. getelementbyid ("divclick ").
Compared with the past, 1. retrieving an object does not require document. for a long method like getelementbyid ("divclick"), you only need $ ("# divclick "). 2. events and functions are always written in the DOM object, for example, <Div id = "divclick" onclick = "() "> click </div> now only $ (" # divclick "). click (), the event processing of the object is placed in JavaScript code, implementing the separation of javascr into pT code and HTML code.
2. dynamically add styles for objects
CSS code:
<Style>
. Red {
Color: red;
}
</Style>
JavaScript code:
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Divcssclass"). Click (function () {$ ("# divcssclass"). addclass ("red ");});
});
</SCRIPT>
Dom code:
<Div id = "divcssclass"> 2. The font color turns red after you click it. Click </div>
3. Object Effects, show (), hide () Methods
Show (): Display hidden matching elements
Hide (): Hide all matching elements
For example:
JavaScript code:
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Divclickshow"). Click (function () {$ ("# divshow"). Show ();});
$ ("# Divclickhide"). Click (function () {$ ("# divshow"). Hide ();});
});
</SCRIPT>
Dom code:
<Span id = "divshow" style = "display: none"> 3. Display hidden matching elements. </span>
<Span id = "divclickshow"> display </span>
<Span id = "divclickhide"> hide </span>
You can use show ("slow") and hide ("slow") to see the effect if you want to show or hide the animation.
The effects of objects include toggle (), slidedown (speed, [callback]), fadein (speed, [callback]), and so on .... It is available in the jquery API manual.
4. Menus implemented by jquery
First, let's get to know the knowledge we will use:
1. $ ("# mainnav> li") matches all the sub-elements of the object with the ID of mainnav. The result is an array object.
2. Li. each (function (I) {}), the Li mentioned above is an array object, this method is to traverse this object, function (I) I in {} is the index of the traversal object.
3. When the Li. eq (I). Hover () member index of the Li array is I, the hover method is called.
4. Hover (over, out): move the cursor over an object and remove the object. Over is the method called when the mouse moves to the object, out is called when the mouse leaves the object.
CSS code:
<Style type = "text/CSS">
* {Margin: 0px; padding: 0px; List-style: none ;}
Body {font-size: 12px ;}
. Nav {float: Left; clear: Both; margin: 100px; display: inline ;}
. Nav Li {float: Left; position: relative ;}
. NAV Li a {display: block; width: 60px; padding: 8px 0px 6px; text-align: center; color: #000; Background: # CCC; text-Decoration: none ;}
. Nav Li A: hover {Background: #666; color: # FFF ;}
. Nav Li ul {position: absolute; display: none ;}
. Nav Li ul Li {float: none ;}
. Nav Li ul Li a {Background: # Eee ;}
</Style>
JavaScript code:
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
VaR li = $ ("# mainnav> li"); // locate # mainnav neutron element Li to obtain the array Li;
Li. Each (function (I) {// loop every Li
Li. eq (I). Hover (
Function (){
$ (This). Find ("Ul"). Show (); // when you move the cursor over it, set the UL element in Li to display.
},
Function (){
$ (This). Find ("Ul"). Hide (); // when the mouse leaves, locate the UL element in Li and set it to hidden.
}
)
})
})
</SCRIPT>
Dom code:
<Body>
<Ul id = "mainnav" class = "nav">
<Li> <a href = "#"> first page </a> </LI>
<Li> <a href = "#"> Company Profile </a>
<Ul>
<Li> <a href = "#"> employee profile </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Department Information </a>
<Ul>
<Li> <a href = "#"> Technology Department </a> </LI>
<Li> <a href = "#"> O & M Department </a> </LI>
</Ul>
</LI>
</Ul>
</Body>
5. Implement Ajax using jquery
If you manually create an XMLHTTPRequest object to send an asynchronous request, we will write a large piece of code in the past, such:
<SCRIPT type = "text/JavaScript">
VaR Req = NULL;
Function processreqchange (){
If (req. readystate = 4 & Req. Status = 200 ){
VaR dobj = Document. getelementbyid ('htmldiv ');
Dobj. innerhtml = Req. responsetext;
}
}
Function loadurl (URL ){
If (window. XMLHttpRequest ){
Try {Req = new XMLHttpRequest ();
} Catch (e) {Req = false ;}
} Else if (window. activexobject ){
Try {Req = new activexobject ('msxml2. xmlhttp ');
} Catch (e ){
Try {Req = new activexobject ('Microsoft. xmlhttp ');
} Catch (e) {Req = false ;}
}}
If (req ){
Req. onreadystatechange = processreqchange;
Req. Open ('get', URL, true );
Req. Send ('');
}
}
Loadurl (“aaa.html ");
</SCRIPT> -- finally, the result of asynchronous execution is assigned to the htmldiv element with the ID.
Because jquery has implemented Ajax at the underlying layer, in most cases, you do not need to directly operate the XMLHTTPRequest object. In the upper layer, you only need to call $. Get, $. Post, and so on. For example:
JavaScript code:
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Divclickajax"). Click (function (){
$. Get ("aaa.html", function (text ){
Alert (text );
});
});
})
</SCRIPT>
Dom code:
<Div id = "divclickajax"> click to execute an Ajax request </div>
Aaa.html content:
Ajax text!
Jquery is our applicationProgramWriting JS scripts provides a lot of convenience, and it is a good reality that HTML code is separated from Js. When using jquery, I really feel its elegance.
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
