jquery子元素选择器

今天药忘吃喽~ 2023-06-12 06:20 120阅读 0赞 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title>子元素选择器</title>
  5.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6.   <style type="text/css"> .yang{ border-collapse: collapse; width:500px;height:30px;border:1px solid red;"}
  7.   </style>
  8.   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  9.   <script type="text/javascript">
  10.   /* :nth-child(index/even/odd) //匹配指定索引，或偶数，或奇数的元素（索引从1开始） :first-child //匹配第一个子元素 :last-child //匹配最后一个子元素 :only-child //如果元素为父元素的唯一子元素则匹配 */ window.onload=function(){ $('#btnOk').click(function(){ //匹配第一个子元素
  11.             //$('ol li:first-child ').html('水浒传');
  13.             //匹配指定索引
  14.              // $("ol li:nth-child(3)").html('杨在鲁');
  16.              //如果元素为父元素的唯一子元素则匹配
  17.  $("ol li:only-child").html('杨在鲁'); }); }; </script>
  18.  </head>
  19.  <body>
  20.     <ol>
  21.         <li>三国演义</li>
  22.         <li>西游记</li>
  23.         <li></li>
  24.         <li>红楼梦</li>
  25.     </ol>
  26.         <ol>
  27.         <li>义</li>
  28.     </ol>
  29.   <hr/>
  30.   <input type="button" id='btnOk' value='确定' />
  31.  </body>
  32. </html>

更多专业前端知识，请上 【猿2048】www.mk2048.com

发表评论

表情：
评论列表 （有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读