Basic jQuery knowledge points (below): Basic jQuery knowledge

Basic jQuery knowledge points (below): Basic jQuery knowledge

In actual development, jQuery is very practical. I have prepared some basic knowledge points in the previous article. This article is a supplement and extension to the above.

1. Operation of form values

1 // obtain the text box value 2 // txt. value3 var val = $ ("# txt "). val (); // No parameter indicates getting value 4 // set the value of the text box 5 // txt. value = "123123"; 6 $ ("# txt "). val ("this is the value set by val"); // a parameter indicates the value.

2. Attribute operations

1 // set attribute 2 $ ("# btnSetAttr "). click (function () {3 // getAttribute 4 // The usage is exactly the same as that of the css Method 5 // $ (""). attr ("title", "Chuanzhi podcast"); // sets a single attribute for $6 (""). attr ({// set multiple attributes 7 "title": "Chuanzhi podcast", 8 "data-abc": "Custom Attributes" 9}); 10 });

1 // get attribute 2 $ ("# btnGetAttr "). click (function () {3/* var a = $ (""). attr ("title"); 4 console. log (a); */5 // $ (""). attr ("width"); 6 });

3. feature operations

1 // select/do not select 2 // input. checked = true; 3 // input. checked = flase; 4 $ (id/class name ). attr ("checked", Boolean value); 5 6 //: checkbox function: Get all check boxes

[Note] the. prop () method must be used for checked, selected, and disabled.

The prop method is usually used to affect the dynamic status of DOM elements, rather than modifying HTML attributes.

4. Operation text content

1 // get content 2 // text content: js-> innerText/textContent 3 $ ("button: eq (0 )"). click (function () {4 // text (): obtain or set the content 5 var txt = $ ("div "). text (); 6 alert (txt); 7}); 8 // set the text content 9 $ ("button: eq (1 )"). click (function () {10 // set content, the parameter indicates the content to be set 11 $ ("div "). text ("this is the content of dynamic Settings"); 12}); 13 // get HTML content 14 $ ("button: eq (2 )"). click (function () {15 alert ($ ("div" ).html (); 16 });

5. height and width operations

1 // get height 2 $ ("# getHeight "). click (function () {3/* var h = $ ("div" ).css ("height"); 4 console. log (h); // 200px string */5/* var h = $ ("div "). height (); // value 6 h * = 2; 7 console. log (h); */8}); 9 // set the height to 10 $ ("# setHeight "). click (function () {11 // parameter: Value Type 12 // $ ("div "). height (500); 13 // parameter: String 14 // $ ("div "). height ("500"); 15 $ ("div "). height ("500px"); 16 });

6. coordinate value operation

1 // obtain the coordinate value of the element 2 $ ("button: eq (0 )"). click (function () {3 // if no parameter is set, 4 var offset =$ ("div") is obtained "). offset (); 5 console. log (offset); // return value: {top: 29, left: 8} 6}); 7 // set the coordinate value of the element 8 $ ("button: eq (1) "). click (function () {9 // Note: When setting the coordinate value, if this element is not located or is positioned as the default value static10 // offset () the positioning of this element is set to position: relative; 11 $ ("div "). offset ({12 top: 40014, 13 left:}); 15 });

7. bind event binding

1 $ ("button "). bind ("click mouseenter", function () {}); 2 // The first parameter indicates the event name. 3 // The second parameter: event processing function 4 // bind multiple events $5 ("button "). bind ({6 click: function () {}, 7 mouseenter: function () {} 8}); 9 // disadvantage: Unable to bind events to dynamically created elements

8. delegate proxy binding event

1 // first parameter: indicates a selector, element 2 of the event to be triggered // second parameter: indicates the name of the event to be triggered 3 // third parameter: event processing function 4 $ ("div "). delegate ("p", "click", function () {5 var txt = $ (this ). text (); // get the content of the current element 6 });

[Note] ① When was the event bound? -- When the page is loaded, all events are bound. ② When is the event executed? -- Click Event: Click; mouseenter: events associated with the move of the mouse 9 and on ()

1 // The first parameter indicates the name of the event to be bound. 2 // The second parameter indicates the element (selector) of the event to be triggered. 3 // The third parameter: event processing function 4 $ ("div "). on ("click ",". cls ", function () {5 var txt = $ (this ). text (); // get the content of the current element 6 });

10. Unbind events 1) Use un-unbind

