jqueryAPI学习之add(),addBack(),addClass(),after()学习

最新推荐文章于 2021-08-11 14:48:26 发布

壹间show

最新推荐文章于 2021-08-11 14:48:26 发布

阅读量1.1k

点赞数

分类专栏： jquery学习文章标签： jqueryapi学习 add用法 addBack用法 addClass用法

本文链接：https://blog.csdn.net/xpf_show/article/details/38471737

版权

jquery学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、.add(）用于添加元素到匹配元素集合，可接受多重类型参数

【1】add(selector)一个字符串表示的选择器表达式，找到元素并添加到元素集合中

【2】add(elements);一个或多个元素添加到匹配的元素集合

【3】add(html) 将html代码片段添加到匹配的元素集合

【4】add(jQuery object)一个现有的jQuery对象添加到匹配的元素集合

【5】add(selector,context)；select:一个字符串表达式的选择器表达式;context:指定选择器查找与思念诉所在的上下文

在上述中我们可以看到，通过add接受的参数将选择的元素添加到add方法中构造的一个jquery对象中

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <style type="text/css">
     .widget{color:green;}
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
  </head>
  <body>
  <p>aaaaa</p>
  <ul>
    <li>item1</li>
    <li>imte2</li>
    <li>item3</li>
  </ul>
   <script type="text/javascript">
    $(document).ready(function()
    {
      $('p').add('ul').addClass('widget');
      
    })
   </script>
  </body>
</html>

这里的出现的效果如下图

而且我们可以通过使用一个选择器或者应用DOM元素本身作为.add（）方法的参数，将段落添加到列表中

代码如下

   <script type="text/javascript">
    $(document).ready(function()
    {
     $('li').add('p').addClass('widget');
     
    })
   </script>

结果如上显示效果，如果为add添加p到元素集合中，则如下图

其他的如动态添加到页面之类的效果大家自己可以尝试则去实验下，在这里就不多说了

二、addBack();用于添加堆栈中元素到当前集合，类似于一个选择性的过滤器

接受的参数仅仅只是selector;一个字符串，其中包含选择器表达式，匹配当前元素集合不包括内在元素;

在这里，我们先看两段代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <style type="text/css">
     .widget{color:green;}
     .red{color: red;}
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
  </head>
  <body>
  <p>aaaaa</p>
  <ul>
    <li>item1</li>
    <li>imte2</li>
    <li class="widget">item3</li>
    <li>imte4</li>
    <li>item5</li>
  </ul>
   <script type="text/javascript">
    $(document).ready(function()
    {
     $('li.widget').nextAll().addClass('red');
    })
   </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <style type="text/css">
     .widget{color:green;}
     .red{color: red;}
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
  </head>
  <body>
  <p>aaaaa</p>
  <ul>
    <li>item1</li>
    <li>imte2</li>
    <li class="widget">item3</li>
    <li>imte4</li>
    <li>item5</li>
  </ul>
   <script type="text/javascript">
    $(document).ready(function()
    {
     $('li.widget').nextAll().addBack().addClass('red'); 
});
   </script>
  </body>
</html>

在这里，我们就可以很明显的发现使用addvBack()以后的区别了。而其中我们需注意的是，addBack是1.8以上版本才有效

三、addClass()如上应用，这里就不多解释了，主要是用于为匹配的元素添加样式类

壹间show

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqueryAPI学习之add(),addBack(),addClass(),after()学习

一、.add(）用于添加元素到匹配元素集合，可接受多重类型参数【1】add(selector)一个字符串表示的选择器表达式，找到元素并添加到元素集合中【2】add(elements);一个或多个元素添加到匹配的元素集合【3】add(html) 将html代码片段添加到匹配的元素集合【4】add(jQuery object)一个现有的jQuery对象添加到匹配的元素集合【5】
复制链接

扫一扫