JQuery instance Summary 1

JQuery instance Summary 1

At present, there is a clear division of labor for web page development. HTML is responsible for page content, CSS is responsible for page styles, and JavaScrtpt is responsible for page behavior.

The JavaScrtpt library encapsulates many predefined objects and functions to help developers easily create highly interactive client pages and be compatible with various browsers.

 

JQ learning is based on several examples. Now, we can summarize the content in the previous two examples from a local perspective. The css design for html is not written here.

1. JQ Selector

The first choice for JQ operations is to get the node of the element. The parameter is a css selector.

 

Var codeObj = $ ("# id") // get it by id, $ (". class ") // get $ (" html ") through the class // get $ (" tbody tr: even ") through the html Tag // get the odd row node in the content. children ("input "). get (0) // obtain the first node in the input array of the subnode.

 

By querying the jQueryAPI help manual, most methods for obtaining nodes are displayed in the selector.

After obtaining the element node, You can execute various jQuery methods. Obtain data, define events, and perform operations.

 

2. JQ attributes

. Val () gets the value Attribute value of a node. html () to get and set the html content of a node. addclass (); add a class for a node: This class can be used to append the css style of this class to this node. . Removeclass (); deletes a class for a node

 

You can perform some basic attribute operations on nodes through the jq attribute.

 

3. JQ event

1. Page Loading

$ (Document). ready (function () {// code executed after the page is loaded .} $ (Function () {// same as above}

2. event handling

$ ("P"). bind ("click", function () {alert ("bind an event to a node ");});

3. Common events:

1. keyup (); triggered when the button is released.

 

<Scripttype = "text/javascript" src = "/jquery. js "> </script> <scripttype =" text/javascript "> $ (document ). ready (function () {$ ("input "). keydown (function (event) {// press the button to enter the background box in red $ ("input" ).css ("background-color", "red ");}); $ ("input "). keyup (function (event) {if (event. which = 13) {// release the key. The background box is blue $ ("input" ).css ("background-color", "blue ");};});}); </script> Enter yourname:

Keyup usage: press the text background color to red, press enter to blue

 

Execution result:

 

2. trigger (): triggers a certain type of event on each matching element.

 

<Scripttype = "text/javascript" src = "/jquery. js "> </script> <scripttype =" text/javascript "> $ (document ). ready (function () {$ ("input "). select (function () {// select any character in the text box. The text box is selected. $ ("Input"). after ("text selected! ") ;}); $ (" Button "). click (function () {// press the button to select the text box $ ("input "). trigger ("select") ;};}); </script>
Content of the selected text box The execution result is:

 

 

 

JQuery, as an excellent JavaScrtpt library, aims to write the least code and do more.