Java教程

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

本文主要是介绍javascript从入门到高级，每天不停更新知识点（13天），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.排他思想

  <style>
            button{
                width: 80px;
                height: 50px;
            }
    </style>
<body>
    <button>点我呀</button>
    <button>点我呀</button>
    <button>点我呀</button>
    <button>点我呀</button>
    <button>点我呀</button>
    <script>
        //获取所有的按钮元素
        var btn = document.getElementsByTagName('button');
        //btn得到的是伪数组 里面的每一个元素btn[i]
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function(){
                //先把所有的按钮的背景颜色去掉
                for (let i = 0; i < btn.length; i++) {
                  btn[i].style.backgroundColor='';
                }
                //让当前的元素背景颜色为pink
                this.style.backgroundColor='pink';
            }
            
        }
    </script>
</body>

2.百度换肤效果

<style>
            button{
                width: 80px;
                height: 50px;
            }
            /* .d {
                margin: 200px auto;
                text-align: center;
            } */
            li {
                list-style: none ;
            }
            body {
                background: url(images/1.jpg) no-repeat center top;
            }
            ul {
                width: 100px;
                height: 100px;
                overflow: hidden;
            }
            .baidu {
                overflow: hidden;
                margin: 100px auto;
                /* background-color: #fff; */
                width: 413px;
                padding-top: 3px;
            }
            .baidu li {
                float: left;
                margin: 0 1px;
                cursor: pointer;
            }
            .baidu img {
                width: 100px;
            }
    </style>
<ul class="baidu">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/35.jpg" alt=""></li>
        <li><img src="images/41.jpg" alt=""></li>
        <li><img src="images/42.jpg" alt=""></li>
    </ul>
    <script>
         var imgs = document.querySelector('.baidu').querySelectorAll('img');
         console.log(imgs);
         for (let i = 0; i < imgs.length; i++) {
                    imgs[i].onclick = function(){
                        //this.src 点击图片的路径
                        // console.log(this.src);
                        //此处使用for循环是提前将所有图片的边框去掉
                        for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.border = '';
                            
                        }
                        document.body.style.backgroundImage = 'url('+this.src+')'
                       this.style.border = '2px solid red';
                    }
                    imgs[i].onmouseout = function(){
                        this.style.border = '';
                    }
             
         }
    </script>

3.表格隔行变色

<style>
            table {
                border: solid 2px black;
                margin: 100px auto;
                border-collapse: collapse;
            }
            td {
                border: solid 1px black;
               
            }
            .bg {
                background-color: blue;
            }
    </style>   
<table>
       <thead>
           <tr>
               <td>小姑凉</td>
               <td>小姑凉</td>
               <td>小姑凉</td>
               <td>小姑凉</td>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>迪丽热巴</td>
               <td>迪丽热巴</td>
               <td>迪丽热巴</td>
               <td>迪丽热巴</td>
           </tr>
           <tr>
            <td>迪丽热巴</td>
            <td>迪丽热巴</td>
            <td>迪丽热巴</td>
            <td>迪丽热巴</td>
        </tr>
        <tr>
            <td>古力娜扎</td>
            <td>古力娜扎</td>
            <td>古力娜扎</td>
            <td>古力娜扎</td>
        </tr>
       </tbody>
   </table>
  <script>
            var trs = document.querySelector('tbody').querySelectorAll('tr');
            for (let i = 0; i < trs.length; i++) {
               trs[i].onmouseover = function(){
                   this.className = 'bg';
               }
               trs[i].onmouseout = function(){
                   this.className = '';
               }
                
            }
 </script>

4.表单全选反选

 <table>
       <thead>
           <tr>
               <th><input type="checkbox" id="all"></th>
               <th>国籍</th>
           </tr>
       </thead>
       <tbody id="tb">
           <tr>
               <td><input type="checkbox" ></td>
               <td>中国</td>
           </tr>
           <tr>
               <td><input type="checkbox"></td>
               <td>美国</td>
           </tr>
           <tr>
               <td><input type="checkbox"></td>
               <td>俄罗斯</td>
           </tr>
       </tbody>
   </table>
   <script>
       //获取元素
        var all = document.getElementById('all');
        var  tb = document.getElementById('tb').getElementsByTagName('input');
    //注册事件
    all.onclick =function(){
        console.log(this.checked);
        for (let i = 0; i < tb.length; i++) {
            tb[i].checked = this.checked;
            
        }
    }
    for (var i = 0; i < tb.length; i++) {
        tb[i].onclick = function(){
            var flag = true;
            //每次点击 都要去循环检查是否被选中
            for (var i = 0; i < tb.length; i++) {
                if (!tb[i].checked) {
                    all.checked = false;
                    flag = false ;
                    //如果有一个未被选中就不需要继续循环下去了
                    break;//结束循环
                }
                
            }
            all.checked = flag;
        }
        
    }
   </script>

5.自定义属性的操作

//element.getAttribute('属性'); 主要获得自己定义属性
//例如 属性 ziji
<div id="div" ziji = "2"></div>
   <script>
       var div = document.getElementById('div');
       console.log(div.getAttribute('ziji'));
   </script>
//element.setAttribute('属性','值');设置属性值,也可以修改属性值
    div.setAttribute('ziji','3');
       console.log(div.getAttribute('ziji'));
//移除属性  removeAttribute(属性);
  div.removeAttribute('ziji');

 

这篇关于javascript从入门到高级，每天不停更新知识点（13天）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航