jQuery element operation and event binding

1. Manipulate the attributes of elements:

　①attr reads: ("selector").attr ("attribute name"); =>getAttribute ("attribute name"); change: ("selector").attr ("attribute name") "); =>getAttribute("attribute name"); change: ("selector").attr("attribute name", value); =>setAttribute("attribute name", value); * (* cannot be accessed anymore The prop attribute that exists in the start tag; for example: checked, selected, disabled);

　② prop reads: ("selector").prop ("property name"); =>elem.property name; change: ("selector") .prop("property name"); =>elem.property name; change: ("selector").prop("property name", value);

　　③Remove attributes: $("selector").removeAttr( "Attribute name"); =>removeAttribute("Attribute name");

2. Content of the operation element:

　①html original text: read: ("selector").html(); =>elem.innerHTML; change: ("selector").html(); =>elem.innerHTML; Change: ("selector").html("html fragment"); =>elem.innerHTML="html fragment"; Clear element: $("selector ").empty(); =>elem.innerHTML="";

　②Plain text: read: ("selector").text(); =>elem.textContent/innerText; change: ("selector"). text(); =>elem.textContent/innerText; change: ("selector").text("text");

　③The value of the form element: read: ("selector").val(); change: ( "selector").val(); change: ("selector").val(value);

3. Manipulate element styles:

　① Directly manipulate CSS properties: ("selector").css("CSS properties name"); =>getComputedStyle(); ("selector").css("CSS property name"); =>getComputedStyle(); ("selector").css("CSS property name", value); => elem.style.CSS attribute name = value; modify multiple attribute values ​​at the same time: $("selector").css({Attribute name 1: value 1, attribute name 2: value 2,...}); * (css ( ) can read all attributes, but can only modify inline styles, and attribute names must be de-hash-cased);

　② Modify the class attribute: a. Complete modification: ("selector").attr("class"," class name"); b. Append: ("selector").attr("class","class name"); b. Append: ("selector").addClass("class name"); c. Remove: ("selector").removeClass("class name"); d. Clear: ("selector").removeClass("class name"); d. Clear: ("selector").attr("class","" ); or ("selector").removeClass(); e. Determine whether it contains: ("selector").removeClass(); e. Determine whether it contains: ("selector").hasClass("class name"); f , switch between with or without a specified class name: $("selector").toggleClass("class name");

4. Traverse nodes:

　①Get the parent element: $("selector").parent( ); =>elem.parentNode; or elem.parentElement;

　　②Get sibling elements: next brother ("selector").next([selector]); =>elem.nextElementSibling; Previous brother: ("selector" ).next([selector]); =>elem.nextElementSibling; Previous brother: ("selector").prev([selector]); =>elem.previousElementSibling; Other brothers: $("selector").siblings( [selector]);

　③Child element: direct child element: ("selector").children([selector]); all child elements: ("selector").children([selector]); all child elements ("selector").find(selector); * (find() must add selector);

5. Add:

　①Create node: var elem=elem= ("Complete html element code segment");

　②Add: append to the end of all child nodes under parent: (parent).append((parent).append(elem); insert as the first child node of parent: (parent).prepend((parent).prepend( elem); Insert after child: (child).after((child).after(elem); Insert before child: (child).before((child).before(elem);

6. Other operations:

　①Delete: $(element to be deleted).remove();

　②Replace: (old).replaceWith(new element); or (old).replaceWith(new element); or (new element).replaceAll (old);

　③Copy: var clone=clone=(“selector”).clone([true]);* (true: includes event processing function for deep cloning);

7. Event binding bind:

　　①$(...).bind("Event name", fn)=>addEventListener; Bind multiple function objects to the event processing function of the same element;

　②$(...).unbind("Event name", fn) =>removeEventListener; if it is possible to remove the event handler function, you must use a real-name function when binding, not an anonymous function; overload: a, without any parameters: remove all event handler function bindings on the element Define; b. With only one event name parameter: remove all function objects bound to the specified event name on the element; c. With two parameters: remove only the executed function objects bound to the specified event name on the event element;

8. Event binding delegate:

　①Event proxy: Allow all qualified child elements under the specified parent element to use the event processing function (including generation); Principle: Use event bubbling: a. Only event processing The function is bound to the parent element; b. Get the target element: e.target; c. Only respond to events of elements that meet the conditions;

　②Use of event proxy: Bind the event to the parent (using bubbling), only elements that meet the selector conditions can respond to the event; (parent).delegate("selector", "event name", function(e)e. target); remove binding: (parent).delegate("selector", "event name", function(e)e.target); remove binding: (parent).undelegate("selector", "event name" ", function(e){e.target});

9. Other bindings:

　①One-time event: $(...).one("Event name", fn); The event processing function can only be executed once , automatically released after execution;

　②Bind all events of the element to document: (...).live("event name", fn); (...).live("event name", fn); (...). die("event name", fn);

　　③Bind the event processing function to only one element: $("target").on("event name", fn);

　　④Use bubbling: $(" parent").on("event name", "selector", fn); unbind off;