Home > Others

Front end jquery part is wonderful _jquery

Source: Internet
Author: User
Tags html tags prev switches tag name visibility
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, Introduction
jquery is a browser-compatible JavaScript library with the core idea of write Less,do more (less written and more). jquery was released in January 2006 by John Resig of America in BarCamp, New York, attracting a number of JavaScript gurus from around the world to join the team led by Dave Methvin. 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.

Second, selector
1.id Selector

<body>
<div id= "Demo" > I'm 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 element

<body>
<div> I'm a div</div>
<div> I'm a div</div>
<div> I'm a div</ div>

3. Class Selector

<body>

4.* Selector (match all elements)

<body>
<div id= "Demo" > I'm a div</div>
<div> I'm a div</div>
<div> I am 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 Li's a label </a>
  <a>ul Li's a label </a>
  <a>ul's Li's a tag </a>
</li>
</ul>
<script rel= "script" src= Jquery-2.2.3.min.js "></script>
<script>
$ (' ul Li a '). css (' Color ', ' red ');
</script>
</body>

6. Specifies the selector

<body>
<div class= "Demo" >class div</div>
<p class= "Demo" >class
<div> Ordinary div</div>
<script rel= "script" src= "Jquery-2.2.3.min.js" ></script>
<script>
$ (' Div.demo '). CSS (' Color ', ' red ');
</script>
</body>

7. Sub Selector

<body>
<div id= "Demo" >
<p> sub p1</p>
<p> Sub p2</p>
<p> 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>

8.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 ');//First method
$ (' #demo +p '). CSS (' Color ', ' red ');    The second method
</script>
</body>

9.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
 $ (' #demo ~p '). CSS (' Color ', ' red ');//The second method
< /script>
</body>

10.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>

11.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>

12.slbings () 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 '). Siblings (). CSS (' Color ', ' red ');
</script>
</body>

Third, filter (filter selector)

