jquery is a multi-browser-compatible JavaScript library, with the core idea of write Less,do more (write less and do more). Published in January 2006 by American John Resig in New York's BarCamp, jquery attracted a number of JavaScript gurus from around the world and was developed by Dave Methvin's team. Today, jquery has become the most popular JavaScript library, with more than 55% of the world's top 10,000 most visited sites using jquery.
Reference Document: http://jquery.cuishifeng.cn/
First, import + simple application<! DOCTYPE html>Second, selector1.id Selector
<body><div id= "Demo" > I am a div</div><script rel= "script" src= "Jquery-2.2.3.min.js" ></script><script>$ (' #demo '). CSS (' Color ', ' red ');</script></body>2. Element tag name selector elements
<body><div> I was a div</div><div> I was a div</div><div> I was a div</div>3. Class Selector
<body>4.
*选择器（匹配所有元素)<body><div id= "Demo" > I was a div</div><div> I was a div</div><div> I was a div</div ><div> I am a div</div>5. Group Selector
<body><div id= "Demo" > I am a div</div>6. Descendant Selector
<body><ul><li> <a>ul's Li's a tag </a> <a>ul's a tag </a> <a >ul's Li's a-label </a></li></ul><script rel= "script" src= "Jquery-2.2.3.min.js" >< /script><script>$ (' ul li a '). css (' Color ', ' red ');</script></body>7. Specifying selectors
<body><div class= "Demo" >class div</div><p class= "Demo" >class General Div </div><script rel= "script" src= "Jquery-2.2.3.min.js" ></script><script>$ (' Div.demo '). CSS (' Color ', ' red ');</script></body>8. Sub-Selector
<body><div id= "Demo" ><p> sub-p1</p><p> p2</p><p> son p3</p><div> <p> grandson P1</p> <p> grandson P2</p> <p> grandson P3</p></div></div> <script rel= "script" src= "Jquery-2.2.3.min.js" ></script><script>$ (' #demo >p '). CSS ( ' Color ', ' red ');</script></body>9.next (selector)
<body><p>p1</p><p>p2</p><p>p3</p><div id= "Demo" >div</div> <p>p4</p><p>p5</p><p>p6</p><p>p7</p><script rel= "script " src=" Jquery-2.2.3.min.js "></script><script>//$ (' #demo '). Next (' P '). CSS (' Color ', ' red ');// The first method is $ (' #demo +p '). CSS (' Color ', ' red ');10.nextall (selector)
<body><p>p1</p><p>p2</p><p>p3</p><div id= "Demo" >div</div> <p>p4</p><p>p5</p><p>p6</p><p>p7</p><script rel= "script " src=" Jquery-2.2.3.min.js "></script><script>//$ (' #demo '). Nextall (). CSS (' Color ', ' red ');// The first method is $ (' #demo ~p '). CSS (' Color ', ' red '); The second method of </script></body>11.prev method
<body><p>p1</p><p>p2</p><p>p3</p><div id= "Demo" >div</div> <p>p4</p><p>p5</p><p>p6</p><p>p7</p><script rel= "script " src=" Jquery-2.2.3.min.js "></script><script>$ (' #demo '). Prev (). CSS (' Color ', ' red '); </ Script> </body>12.prevall method
<body><p>p1</p><p>p2</p><p>p3</p><div id= "Demo" >div</div> <p>p4</p><p>p5</p><p>p6</p><p>p7</p><script rel= "script " src=" Jquery-2.2.3.min.js "></script><script>$ (' #demo '). Prevall (). CSS (' Color ', ' red '); </ Script></body>13.slbings () method
Third, filter (filter selector)<body><p>p1</p><p>p2</p><p>p3</p><div id= "Demo" >div</div> <p>p4</p><p>p5</p><p>p6</p><p>p7</p><script rel= "script " src=" Jquery-2.2.3.min.js "></script><script>$ (' #demo '). Siblings (). CSS (' Color ', ' red '); </ Script></body>Filters primarily filter the required DOM elements through specific filtering rules, and the syntax classes of pseudo-classes in CSS
: Start with a colon (:).1. Basic screening
$ (' Li:first '). CSS (' background ', ' #ccc '); The first element $ (' li:last '). CSS (' background ', ' #ccc '); Last element $ (' Li:not (. red) '). CSS (' background ', ' #ccc '); Non-class is the element of Red $ (' Li:even '). CSS (' background ', ' #ccc '); The index is an even number of elements $ (' li:odd '). CSS (' background ', ' #ccc '); Index an odd element $ (' Li:eq (2)). CSS (' background ', ' #ccc '); The element that specifies the index value $ (' Li:gt (2) '). CSS (' background ', ' #ccc '); The element greater than the index value $ (' Li:lt (2) '). CSS (' background ', ' #ccc '); The element less than the index value $ (': Header '). css (' background ', ' #ccc '); Page All H1 ~ H6 element Focus filter, must be the initial state of the Web page has been activated the focus of the element to achieve element acquisition. Instead of clicking on the mouse or pressing the TAB key to activate it. $ (' input '). Get (0). focus (); First initialize activates an element focus of $ (': Focus '). css (' background ', ' red '); The elements that are focused: first,: Last and Primary (), final () These two sets of filters and methods when the same element is present, firstly implements the child element of the first parent element, and finally implements the end child element of the last parent element. So, if you need to be clear which parent element, you need to specify: $ (' #box li:last '). CSS (' background ', ' #ccc '); #box the last li//or $ (' #box li) of the element. (' background ', ' #ccc '). Ditto2. Content Filter
Select the element text node that contains the ycku.com text of the element $ (' Div:contains (' ycku.com ') '). CSS (' background ', ' #ccc '), $ (' Div:empty '). CSS (' background '). ', ' #ccc '); Select the empty element $ (' Ul:has (. red) '). CSS (' background ', ' #ccc '); Select the child element containing the element $ (':p arent ') where the class is red. CSS (' background ', ' #ccc '); Choosing a non-empty element jquery provides a name and a method similar to the parent, but this method does not pick the element that contains the child element or text, but rather gets the parent element of the current element and returns the collection of elements. $ (' Li '). Parent (). CSS (' background ', ' #ccc '); Select the parent element of the current element $ (' Li '). Parents (). CSS (' background ', ' #ccc '); Select the parent element of the current element and the ancestor element $ (' li '). Parentsuntil (' div '). css (' background ', ' #ccc '); Select Current element encounters div parent element stop3. Visibility Filter
-
$ (' P:hidden). Size (); Element P hidden Element
$ (' p:visible '). Size (); Element P Displays the element
Note: Hidden filters generally contain content: CSS style is display:none, input form type is
type= elements of "hidden" and Visibility:hidden.4. Sub-element filter
The filter rule for child element filters is to get the corresponding elements through the relationship between the parent element and the child element.$ (' Li:first-child '). CSS (' background ', ' #ccc '); The first LI element of each parent element is $ (' Li:last-child '). CSS (' background ', ' #ccc '); The last Li element of each parent element is $ (' Li:only-child '). CSS (' background ', ' #ccc '); Each parent element has only one LI element $ (' Li:nth-child (Odd) '). CSS (' background ', ' #ccc '); Each parent element is an odd Li element $ (' Li:nth-child (even) '). CSS (' background ', ' #ccc '); Each parent element has even Li elements $ (' Li:nth-child (2) '). CSS (' background ', ' #ccc '); The third Li element of each parent element5. Other methods
Iv. basic DOM and CSS operations1. Element content Manipulation
In a regular DOM element, we can use the HTML () and text () methods to get internal data. The HTML () method can get or set the HTML content, and text () can get or set the textual content. $ (' #box '). html (); Gets the HTML content $ (' #box '). Text (); Gets the text content that will automatically clean up the HTML tag $ (' #box '). html (' <em>www.li.cc</em> '); Set HTML content $ (' #box '). Text (' <em>www.li.cc</em> '); Setting text content automatically escapes HTML tags note: When we use HTML () or text () to set the contents of an element, the original data is emptied. And we expect to be able to append the data, we need to get the original data first. $ (' #box '). HTML ($ (' #box '). html () + ' <em>www.li.cc</em> '); Append data if the element is a form, JQuery provides the Val () method to get or set the internal text data. $ (' input '). Val (); Gets the form contents $ (' input '). Val (' www.li.cc '); Set the contents of the form if you want to set the selected state of multiple options, such as a drop-down list, a radio check box, and so on, you can pass the operation through an array. $ ("input"). Val (["Check1", "Check2", "Radio1"]); The value values are those that will be selected2. Element attribute manipulation
In addition to setting and fetching element content, JQuery can also manipulate the attributes of the element itself, including obtaining property values for properties, setting property values for properties, and deleting attributes. $ (' div '). attr (' title '); Gets the property value of the property $ (' div '). attr (' title ', ' I am a domain name '); Set properties and property values $ (' div '). attr (' title ', function () {//} returns the property value through an anonymous function return ' I am a domain name ';}); $ (' div '). attr (' title ', function (index, value) {//can accept two parameters return value + (index+1) + ', I am the domain name ';});3. Element style operation
Element style operations include setting CSS styles directly, adding CSS categories, category switching, and deleting categories.
Operation method. In the whole jQuery usage frequency, the CSS style operation is also very high, so we need to focus
Master.$ (' div '). css (' color '); Gets the color of the element inline CSS style $ (' div '). css (' Color ', ' red '); Set element inline CSS style color to red when you need to set multiple styles, we can pass multiple CSS style key-value pairs. $ (' div '). css ({' Background-color ': ' #ccc ', ' Color ': ' Red ', ' font-size ': ' 20px '); In addition to inline CSS settings, we can also add CSS classes directly to the element, You can add single or multiple, and you can also delete it. $ (' div '). addclass (' red '); Add a CSS class $ (' div '). addclass (' Red BG '); Add more than one CSS class $ (' div '). Removeclass (' BG '); Delete a CSS class $ (' div '). Removeclass (' Red BG '); Delete multiple CSS classes we can also combine events to implement the CSS class style switching functionality. $ (' div '). Click (function () {/////When clicked, Trigger $ (this). Toggleclass (' red Size ');//single style multiple styles can});. The second parameter of the Toggleclass () method can pass in a Boolean value, true means that the execution switches to the class class, false means that it executes back to the default class class (the default is empty Class), and with this feature, we can set the frequency of the switchover. var count = 0;$ (' div '). Click (function () {/////per-click to switch red$ (this) two times. Toggleclass (' Red ', count++% 3 = = 0);});4.css method
jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法，我们分别来了解一下。
$ (' div '). width (); Gets the length of the element, and the returned type is number$ (' div '). Width (500); Set the element length, pass the value directly, by default plus px$ (' div '). Width (' 500pt '); Ibid., set the PT unit $ (' div '). Width (function (index, value) {//index is an index, value is the original value return value-500;//No adjustment type, direct calculation});$ (' div '). Height (); Gets the height of the element, and the returned type is number$ (' div '). Height (500); Sets the height of the element, passing the value directly, by default plus px$ (' div '). Height (' 500pt '); Ibid., set the PT unit $ (' div '). Height (function (index, value) {//index is an index, value is the original value return value-1;//No adjustment type, direct calculation});Alert ($ (' div '). width ()); The alert ($ (' div ') is not included. Innerwidth ()); Contains padding Paddingalert ($ (' div '). Outerwidth ()); Contains padding padding+ border Borderalert ($ (' div '). Outerwidth (true)); Includes padding padding+ border border+ margin margins$ (' strong '). Offset (). Left; Offset $ (' strong ') relative to viewport. Position (). Left; The offset $ (window) relative to the parent element. ScrollTop (); Gets the position of the current scroll bar (window). scrolltop (300); Sets the position of the current scroll barPython's path jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
