A little bit of jquery's understanding

Overview

jquery is another excellent JavaScript library following prototype. It is a lightweight JS library. It is compatible with CSS3 and is also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). JQuery2.0 and perhaps version numbers will no longer support IE6/7/8 browsers. jquery makes it easier for users to work with HTML (an application under the standard Universal Markup Language), events, animate, and easily provide Ajax interaction for the site. Another big advantage of jquery is that its documentation is very full, and the various applications are very specific, and at the same time there are many mature plugins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, there is no need to insert a bunch of JS in the HTML to invoke the command, just need to define the ID.
jquery is a multi-browser-compatible JavaScript library, with the core idea of write Less,do more (write less and do many others). jquery was published in January 2006 by American John Resig in BarCamp, New York. Attracted a number of JavaScript gurus from around the world, and was developed by the team led by Dave Methvin. Right now. jquery has become the most popular JavaScript library. In the top 10,000 most visited sites in the world. There are more than 55% jquery in use.
jquery is free, open source, and uses the MIT license Agreement. jquery's syntax is designed to make it easier for developers to manipulate document objects, select DOM elements, animate, event handling, use Ajax, and other features.

Besides. jquery provides APIs for developers to write plug-ins.

Its modular approach makes it easy for developers to develop powerful static or dynamic Web pages.
JQuery, as implies, is JavaScript and query. This is the library that the auxiliary JavaScript develops.

Selector Selector

Cascade Selector

$ ("form input")         selects all of the input elements in the form element $ ("#main > *")          to select all the child elements of the ID value of main ("label + input")     Selects the next INPUT element node of the entire label element, and the test selector returns a full input tag element ("#prev ~ div") followed by the label tag directly following the label.       

Basic Filter Selector

$ ("Tr:first")               selects the first $ ("Tr:last") of all TR elements and                selects the last $ ("Input:not (: Checked) + span") of all TR elements   

ID Label class

$ ("#myELement")    Select an element with an ID value equal to myelement. ID value cannot be repeated in the document only can have an ID value is myelement so get the unique element $ ("div")           Select all div tag element, return div element array $ (". MyClass")      Select all elements of CSS using the MyClass class $ ("*")             

Attribute Filter Selector

