jq 节点操作

最新推荐文章于 2021-02-02 22:41:28 发布
最新推荐文章于 2021-02-02 22:41:28 发布
阅读量330 收藏
点赞数
分类专栏： jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32295383/article/details/81228326
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="jquery1.8.3.min.js"></script>
  <style>
    *{list-style:none;padding:0px;margin:0px;}
    .plus{padding-left:35px;background:url(z-plus.jpg)no-repeat top left;}
    .minus{padding-left:35px;background:url(z-sub.jpg)no-repeat top left;}
    .end{padding-left:50px;background:url(z-end.gif)no-repeat left center;}
  </style>
  <script>
     $(document).ready(function(){
           $("#tree li:not(':has(ul)')").addClass('end');//not留下不匹配的。说的是即使li,又不符合has(ul)这个规则 即是li又不包含ul的留下
           $("#tree li:has(ul)").addClass('plus');//即是li又包含ul的留下
           $("#tree ul").hide();//hide隐藏   1000ms  1000ms隐藏    hide()
           $("span").click(function(e){//event=window.event
                 var  cc=e.target;//获取事件源
                 var cctype=cc.type;//e是jquery事件对象   有自己的属性  target属性：事件源
                 if(cctype=='checkbox'){
                      if($(cc).prop("checked")){//判断事件源是是选中状态
                           $(cc).parent().parent().find(":checkbox").prop("checked",true);
                           //通过checkbox找到span 找到 li 找到ul prev找到上一个span，操作span中checkbox被选中
                           findFather(cc);
                      }else{
                           $(cc).parent().parent().find(":checkbox").prop("checked",false)
                           unCheckedFather(cc);
                      }
                 }else{
                       var li=$(this).parent();
                       if(li.hasClass('minus')){//hasClass 含有-
                              $(this).next().hide();//show显示  $(this)是span  .parent() li
                              $(this).parent().removeClass('minus').addClass('plus')//先找到li、 移除-  添加+
                       }else{
                             $(this).next().show();//show显示  $(this)是span  .parent() li
                             $(this).parent().removeClass('plus').addClass('minus')//先找到li、 移除+  添加-
                       }
                 }   
           });
     });
     /*递归：算法。自己调用自己  setTimeout*/
   function findFather(obj){
     if($(obj).parent().parent().parent().attr("id")!='tree'){
         var father=$(obj).parent().parent().parent().prev().find(":checkbox");
         father.prop("checked",true);
         findFather(father)
      }     
   }

    function unCheckedFather(obj){
       if($(obj).parent().parent().parent().attr("id")!='tree'){
        var sibChecked=$(obj).parent().parent().siblings().has(":checked") ;
        var father=$(obj).parent().parent().parent().prev().find(":checkbox");
          if(sibChecked.size()==0){
               father.prop("checked",false);
               unCheckedFather(father);
           }
        }
     }
  </script>
 </HEAD>
 <BODY>
  <ul id="tree">
         <li>
            <span><input type="checkbox"/>节点1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
       <li>
            <span><input type="checkbox"/>节点1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
       <li>
            <span><input type="checkbox"/>节点1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>节点11</span>
                   <ul>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                      <li><span><input type="checkbox"/>节点111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
    </ul>
 </BODY>
</HTML>
 