Filters mainly through specific filtering rules to filter the required DOM elements, and CSS in the syntax class of Pseudo class
: Begins 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 red element
$ (' Li:even '). CSS (' background ', ' #ccc ');//index to an even element
$ (' li:odd '). CSS (' background ', ' #ccc '); An odd-numbered element
$ (' Li:eq (2)). CSS (' background ', ' #ccc ');//Specify the element
$ (' Li:gt (2) ') of the index value. CSS (' background ', ' #ccc '); Element
$ (' Li:lt (2) ') that is greater than the index value. CSS (' background ', ' #ccc ');//less than the element
$ (': Header ') of the index value. CSS (' background ', ' #ccc '); Page All H1 ~ H6 element
Focus Filter, must be the initial state of the Web page has been activated by the focal element to achieve element acquisition. Instead
of a mouse click or a Tab keystroke to activate it.
$ (' input '). Get (0). focus ();///First initialize activates an element focus
$ (': Focal '). CSS (' background ', ' red ');

: First,: The two sets of filters and methods for the same element in the first and last (), when the same elements are present, the first implements the initial child element of the second parent element, and finally the last child element of the final parent element is implemented. So, if you need to be explicit about which parent element, you need to specify:
$ (' #box li:last '). CSS (' background ', ' #ccc '); The last li of #box element
or $ (' #box Li '). Last (). CSS (' background ', ' #ccc '); Ditto

2. Content Filter

Select element text node contains ycku.com text 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 ') with the class is red. CSS (' background ' , ' #ccc '); Select non-empty element

JQuery provides a method of name and parent similarity, but this method does not choose to contain child elements or text
element, and instead gets the parent element of the current element, the collection of elements is returned.

$ (' 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 to encounter Div parent element stop

3. Visibility Filter

-

$ (' P:hidden). Size (); Element p hidden element
$ (' p:visible '). Size ();//element P display elements

Note:: Hidden filter is generally included in the content is: CSS style for display:none, input form type
Type= the elements of "hidden" and Visibility:hidden.

4. Child element Filter


The filtering rule of a child element filter is to obtain the corresponding element 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
$ (' Li:last-child '). CSS (' background ', ' #ccc ');//The last Li element of each parent element
$ (' Li:only-child '). CSS (' Background ', ' #ccc '); Each parent element has only one LI element
$ (' Li:nth-child (Odd) '). CSS (' background ', ' #ccc ');//per parent element odd Li element
$ (' Li:nth-child (even) '). CSS (' background ', ' #ccc '); Every parent element even LI element
$ (' Li:nth-child (2) '). CSS (' background ', ' #ccc ');//The third Li element of each parent element

5. Other methods

Iv. basic DOM and CSS operations

1. Element content operation

In the regular DOM element, we can use the HTML () and text () methods to get the internal data. HTML () method
You can get or set HTML content, and text () can get or set text content.

$ (' #box '). html (); Gets the HTML content
$ (' #box '). Text ()///Get textual content, automatically clean HTML tag
$ (' #box '). html (' <em>www.li.cc</em> '); HTML content
$ (' #box '). Text (' <em>www.li.cc</em> ');//Set text content, automatically escape HTML tags

Note: When we use HTML () or text () to set the contents of the element, the original data is emptied. and our period
Hope to be able to append the data, need to obtain original data first.
$ (' #box '). HTML ($ (' #box '). html () + ' <em>www.li.cc</em> '); Append Data
If the element is a form, JQuery provides a Val () method to get or set the internal text data.

$ (' input '). Val (); Get form Contents
$ (' input '). Val (' www.li.cc ');//Set form content

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 an array
Operation.
$ ("input"). Val (["Check1", "Check2", "Radio1"]); Value values are those that will be selected

2. Element attribute operation

In addition to the content of the elements to set up and get, through JQuery can also operate on the attributes of the element itself, the package
Enclose the property value of the property, set the property value of the property, and delete the property.

$ (' div '). attr (' title '); Gets the property value of the property
$ (' div '). attr (' title ', ' I am a domain name ');//Set Property and property value
$ (' div '). attr (' title ', function () {//Return property value via anonymous function) Return
' I am domain ';
}
$ (' div '). attr (' title ', function (index, value) {//can accept two parameters return
value + (index+1) + ', I am domain name ';
});

3. Element style operation



Element style actions include ways to set CSS styles directly, add CSS categories, category switches, and delete categories. In the whole jQuery usage frequency, the CSS style operation is also very high, so need to focus on mastery.

$ (' div '). css (' color '); Get the color of CSS styles in an element row
$ (' 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 elements, 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 the events to implement the CSS class style switching function.

$ (' div '). Click (function () {///When clicked Triggers
$ (this). Toggleclass (' red Size ');//single style multiple styles can
};
. The second parameter of the Toggleclass () method can pass in a Boolean value, and true means that the execution switches to the class class, and False indicates that the default class class (the default is null class) is executed, and we can set the frequency of the switch by using this feature.
var count = 0;
$ (' div '). Click (function () {//Toggle Red $ (this) for two times per click)
. 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 element length, direct value, default plus px
$ (' div '). Width (' 500pt ');/IBID., set PT unit
$ (' div '). Width (function (index, value) {//index is index, value is original 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);//Set element height, direct value, default plus px
$ (' div '). Height (' 500pt ');/IBID., set PT unit
$ (' div '). Height (function (index, value) {//index is index, value is original return
value-1;//No adjustment type, direct calculation
});



Alert ($ (' div '). width ()); Does not contain
alert ($ (' div '). innerwidth ());///Includes inner margin padding
alert ($ (' div '). Outerwidth ());//include inner margin padding+ border Border
alert ($ (' div '). Outerwidth (true);///contains inner margin padding+ border border+ outer margin margin



$ (' strong '). Offset (). Left; Offset from viewport
$ (' strong '). Position (). Left;//offset to Parent element
$ (window). scrolltop ();//Get the position of the current scroll bar
$ (window). ScrollTop (300); Sets the position of the current scroll bar

The above is the entire content of this article, I hope to help you learn.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript and jquery interactive front end web development pdf front end load balancer python front end framework front end development languages front end ui testing upwork front end developer front end engineer salary

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More