javascript从入门到高级，每天不停更新知识点（14天）

最新推荐文章于 2024-05-05 20:14:04 发布

远方的原

最新推荐文章于 2024-05-05 20:14:04 发布

阅读量256

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44890362/article/details/116461473

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.Tab栏切换：

 <style>
            body{
                margin: 0;
                padding: 0;
            }
            /* .tab {
                background-color: pink;

            } */
            .tab_list {
                display: block;
                width: 561px;
                height: 76px;
                margin: 10px auto;
                /* background-color: purple; */
            }
             li {
                width: 100px;
                height: 50px;
                border-radius: 25px ;
                float: left;
                list-style: none;
                border: black 2px solid;
                text-align: center;
                font-size: larger;
                font-weight: 700;
                padding-top: 20px;
                margin-right: 30px;
            }
            li:hover{
                cursor: pointer;
            }
            .tab_bom {
               width: 600px;
                margin: 1px auto;
                /* background-color: blue; */
            }
            img {
                width: 600px;
            }
            .first{
                background-color: crimson;
            }
            .item {
                display: none;
            }
            .current {
                background-color: crimson;
            }
    </style>
<body>
   <div class="tab">
           <ul class="tab_list">
               <li class="first">中国</li>
               <li>美国</li>
               <li>俄罗斯</li>
               <li>德国</li>
           </ul>
       <div class="tab_bom">
           <div class="item" style="display: block;"><img src="images/1.jpg" alt=""></div>
           <div class="item"><img src="images/35.jpg" alt=""></div>
           <div class="item"><img src="images/41.jpg" alt=""></div>
           <div class="item"><img src="images/42.jpg" alt=""></div>
       </div>
   </div>
<script>
        //获得元素
        var  tab_list =document.querySelector('.tab_list');
        var  lis = document.querySelectorAll('li');
        var  items = document.querySelector('.tab_bom').querySelectorAll('.item');
        //for循环绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            //开始给五个li设定 索引号
           lis[i].setAttribute('index',i);
           lis[i].onclick = function(){
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index'); 
                // console.log(index);
                for (let i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display ='block';
           }
        }
   </script>

2.设置H5自定义属性：

H5规定自定义属性data- 开头做为属性名并且赋值。

 <div data-index = "1"></div>
  或者使用 js设置
  element.setAttribute('data-index',2);
//获取
element.getAttribute('data-index');

3.节点：

元素节点：nodeType为1
属性节点：nodeType为2
文本节点：nodeType为3(文本节点包含文字、空格、换行等)

3.0 父级节点

<div class="box">
            <span class="code">*</span>
    </div>
    <script>
        var code = document.querySelector('.code');
       //得到的是离元素最近的父级节点 如果找不到就返回为空
        console.log(code.parentNode);
    </script>

3.1 子节点

 <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);//不提倡 它会获取所有的节点
        //children 获取所有的子元素节点 
        console.log(ul.children);
    </script>
   <ul>
        <li>1</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //获取第一个子元素节点
        console.log(ul.firstElementChild);//有兼容性问题
        console.log(ul.lastElementChild);//有兼容性问题
        //实际写法是 最常用的
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1]);
    
    </script>

4.下拉菜单

 <ul class="nav">
            <li class="l">
                <a href="">中国</a>
                <ul>
                    <li>四川</li>
                    <li>四川</li>
                    <li>四川</li>
                </ul>
            </li>
            <li class="l">
                <a href="">中国</a>
                <ul>
                    <li>湖北</li>
                    <li>湖北</li>
                    <li>湖北</li>
                </ul>
            </li>
            <li class="l">
                <a href="">中国</a>
                <ul>
                    <li>深圳</li>
                    <li>深圳</li>
                    <li>深圳</li>
                </ul>
            </li>
        </ul>
 <script>
      var nav = document.querySelector('.nav');
      var lis = nav.children;//得到4个li
      //循环注册事件
      for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function(){
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function(){
                this.children[1].style.display = 'none';
            }
      }
 </script>

5.添加节点

