【Jquery 节点】

提示:个人理解的,看着理解吧。应该可以有点小帮助吧orz。大家要好好学习喔!有问题请联系我,感谢。

节点包括查找,创建,插入,删除,复制,替换                                       

一.全文可用代码【贯穿全文】

代码如下(示例):

1.log后台弹出  请移步去后台查看(开发者模式)


 <style>
    .ne {
      color: red;
    }
    .pr {
      color: blue;
    }
  </style>
</head>

<body>
  <h2> 今日动漫排行榜</h2>
  <ul class="an">
    <li>名侦探柯南</li>
    <li>火影</忍者li>
    <li>海贼王</li>
    <li>夏日重现</li>
  </ul>

1.查找节点

查找ul 里面 所有的 li 元素  (开发者工具里面看 ):

  $(function () {
      console.log($("ul li"));
    })

这里的截图就不放出来了.(3个li)。

2.创建节点

2.1 语法:$(html)

  代码(创建 li1/2 两个节点  ):


    $(function () {
      var li1 = $("<li>迪迦奥特曼</li>");
      var li2 = $("<li>约会大作战</li>");
    })

3.插入节点

节点的插入分 内部插入 和  外部插入 

  代码(插入  上面2.创建的 li1/2 两个节点  ):

  $("ul").append(li1);
  $("ul").prepend(li2);

可以写在以2.创建节点里面(列如:)

$(function () {
      // 创建节点
       var li1 = $("<li>迪迦奥特曼</li>");
      var li2 = $("<li>约会大作战</li>");
      // 插入节点
      $("ul").append(li1);
      $("ul").prepend(li2);
    })

-----------------------------------------------------------------------

一:内部插入

append(content):  在匹配元素pp插入指定内容
appendTo(content):   把选择元素追加到另一个指定元素集合内部

prepend (content):  在匹配元素开始的位置插入指定内容
prependTo (content):   将所有匹配元素前置到指定的元素集合内部

二:外部插入

after(content):  在匹配元素之后插入内容
before(content):   将匹配的元素插入另一个指定的元素集合后面
insertBefore(content): 在匹配元素之前插入内容
insertAfter (content):  将匹配元素插入到另一个指定的元素集合的前面

------------------------------------------------------------------------

然后 网页打开页面 结果 是:

今日动漫排行榜

  • 约会大作战
  • 名侦探柯南
  • 火影
  • 海贼王
  • 夏日重现
  • 迪迦奥特曼

3.删除节点

三个  方法 和 【使用场景】:

3.1   remove()   方法  【移除元素及数据和事件】

3.2   detach()    方法  【只是移除元素,但是保留数据和事件

3.3   empty()     方法    【不移出元素本身,仅仅只清空元素及  所有子元素  的内容】

ps:实例代码:

(节选 remove():

删除  ul 后代 li 标签 里 下标为2  eq(下标从零开始) 的:)

注意:真相只有一个(删除掉  【....柯南】)

 $(function () {
      //省略部分代码
      //删除节点
      $("ul  li:eq(1)").remove();
    })

4. 复制节点

语法:clone([includeEvents])

includeEvents】:可选参数  布尔类型 默认值:false 知否复制匹配元素的所有事件处理

ps:实例 

 $(function () {
      $("ul  li:eq(0)").clone(true).appendTo(".an");
      $("ul  li:eq(0)").clone(false).appendTo(".an");
    })

输出结果:

今日动漫排行榜

  • 约会大作战
  • 火影
  • 海贼王
  • 夏日重现
  • 迪迦奥特曼
  • 约会大作战
  • 约会大作战

5.替换节点

方法  和   【语法】

5.1        replaceWith()    将所有匹配的元素替换成指定的HTML或DOM元素。

             $(selector).replaceWith(content) 

5.2        replacceAll()     用匹配的元素替换掉所有 selector匹配到的元素。

             $(content).replacceAll(selector) 

ps:实例 【换了前两项】

    $(function () {

      $("ul  li:eq(0)").replaceWith("<li>1.约会大作战</li>");

      $("<li>2. 火影</li>").replaceAll("ul  li:eq(1)");
    })

look  原先的  前两项  已经更改  :

今日动漫排行榜

  • 1.约会大作战
  • 2. 火影
  • 海贼王
  • 夏日重现
  • 迪迦奥特曼
  • 约会大作战
  • 约会大作战


  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值