JQuery learning, jquery

JQuery learning, jquery
Control page control element content and value operation element content operation text content

Text () gets the text content of all matching elements

Text (val) sets the text content of all matching elements

<Div> <span> test </span> </div>... $ ("div"). text (); // obtain the text content of the div Element

Operate HTML content

Html () obtains the HTML content of the First Matching Element.

Html (val) sets HTML content that matches all elements

<div><span>test</span></div>...$("div").html();

Operation element value

Var () gets the current value of the First Matching Element and returns a string or array.

$ ("# Le"). val (); // obtain the value of the element with the id of le.

Var (val) sets the values of all matching elements

$ ("Input: text"). val ("new"); // set the value for all text boxes

Var ([]) is used to set values for radio and other elements.

$ ("Select"). val (['list item 1', 'list item 2', 'list item 3']);

Operate DOM nodes

Search nodes

Create a node

<Script language = "javascript"> $ (document ). ready (function () {var $ p = $ ("<p> </p>"); // create a node. p.html ("<span style = 'color: # FF0000 '> Add </span> "); // reset the HTML content of <div> $ (" body "). append ($ p); // creates a new paragraph node in the body });

Insert a node into a node

Insert external nodes

Delete, copy, and replace nodes

Empty ()

Remove ()

Differences

$ (Document ). ready (function () {$ ("# div1 "). empty (); // Delete All subnodes of div1 $ ("# div2 "). remove (); // delete a node with the id of div2 });

Copy a node

Clone ()

$ (Function () {$ ("input "). bind ("click", function () {// bind to button click event $ (this ). clone (true ). insertAfter (this); // copy yourself and event handling });});

Replace Node

ReplaceAll ()

RepalceWith (content)

<Script language = "javascript"> $ (document ). ready (function () {$ ("# div1 "). replacewith ("<div> replacewith () Replacement result </div>"); $ ("<div> replaceAll () Replacement result </div> "). replaceAll ("# div2") ;}); </script>

Operate CSS styles

Modify CSS class implementation

Eg

$ ("Div"). addClass ("yellow red"); // Add the yellow and red CSS classes to all div elements.

CSS style modification implementation