JQuery Introduction
Disadvantages of common JavaScript: different controls are operated in different ways, and different browsers are different. It is very troublesome to write cross-browser programs. Therefore, many JavaScript encapsulation libraries, such as Prototype, Dojo, ExtJS, and JQuery, are generated. These libraries encapsulate JavaScript and simplify development. These libraries are JavaScript encapsulation, that is, we call a function of JQuery. This function in JQuery helps us call dozens of JavaScript code sentences, because JQuery is a function class written in JavaScript syntax, it still calls JavaScript internally, so it does not replace JavaScript. JavaScript technology is still required to use JQuery code and compile JQuery extension plug-ins. Jquery itself is a bunch of JavaScript Functions.
Why JQuery?
Small size, easy to use (Write Less, Do More, eat Less dry, and many large companies are currently supporting JQuery, such as Microsoft, Microsoft inherited JQuery in vs2010.
What can JQuery do?
The common Dom that JQuery can do can also do.
Simple JQuery
Copy codeThe Code is as follows:
<Script src = "./js/jquery-1.4.2-vsdoc-cn.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Alert ("JQuery ");
})
</Script>
It is equivalent to an Onload event, but Onload can only register one event, while JQuery can register multiple events
JQuery object
JQuery objects cannot use methods of DOM objects or jQuery objects, but they can be converted to each other.
Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "./js/jquery-1.4.2-vsdoc-cn.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Window. onload = function (){
Var btn = document. getElementById ("btn ");
$ (Btn). val ("OK ");
}
</Script>
</Head>
<Body>
<Input id = "btn" type = "button" value = "button"/>
</Body>
</Html>
Convert JQuery object to DOM object
Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "./js/jquery-1.4.2-vsdoc-cn.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Var dom = $ ("# btn"). get (0 );
// Or
Var dom = $ ("# btn") [0];
Dom. value = "OK ";
})
</Script>
</Head>
<Body>
<Input type = "button" value = "button" id = "btn"/>
</Body>
</Html>
Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "./js/jquery-1.6.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var $ cr = $ ("# cr ");
Var vr = $ cr [0];
$ Cr. click (function (){
If (cr. checked ){
Alert ("thank you for your support. You can continue! ");
}
})
})
</Script>
</Head>
<Body>
<Input type = "checkbox" id = "cr"/> <label for = "cr"> I have read the Protocol </label>
</Body>
</Html>
$. () Is equivalent to Static Method
Functions that process Arrays
$. Map () converts the elements in one array to another.
Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "./js/jquery-1.4.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var arr = [3, 5, 7]; // defines an array
Arr = $. map (arr, function (value) {// The first parameter is the original array, and the second parameter is the processing function.
Return value + 1; // Processing Method
});
Alert (arr );//
});
</Script>
</Head>
<Body>
</Body>
</Html>
$. Each (array, fn) calls the fn function to process each element of the array arry. No return value is returned.
?Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script src = "./js/jquery-1.4.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var arr = {"first": "Zhang San", "second": "Li Si", "third": "Wang Wu"}; // define a dictionary Array
$. Each (arr, function (key, value) {// traverses the array. key represents the key and value represents the value.
Alert (key + "" + value );//
})
})
</Script>
</Head>
<Body>
</Body>
</Html>