A person's life is often in the choice, such as: Which university to read? What kind of career do you choose? What kind of woman do you marry? ...... And so the nerve-racking thing. Whether a person has a choice or not, can show the maturity of his personality.
But those who have no idea of the chest, not be the choice of suffering. Because when it comes time to decide, he always asks people to say, "Hey, what do you think?" "
Those who are capable of great deeds are those who have a strong choice. He knows the success or failure of the matter, all care no one can do, and no one can decide for you. at the moment of choice, success or failure has been revealed. Mei Wen is finished, is it possible to read my article? Calm down, this period of documentation is relatively large, must be well absorbed! Let's talk about the main content of our chapter: jquery selectorwhen it comes to selectors most people think of CSS (cascading style Sheets, cascading style sheets), jquery selectors have good browser compatibilityAdvantages: (1) Introduction (2) support CSS1.0 to CSS3.0 selector (3) Perfect processing mechanismOne: Basic selector: Tag Selector, class selector, ID selector, set selector, intersection selector, global selector#myid return: <jquery object > matches an element with ID myID. Element <jquery object > array matches all element elements. MyClass <jquery objects > The array matches all elements of class MyClass * return: <jquery object > array matches all elements. The selector selects all elements in the document, including Html,head,bodyselector1,selector2,selectorn <jquery objects > Array matches all elements that satisfy selector1 or Selector2 or Selectorn
Case:
1<title>jquery Basic Selector </title>2<style type= "Text/css" >3 #box {4 /*Background-color:pink;*/5 border:2px solid black;6 padding:5px;7 }8</style>9<script src= "Js//jquery-1.12.3.min.js" ></script>Ten<script type= "Text/javascript" > One$(function () { A$ ("#box"). CSS ("Background-color", "yellow")); -$ ("H2"). Click (function () { -$ ("H3"). CSS ("Background-color", "Orange"); the }); - }); - -</script> + -<body> +<div id= "box" >div with ID box A<H2 class= "title" >class is the title of h2 at - -<dl> -<dt></dt> -<dt class= "title" > Hit Beauty </dt> -<dd> Color Games </dd> in<DD>QQ Games </dd> -</dl> to</div> +</body>
Two: Hierarchy selector: descendant selector, child selector, neighbor element selector, and sibling element selector
1Elementparent elementchild return: <jquery objects >Array2Matches all child element Elementchild under Elementparent. For example: $ ("div p") Select the P element under all div3Elementparent > Elementchild return: <jquery objects >Array4Matches the child element Elementchild under Elementparent. For example: $ ("Div>p"Select all ancestor elements for the P element of Div5Prev+next return: <jquery object >Array6Matches the next element immediately after the prev sibling. For example: $ ("H1+div") selects all div siblings before the H1 element ()7Prev ~ Siblings return: <jquery objects >Array8Matches the element siblings after the prev sibling. For example: $ ("H1~div") can match (
Three: Zodiac selector:
1 JQuery uses an XPath expression to select an element with a given property. 2 $ ("[href]") selects all elements with an href attribute. 3 $ ("[href= ' # ']") selects all elements with an HREF value equal to "#" . 4 $ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#" . 5 $ ("[href$= '. jpg ']") Select all the elements with an href value ending with ". jpg".
Case:
1<title> League of Legends </title>2 3<script src= "Js//jquery-1.12.3.min.js" ></script>4<script type= "Text/javascript" >5$(function () {6$ ("P"). Click (function () {7$ (". Txt_box>.current"). CSS ("Background-color", "#6FF"));8$ ("p > span"). CSS ("Background-color", "#F9F"). Next ("Background-color", "#F06");9$ ("Strong~span"). CSS ("Color", "#00C");Ten }); One }); A</script> - -<body> the -<p> League of Legends, abbreviation lol</p> -<p> that <strong>riot games</strong> developed. <span>nagegeeeg ... -<strong> Warcraft </strong> +What what? </span><a href= "#" > More details </a></p> - +<ul class= "Txt_box" > A<li class= "Current" > Development team </li> at<li> games around </li> -Introduction to <li> Games </li> -<li> Configuration Requirements </li> -<li> Game Background </li> -</ul> -</body>Four: Selecting elements through conditional filtering
1. Simple Filter Selector
(1): First selector. Select the first matching element. $ ("Td:first"). CSS ("Border", "2px solid Blue");
(2): Last selector. Select the last matching element. $ ("Td:last"). CSS ("Border", "2px solid Blue");
(3): Odd selector. Select all cardinality elements. $ ("td:odd"). CSS ("Border", "2px solid Blue");
(4): even selector. Selects all even-numbered elements. $ ("Td:even"). CSS ("Border", "2px solid Blue");
(5): EQ (index) selector. Selects an element with an index equal to the given value from the matching collection. $ (td:eq (0)) ". CSS (" Border "," 2px solid Blue ");
(6): GT (Index) selector. Index is greater than all elements of the given value.
(7): LT (index) selector. Indexes all elements that are less than the given value.
(8): Not (selector ...) selector. Removes all elements after some selectors. $ ("Td:not (: First,:last)"). CSS (...);
(9): Header selector. Select all the heading elements such as H1,H2,H3. $ (": Header")
(Ten): Animated selector. Selects all elements that are performing an animation effect. $ (td:animated);
Visible and not visible:
: Visible selection of all visible elements
: Hidden to select all hidden elements
Case:
1<title> Recent Hot Columns </title>2<style type= "Text/css" >3 4</style>5<script src= "Js//jquery-1.12.3.min.js" ></script>6<script type= "Text/javascript" >7$(function () {8$ ("Li:even"). CSS ("Background-color", "#CCC");9 });Ten$(function () { One$ (". Mydiv"). CSS ("Background-color", "#FF99CC")); A }); -$(function () { -$ (". One"). Click (function () { the$ (". Myclass:hidden"). Show (); - }); - }); -</script> + -<body> +<p> more Life,<strong> happy </strong> just around you </p> A<strong> Recent popular </strong><p class= "one" > (more) </p> at<ul> -V Number of <li> hair </li> -<li> I see Health </li> -<li class= "Mydiv" > Topsy-Turvy women </li> -<li> location vb</li> -<li> Vatican only child </li> in<li> my seventh script is </li> -<li>dvd Read the script </li> to<li> Grand Hotel and Thorn </li> +<li class= "MyClass" > Delivery Dialogue </li> -<li class= "MyClass" > Bound engine </li> the<li class= "MyClass" > Dumb endless </li> *</ul> $</body>Selector This piece I think I speak is not very good, because there are too many features not to show you, and so will give you a set of questions about jquery! Interested to see
The road of life is very long, the road has many branches, each branch corresponds to a different future, but you choose the present path you have to go down
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