<ul>
       <li>123</li>
   </ul>
   <script>
       //1.创建节点
       var li = document.createElement('li');
       //2.添加节点  node.appendCild(child) node父级 child子
       var  ul = document.querySelector('ul');
       ul.appendChild(li);//后面追加元素
       //前面追加元素 node.insertBefore(child,指定元素)
       var lili = document.createElement('li');
       ul.insertBefore(lili,ul.children[0]);
    </script>

6.简单版发布留言案例

<textarea name="" id="" cols="30" rows="10"></textarea>
   <button>发布</button>
   <ul>
   </ul>
   <script>
       //1.获取元素
       var btn =document.querySelector('button');
       var text = document.querySelector('textarea');
       var ul = document.querySelector('ul');
       //2.注册事件
       btn.onclick =function(){
           if (text.value =='') {
               alert('没有输入');
               return false;
           }else{
           // 创建元素
           var li = document.createElement('li');
           li.innerHTML = '<b>'+text.value+'</b>';
           li.className = ' li change';
           //添加元素
        //  ul.appendChild(li);
          ul.insertBefore(li,ul.children[0]);
           }
           
       }
   </script>

7.删除节点案例

<ul>
    <li>中国</li>
    <li>日本</li>
    <li>韩国</li>
</ul>
<button>删除</button>
<script>
    //获取元素
    var ul = document.querySelector('ul');
    //删除函数
    // ul.removeChild(ul.children[0]);
    //点击按钮删除
    var btn = document.querySelector('button');
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        }else{
            ul.removeChild(ul.children[0]);
        }
    }
</script>

8.通过超链接删除发布的留言

<textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('没有输入');
                return false;
            } else {
                // 创建元素
                var li = document.createElement('li');
                li.innerHTML = '<b>' + text.value + '</b>' + "<a href ='javascript:;'>删除</a>";
                li.className = ' li change';
                //添加元素
                //  ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //删除元素 删除的是当前链接的li 他的父亲
                var as = document.querySelectorAll('a');
                for (let i = 0; i < as.length; i++) {
                    //node.removeChild(child); 删除的是li当前a所得li
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }

                }
            }

        }
    </script>

14.复制节点

<ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
     <script>
         var ul = document.querySelector('ul');
         //1.node.cloneNode();括号为空或者里面是false 只复制标签 不复制内容
        //  var lili =ul.children[0].cloneNode();
        //  ul.appendChild(lili);
         //2.node.cloneNode();括号里面是true 就是深拷贝
         var lili =ul.children[1].cloneNode(true);
         ul.appendChild(lili);
     </script>

15.动态生成表格

<style>
        table {
            border: black 2px solid;
            margin: 100px auto;
            width: 500px;
            border-collapse: collapse;
        }
        thead {
            background-color: chocolate;
        }

        td,
        th {
            border: black 2px solid;
            height: 50px;
            text-align: center;
        }
    </style>
<body>
    <table>
        <thead>
            <tr>
                <th>国籍</th>
                <th>面积</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        //1. 首先准备好国家的数据
        var datas = [{
            name: '中国',
            area: '9600',
            age: 72

        }, {
            name: '美国',
            area: '9600',
            age: 72

        }, {
            name: '英国',
            area: '9600',
            age: 72

        }];
        //2.tbody 里面创建行：有几个国家(通过数组的长度)我们就创建几行
        var tbody = document.querySelector('tbody');
        for (let i = 0; i <datas.length; i++) {
            // 创建行 tr
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //   行内有单元格，单元格的数量取决对象里面的属性个数  for循环遍历对象
            for (var k in datas[i]) { //里面的for循环 管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k]给td
                // console.log(datas[i][k]);
                tr.appendChild(td);
                td.innerHTML = datas[i][k];//往单元格里面填入数据
            }
            //3.创建 删除单元格
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a href="javascript:;">删除</a>';
            //4. 删除操作
            var as = document.querySelectorAll('a');
            for (let i = 0; i < as.length; i++) {
                as[i].onclick = function(){
                    //点击a 删除当前a 所在的行 node.removeChild(Child)
                    tbody.removeChild(this.parentNode.parentNode);
                }

                
            }

        }
    </script>
</body>

远方的原

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript从入门到高级，每天不停更新知识点（14天）

1.Tab栏切换：<style> body{ margin: 0; padding: 0; } /* .tab { background-color: pink; } */ .tab_list { display: block; ...
复制链接

扫一扫

专栏目录