1 $ ("button: eq (1 )"). bind ("click", function () {2 // unbind event 3 from the first button // if no parameter is set, all events are unbound, the name of the unbinding event 5 // $ ("button "). eq (0 ). unbind ("click mouseenter"); 6 // $ ("button "). eq (0 ). undelegate (); 7}); 8 // note: the unbinding event is the element of the unbinding event.

2) Use off to unbind

1 $ ("# btnOff "). on ("click", function () {2 // unbind the event of the first button 3 // parameter: name of the event to be removed 4 // if multiple events are removed, you only need to separate multiple event names with spaces as a string 5 $ ("# btn "). off ("click mouseenter"); 6 // if no parameter is specified, all events are unbound. 7 $ ("div "). off (); 8 // events bound by proxy are unbound. 9 // The first parameter indicates the name of the event to be unbound. 10 // The second parameter indicates: only events bound by proxy are unbound $11 ("div "). off ("click", "**"); 12 13 });

11. event triggering 1) What are the default behaviors of browsers?① Jump to a label ② the text box gets the focus

1 // trigger the text box to get the focus event 2 // trigger (): triggers the event and triggers the browser's default behavior 3 $ ("# txt "). trigger ("focus"); // parameter: indicates the trigger event type. 4 // triggerHandler (): triggers only events, but does not trigger the default action of the browser.

2)

1 $ (function () {2 // target indicates that the element that triggers the event is not necessarily this 3 // currentTarget = this 4 $ ("button "). on ("click", function (event) {5 console. log (event); 6}); 7 $ ("div "). on ("click", function () {8 console. log (event); 9}); 10 // ------------------------------------------------- 11 $ ("div "). on ("click", "button", function () {12 // at this time, target is the event trigger button 13 // currentTarget is the event-Bound Element 14 console. log (event); 15}); 16 });

12. event object 1) prevent default browser behaviorE. preventDefault ();
2) Prevent event bubbles
E. stopPropagation (); 13. chained programming principle Step 1: Give a constructor Step 2: Create a new object Step 3: Call the methods in this Constructor

1 // example of chained programming code 2 ("content"); 3. chained programming principle: return this; 4. In general, chained programming can be continued only by setting. This is because the obtained value is returned during the get operation, and this cannot be returned. 5 end (); // end the last filtering operation of the current link and return the status before matching the element.

14. Implicit Iteration

1 // set operation 2 (“div”).css ("color", "red"); 3 // obtain operation 4 (“div”)).css ("color "); // return the value of the first element. 5 // implicit iteration means that the method cyclically traverses all the matched elements and executes the corresponding method; instead of repeating, we can simplify our operations and facilitate our calls. 6 // if the value of multiple elements is obtained, the value of the first element is returned in most cases.

15. each method-with implicit iteration, why do we need to use the each function for traversal? A: In most cases, the each method is not required because of jQuery's implicit iteration feature. to process each element differently, the each method is used.

1 // each () function: traverse 2 // parameter: is an anonymous function 3 $ ("li "). each (function (index, ele) {4 // index: index Number 5 // ele: indicates the element itself, but it is a dom object 6 // index: 0 1 2 3 .... 9 7 var opacity = (index + 1)/10; 8 // ele. style. opacity = opacity; 9 Centers (elestm.css ("opacity", opacity); 10 });

16. coexistence of multiple libraries -- jQuery occupies the $ and jQuery variables. When the js library jQuery is referenced on the same page and the variables $ or jQuery are also used in other libraries (or jQuery libraries of other versions, to ensure that each database can be used normally, multiple databases coexist.

1 var j = $. noConflict (); 2 // noConflict (): This function allows jQuery to release control of $, so that other libraries can use the $ symbol to achieve coexistence of multiple libraries. After that, you can only use jQuery to call the methods provided by jQuery.

17. Plug-ins and Production   1) Plug-in demonstrationStep 1: Introduce the jQuery file. Step 2: Introduce the jQuery plug-in. 2) third-party plug-ins

1 jQuery. color. js2 // animate () Custom Animation: the animation effect of the background is not supported. 3 // list of attributes supported by the animation of the animation

3) how to create the jQuery plugin

Http://learn.jquery.com/plugins/basic-plugin-creation/

1 // global jQuery function Extension Method 2 $. pluginName = function () {}; 3 // jQuery object extension method 4 $. fn. pluginName = function (){};

18. basic use of jQueryUI 1) Application Scenario: website management background 2) jQuery is a plug-in for the UI (User Interface) maintained by jQuery.

Official API: http://api.jqueryui.com/category/all/

Other Tutorials: jQueryUI tutorials

3) basic usage

1 <! -- Step 1: import the style file --> 2 <link rel = "stylesheet" href = "plugins/jquery-ui.css"/> 3 <! -- Step 2: Introduce jQuery file --> 4 <script src = "jquery-1.12.2.js"> </script> 5 <! -- Step 3: Introduce the jQueryUI file --> 6 <script src = "plugins/jquery-ui.js"> </script>