前端day02-要点(京东广告图与留言栏案例)

01-注册页面

逻辑：

1-不选择协议时禁用button

2-选择时启用button

3-点击button出现弹窗

复选框的类型是checkbox

02-全选

逻辑：

1-全选框

勾选，下面的全都选

取消勾选，下面的全取消

2-下面的有一个不选，全选就不选：用遍历写，遍历到任何一个checkbox为false，则全选为false

---若无false则无返回值，把all.checked = true

style中---

边框的合并，消除td间的空隙与td与table的空隙，在table中设置

border-collapse: collapse;

03-密码的显示隐藏

逻辑：

1-点击闭眼图片变换为睁眼并显示密码

2-默认input输入的是password不可见

3-点击闭眼图片后password变为text

为img添加点击事件：

（1）睁眼闭眼的来回切换

一个按钮，2种功能对应2种状态，要设置开关从而让一个按钮多次点击右不同的状态切换(排他)

默认：0是隐藏，1是显示

// 值为0 是隐藏  1 是显示
        var flag = 0;

（2）点击后的input的password与text的来回切换

 img.onclick = function(){
            if(flag == 1){
            //开关关闭,flag切换为0,闭眼,输入为password
            flag=0;
            // close图片
            img.src="./close.png"
            input.type = "password"
            }
            //开关默认是关闭的,故先执行else
            //点击一次,执行else,开关打开,显示睁眼,输入为text
            //再次点击是,flag被切换成1,执行上面的if
            else{
            // 当前隐藏 应该显示
            flag = 1;
            // open图片
            img.src = "./open.png";
            input.type = "text"
            }
        }

04-父节点、子节点、兄弟节点

1-父节点

比如a标签的父节点为a.parentNode

一次添加.parentNode找上级的父节点,直到body-->html-->document-->null

2-子节点

    

        div的文字
        

            p的文字
            p的超链接
        
        
            span的文字
        
    

div.childNodes :div的孩子依次为-->text-->p节点-->p节点里的text-->span节点-->span里的text

var childs = div.childNodes时,childs是一个伪数组,可以用for遍历

        for(var i=0;i

输出为:

div的children是2个节点:p和span

div.firstElementChild 是div的第一个孩子里的所有东西

// 带Element拿到的一定是标签

//不是字符串 是文本节点
        var a = div.firstChild;
        console.log(a);
//运行结果是'div的文字'

3-兄弟节点

div.nextElementSibling

div.nextSibling

05-返回所有子节点

// 获取element的所有兄弟节点
        function getSibling(element){
            // 获取父节点
            var pNode = element.parentNode;
            // 获取父节点的所有子节点，获取子节点时把抓取到的节点以伪数组的方式存储
            var childArr = pNode.childNodes;
            //创建一个数组来存储节点
            var domArr =[];
            for(var i=0;i

06-创建节点

1-在body中创建节点

document.body.innerHTML = "

文字

"+"

312465

"（多项中间用+号连接）

2-通过api创建节点

 var dom = document.createElement('h4');//先创建想要的样式节点
     dom.innerHTML = "我是h1的文字" + i++;//给样式节点添加样式
     div.appendChild(dom);//appendChild（样式节点）到想添加进的内容

07-删除节点

我是h1

h1.parentNode.removeChild(h1);

08-插入元素

首先在script中定义将要使用的标签

然后创建一个新标签

var newDom = document.createElement("strong");

再在标签中添加样式

newDom.innerText = '我是一个新的strong';

最后使用.insertBefore(newDom,em);插入，也就是说在em前插入元素

div.insertBefore(newDom,em);

strong被插入到了div中，并在em之前

替换元素

div.replaceChild(newDom,em);

新元素newDom替换em

09-克隆节点

浅克隆-->只克隆当前节点

 var newdiv = div.cloneNode();

深克隆-->目标标签的内部也被克隆

var newdiv = div.cloneNode(true);

将新节点通过appendChild添加到容器中

div.appendChild(newdiv);

案例1：京东侧边栏

1->style样式：

01-首先需要一个大的div

02-其次需要写左右栏，左侧为侧导航，右侧为鼠标移入左侧后的显示部分==>用无序列表ul与li写

注：ul会独占一行，故要添加浮动，左ul与右ul才能在一个div中显示

03-文字在li中，在 text-align: center;水平居中后，还需要给文字添加行高，文字才能水平垂直居中

 line-height:height //height是li的高度

04-鼠标移入左侧栏时背景颜色变成灰色，设置一个类，鼠标移入时调用

        .active{
            background-color: #999;
            color: white;
        }

05-设置一个类：默认右侧栏display:none，默认不显示

需要一个index下标，当鼠标移入左侧栏时，右侧有对应index相对应，移入时调用该类block显示

        .activeDom{
            display: block !important;
        }

2->script：

        var div = document.querySelector("div");
        var leftlis= document.querySelectorAll(".left li");
        var rightlis= document.querySelectorAll(".right li");

01-首先要捕捉下标-->设置index捕捉左侧栏下标

利用循环-->因为每个数组都要遍历，所以要用循环

        for(var i=0;i也就是在移入该左侧栏时，未移入项恢复默认
                /* 排他性(有这个属性后，其余的需要写一个方法来调用默认)，有我的其余变成默认 */
                clearClassName(leftlis);
                clearClassName(rightlis);
                //添加04==>.active类，鼠标移入背景颜色变灰色
                this.className="active";
                //左侧index对应的右侧块类名加上activeDom，改成block对应显示
                rightlis[this.index].className="activeDom";
            }
        }

02-写一个功能(方法function)，该功能可以被调用=>以此清除类名

        function clearClassName(doms){
            for(var i=0;i

案例2：留言栏

要求：

注：每次清除类名，或者清除文本内容等(恢复默认的操作)，可以新建一个function来重复调用

resize:none可以使文本框禁止拖动改变大小

        textarea{
            resize: none;
        }

01-首先要捕获文本框里的输入内容： trim()方法的作用是去掉字符串两端的多余的空格

空内容和尾端多余空格可以被清除

 var txt = textt.value.trim();

当输入失效时，弹出窗口停止运行

            if(!txt){
                alert("无效内容")
                return false;
            }
           

若有输入，则拿到内容后，生成li，在文本框下方显示

            else{
                //首先新建一个li来接收内容
                var lis = document.createElement("li");
                // 拿内容可以用var str = textt.value.trim();
                //为li添加样式：拿到的文本框中的文本
                lis.innerText = txt;
                console.log(txt);
                console.log(lis);
                //将生成的li添加到ul中即可显示在页面中
                ul.appendChild(lis);
                // 每次点击都清空文本框里的内容
                cleartext(textt);
            }

02-设置一个方法来清空文本框==>每次点击后都恢复默认状态

        // 清空文本框内容
        function cleartext (dom){
            dom.value = "";
        }