jquery is a fast, compact JavaScript library with powerful features.
Its basic functions include:
1) Accessing and manipulating DOM elements
2) control page style (can be compatible with various browsers)
3) Handling of page events
4) The use of a large number of plugins in the page
5) The perfect combination of Ajax technology
jquery has changed the way many programmers use JavaScript.
jquery Official Homepage code example:
1) DOM Traversal and manipulation
Set the text content of the <button> of class continue to "Next Step ..."
1 |
$( "button.continue" ).html( "Next Step..." ) |
2) Event handling
When you click on any button under the #button-container container, a hidden #banner-message button is displayed, which is hidden using CSS display:none.
1234 |
var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click" , function ( event ) { hiddenBox.show(); }); |
3) Ajax
Call the/api/getweather program on the server and pass the parameter as zipcode=97201, and the returned result is displayed in #weather-temp.
123456789 |
$.ajax({
url:
"/api/getWeather"
,
data: {
zipcode: 97201
},
success:
function
( data ) {
$(
"#weather-temp" ).html(
"<strong>"
+ data +
"</strong> degrees"
);
}
});
|
Some other examples are:
1) Building a jquery development environment
(1) Download in http://jquery.com.
(2) reference in the script tag:
1 |
< script language = "javascript" type = "text/javascript" src = "Jscript/jquery-1.7.1.js" ></ script > |
2) Example of a simple pop-up window
1234567891011121314 |
<
html
>
<
head
>
<
title
>jQuery程序1</
title
>
<
script
language
=
"javascript"
type
=
"text/javascript"
src
=
"jquery/jquery-1.7.1.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function(){
alert("Hello,http://www.169it.com!!!");
})
</
script
>
</
head
>
<
body
>
</
body
>
</
html
>
|
$ (document). Ready (function () {}) is the jquery code, equivalent to Window.onload, which can be simply written as $ (function () {})
3) jquery's chain-style notation
1234567 |
<script type=
"text/javascript"
>
$(
function
(){
$(
".divTitle"
).click(
function
(){
$(
this
).addClass(
"divCurrColor"
).next(
".divContent"
).css(
"display"
,
"block"
);
});
});
</script>
|
4) jquery Access DOM Object
JavaScript mode:
1234 |
var tDiv=document.getElementById( www.169it.com "divTmp" ); var oDiv=document.getElementById( "divOut" ); var cDiv=tDiv.innerHTML; oDiv.innerHTML=cDiv; |
jquery Method:
1234 |
var tDiv=$( "#divTmp" ); var oDiv=$( "#divOut" ); var cDiv=tDiv.html(); oDiv.html(cDiv); |
5) dynamically toggle CSS style:
12345 |
$( function (){ $( ".divDefault" ).click( function (){ $( this ).toggleClass( "divClick" ).html( "点击后的样式" ); }); }); |
jquery Homepage The latest version download:
Currently jquery includes 1.x series and 2.x series, as follows:
Jquery
The source of this article :jquery overview, code examples, and the latest version of the download