HTML Jquery and htmljquery
Using jQuery Technology in "webpage making Dreamweaver (floating dynamic hierarchical navigation)", you can easily implement drop-down, display, and hide menu effects without having to modify the style sheet a little bit, it saves a lot of trouble, so how to use jQuery is detailed below:
1. installation:
Http://jquery.com/download/log on to the jquerydownload site, which has the following features:
General developers can choose to download (1). The file is small and enough. Of course, jQuery needs to be developed for downloading (2)
After the download is complete, enter dwx and import it in the
<Head>
<Script type = "text/javascript" src = "js/jquery-1.4.2.min.js"> </script>
</Head>
(HTML5 does not need to write type = "text/javascript ")
------------------------------
2. syntax and selector:
$ (Selector). action ()
Dollar sign defines jQuery
Selector: "query" and "Search" HTML elements -- selector
JQuery action () executes operations on elements -- events
Selector usage:
Syntax |
Description |
$ (This) |
Current HTML Element |
$ ("P ") |
All <p> Elements |
$ ("P. intro ") |
All <p> elements of class = "intro" |
$ (". Intro ") |
All class = "intro" Elements |
$ ("# Intro ") |
Id = "intro" element |
$ ("Ul li: first ") |
The first <li> element of each <ul> |
$ ("Your href00000000'.jpg ']") |
All href attributes with attribute values ending with ". jpg" |
$ ("Div # intro. head ") |
All the elements of class = "head" in the <div> element of id = "intro" |
Event
Definition
That is, the method called when something happens in HTML (click, move the mouse, and so on ).
$ (Selector ).Action ()
Trigger
There are two ways to trigger an event:
1. Write the event click directly in <javascript>.
<Head>
<Script type = "text/javascript" src = "/jquery. js">
</Script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("P"). hide ();
});});
</Script>
</Head>
<Body>
<Button type = "button"> click here to make the text disappear </button>
<P> I will disappear </p>
</Body>
* Writing methods and functions of various Event functions:
Event Function |
Bind a function |
$ (Document). ready (function) |
Bind the function to the ready event of the document (when the document is loaded) |
$ (Selector). click (function) |
Click events that trigger or bind a function to the selected Element |
$ (Selector). dblclick (function) |
Double-click event that triggers or binds a function to the selected Element |
$ (Selector). focus (function) |
Events that trigger or bind a function to the retrieved focus of the selected Element |
$ (Selector). mouseover (function) |
A mouse hover event that triggers or binds a function to the selected element. |
2. Use onclick in the body tag to reference the method that has been written:
<Script> function visible1 ()
{
$ ("P"). hide ();
};
</Script>
</Head>
<Body>
<Input type = "button" onclick = "visible1 ()" value = "Click here to make the text disappear"/>
<P> I will disappear. </P>
Common jQuery Functions
1. hide/show/hide display switch:. hide (). show (). toggle ()
2. Fade In/fade out/fadeTo:. fadeIn (). fadeOut (). fadeToggle (). fadeTo ("time", "Transparency ")
3. Slide:. slideDown (). slideUp (). slideToggle ()
4. animation effect:. animation ({attribute value of css style sheet}, "slow/fast/custom duration (millisecond, remove double quotation marks )")
5. stop Animation:. stop () applies to all jQuery effect functions, including the following:
6. Callback usage: Execute the next function after the animation is executed. For example, the following part marked with an underline is Callback:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("P"). hide (1000, function () {alert ("The paragraph is now hidden ");
});
});
});
</Script>
7. Chaining: links to several functions, such:
<Script>
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("# P1" ).css ("color", "red"). slideUp (2000). slideDown (2000 );
});
});
</Script>
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