qq_32295383
关注
专栏目录
jQuery节点
weixin_44621746的博客
04-27 829
jQuery节点 一、创建节点 1、下面是通过JavaScript原生接口创建节点的方法，它在处理上是非常复杂与繁琐的。 下面是它的创建流程，比较简单，大体上如下： 首先是创建节点（常见的元素、属性和文本）；其次是添加节点的一些属性；最后是加入到文档中去。 2、创建流程中涉及到的方法大致有： （1）创建元素的document.createEleme...
JQ 删除节点
08-13
然而，删除节点操作应当谨慎进行，因为这会直接影响到DOM结构，可能引发未预期的副作用，如影响其他元素的位置或者导致事件监听失效。 总结来说，JQ删除节点涉及的关键知识点包括： - jQuery库的DOM操作功能 - `...
jq 对节点操作
牧羊人之月
11-09 9306
<br /><body><br />  <p title="水果" id="pp">你喜欢的水果是？</p><br />  <ul><br />   <li>苹果</li><br />   <li>香蕉</li><br />   <li>荔枝</li><br />  </ul><br /> </body><br /> <br />一、查找节点<br />1、查找元素节点<br />//弹出“香蕉”<br /><script type="text/javascript" src="jquery-1.4.2.j
JQ 节点操作
boonyaxnn的博客
04-23 250
一、内部插入：给当前节点添加孩子 A.append(B) 向【A节点内部现有内容之后】追加【B节点】 B.appendTo(A) 将【B节点】追加到【A节点内部现有内容之后】 A.prepend(B) 向【A节点内部现有内容之前】追加【B节点】 B.prependTo(A) 将【B节点】追加到【A节点内部的现有内容...
jQuery节点操作
sleepwalker_1992的专栏
05-18 243
内部插入节点append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容外部插入节点after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容删除节点remove()empty()复制节点clone()替换节点replacewith()&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;he...
JQ 创建节点
08-13
在JavaScript的世界里，jQuery（简称JQ）是一个广泛使用的库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本篇文章将深入探讨“JQ创建节点”的知识点，这在构建动态网页时非常关键。 首先，理解DOM...
JQ 包裹节点
08-13
本文将深入探讨“JQ包裹节点”这一概念，以及如何在实际项目中应用它。 首先，我们要理解什么是“包裹节点”。在HTML中，我们可以用一个元素来包围另一个或多个元素，这个过程就叫做包裹。在jQuery中，"包裹节点"...
JQ 插入节点和移动节点
08-13
在给定的博客文章中，作者可能详细讲解了这些方法的用法、示例和最佳实践，帮助读者更好地理解和运用JQ的节点操作功能。通过阅读和实践，开发者能够更加熟练地对网页内容进行动态更新和布局调整，提高网站的交互性和...
jq带节点的步骤进度条
09-24
**jq带节点的步骤进度条**是一种在网页中显示任务进度或步骤流程的交互元素，通常用于指导用户完成一系列操作。这种进度条通过JavaScript库jQuery（简称jq）来实现，可以提供直观的视觉反馈，帮助用户理解他们所处的...
jquery对节点的操作
梦蓝樱飞(一点一滴, 记录个人成长之路)
02-08 634
Jquery对事件的绑定 ().bind(“事件类型”,事件处理);给jquery绑定一个事件().bind(“事件类型”,事件处理);给jquery绑定一个事件().bind(“事件类型”, 事件处理); 给jquery绑定一个事件 ().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理) 绑定多个事件类型并且使用同一个处理程序。 $().bind({ 事件类型1...
jq 节点
weixin_33749242的博客
12-11 92
<div id="box"> 我是内容</div><p class='des'>我是外面的p元素</p><script src="jquery-1.12.4.js"></script><script> $(function () { //创建jq对象 $("div").app...
JQ节点操作
weixin_43453916的博客
12-07 685
Title 这是我们mainDiv 内部插入节点 这个是P标签 这个是P标签 添加节点 移动节点节点 插入到儿子节点第一个 插入到儿子节点第一个 插入到节点后面 插入到节点后面2 插入到节点前面 插入到节点前面2 包裹节点 移出包裹节点 复制节点 删除节点 删除节点BABA 替换节点 ...
jq节点操作
weixin_30709929的博客
11-03 79
//1.创建节点 var aDiv = $('<div></div>'); aDiv.html('你爸'); aDiv.css('background','red'); //2.插入节点 //2.1 把aDiv拼接到.footer //$('.footer').append(aDiv); //aDiv.appendTo($('.foote...
jq -- 节点操作
bylifan的博客
09-15 191
创建节点: // 创建节点1: $("标签") :类比于js中的document.createElement("li"); console.log($("<li class='aaa'>我是li标签</li>")); // 创建节点2: $("ul").html(""); :类比inner...
jQuery DOM节点操作
weixin_30484247的博客
07-06 161
一、创建节点 var box = $('<div id =box>节点</div>'); //创建一个节点 $('body').appended(box);　　　　　　//将节点插入<body>元素内部 二、插入节点 内部插入节点方法 append(content)　　　　　　　 　向指定元素后面插入节点content append(f...
JQuery中的节点操作
Dimuzero的博客
02-02 155
1.append 和 appednTo append： 内容追加到元素内容之后 <div id='box'> 11 </div> <script> $(function () { $('#box').append('<span></span>') }) </script> appednTo： 把内容追加到元素内容之后 $('<span>111</span>')
JQ教程：动画效果、事件处理与节点操作详解
本文主要介绍了jQuery中的动画效果、尺寸处理、事件及事件委托，同时还涉及到了元素节点操作。 在jQuery中，动画效果是通过`animate()`方法实现的。这个方法允许开发者平滑地改变元素的样式属性，如宽度、高度等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值