python: DOM 小实例

一、全选全部取消反选

全选：选择指定的所有项目。

全部取消：取消所有选定的项目。

反选: 选择未选定的，之前已选定的则取消。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

      <div>

          <input type="button" value="全选" onclick="Quan()">

          <input type="button" value="取消" onclick="Qu()">

          <input type="button" value="反选" onclick="Fan()">

      </div>

      <table>

          <thead>

                <tr>

                    <th>序号</th>

                    <th>用户名</th>

                    <th>年龄</th>

                </tr>

          </thead>

          <tbody id="tb">

                <tr>

                    <th><input class="c1" type="checkbox"/></th>

                    <th>alex</th>

                    <th>18</th>

                </tr>

                <tr>

                    <th><input class="c1" type="checkbox"/></th>

                    <th>alex</th>

                    <th>18</th>

                </tr>

                <tr>

                    <th><input class="c1" type="checkbox"/></th>

                    <th>alex</th>

                    <th>18</th>

                </tr>

          </tbody>

      </table>

      <script>

          function Quan() {

              var a = document.getElementById("tb");  //通过id  找到这个标签

              var checks = a.getElementsByClassName("c1");  // 获取class属性为c1 的标签

              for(i=0;i<checks.length;i++){

                  var checks_c = checks[i];

                  checks[i].checked = true;   //  checked 判断是否为已选定 也可设置

              }

          }

          function Qu() {

              var a = document.getElementById("tb");

              var checks = a.getElementsByClassName("c1");

              for(i=0;i<checks.length;i++) {

                  var checks_c = checks[i];

                  checks[i].checked = false;

              }

          }

          function Fan() {

              var a = document.getElementById("tb");

              var checks = a.getElementsByClassName("c1");

              for(i=0;i<checks.length;i++) {

                  var checks_c = checks[i];

                  if(checks_c.checked){

                      checks_c.checked = false;

                  }else{

                      checks_c.checked = true;

                  }

              }

          }

      </script>

 </body>

 </html>

实例

二、输入框

我们进经常会遇到一个输入框在没有输入内容的时候他是给我们以灰色字体显示的 “请输入内容” 。

当我们鼠标选定的时候字符串消失，这个字符串就会消失，开始输入内荣而我们输入的内容是黑色的字体；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .gg{

             color: #dddddd;

         }

         .dd{

             color: black;

         }

     </style>

 </head>

 <body>

      <input type="text" class="gg" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)">

      <script>

          function Focus(ths) { // 点击触发这个函数

              ths.value = "";  // 把他的value 设置成 空字符串；

              ths.className = "dd"; // 改变标签的属性样式；

          }

          function Blur(ths) { // 鼠标移动之后 在外面点击 触发这个函数

              var a = ths.value;  // 获取他的value

              if( a == "请输入内容" || a.trim().length == 0){  // 判断内容是否为空或者 是 请输入内容

                  ths.className = "gg"; // 如果是 给他设置样式

                  ths.value = "请输入内容" // 变为原来的 字符串；

              }

          }

      </script>

 </body>

 </html>

三、对筛选标签的操作

比如当我们遇到多数相同的标签是，需对一部分进行操作，我们就可以按照他们的属性进行筛选；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

      <input type="button" onclick="Func()" value="点我"/>

      <div id="c1">

          <div class="a">123</div>

          <div class="a" alex="sb">123</div>

          <div class="a">123</div>

          <div class="a">123</div>

          <div class="a" alex="sb">123</div>

          <div class="a">123</div>

          <div class="a">123</div>

          <div class="a" alex="sb">123</div>

      </div>

      <script>

          function Func() {

              var a = document.getElementById("c1");

              var b = a.children;

              for(var i=0;i<b.length;i++){

                  var ccc = b[i];

                  var ddd = ccc.getAttribute("alex");  // 获取指定标签的属性

                  if(ddd == "sb"){

                      ccc.innerText = "";  //设置文本

                  }else {

                  }

              }

          }

      </script>

 </body>

 </html>

实例

四、小的操作栏

