前端笔记1（选择器，动态增添/修改页面元素）

最新推荐文章于 2023-10-23 15:01:07 发布

lagoon_lala

最新推荐文章于 2023-10-23 15:01:07 发布

阅读量1.4w

点赞数 2

分类专栏：前端文章标签： JS 选择器动态修改页面元素

本文链接：https://blog.csdn.net/lagoon_lala/article/details/82775721

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

demo1：修改页面元素

全选反选，并计算总价

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      function allCheck(all){
        var allChecks=document.querySelectorAll("#all_pro_div>input");
        console.log("checkboxNum:%d",allChecks.length);
        for(var i=0;i<allChecks.length;i++){
          allChecks[i].checked=all.checked;
        }
      }
      function sumPrice(){
        var allChecks=document.querySelectorAll("#all_pro_div>input:checked");
        console.log("checkboxNum:%d",allChecks.length);
        var sum=0;
        for(var i=0;i<allChecks.length;i++){
          sum+=parseInt(allChecks[i].value);
        }
        // var sumSpan=document.querySelector("#sum_price_span");
        document.querySelector("#sum_price_span").innerText=sum+"元";
      }
    </script>
  </head>
  <body>
    <input type="checkbox" id="allCheck" name="all" onclick="allCheck(this);sumPrice();">全选
    <div id="all_pro_div">
      <input type="checkbox"  name="all" value="1">1<br/>
      <input type="checkbox"  name="all" value="2">2<br/>
    </div>
    总价：<span id="sum_price_span"></span>
  </body>
</html>

demo2：增添删除页面元素

城市联动多选框

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      function addValue(){
        var city=[["顺义","海淀","朝阳","东城"],["石家庄","唐山","廊坊","保定"]];
        var left=document.querySelector("#left");
        var right=document.querySelector("#right");
        var options=left.querySelectorAll("option");
        var cityOptions=right.querySelectorAll("option");
        for(var i=0;i<cityOptions.length;i++){
          right.removeChild(cityOptions[i]);
        }
        console.log("optionsNum:%d",options.length);
        for(var i=0;i<options.length;i++){
          if(options[i].selected){

            var pv=parseInt(options[i].value);
            for(var j=0;j<4;j++){
              var newOp=document.createElement("option");
              newOp.innerText=city[pv][j];
              right.appendChild(newOp);
            }


          }
        }
      }
    </script>
  </head>
  <body>
    <select id="left" multiple>
      <option value="0">北京</option>
      <option value="1">河北</option>
    </select>
    <input type="button" value="-->" onclick="addValue();">
    <select id="right" multiple>
    </select>
  </body>
</html>

debug过程：

选择器

整个文件则document.querySelectorAll("");

已找到上层对象可left.querySelectorAll

Id# class. 标签无

层次>，伪类：

取input的值allChecked[i].value

#all_pro_div > input:checked

InnerText为标签属性，非方法

document.querySelector("#sum_price_span").innerText=

层次选择器

E > F 子选择器

属性选择器

伪类：

CSS 伪类用于向某些选择器添加特殊的效果

锚伪类

所有CSS伪类/元素

http://www.runoob.com/css/css-pseudo-classes.html

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}               /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}      /* 鼠标移动到链接上 */

a:active {color: #0000FF}

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。

动态创建元素

function addDiv() {

// 创建一个新的div

// createElement中传入要创建的页面元素的标签名称

var newDiv = document.createElement("div");

// 添加这个div的属性和内容

newDiv.style.border = "1px solid green" ;

newDiv.style.width = "400px";

newDiv.innerText = "新创建的div" ;

// 把创建好的div放入到某个页面元素中

// 取得all_div

var allDiv = document.querySelector("#all_div");

allDiv.appendChild(newDiv);

}

声明二维数组

var Array = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]

打印调试信息

console.log("**:%d",**);

lagoon_lala

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记1（选择器，动态增添/修改页面元素）

demo1：修改页面元素全选反选，并计算总价&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;scri
复制链接

扫一扫