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

Source: Internet
Author: User

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

  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.