the effect is as shown in the figure:
Core code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (' #one '). CSS ("Background", "#fff");
$ (' div '). css ("Background", "#fff");
$ (' Body div '). css ("Background", "#bbffaa");//change the attributes of all div within the body
$ (' div > span '). CSS ("Background", "#bbffaa"). CSS ("Color", "red"). CSS ("Font-size", "12px"); Change the properties of the span element under all div
$ (' #two >.mini '). CSS ("Background", "red"); attributes of all elements in the//id for the two Div
$ (' #two '). Siblings ("div"). CSS ("Color", "green");//select #two Sibling div element regardless of position
$ (' Div:first '). CSS ("Background", "Red");
$ (' div:gt (1) '). CSS ("Background", "#fff");//all DIV elements with index value greater than 1
$ (' div:lt (1) '). CSS ("Background", "yellow");
$ (' Div:not (. one) '). CSS ("Color", "#cccccc");//Change the div element of class not one
$ (' Div:even '). CSS ("Font-size", "15px");//div with an even number of index numbers
$ (' div:odd '). CSS ("Font-size", "12px");//div with odd index number
$ (' Div:contains (Other) '). CSS ("Font-size", "10px");/set div element with text other
$ (' Div:has (. Mini) '). CSS ("Color", "#bbffaa")//Set background color of <div> elements containing class as Mini element
$ (' div:parent '). CSS ("Color", "#ffcccc")//change the attributes of a DIV element that contains child elements (including text)
$ (' Div:hidden '). Show (3000);//Get Hidden div
$ (' div:visible ')//Get visible div
$ ("div[title=test]"). CSS ("Background", "Black");/set div with title test
$ ("div[.mini][title=test]"). CSS ("Color", "red");/set class as mini title Test div
</script>
Full Demo Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>jquery css Selector demo code </title> <style> div,span,p{width:140px; height:140px; margin:5px; Background: #aaa; border: #000 1px solid; Float:left; font-size:17px; Font-family:verdana, Arial, Helvetica, Sans-serif; Div. mini{width:55px; height:55px; Background-color: #aaa; font-size:12px; } </style> <script language= "javascript" src= "Http://img.jb51.net/jslib/jquery/jquery14.js" type= "text/" JavaScript "></script> </pead> <body> <div class=" one "id=" one "> ID is one class for one <di V class= "Mini" >class for mini</div> </div> <div class= "One" id= "two" > <div class= "Mini" title= "Oth" Er ">class for mini,title for other</div> <div class= "Mini" title= "test" >class mini,title for test</div> </div> <div class= "one" > <div class= "Mini" title= "test" >class for Mini,title for test</div> <span >the span under div</span> < /div> <div class= "One" >style for display none ' s div</div> <script "type=" > $ (' #one '). CSS ("Background", "#fff"); $ (' div '). css ("Background", "#fff"); $ (' Body div '). css ("Background", "#bbffaa");//change the attributes of all div within the body $ (' div > span '). CSS ("Background", "#bbffaa"). CSS (" Color "," red "). CSS (" Font-size "," 12px "); Change the attribute $ (' #two >.mini ') of the span element under all div. css (" Background "," Red "); Attribute $ (' #two ') for all elements within the DIV with ID two. Siblings ("div"). CSS ("Color", "green");//select #two Sibling's div element, regardless of position $ (' div: A. CSS ("Background", "Red"); $ (' div:gt (1) '). CSS ("Background", "#fff");//index value greater than 1 of all DIV elements $ (' div:lt (1) '). CSS ("Background", "yellow"); $ (' Div:not (. one) '). CSS ("Color", "#cccccc");//change class is not one of the DIV element $ (' Div:even '). CSS ("Font-size", "15px");//index numberFor even-numbered div $ (' div:odd '). CSS ("Font-size", "12px");//The index number is odd div $ (' div:contains (Other) '). CSS ("Font-size", "10px"); Set DIV element $ (' Div:has (. Mini) ') with text other. CSS ("Color", "#bbffaa");/set background color of <div> elements containing class as Mini element $ (' div:parent ' ). CSS ("Color", "#ffcccc");//Change the attribute $ (' Div:hidden ') of a DIV element that contains a child element (including text). Show (3000); get hidden div $ (' div:visible ')// Gets the visible div $ ("div[title=test]"). CSS ("Background", "Black");//Set div $ ("div[.mini][title=test]" with title "Test"). CSS (" Color "," red "); Div </script> </body> </ptml> set class to mini title test
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
