Jquery learning notes 1 (understanding the DOM operations in jquery's jquery selector)

Chapter 1 Understanding jquery

Jquery code style $ (document ). ready (function (){//...}); simplify $ (function (){//...}); jquery object to DOM object var $ id = $ ("# ID"); // jquery object var id = $ id [0]; // DOM object $ id. get (0); Convert DOM object to jquery object var id = document. getelementbyid ("ID"); // DOM object var $ id = $ (ID); // jquery object

　　

Chapter 2 jquery Selector

Basic selector $ ("*") // all elements $ ("# lastname") // id = "lastname" element $ (". intro ") // all elements of class =" Intro "$ (" P, span ") // all <p>, <span> element hierarchy selector $ ("ancestor descendant") // $ ("Div span ") select all <span> elements in <div> $ ("parent> child") // $ ("div> span ") select the child element $ ('prev + next') whose element name is <span> under the <div> element. // $ ('. one + Div ') Select. the next <div> element $ ('prev ~ Sibilings ') // $ (' # Two ~ Div ') Select # All <div> sibling element basic filter selectors after two elements: First // $ ("Div: First ") select the first <div> element: Last // $ ("Div: Last") from all <div> elements and select the last <div> element: not (selector) // $ ("input: Not (. myclass) ") Select the <input> element: Even // $ (" input: Even ") element of the class that is not myclass to select the <input> element whose index is an even number: odd // $ ("input: odd") Select the <input> element: eq (INDEX) // $ ("input: eq (1)") where the index is an odd number )") select the <input> element: GT (INDEX) // $ ("input: GT (1)") element whose index is equal to 1 to select the <input> element whose index is greater than 1: LT (INDEX) // $ ("input: Lt (1)") Select <Input> element: Header // $ (": Header") All header elements 
　　
Chapter 3 Dom operations in jquery
Dom operations in 3 ways Dom core, HTML-DOM, CSS-DOM $ (HTML) // Create HTML code insert node append () // Add new element inside the element appendto () // $ (). append (B) append A to B. It can also be used to move the prepend () // element content prependto () // $ (). prependto (B) puts a in front of after () in B // insert content after the element insertafter () // $ (). insertafter (B) insert content after the element before () // insert content before the element insertbefore () // $ (). insert content before insertbefore (B) to delete the node remove () // Delete the node empty () // clear the content in the node copy node clone () // true indicates that the node replacewith () // $ ("p") is replaced by the event bound to the element while copying the element "). replacewith ("<strong> 123 </strong>"); replaceall () // $ ("<strong> 123 </strong> "). replaceall ("p"); Package node wrap () // $ ("strong "). wrap ("<B> </B>") <B> <strong> </B> wrapall () // wrapinner () // $ ("strong "). wrapinner ("<B> </B>") <strong> <B> </B> </strong> attribute operation ATTR () // Add and modify attributes $ ("p "). ATTR ("attribute", "value") removeattr () // Delete attribute style operation addclass () // append style removeclass () // remove style hasclass () // determine whether a style contains true or false toggle () // exchange a set of actions $ togglebtn. toggle (function () {// display element}, function () {// hide code}) toggleclass () // switch the style repeatedly $ ("p "). toggleclass ("class"); set to get HTML text and value HTML () // get or modify the HTML code text () of the element // get or modify the content of the element Val () // You can select checkbox radiofocus () to set and obtain the element value. // you can obtain the focus blur () // the child () node that has no focus traversal () // obtain the child element set next () of the matching element // obtain the peer element Prev () next to the peer element Prev () // obtain the peer element siblings () // peer element closest () Find () filter () nextall () prevall () parent () Parents () CSS-DOM operation CSS () $ ("p" ).css ("color") // obtain the style color of the <p> element $ ("p" ).css ("color", "Red ") // set the <p> element style color $ ("p" ).css ({"fontsize": "12px", "color": "#999 "}) // set both the font size and color height () width () offset () // obtain the relative offset of the element in the current window var offset =$ ("p "). offset (); var left = offset. left; var Top = offset. top; position () // obtain the relative offset of the scrolltop () of the parent node whose element attribute is relative or absolute // The scrollleft () Distance from the scroll bar of the element to the top of the scrollleft () // distance of the element's scroll bar from the left