Home > Developer > Web Develop
1. How to use jquery
jquery is a fast, concise JavaScript framework that is a good JavaScript code base ( or JavaScript framework ) after prototype. The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates the functionality code common to JavaScript, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.
You must download and reference jquery's JS file before using jquery, download the link as http://jquery.com/
When the download is complete, the jquery file is introduced
<script src= "Js/jquery.js" ></script>
In order to prevent the Chinese garbled in the jquery program, we should introduce
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <!--Prevent garbled--
2.jQuery Pop-up box
<script>
$ (document). Ready (function () {
Alert ("Show cue box, my first jquery program");
});
</script>
3.jQuery working with Div
<script>
$ (document). Ready (function () {//document = event that is triggered when the body is loaded
$ ("P"). Click (function () {///= label <p> Click event
$ (this). Hide (); Hide this tag
$ (this). HTML ("Sda5"); Change DIV content
$ (this). CSS ("Background-color", "blue")//Change the div's CSS background color
$ (this). CSS ("Color", "beige")//change the CSS font color of div
});
});
</script>
<body>
<p>sda1</p>
<p>sda2</p>
<p>sda3</p>
<p>sda4</p>
</body>
4.jQuery operation of the Class,id,type
<script>
$ (document). Ready (function ()
{
$ (": Button"). Click (function ()//Specify to Type= "button" to define the Click event
{
$ (". Test"). Hide (); Specify to Class= "test", define hidden
});
$ (". Button"). Click (function ()//Specify to Type= "button" to define the Click event
{
$ ("#test"). Hide (); Specify to Class= "test", define hidden
});
});
</script>
<body>
<p class= "Test" > This tag references the class test, the triggering event disappears </p>
<a class= "Test" > This tag also references the class test, the trigger event disappears </a>
<a id= "Test" > This tag also references id:test, triggering event disappears </a>
<p id= "Test" > This tag does not refer to </p>
<input type= "button" value= "ClickMe"/> <!--click Trigger Event--
</body>
"How to use jquery" "jquery Popup" "jquery to manipulate div"
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
