jquery element manipulation and event binding

1. Attributes of the operating element:

①ATTR read: $ ("selector"). attr ("attribute name"), =>getattribute ("attribute name"), Change: $ ("selector"). attr ("attribute name", value); =>setattribute ("Property name ", value); * (* Cannot access the Prop attribute that is not present in the start tag; example: checked,selected,disabled);

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

③ Remove attribute: $ ("selector"). Removeattr ("attribute name"); =>removeattribute ("attribute name");

2, the contents of the Operation elements:

①html Original: Read: $ ("selector"). HTML ();=>elem.innerhtml;: $ ("selector"). HTML ("HTML fragment"); =>elem.innerhtml= "html Fragment" Empty element: $ ("selector"). empty (); =>elem.innerhtml= "";

② Plain Text: read: $ ("selector"). Text ();=>elem.textcontent/innertext; change: $ ("selector"). Text ("text");

③ value of the form element: read: $ ("selector"). Val (); Change: $ ("selector"). val (value);

3, the operation of the elements of the style:

① directly manipulate CSS properties: $ ("selector"). CSS ("CSS property name"), =>getcomputedstyle (); $ ("selector"). CSS ("CSS property name", value);=> Elem.style.CSS Property name = value; Modify Multiple Property values: $ ("selector"). CSS ({property name 1: value 1, property name 2: Value 2, ...}) ; * (CSS () can read all properties, but only the inline style can be modified, property names must go to the horizontal hump);

② Modify the Class attribute: A, Full modification: $ ("selector"). attr ("Class", "category name"), B, append: $ ("selector"). AddClass ("class name"); C, remove: $ ("selector"). Removeclass ("class name"); D, clear: $ ("selector"). attr ("Class", ""), or $ ("selector"). Removeclass (); E, determine whether it contains: $ ("selector"). Hasclass ("class name"); F, switch between the name of the class with or without specified: $ ("selector"). Toggleclass ("class name");

4. Traverse the node:

① gets the parent element: $ ("selector"). Parent ();=>elem.parentnode; or elem.parentelement;

② get brother element: Next brother $ ("selector"). Next ([selector]);=>elem.nextelementsibling; former brother: $ ("selector"). Prev ([selector]); =>elem.previouselementsibling; Other brothers: $ ("selector"). siblings ([selector]);

③ child elements: Direct child elements: $ ("selector"). Children ([selector]); all descendant elements: $ ("selector"). Find (selector); * (Find () must add selector);

5. Add:

① Create node: var $elem =$ ("Full HTML element Code snippet");

② add: Append to the end of all child nodes under the parent: $ (parent). Append ($elem); Inserts the first child node as the parent: $ (parent). Prepend ($elem); Insert after Child: $ (child). After ($elem); Before inserting to child: $ (child). before ($elem);

6. Other Operation:

① Delete: $ (the element to be removed). Remove ();

② Replace: $ (old). ReplaceWith (new Element); or $ (new element). ReplaceAll (old);

③ copy: Var $clone =$ ("selector"). Clone ([true]); * (true: Includes event handlers for deep clones);

7. Bind the event binding:

①$ (...). Bind ("event name", FN) =>addeventlistener; multiple function objects for the same element's event handler function;

②$ (...). Unbind ("Event name", FN) =>removeeventlistener; if it is possible to remove an event handler, the binding must be bound with the real name function, cannot use anonymous functions, Overload: A, without any parameters: Remove all event handler bindings on the element, B, Takes only one event name parameter: Removes all function objects specified by the event name binding on the element, and C, with two parameters: Removes only the function object that specifies the execution of the event name binding on the event element;

8. Delegate of event binding:

① Event Proxy: Allows event handlers (including builds) to be used by all eligible child elements under the specified parent element, using event bubbling: A, binding the event handler only on the parent element, and B, getting the target element: E.target;c, responding only to events that meet the conditions of the element;

The ② event Agent uses: Bind events to the parent (with bubbling), only elements that meet the selector condition can respond to events; (parent). Delegate ("selector", "event name", function (e) {e.target}) ; Remove Binding: $ (parent). Undelegate ("selector", "event name", function (e) {e.target});

9. Other bindings:

① Disposable Event: $ (...). One ("Event name", FN), can only execute once event handler function, after execution automatically release;

② binds all events of the element to the document:$ (...). Live ("Event name", FN); $ (...). Die ("event name", FN);

③ only one element is bound to the event handler: $ ("target"). On ("event name", FN);

④ uses bubbling: $ ("parent"). On ("event name", "selector", FN); unbind off;

jquery element manipulation and event binding