$ ("Div[id]")              Select all the div element containing the id attribute $ ("input[name= ' newsletter ')")    Select all the name attribute equals ' newsletter ' of the INPUT element  $ (" input[name!= ' newsletter ') Select all the name attribute is not equal to ' newsletter ' of the INPUT element  $ ("input[name^= ' News ']")         Select all the Name property with ' News ' to start with the INPUT element $ ("input[name$= ' News")         to select the all Name property with ' News ' to end the INPUT element $ ("input[name*= ' Man ']")          Select the all Name property including the ' news ' INPUT element  $ ("input[id][name$= ' Man ']")    

Form element Selector

$ (": input")                  selects all the form input elements. Contains input, textarea, select, and Button  $ (": Text") to select all the                     text INPUT element $ (":p assword")           to select all the password INPUT element $ (": Radio ") Select all the                   radio INPUT element $ (": checkbox ")            Select all the checkbox INPUT element $ (": Submit ")               Select all the Submit INPUT element $ (": Image ") Select all the                 image INPUT element $ (": Reset ") to select all the                   reset INPUT element $ (": Button ")                to select all the button INPUT element $ (": File ")                     Select all of the file input elements $ (": Hidden")               

Event Bindings

JQuery appends an event handler to all matching elements, even if the element is added later.

This method is basically yes. A variant of the bind () method.

When using. bind (). The element that the selector matches is appended with an event handler function. The elements that are added later will not. This requires a second use. bind (). Say

<body>  <div class= "ClickMe" >click here</div></body>

The ability to bind a simple click event to this element:

$ ('. ClickMe '). Bind (' click ', Function () {  alert ("Bound handler called.");});

When you click on an element, a warning box pops up. And then. Imagine that after that there is another element to join in.

$ (' body '). Append (' <div class= "ClickMe" >another target</div> ');

Although this new element can also match the selector ". ClickMe", this element is added after calling. Bind (). So clicking on this element will not have any effect whatsoever.

The. Live () provides a way to do the appropriate scenario. Let's say we bind the Click event like this:

$ ('. ClickMe '). Live (' click ', Function () {  alert ("Live handler called.");});

Then add a new element:

$ (' body '). Append (' <div class= "ClickMe" >another target</div> ');

Then click on the new element and he will still be able to trigger the event handler function.

Event bubbling

The bubbling event is clicking on the child node. The Click events of the parent node, the ancestor node, are triggered up.

The following is the HTML code section:

<body><div id= "content" >    outer div element    <span> inner span element </span>    Outer div element </div> <div id= "MSG" ></div></body>

the corresponding jquery code is as follows:

<script type= "Text/javascript" >$ (function () {    //For span element binding Click event    $ (' span '). BIND ("click", Function () {        var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";//Get HTML information        $ (' #msg '). html (TXT);//Set HTML information    });    Bind the Click event    $ (' #content ') for the DIV element. bind ("click", Function () {        var txt = $ (' #msg '). The HTML () + "<p> outer div element is clicked. <p/> ";        $ (' #msg '). html (TXT);    });    Binds the Click event    $ ("body") to the BODY element. Bind ("click", Function () {        var txt = $ (' #msg '). The HTML () + "<p>body element is clicked. <p/> ";        $ (' #msg '). html (TXT);    }) </script>

When you click Span, the div and body click events are triggered. Clicking on a div triggers the body's Click event.

How do you prevent such bubbling events from happening?

Changes such as the following:

<script type= "Text/javascript" >$ (function () {       //For span element binding Click event    $ (' span '). BIND ("click", Function ( Event) {        var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";        $ (' #msg '). html (TXT);        Event.stoppropagation ();  block event bubbling    });    Bind the Click event    $ (' #content ') for the DIV element. bind ("click", Function (event) {        var txt = $ (' #msg '). HTML () + "<p> The outer div element is clicked .<p/> ";        $ (' #msg '). html (TXT);        Event.stoppropagation ();  block event bubbling    });    Binds the Click event    $ ("body") to the BODY element. Bind ("click", Function () {        var txt = $ (' #msg '). The HTML () + "<p>body element is clicked. <p/> ";        $ (' #msg '). html (TXT);    }) </script>

Event . Stoppropagation (); // Block event bubbling

Sometimes clicking submit button will have some default events.

For example, jump to another interface. However, if you do not pass the verification, you should not jump. This time can be set by Event.preventdefault (); Block default behavior (form submission).

Here are the cases:

<script type= "Text/javascript" >$ (function () {   $ ("#sub"). Bind ("click", Function (event) {         var username = $ ("#username"). Val ();  Gets the value of the element. The Val () method returns or sets the value of the selected element.         if (username== "") {     //infer whether the value is empty             $ ("#msg"). HTML ("<p> text box value cannot be null .</p>");  Hint Information             event.preventdefault ();  Block default behavior (form submission)}         )   }) </script>

HTML section:

<body><form action= "test.html" > User name: <input type= "text" id= "username"/><br/><input type= " Submit "value=" Submission "id=" sub "/></form><div id=" MSG "></div></body>

Another way to prevent the default behavior is to return false.

The same effect.

The code is as follows:

<script type= "Text/javascript" >$ (function () {   $ ("#sub"). Bind ("click", Function (event) {         var username = $ ("#username"). Val ();  Gets the value of the element         if (username== "") {     //infers whether the value is empty             $ ("#msg"). HTML ("<p> text box value cannot be null .</p>");  Prompt message             return false;}})   }) </script>

Similarly, the above bubbling event can also be handled by return false.

<script type= "Text/javascript" >$ (function () {       //For span element binding Click event    $ (' span '). BIND ("click", Function ( Event) {        var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";        $ (' #msg '). html (TXT);        return false;    });    Bind the Click event    $ (' #content ') for the DIV element. bind ("click", Function (event) {        var txt = $ (' #msg '). HTML () + "<p> The outer div element is clicked .<p/> ";        $ (' #msg '). html (TXT);        return false;    });    Binds the Click event    $ ("body") to the BODY element. Bind ("click", Function () {        var txt = $ (' #msg '). The HTML () + "<p>body element is clicked. <p/> ";        $ (' #msg '). html (TXT);    }) </script>

Event entrusted

Concept

What is the event entrusted: In Layman's words, the event is onclick,onmouseover,onmouseout, and so is the event. Entrusted, is to let others do, this event is added to some elements, but you add to others to do. Complete the event.

For example: Three colleagues are expected to receive a courier in Monday. In order to sign Express, there are two ways: one is three people at the door of the company and other courier. Second, entrusted to the front desk mm on behalf of sign. In reality, most of us adopt the scheme of entrust (the company will not tolerate so many employees standing at the door in order to wait for courier).

The front desk mm receives the courier, she will infer who the recipient is. And sign the recipient's request. Even on behalf of the payment. Another advantage of such a solution is that even if the company comes with new employees (no matter how many), the front desk mm will be sent to the new staff after The courier to verify and sign on behalf of.

Principle

Using the bubbling principle, the event is added to the parent, triggering the effect of the operation.

Role

Better performance
Directly capable of owning events for newly created elements

Event Source

Same as this (he doesn't have to look at the problem.) WHO operates WHO), the event object under the

Usage Scenarios

Bind the same event for very many elements in the DOM
Bind an event to an element that does not already exist in the DOM

jquery Event entrusted

$ (function () {     $ (' #ul1, #ul2 '). Delegate (' Li ', ' click ', Function () {         if (!$ (this). attr (' s ')} {         $ (this). css (' Background ', ' red ');         $ (this). attr (' s ', true);         } else {             $ (this). CSS (' background ', ' #fff ');             $ (this). Removeattr (' s ');         }     }) });

The newest on () method takes the delegate () method

$ (function () {         $ (' #ul1, #ul2 '). On (' Click ', ' Li ', function () {                 if (!$ ()} attr (' s ')) {                 $ (this). CSS (' Background ', ' red ');                 $ (this). attr (' s ', true);                 } else {                         $ (this). CSS (' background ', ' #fff ');                         $ (this). Removeattr (' s ');                 }         }) });

Event Monitoring

Event monitoring is accurate to say is the JS engine on the user mouse, keyboard, form events, such as the monitoring of the action, that is, for the user's corresponding operation to carry out additional events, often used similar to btnadd.onclick= "alert (' 51obj.cn ')" is a simple add-on event, just such a method does not support attaching multiple events and deleting events. The following code implements the Delete event after attaching an event (IE)

Summarize

This understanding of jquery. Mainly explain the basic knowledge, the original rational things are more

A little bit of jquery's understanding