我们选定的菜单他会给我们相应的内容；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         ul{

             list-style: none;

             padding: 0;

             margin: 0;

         }

         ul li{

             float: left;

             background-color: #2459a2;

             color: white;

             padding: 8px 10px;

         }

         .clearfix:after{

             display: block;

             content: ".";

             height: 0;

             visibility: hidden;

             clear: both;

         }

         .hide{

             display: none;

         }

         .tab-menu .title{

             background-color: #dddddd;

         }

         .tab-menu .title .active{

             background-color: white;

             color: black;

         }

         .tab-menu .content{

             border: 1px solid #dddddd;

             min-height: 150px;

         }

     </style>

 </head>

 <body>

      <div style="width: 400px; margin: 0 auto;">

          <div class="tab-menu">

              <div class="title clearfix">

                  <ul>

                      <li target="h1" class="active" onclick="Show(this);">价格趋势</li>

                      <li target="h2" onclick="Show(this);">市场分布</li>

                      <li target="h3" onclick="Show(this);">其他</li>

                  </ul>

              </div>

              <div id="content" class="content">

                  <div con="h1">content1</div>

                  <div con="h2" class="hide">content2</div>

                  <div con="h3" class="hide">content3</div>

              </div>

          </div>

      </div>

      <script>

          function Show(ths) {

              var brother = ths.parentElement.children;  //获取标签父类的所有孩子

              console.log(brother);

              var targets = ths.getAttribute("target");  // 获取指定属性的标签

              ths.className = "active"; // 设置class属性

              for(var i=0;i<brother.length;i++){

                  if(ths == brother[i]){

                  }else{

                      brother[i].removeAttribute("class");  //其他的删除class属性

                  }

              }

              var contents = document.getElementById("content").children;

              for(var j=0;j<contents.length;j++){

                  var current_content = contents[j];

                  var cons = current_content.getAttribute("con");

                  if(cons == targets){

                      current_content.classList.remove("hide");

                  }else{

                      current_content.className = "hide";

                  }

              }

          }

      </script>

 </body>

 </html>

实例

五、输入框

有时候我们还会遇到这样的输入框, 他会自动把你输入的内荣添加到下面的列表内

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div>

         <input type="text"/>

         <input type="button" value="添加" onclick="AddElement(this)"/>

     </div>

     <div>

         <ul id="commentList">

             <li>alex</li>

             <li>123</li>

         </ul>

     </div>

     <script>

         function AddElement(ths) {

             var val = ths.previousElementSibling.value; //获取上一个兄弟标签元素 的 value

             ths.previousElementSibling.value = "";  //  把上一个兄弟标签元素的value 设为 空字符串

             var list = document.getElementById("commentList");

             //第一种字符串方式对象方式

 //            var str = "<li>" + val + "</li>"; //字符串拼接

 //            list.insertAdjacentHTML("afterEnd",str); // 插入一个标签

             //第二种对象方式

 //            var tag = document.createElement("li");  // 按照指定名字创建一个 标签

 //            tag.innerText = val;  // 给这个标签 赋予内容

 //            list.appendChild(tag);  // 添加一个子标签

             //第三种  添加的标签里面套标签

             var tag = document.createElement("li");

             tag.innerText = val;

             var temp = document.createComment("a");

             temp.innerText = "百度";

             temp.href = "www.baidu.com";

             tag.appendChild(temp); // 添加一个子标签

             list.insertBefore(tag,list.children[2]); // 在指定的已有标签之前插入一个新标签

         }

     </script>

 </body>

 </html>

 beforeEnd // 内部最后

 beforeBegin // 外部上边

 afterBegin // 内部贴身

 afterEnd // 外部贴身

六、自动返回最顶部页面

在我们浏览页面的是由于页面太长返回最顶部很不方便所有又有了这样的方法

