一些应该熟记于心的jQuery函数和技巧

发表于:2011-1-19 10:00

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:司马牵牛 译    来源:51Testing软件测试网采编

  对树进行选择和转换

  选择

  就想树一样,网站结构中叶存在子与父。在jQuery中,我们可以利用这一结构。假设我们拥有相同的html,但是现在我们想要选择名为“main”的div中的p元素,但是不想对任何有关p元素的东西造成变化。

  我们有三种可能的方案,如下:

  • $("#wrapper").children('#main').children('p').css("color","orange");  
  • $("#wrapper").children().children('p').css("color","orange");  
  • $("#main").children('p').css("color","orange");
  •   利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器,该方法将仅选择我们需要的元素,如果不是这样,父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。

      唯一的不同之处在于:第二个选择器中我们什么也没有指定,所有每一个子元素都会被选中。此处的关键在于:在上图中wrapper这个div元素下除main之外并没有其他子元素,所以我们得到的结果是一样的。

      添加元素

      现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等,假设我们想要添加一个列表,如下:

  • <ul> 
  •     <li>Dog</li> 
  •     <li>Cat</li> 
  •     <li>Frog</li> 
  •  </ul>
  •   只是一些字符串,所以我们可以在JavaScript代码中这样写:

  • var list"<ul>\n" 
  •             + "<li>Dog</li>\n"  
  •             + "<li>Cat</li>\n"  
  •             + "<li>Frog</li>\n"  
  •             "</ul>";
  •   现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。

      最后我们可以输入完整的代码,如下所示:

  • $(document).ready(function(){  
  •     var list"<ul>\n" 
  •                 + "<li>Dog</li>\n"  
  •                  + "<li>Cat</li>\n"  
  •                  + "<li>Frog</li>\n"  
  •                 "</ul>";         
  • $("#wrapper").children('#main').append(list);  
  • });
  •   字面上我们将字符串附加到HTML中的</p>,结果是这个列表显示在p元素之后。

    43/4<1234>
    《2023软件测试行业现状调查报告》独家发布~

    关注51Testing

    联系我们

    快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

    法律顾问:上海兰迪律师事务所 项棋律师
    版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
    投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

    沪ICP备05003035号

    沪公网安备 31010102002173号