Home > Developer > Web Develop
The jquery event handling method is the core function in jquery.
The event handler refers to the method that is called when certain events occur in the HTML. The term "triggered" (or "fired") by an event is often used.
The JQuery code is usually put into the
Instance<HTML><Head> <Scripttype= "Text/javascript"src= "Jquery.js"></Script> <Scripttype= "Text/javascript">$ (document). Ready (function () { $("Button"). Click (function () { $("P"). Hide (); }); }); </Script></Head> <Body> <H2>This is a heading</H2> <P>This is a paragraph.</P> <P>This is another paragraph.</P> <Button>Click Me</Button> </Body></HTML>
In the example above, a function is called when the button's Click event is triggered:
$ ("button"). Click (function () {: Some code ...} )This method hides all <p> elements:
$ ("P"). Hide ();If your site contains many pages, and you want your jquery function to be easy to maintain, put your jquery function in a separate. js file.
When we demonstrate jQuery in the tutorial, the function is added directly to the
Instance<Head><Scripttype= "Text/javascript"src= "Jquery.js"></Script> <Scripttype= "Text/javascript"src= "My_jquery_functions.js"></Script></Head>JQuery Name conflict
jquery uses the $ symbol as a way to profile jquery.
Functions in some other JavaScript libraries, such as Prototype, also use the $ notation.
JQuery uses a method called noconflict () to resolve the problem.
var jq=jquery.noconflict (), which helps you to use your own name (such as JQ) instead of the $ symbol.
ConclusionBecause JQuery is specifically designed to handle HTML events, your code is more appropriate and easier to maintain when you follow these guidelines:
· Put all jQuery code in the event handler
· Place all event handlers in the document-ready event handler
· Put the JQuery code in a separate. js file
· Rename the JQuery library if there is a name conflict
JQuery EventsHere are some examples of the event methods in JQuery:
Event function |
Bind function to |
$ (document). Ready (function) |
Bind a function to a document's Ready event (when the document finishes loading) |
$ (selector). Click (function) |
A click event that triggers or binds a function to the selected element |
$ (selector). DblClick (function) |
A double-click event that triggers or binds a function to the selected element |
$ (selector). focus (function) |
Trigger or bind a function to the Focusable event of the selected element |
$ (selector). MouseOver (function) |
Mouse hover event that triggers or binds a function to the selected element |
Web Development Technology--jquery2 (event)
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
