Element operations and event binding in jQuery

Element operations of jQuery and event binding 1. Attributes of operation elements:

① Attr read :( "selector "). attr ("attribute name"); => getAttribute ("attribute name"); ("selector "). attr ("attribute name"); => getAttribute ("attribute name"); ("selector "). attr ("attribute name", value); => setAttribute ("attribute name", value); * (* unable to access the prop attribute in the tag that is no longer started; example: checked, selected, disabled );

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

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

2. Content of operation elements:

① Original html text: Read :( optional selector).html .html () ;=> elem. innerHTML; change: (optional selectorw.20..html (); => elem. innerHTML; Modify: (optional selectorw.20..html ("html segment"); => elem. innerHTML = "html fragment"; clear element: $ ("selector "). empty (); => elem. innerHTML = "";

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

③ Value of the form element: Read :( "selector"). val (); change :( "selector"). val (); change :( "selector"). val (value );

3. Style of operation elements:

① Directly operate on the CSS attributes: (“selector”).css ("CSS attribute name"); => getcomputedstyle(";(“selector”).css ("CSS attribute name"); => CSS ("CSS attribute name", value ); => elem. style. CSS attribute name = value; Modify multiple attribute values at the same time: Optional (optional selector”).css ({attribute name 1: value 1, attribute name 2: Value 2 ,......}); * (Css () can read all attributes, but only inline styles can be modified. Attribute names must be de-lined and camped );

② Modify class attributes: 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 or without a specified class name: $ ("selector "). toggleClass ("Class Name");

4. Traverse nodes:

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

② Obtain the sibling element: the next sibling ("selector "). next ([selector]); => elem. nextElementSibling; previous brother: ("selector "). next ([selector]); => elem. nextElementSibling; previous brother: ("selector "). prev ([selector]); => elem. previuselementsibling; other brothers: $ ("selector "). siblings ([selector]);

③ Child element: directly child element: ("selector "). children ([selector]); all child elements: ("selector "). children ([selector]); all child elements: ("selector "). find (selector); * (find () must be added with selector );

5. Add:

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

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

6. Other operations:

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

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

③ Copy: var clone = ("selector"). clone ([true]); * (true: Deep clone includes event processing functions );

7. bind bound to the event:

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

② $ (...). Unbind ("event name", fn) => removeEventListener; if it is possible to remove the event handler function, you must use the real-name function to bind the function. You cannot use an anonymous function. Overload: a. Without any parameters: Remove all event handler function bindings on the element; 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 function objects bound to the specified event name on the event element;

8. Event-bound delegate:

① Event Proxy: enables all child elements under the specified parent element to use event processing functions (including generation). Principle: Event bubbling: a. only bind the event processing function to the parent element. B. Obtain the target element e.tar get. c. only respond to events that meet the conditions;

② Use the Event Agent: Getting get); remove the binding: (parent;.delegate({selector},?event name },function(e=e.tar get); remove the binding :( {get });

9. other bindings:

① One-time event: $ (...). One ("event name", fn); only one event processing function can be executed and is 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 an event handler function to only one element: $ ("target"). on ("event name", fn );

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