DOM and JQuery and HTML5
EventsDOM:document.getElementById (' btn '). onclick = function () {};jquery:$ (' #btn '). Click (function () {}); ---> Add event there is no on object. Event name (anonymous function);
jquery Object goto DOM Objectjquery Object [0].value (); jquery object. Get (0). Value ();
ThisThis $ (this)
Get ValueDom:.value= "" Jquery:.val ()---> Write content is set, not write is get---> set the value in the value method, make the drop-down box element selected---> Change the contents of the Text field, the page changed, the console did not change
Adding properties dynamicallyDOM: (custom attributes are generalized) Setatrribute ("Property name", "Property value")---> Add Property Getatrribute ("property name") to the element dynamically---> Get the property value Removeatrribute ("Property name") ---> Remove the attributes and values of the element jquery:.attr ("Property name", "Property value")---> Settings, get only one parameter ("property name") HTML5: (custom attribute is narrowly defined) set the data-prefix format in the label: data-info= " Property name "Setatrribute (' DATA-ABC ')---> Set custom properties Get properties starting with data-from the dataset (get to Hump mode Dataset.myname)
Set class styleDOM: Object. Style. Property name = ' attribute value '; className = "class style name"---> Style multiple use jquery:.css (' attribute name ', ' attribute value ');. AddClass ("cls1 cls2")---> Add class Styles---> Styles are used for a long while. Removeclass ("cls1 cls2")---> Remove element class styles. Hasclass ()---Determine if an element has a class applied Style. Toggleclass ()------Toggle class style (with or without, add) HTML5:classList.add ()---> Add a class name, similar to AddClass () Classlist.remove in jquery ( --Removes a class, similar to Removeclass () classlist.contains ()---> Indicates whether a class name is included, similar to Hasclass (), Classlist.toggle ()---> Toggles a class name, similar to Toggleclass ()
Set text contentDom:.innertext---> Gets the simple text content in the element. InnerHTMl---> Gets the label + text content in the element (creating elements for stitching). Setinnertext (property name, property value)---> Sets the text content. Getinnertext ("attribute name")---> Get text content jquery:.text ()---> Write content is set, not write is get. HTML ()---> Write content is set, not written is get
element Display/HideDom:.style.display = "None"; Non-occupying block.style.opacity = 0; Placeholder opacity = 1.style.visibility = "hidden"; Placeholder jquery:show ()---> Show hide ()---> Hide slideup ()---> Slide-out Slidedown ()---> Slide into slidetoggle ()---> Toggle slide-In and slide-out Fadein ()---> Fade fadeout ()---> Fade-out Fadetoggle ()---> Fade fadeto ()---> Set how long it takes to reduce or set transparency
Adding child elementsDOM: Parent element. appendchild (child element)---> Append child element Object. Insetbefore (new element, reference element)---> before inserting element replacechild ()---> Replace jquery: child element. AppendTo (parent Element) parent element. Append (child Element) prepend ()---> Append to child element to do front before ()---> Add to Front of current element, as sibling element after ()- --Add to the current element after
remove ElementDOM: The parent element. RemoveChild (child element)---> Remove child elements jquery:.html ("")---> Occupy space (empties the contents of the current element). Empty ()---> Clear cleaner (Common). Remove () ---> Empty yourself
Find ElementDom:.children all child elements in the parent element. FirstChild-----> Gets the first child node of an element. Firstelementchild-----> Gets the first child element in an element. LastChild-----> Gets the last child node of an element. Lastelementchild-----> Gets the last child element of an element. previoussibling-----> Gets the element before a sibling node. previouselementsibling-----> Gets the element before a sibling element. nextSibling----> get element Next sibling node. nextelementsibing-----> get element Next sibling Element Jquery:find ()---> Find an element siblings---> Get sibling element Next ()---> Gets the next sibling element of the current element Nextall ()---> Gets all the sibling elements behind the current element prev ()---> Gets the previous sibling element of the current element Prevall ()---> Gets all the sibling elements in front of the current element
Binding EventsDOM: (1) object. AddEventListener ("Event type (not on)", "function", "event capture (False)")---> Google and Firefox support, IE8 unsupported, IE11 support example: my$ ("BTN" ). AddEventListener ("click", Function () {},false); (2) object. attachevent ("on+ Event Type", "function")---> Google and Firefox not supported, IE8 support, IE11 unsupported example: my$ ("btn"). Attachevent ("On" + "click", Function () {}); Jquery:.bind () binding event---The first argument is an event, and the second parameter is the callback function. Delegate ()---Find the parent element to bind the event to the child element (the event is bound by proxy)----The first parameter is a child element, the second argument is an event, The third parameter is the callback function. On ()--the first argument is an event, the second argument is a child element, the third argument is a callback function---> event bubbling
Unbind EventDOM: Object. RemoveEventListener () object. DetachEvent () Jquery:.unbind (). Undelegate ()---The first parameter is a child element and the second argument is an event. Off ()--- The first parameter is the event, the second parameter is the child element--event bubbling, the child element is unbound, the parent element is unbound
Page Load EventsDOM:window.onload = function () {}; Overwrite, and all content in the page is loaded before jquery is triggered: $ (window) is not overwritten. Load (function () {}); ---> Page all content is loaded before triggering $ (function () {}); ---> Page basic DOM elements can be triggered when they are finished loading
Judging is odd and evenDom:if--else statement to determine jquery:
$ ("tag name: Odd")---> Odd (Index starting from 0) $ ("label name: Even")---> Even
Get IndexDom:.index () jquery:$ ("tag name: eq (" +this.index () + ")"). EQ ($ (this). Index ()) $ (this). Index ()---> Gets the index of the current element
Cloning. Clone (True/false)--True (can clone style) False (style clone not come over)
creating elements dynamicallyDom:1.document.write ("Tag Code-->html Code"); 2. Object. innerhtml= ""; 3.document.createelement ("tag name"); Creates an element that returns the object jquery:1.$ ("HTML tag")---Returns an object 2. html ("HTML tag")
get ElementDOM:document.getElementById () document.getElementsByTagName () HTML5:document.querySelector (); ---> Get the First Document.queryselectorall () in the selector; ---> Pseudo-arrays (loop traversal required)
Looping through$.each (Info,function (index,element) {})---> Loop (implicit Iteration) object. ForEach (function (Element,index))-- ForEach (Loop) is a new feature of ES5
Dom and jquery Common Properties
