How do I learn about jquery? (3) Click events, special offer on Singles Day

 

Hey, today is the legendary-Year-Old spam festival. I wish all the bachelors a Father's Day next year!

Although jquery's memoir has been around for three days, the pace is still very slow, mainly to take care of new people, because each person may have different abilities to accept, some people, after reading the jquery API, you will know how to use it. Some people may not even know what the event is. Be diligent and make up for it. Try harder and don't waste your time on complaints. Of course, I did not write this because I had nothing to do, nor was it a so-called meaningless spirit of sharing. I am not a teacher, but a kind of sorting out previous knowledge, and my wife is about to turn to the front-end, so I explained it with her ability to accept. Maybe I will record the video next time. However, the previous video is still very simple and can be described in text. My technology is limited, if there are any errors, please correct them. Set up another Q group: 70210212.

Click here for the case in this article.

When it comes to events, what is the actual event? The so-called event: it refers to any command you send to the page, and then it responds to the command. This is the event, and any operation of you will generate a signal, for example, after you click the mouse, the system will handle the mouse clicking event. For example, if you press the keyboard, the keyboard event will be triggered. This seems to be a matter of course, but can I trigger the mouse event when I click the keyboard? This requirement seems a little too much. Is it actually feasible? If you want to open a page, you need to call Ctrl + D to add favorites, this is not the case. You must use a keyboard. It's a bit difficult to say. Let's look at the picture and tell the story. Please watch the screen.

 

 

Events are classified into Keyboard Events and mouse events, for example:

 

 

Is it a little complicated? These are for reference only, because today we only want to talk about a small Click event in the mouse event, so don't be scared. The click event is triggered when the mouse is clicked and released. There is a problem here. If I have a button on a page, I write an event Method on the body, then click the button. Will the body click event be triggered? Okay. Let's look at the Code:

 

Html:
<Input type = "submit" id = "mybtn" value = "submit"/>
Js:

$ ("# Mybtn"). click (function (e ){
Console. log ("this is button ");
E. preventDefault ();
});
$ ("Body"). click (function (){
Console. log ("this is body ");
});

 

The result is printed in the firebug console:

 

This indicates that the button is triggered first after the button is clicked, and then its parent level is triggered to the outer layer. This is the so-called bubble event. No matter how many layers you set, it will perform bubbles from inside to outside. Therefore, the execution sequence of click events is that when a user clicks a DOM node, a click event is sent to the target node, its parent node, parent node, and so on until the outermost layer of the document tree. This process is called bubbling. In some cases, you may want to prevent bubbling so that the event only occurs on the target node. You can use the event parameter e. stopPropagation (); the above Code also has an e. preventDefault (), which means to block system default events. Because I use the submit Control, this is used to block form submission. Of course, you can also use return false; to block it. We can see that the jquery event writing method is $ ("domquery "). click (function (e ){....}); this e parameter can be omitted when it is not needed. If we want to get its own node, we can call $ (this) in the function );

Well, we can use the knowledge we have just learned to make a judgment that the form submission is not empty. We can only make practical things based on the powerful theory. Otherwise, you just want to take a look. If you look at gossip, I suggest you give up. Gossip is definitely much better than what I wrote. To put it bluntly, I first post my code. You can write it without looking at the code.

 

 

 

Html:

<Form id = "myform">

<P>

* Name: <input type = "text" name = "name"/>

</P>

<P>

* Gender: <input type = "radio" value = "1" name = "sex"/> male <input type = "radio" value = "0" name = "sex"/> female

</P>

<P>

* Revenue: <select name = "money">

<Option value = "-1"> select </option>

<Option value = "1"> low income </option>

<Option value = "2"> medium income </option>

<Option value = "3"> high income </option>

</Select>

</P> www.2cto.com

<Input type = "submit" id = "mybtn" value = "submit"/>

</Form>

 

JS:

<Script>

