Official JQuery learning materials: operational elements

 

• Obtain and set Element Information

// Change the HTML in an element$ ("# MyDiv p: first" pai.html ("New <strong> first </strong> paragraph! ");

 

• Move Element

// Use different methods to move elements// Method 1Var $ li = $ ("# myList li: first"). appendTo ("# myList ");// Method 2$ ("# MyList"). append ($ ("# myList li: first "));

 

• Clone Element

// Copy the first item of the list to the end of the list.$ ("# MyList li: first"). clone (). appendTo ("# myList ");

 

• Delete Element

 

• Create new elements

// Create a new element using an HTML string.$ ("<P> This is a new paragraph </p> ");$ ("<Li class = \" new \ "> new list item </li> ");// Create a new element with attributes.$ ("<A/> ",{Html: "This is a <strong> new </strong> link ","Class": "new ",Href: "foo.html"});

Var $ myNewElement = $ ("<p> New element </p> ");$ MyNewElement. appendTo ("# content ");$ MyNewElement. insertAfter ("ul: last"); // This will remove $ myNewElement from # content$ ("Ul"). last (). after ($ myNewElement. clone (); // clone a new element, so we have two

// You will not be able to obtain the reference of this element when you create an element.$ ("Ul"). append ("<li> list item </li> ");

Var myItems = [];Var $ myList = $ ("# myList ");For (var I = 0; I <100; I ++ ){MyItems. push ("<li> item" + I + "</li> ");}$ MyList. append (myItems. join (""));

 

• Operation attribute

// Operate an attribute$ ("# MyDiv a: first"). attr ("href", "newDestination.html ");// Operate on multiple attributes$ ("# MyDiv a: first"). attr ({Href: "newDestination.html ",Rel: "super-special"});// Use a function to determine the new value of an attribute$ ("# MyDiv a: first"). attr ({Rel: "super-special ",Href: function (idx, href ){Return "/new/" + href;}});$ ("# MyDiv a: first"). attr ("href", function (idx, href ){Return "/new/" + href;});