This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Several simple jquery practice questions with additional answers
View: 14058|Reply: 0

[Jquery] Several simple jquery practice questions with additional answers

[Copy link]
Posted on 8/15/2015 10:42:50 AM | | | |


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.         <style type="text/css">
  7.                 div,span,p {
  8.                         width:160px;
  9.                         height:160px;
  10.                         margin:5px;
  11.                         background:#aaa;
  12.                         border:#000 1px solid;
  13.                         float:left;
  14.                         font-size:17px;
  15.                         font-family:Verdana;
  16.                 }
  17.                 div .mini {
  18.                         width:55px;
  19.                         height:55px;
  20.                         background-color: #aaa;
  21.                         font-size:12px;
  22.                 }
  23.                 fieldset
  24.                 {
  25.                          border-style:none;
  26.                 }
  27.         </style>
  28.         <scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
  29.         <scrip去掉t type="text/javascrip去掉t">
  30.             function a1()
  31.                 {
  32.                         $("#one").css("background-color","red");
  33.                 }
  34.                 function a2()
  35.                 {
  36.                         $(".mini").css("background-color","red");
  37.                 }
  38.                 function a3()
  39.                 {
  40.                         $("div").css("background-color","red");
  41.                 }
  42.                 function a4()
  43.                 {
  44.                         $("*").css("background-color","red");
  45.                 }
  46.                 function a5()
  47.                 {
  48.                         $("span,#two").css("background-color","red");
  49.                 }
  50.                 function b6()
  51.                 {
  52.                         $("body div").css("background-color","red");
  53.                 }
  54.                 function b7()
  55.                 {
  56.                         $("body>div").css("background-color","red");
  57.                 }
  58.                 function b8()
  59.                 {
  60.                         $(".one+div").css("background-color","red");
  61.                 }
  62.                 function b9()
  63.                 {
  64.                         $("#two~div").css("background-color","red");
  65.                 }
  66.                 function b8_a()
  67.                 {
  68.                         $(".one+div[class!=one]").css("background-color","red");
  69.                 }
  70.                 function c10()
  71.                 {
  72.                         $("div:first").css("background-color","red");
  73.                 }
  74.                 function c11()
  75.                 {
  76.                         $("div:last").css("background-color","red");
  77.                 }
  78.                 function c12()
  79.                 {
  80.                         $("div:not(.one)").css("background-color","red");
  81.                 }
  82.                 function c13()
  83.                 {
  84.                         $("div:even").css("background-color","red");
  85.                 }
  86.                 function c14()
  87.                 {
  88.                         $("div:odd").css("background-color","red");
  89.                 }
  90.                 function c15()
  91.                 {
  92.                         $("div:eq(3)").css("background-color","red");
  93.                 }
  94.                 function c16()
  95.                 {
  96.                         $("div:gt(3)").css("background-color","red");
  97.                 }
  98.                 function c17()
  99.                 {
  100.                         $("div:lt(3)").css("background-color","red");
  101.                 }
  102.                 function c18()
  103.                 {
  104.                         $(":header").css("background-color","red");
  105.                 }
  106.                 function d21()
  107.                 {
  108.                         $("div:contains('di')").css("background-color","red");
  109.                 }
  110.                 function d22()
  111.                 {
  112.                         $("div:empty").css("background-color","red");
  113.                 }
  114.                 function d23()
  115.                 {
  116.                         $("div:has(.mini)").css("background-color","red");
  117.                 }
  118.                 function d24()
  119.                 {
  120.                         $("div:parent").css("background-color","red");
  121.                 }
  122.                 function e25()
  123.                 {
  124.                         $("div[title]").css("background-color","red");
  125.                 }
  126.                 function e26()
  127.                 {
  128.                         $("div[title='test']").css("background-color","red");
  129.                 }
  130.                 function e27()
  131.                 {
  132.                         $("div[title!='test']").css("background-color","red");
  133.                 }
  134.                 function e28()
  135.                 {
  136.                         $("div[title^='te']").css("background-color","red");
  137.                 }
  138.                 function e29()
  139.                 {
  140.                         $("div[title$='est']").css("background-color","red");
  141.                 }
  142.                 function e30()
  143.                 {
  144.                         $("div[title*='es']").css("background-color","red");
  145.                 }
  146.                 function e31()
  147.                 {
  148.                         $("div[id][title*='es']").css("background-color","red");
  149.                 }
  150.                 function f32()
  151.                 {
  152.                         $("div[class='one'] :nth-child(2)").css("background-color","red");
  153.                 }
  154.                 function f33()
  155.                 {
  156.                         $("div[class='one'] :first-child").css("background-color","red");
  157.                 }
  158.                 function f34()
  159.                 {
  160.                         $("div[class='one'] :last-child").css("background-color","red");
  161.                 }
  162.                 function f35()
  163.                 {
  164.                         $("div[class='one'] :only-child").css("background-color","red");
  165.                 }
  166.     </scrip去掉t>

  168.    
  169.        
  170. </head>
  171. <body>
  172.         <input type="radio" name="rdo" id="rdo1" target="f1" /><label for="rdo1">基本选择器</label>
  173.         <input type="radio" name="rdo" id="rdo2" target="f2" /><label for="rdo2">层次选择器</label>
  174.         <input type="radio" name="rdo" id="rdo3" target="f3" /><label for="rdo3">基本过滤选择器</label>
  175.         <input type="radio" name="rdo" id="rdo4" target="f4" /><label for="rdo4">内容过滤选择器</label>
  176.         <input type="radio" name="rdo" id="rdo5" target="f5" /><label for="rdo5">属性选择器</label>
  177.         <input type="radio" name="rdo" id="rdo6" target="f6" /><label for="rdo6">子元素过滤选择器</label>
  178.         <!-- 控制按钮 -->
  179.         <fieldset id="f1">
  180.         <!--<legend>Title</legend>-->
  181.         <h3>基本选择器.</h3>
  182.         <input type="button" value="选择 id为 one 的元素." id="btn1" onclick="a1();" />  
  183.         <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" onclick="a2();" />
  184.         <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" onclick="a3();"  />
  185.         <input type="button" value="选择 所有的元素." id="btn4" onclick="a4();"  />
  186.         <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" onclick="a5();" />
  187.         </fieldset>

  189.         <fieldset id="f2">
  190.         <h3>层次选择器.</h3>
  191.         <input type="button" value="选择 body内的所有div元素." id="btn6" onclick="b6();" />
  192.         <input type="button" value="在body内,选择子元素是div的。" id="btn7" onclick="b7();"  />
  193.         <input type="button" value="选择 所有class为one 的下一个div元素." id="btn8" onclick="b8();"  />
  194.         <input type="button" value="选择 所有class为one 的下一个class不为one的div元素." id="btn8_a" onclick="b8_a();" />
  195.         <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn9" onclick="b9();"  />
  196.         </fieldset>

  198.         <fieldset id="f3">
  199.         <h3>基本过滤选择器.</h3>
  200.         <input type="button" value="选择第一个div元素." id="btn10" onclick="c10();" />
  201.         <input type="button" value="选择最后一个div元素." id="btn11" onclick="c11();"/>
  202.         <input type="button" value="选择class不为one的 所有div元素." id="btn12" onclick="c12();"/>
  203.         <input type="button" value="选择索引值为偶数 的div元素." id="btn13" onclick="c13();"/>
  204.         <input type="button" value="选择索引值为奇数 的div元素." id="btn14" onclick="c14();"/>
  205.         <input type="button" value="选择索引值等于3的元素." id="btn15" onclick="c15();"/>
  206.         <input type="button" value="选择索引值大于3的元素." id="btn16" onclick="c16();"/>
  207.         <input type="button" value="选择索引值小于3的元素." id="btn17" onclick="c17();"/>
  208.         <input type="button" value="选择所有的标题元素." id="btn18" onclick="c18();"/>
  209.         </fieldset>

  211.         <fieldset id="f4">
  212.         <h3>内容过滤选择器.</h3>
  213.         <input type="button" value="选取含有文本“di”的div元素." id="btn21" onclick="d21();"/>
  214.         <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn22" onclick="d22();"/>
  215.         <input type="button" value="选取含有class为mini元素 的div元素." id="btn23" onclick="d23();"/>
  216.         <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn24" onclick="d24();"/>
  217.         </fieldset>

  219.         <fieldset id="f5">
  220.         <h3>属性选择器.</h3>
  221.         <input type="button" value="选取含有 属性title 的div元素." id="btn25" onclick="e25();"/>
  222.         <input type="button" value="选取 属性title值等于“test”的div元素." id="btn26" onclick="e26();"/>
  223.         <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn27" onclick="e27();"/>
  224.         <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn28" onclick="e28();"/>
  225.         <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn29" onclick="e29();"/>
  226.         <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn30" onclick="e30();"/>
  227.         <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn31" onclick="e31();"/>
  228.         </fieldset>

  230.         <fieldset id="f6">
  231.         <h3>子元素过滤选择器.</h3>
  232.         <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn32" onclick="f32();"/>
  233.         <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn33" onclick="f33();"/>
  234.         <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn34" onclick="f34();"/>
  235.         <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn35" onclick="f35();"/>
  236.         </fieldset>

  238.         <br /><br />

  240.         <div class="one" id="one" >
  241.                 div：id为one,class为one  
  242.                 <div class="mini">class为mini</div>
  243.         </div>

  245.         <div class="one"  id="two" title="test" >
  246.                 div：id为two,class为one,title为test  
  247.                 <div class="mini"  title="other">class为mini,title为other</div>
  248.                 <div class="mini"  title="test">class为mini,title为test</div>
  249.         </div>

  251.         <div class="one">
  252.                 class为one  
  253.                 <div class="mini">class为mini</div>
  254.                 <div class="mini">class为mini</div>
  255.                 <div class="mini">class为mini</div>
  256.                 <div class="mini"></div>
  257.         </div>

  259.         <div class="one">
  260.                 class为one  
  261.                 <div class="mini">class为mini</div>
  262.                 <div class="mini">class为mini</div>
  263.                 <div class="mini">class为mini</div>
  264.                 <div class="mini"  title="tesst">class为mini,title为tesst</div>
  265.         </div>

  267.         <div>div</div>

  269.         <div>
  270.                 包含input的type为"hidden"的div<input type="hidden" size="8"/>
  271.         </div>

  273.         <span id="sp1">我是span元素.</span>
  274. </body>
  275. </html>
Copy code
Demo.htm (9.12 KB, Number of downloads: 0)

Score

Number of participants1MB+1 contribute+1 Collapse reason
The temperature in the northern city is 22 degrees + 1 + 1 Like one!

See all ratings





Previous:Code for booting auto-start exe in .net?
Next:【Remove lol garbage plugin】LOL memory optimization junk cleaner v2.0

Related Posts
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com