$ (Function (){

$ ("# Mybtn"). click (function (e ){

Var nameValue = $ ("[name = 'name']"). val ();

Var sexValue = $ ("[name = 'sex']: checked"). val ();

Var moneyValue = $ ("[name = 'money']"). val ();

If (nameValue. length <6 ){

Alert ('name length cannot be less than six characters! ');

$ ("[Name = 'name']"). select ();

Return false;

}

If (! SexValue) // null, undefined, "", false

{

Alert ("select gender! ")

$ ("[Name = 'sex']"). focus ();

Return false;

}

If (moneyValue =-1)

{

Alert ('select revenue ');

$ ("[Name = 'money']"). focus ();

Return false;

}

Console. log ($ ("[name = 'money']"). val ())

Return true;

// E. stopPropagation (); // block the bubble event

// E. preventDefault (); // block system events, such as form submission

});

});

</Script>

 

 

The execution result is as follows:

First, let's take a look at html. There is no JS in html, including The onclick of nodes. The layout is just finished, which is also a benefit of the JS library, you write $ (...). clcik (function () {}) defines an event for this node. If you do not include this function ($ (...). click (empty) is the click event that calls this node, which achieves separation between HTML and JS. In JS, you must note that the value of checkbox must be $ (": checkbox: checked "). val (). If you directly retrieve val () from the control, the value is also not selected, as is radio. However, the strange thing is that you cannot get $ (": selected) for the select control ). val (); it is a bit confusing, but you can use it to obtain the selected option. If the value is $ ("# sel "). val. It determines that the length of a string is the length attribute, and it does not take up two English characters. Therefore, if you want to process Chinese characters as two characters, you need to write a regular expression. Next, let's talk about it again.

Here, the click event is basically over. It's just a bit cool. If you don't want me to be so tired, you should try again and do it again, it takes less than half an hour.

In my article on how to understand jquery (II) and complex choices, I finally mentioned that there are many methods to select all, and I have told you to try it out, let's announce it today. The functional requirements are as follows:If you select one or more, select all.It has three levels of meaning

1. When you select one or more instances, all instances are automatically checked.
2. When you select all as checked, all are selected.
3. Cancel all selected items

 

The HTML code is as follows:

<Table class = "list">

<Thead>

<Tr> <th> select all <input type = "checkbox" name = "chkAll"/> </th> <th> name </th> <th> gender </th> <th> revenue </th> </tr> </thead>

<Tbody>

<Tr> <td> <input type = "checkbox"/> </td> <td> Zhang San </td> <td> male </td> <td> low </td> </tr>

<Tr> <td> <input type = "checkbox"/> </td> <td> Li Si </td> <td> male </td> <td> moderate </td> </tr>

<Tr> <td> <input type = "checkbox"/> </td> <td> Wang Wu </td> <td> male </td> <td> low </td> </tr>

<Tr> <td> <input type = "checkbox"/> </td> <td> Fan Bingbing </td> <td> female </td> <td> high </td> </tr>

<Tr> <td> <input type = "checkbox"/> </td> <td> Li Bingbing </td> <td> female </td> <td> high </td> </tr>

</Tbody>

</Table>

The JS Code is as follows:

******************/

$ (". List [name = 'chall']"). click (function (){

$ (This ). closest ("table "). find (": checkbox "). not ($ (this )). attr ("checked", $ (this ). attr ("checked "));

});

$ (". List: checkbox"). click (function (){

If ($ (this). attr ("checked "))

$ (This). closest ("table"). find ("[name = 'chkall']"). attr ("checked", true );

}); If you still do not understand this, you can read the previous article: How do I understand jquery (2), complex Selection Operator

Do not ask me any questions. Please read this article repeatedly or join my Q group 70210212 for discussion. Happy Singles Day!

Click here for the case in this article.

Author: Tian xiangbing blog address: http://www.cnblogs.com/tianxiangbing