Today’s content
3. JQuery object and JS object differences and conversion 4. Selectors 5. DOM manipulation 6. casesCopy the codeJQuery based:
Concept: a JavaScript framework. JQuery is a fast, concise JavaScript framework and a great JavaScript code library (or JavaScript framework) after Prototype. JQuery is designed to "write Less, Do More", which is to write Less code and Do More things. It encapsulates common JavaScript functionality and provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction. * JavaScript frameworks: Essentially js files that encapsulate native JS code. Download JQuery * There are three major versions of JQuery: 1. X: compatible with IE678, the most widely used, official only do BUG maintenance, no new functions. X version: 1.12.4 (May 20, 2016) 2. X: incompatible with IE678, few people use it, the official only do BUG maintenance, the function is no longer added. X, final version: 2.2.4 (May 20, 2016) 3.x: not compatible with IE678, only supports the latest browsers. The 3.x version will not be used unless specifically requested, and many older jQuery plug-ins do not support this version. At present, this version is the official major update maintenance version. Jquery-xxx.js is the latest version of jquery-xxx.js and jquery-xxx.min.js. For programmers, with good indentation and comments. 2. Jquery-xxx.min. js: Production version Used in the program without indentation. Make it smaller. 2. Import JQuery js file: import min.js file 3. Var div1 = $("#div1"); alert(div1.html()); 3. JQuery object and JS object difference and conversion 1. JQuery object in operation, more convenient. * jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq -- > jq: jq Selector: Filter elements (tags) with similar characteristics B1 button event / / 1. Get $(" # b1 "). Click (function () {alert (" ABC "); }); $(function () {}); $(function); $(function); $(function); $(function); 3. Style control: CSS method / / $(" # div1 "). The CSS (" background - color ", "red"); $("#div1").css("backgroundColor","pink"); Tag selector (element selector) * Syntax: $(" HTML tag name ") gets all elements that match the tag name. Id selector * syntax: $("#id attribute value ") gets elements that match the specified ID attribute value 3. Class selector * Syntax: $(".class attribute value ") gets the element that matches the specified class attribute value 4. Union selector: * Syntax: $(" selector 1, selector 2...." Hierarchy selectors 1. Descendant selectors * syntax: $("A B ") selects all B elements within A element 2. Child selector * Syntax: $("A > B") selects all B child elements inside A element 3. Property selector 1. Property name selector * Syntax: $("A[property name]") contains the selector for the specified property 2. Property selector * Syntax: $("A[property name =' value ']") contains selector 3 for the specified property equal to the specified value. $("A[attribute name =' value '][]..." Filter selector 1. First element selector * Syntax: :first Retrieves the first element of the selected element 2. Syntax: :last Gets the last element in the selected element 3. Syntax for non-element selectors: :not(selector) Elements that do not include the specified content 4. Even selectors * syntax: :even, counting from 0 to 5. Odd selector * syntax: :odd, counting from 0 to 6. Equal to index selector * Syntax: :eq(index) specifies the index element 7. Greater than index selector * Syntax: :gt(index) greater than the specified index element 8. < index selector * Syntax: :lt(index) < the specified index element 9. Syntax: :header Gets the title (h1 to h6) element, fixed 5. Form filter selectors 1. Available element selectors * Syntax: :enabled Get available elements 2. Unavailable element selectors * Syntax: :disabled Get unavailable elements 3. Check selector * Syntax: : Checked Gets the radio/checkbox selected element 4. Select selector * Syntax: :selected Gets the selected element in the dropdown. Contents operation 1. HTML () : get/set the element tag body content < a > < font > content < / font > < / a > -- > < font > content < / font > 2. The text () : <a><font> contents </font></a> --> contents 3. val() : Gets/sets the value of the element's attribute 2. Attr(): Gets/sets an attribute of an element. 2. RemoveAttr (): Removes an attribute. 3. 1. Prop 2 is recommended if you operate on elements' inherent attributes. Attr 2 is recommended if you operate on elements' custom attributes. ToggleClass (): toggleClass("one"): toggleClass("one"): toggleClass("one"): toggleClass("one"): * If class="one" exists on the element object, delete the attribute value one. If class="one" does not exist on the element object, add 4.css (): 3. CRUD operations: 1. Append (): parent appends child elements to end * object 1. Append (object 2): Prepend (object 2): appends the child element to the beginning * object 1. Prepend (object 2): appends object 2 to the element of object 1 and at the beginning 3. appendTo(): AppendTo (object 2): add object 1 inside object 2 and at the end 4.pendto () : * Object 1.prependTo(object 2): add object 1 inside object 2 and at the beginning 5. after(): add element after element * object 1.after(object 2): add object 2 after object 1. Object 1 and object 2 are siblings 6. Before (): adds elements to the front of the element * object 1. Before (2) : adds object 2 to the front of object 1. InsertAfter () * object 1.insertAfter(object 2) : Adds object 2 after object 1. InsertBefore () * object 1.insertBefore(object 2) : adds object 2 to the front of object 1. Remove (): removes the object. Remove (): removes the object. 10.empty (): empties all descendants of the element. Empty (): Empty all descendants of the object, but leave the current object and its attribute node 6. caseCopy the code