Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <Scriptsrc= "Jquery-3.1.0.min.js"></Script>6 <title>jquery Selector</title>7 </Head>8 9 <Body>Ten <!--Basic Selector - One <!--#id - A <DivID= "Test"></Div> - $ (' #id '); - <!--. Class - the <Divclass= "Test"></Div> - $ ('. Test '); - <!--element - - <Div></Div> + $ (' div '); - <!--* - + <!--Selector1,selector2,....... Selectorn - A $ (' Div,p,span '); at <!---------------------------------------------------------------------------------- - - <!--Hierarchy Selector - - <P> - I'm the top of the demo. - </P> - <DivID= "Demo"> in <P>1</P> - <P>2</P> to <span>3</span> + </Div> - <Div> the I'm the lower level of the demo. * </Div> $ <Div>Panax Notoginseng I'm on the lower level of the demo. - </Div> the <!-- + $ (' #demo p '). CSS (' background ', ' red '); descendant selector A $ (' #demo >span '). CSS (' background ', ' Blue '); sub-selector the $ (' #demo + div '). css (' background ', ' red '); Select the next sibling of the DIV with the ID demo to use jquery's own Next () method + $ (' #demo ~ div '). css (' background ', ' red '); Select the next sibling of the DIV with the ID demo to use jquery's own Nextall () method - - $ <!---------------------------------------------------------------------------------- - $ <!--Filter Selector - - <!--The same as the pseudo-class selector syntax in CSS with: beginning; According to different filtering rules, can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and Form object property filtering - - <Div>1</Div> the <Divstyle= "width:100px; height:100px; border:1px solid Blue"></Div> - <H1>I'm Heading 1.</H1>Wuyi <ulID= "Demo1"attribute= ' 1 '> the <Liclass= "One">I'm the first line.</Li> - <Li>I'm the second line.</Li> Wu <Li>I'm the third line.</Li> - <Li>I'm the fourth line.</Li> About <Li>I'm the fifth line.<H3>I am the title of line fifth</H3></Li> $ <H2>I'm heading 2.</H2> - <Li>I'm the sixth line.</Li> - </ul> - <!--1. Basic Filter - A <!-- + $ (' #demo1: First '). css (' background ', ' red '); Select the second child element under Demo1 the $ (' #demo1: Last '). CSS (' background ', ' red '); - $ (' #demo1: not (. one) '). CSS (' background ', ' red '); Select class under Demo1 not all elements of one $ $ (' #demo1: Even '). css (' background ', ' red '); Select an element with an even index (index starting at 0) the $ (' #demo1: Odd '). css (' background ', ' red '); Select an element with an odd index (index starting at 0) the $ (' #demo1: eq (1) '). CSS (' background ', ' red '); Select an element with an index equal to n (index starting from 0) the $ (' #demo1: GT (2) '). CSS (' background ', ' red '); Select an element with an index greater than 2 (index starting from 0) the $ (' #demo1: LT (2) '). CSS (' background ', ' red '); Select element with index less than 2 (index starting from 0) - $ (' Body:header '). CSS (' background ', ' red '); Select all the H1,h2,h3 in the page ... in - the <!--2. Content Filter - the <!--$ (' #demo1: Contains (c) '). CSS (' background ', ' red '); Select the element containing the text content of three About $ (' ul:p arent '). css (' background ', ' red '); Select the UL element containing the child elements the $ (' #demo1: Has (h3) '). CSS (' background ', ' red '); select demo1 below the child element containing H3 the $ (' Div:empty '). CSS (' background ', ' red '); Select a div empty element that does not contain child elements - the <!--3. Visibility Filter Selector - + <!-- - : Hidden the : VisibleBayi - the <!--4. Attribute Filter Selector - the <!-- - $ (' body [attribute] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute - $ (' body [attribute=1] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute and have a property value of 1 the $ (' body [attribute!=1] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute and that the property value is not 1 the $ (' body [attribute^=1] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute and start with the property value 1 the $ (' body [attribute$=1] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute and end with the property value 1 the $ (' body [attribute*=1] '). CSS (' background ', ' red '); Select all elements that contain the attribute attribute and have a property value of 1 - - the <!--5. Child element Filter Selector - the <!-- the $ (' #demo1: First-child '). CSS (' background ', ' red '); Select the first child element of each parent element under Demo194 $ (' #demo1: Last-child '). CSS (' background ', ' red '); Select the last child element of each parent element under Demo1 the $ (' #demo1: Nth-child (1) '). CSS (' background ', ' red '); select nth element of each parent element under DEMO1, index starting from 1 the - the <!--6. Form object property Filter Selector -98 <!-- About : Enable - :d isable101 : Checked102 : Selected103 -104 </Body> the </HTML>106 <Script>107 $ (document). Ready (function(e) {108 109 }); the </Script>
jquery Selector Grooming
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