在频幕的右下角设置一个点击框点击一下自动返回最顶部页面

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .go-top{

             position: fixed;

             right: 28px;

             bottom: 19px;

             width: 40px;

             height: 40px;

             background-color: #2459a2;

             color: white;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body onscroll="Func()"> //鼠标滑动时触发这个事件

     <div id="i1" style="height: 2000px">

         <h1>hello</h1>

     </div>

     <div id="i2" class="go-top hide">

         <a onclick="GoTop();">返回顶部</a>

     </div>

     <script>

         function Func() {

             var scrollTo = document.body.scrollTop;   // 获取滚动高度

             var ii = document.getElementById("i2");

             if(scrollTo>100){  // 如果滚动高度大于100时  让它显示出来

                 ii.classList.remove("hide");

             }else{

                 ii.classList.add("hide");  //否则是影藏状态

             }

         }

         function GoTop() {

             document.body.scrollTop = 0;   //滑动高度设为0

         }

     </script>

 </body>

 </html>

实例

七、按照浏览内容自动显示属于该文的菜单；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

             background-color: #dddddd;

         }

         .pg-header{

             height: 48px;

             background-color: black;

         }

         .w{

             margin: 0 auto;

             width: 980px;

         }

         .pg-body .menu{

             position: absolute;

             left: 200px;

             width: 180px;

             background-color: white;

             float: left;

         }

         .pg-body .menu .active{

             background-color: #425a66;

             color: white;

         }

         .pg-body .fixed{

             position: fixed;

             top: 10px;

         }

         .pg-body .content{

             position: absolute;

             left: 385px;

             right: 200px;

             background-color: white;

             float: left;

         }

         .pg-body .content .item{

             height: 900px;

         }

     </style>

 </head>

 <body onscroll="Hua()">

      <div class="pg-header">

          <div class="w">

          </div>

      </div>

      <div class="pg-body">

          <div id="menu" class="menu">

              <ul>

                  <li>第一章</li>

                  <li>第二章</li>

                  <li>第三章</li>

              </ul>

          </div>

          <div id="content" class="content">

              <div class="item">床前明月光</div>

              <div class="item">疑是地上霜</div>

              <div class="item">我是郭德纲</div>

          </div>

      </div>

      <script>

          function Hua() {

              var a = document.body.offsetHeight; //body的高度

              var b = document.getElementById("content").offsetHeight; // 自身高度

              var c = document.documentElement.clientHeight; //可视范围的高度

              var huaGao = document.body.scrollTop; //鼠标滚动的高度

              console.log(a,b,huaGao,c);

              var caiDan = document.getElementById("menu"); // 获取标签

              if(huaGao>48){ //判断是否小于 48  就是最顶端的 那个黑条的高度

                  caiDan.classList.add("fixed"); // 如果小于 那么 添加样式 让它固定

              }else{

                  caiDan.classList.remove("fixed");  // 否则删除这个样式

              }

              var items = document.getElementById("content").children; // 找到他的孩子

              for(var i=0;i<items.length;i++){

                  var currentItems = items[i];   // 自身距离上一级的高度 加上  父级距离最顶端的高度 等于自己距离最顶端的高度

                  var currentItemsBodyTop = currentItems.offsetTop + currentItems.offsetParent.offsetTop;

                  var currentItemWindowTop = currentItemsBodyTop - huaGao; // 开始滑动时 自己距离最顶端的高度减去滑动高度等于 滑动后自己距离最顶端的高度

                  var currentHeight = currentItems.offsetHeight; // 自身的高度

                  var bottomHeight = currentItemsBodyTop + currentHeight; // 自身加自己距离最顶端的高度

                  if((a+b) == (huaGao+c)){

                      var mu = document.getElementById("menu").children[0].lastElementChild;

                      var lis = document.getElementById("menu").getElementsByTagName("li");

                      for(var m=0;m<lis.length;m++){

                          var current_list = lis[m];

                          if(current_list.getAttribute("class") == "active"){

                              current_list.classList.remove("active");

                              break

                          }

                      }

                      mu.classList.add("active");

                      return

                  }

                  if(currentItemWindowTop<0 && bottomHeight>huaGao){ // 如果滑动后的高度小于0(表面自己的底部刚消失)并且自身加自己距离最顶端的高度大于滑高(说明滑高还没滑完)

                      var ziji = caiDan.getElementsByTagName("li")[i]; // 找到li名字的标签 索引

                      ziji.className = "active"; // 把他的样式设为 active

                      var lis = caiDan.getElementsByTagName("li");  // 找到li名字的标签

                      for(var j=0;j<lis.length;j++){

                          if(ziji == lis[j]){  // 如果是自己啥也不干

                          }else{

                              lis[j].classList.remove("active"); //其他的全部删除样式

                          }

                      }

                      break

                  }

              }

          }

      </script>

 </body>

 </html>

实例

此次小例重在懂得原理熟练方法

巴特西

python: DOM 小实例

一、全选全部取消反选

二、输入框

三、对筛选标签的操作

四、小的操作栏

五、输入框

六、自动返回最顶部页面

最新文章

热门文章

巴特西

python: DOM 小实例

一、全选 全部取消 反选

二、输入框

三、对筛选标签的操作

四、小的操作栏

五、输入框

六、自动返回最顶部页面

最新文章

热门文章

一、全选全部取消反选