初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、全选不选和反选、选项卡)

最新推荐文章于 2022-03-29 15:07:24 发布

蔡蔡动起来

最新推荐文章于 2022-03-29 15:07:24 发布

阅读量221

点赞数

分类专栏： ĴS 智能社_js 文章标签：鼠标提示框重用换肤函数传参全选不选和反选

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82290465

版权

ĴS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

智能社_js

22 篇文章 0 订阅

订阅专栏

第一个JS特效：鼠标提示框

鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。

<style>
    #div1{
        width: 200px;
        height: 100px;
        background-color: #cccccc;
        border: 1px solid #999;
        display: none;
    }
</style>
<body>
<input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'"/>
<div id="div1">
    为了您的安全。。。。
</div>

兼容性问题：最好使用getElementById();

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" 
       onmouseout="document.getElementById('div1').style.display='none'"/>
<div id="div1">
    为了您的安全。。。。
</div>

函数：

<style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div id="div1" onmouseover="document.getElementById('div1').style.width='300px';
                            document.getElementById('div1').style.height='300px';
                            document.getElementById('div1').style.background='green';"

               onmouseout="document.getElementById('div1').style.width='100px';
                           document.getElementById('div1').style.height='100px';
                           document.getElementById('div1').style.background='red';"></div>
</body>

使用函数：

<style>

    #div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<script>
    function toGreen(){
        document.getElementById('div1').style.width='300px';
        document.getElementById('div1').style.height='300px';
        document.getElementById('div1').style.background='green';
    }
    function toRed(){
        document.getElementById('div1').style.width='100px';
        document.getElementById('div1').style.height='100px';
        document.getElementById('div1').style.background='red';
    }
</script>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>

重用：变量（给东西取了一个别名）

<script>
    function toGreen(){
        var odiv=document.getElementById('div1');
        odiv.style.width='300px';
        odiv.style.height='300px';
        odiv.style.background='green';
    }
    function toRed(){
        var odiv=document.getElementById('div1');
        odiv.style.width='100px';
        odiv.style.height='100px';
        odiv.style.background='red';
    }
</script>

第二个JS特效：换肤。

<head>
    <meta charset="UTF-8">
    <title></title>
    <link id="l1" rel="stylesheet" href="css/css1.css"/>

</head>
<body>
<input type="button" value="皮肤1" onclick="skin1()"/>
<input type="button" value="皮肤2" onclick="skin2()"/>
</body>
<script>
    function skin1(){
        var ol=document.getElementById('l1');
        ol.href='css/css1.css';
    }

    function skin2(){
        var ol=document.getElementById('l1');
        ol.href='css/css2.css';
    }
</script>

注意：

任何标签都可以加id.

第三个JS特效：当点击的时候，如果div是显示的，隐藏掉。如果div是隐藏的，显示出来。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 200px;
            background: #cccccc;
            display: none;
        }
    </style>
    <script>
        function showHide(){
            var oDiv=document.getElementById('div1');
            if(oDiv.style.display=='block'){
                oDiv.style.display='none';
            }else{
                oDiv.style.display='block';
            }
        }
    </script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="showHide()"/>
<div id="div1"></div>
</body>

为a链接加JS。

<a href="javascript:alert('a')">链接</a>

html怎么写js就怎么写。唯独class不是，要写成className。

函数传参：

改变背景颜色
改变Div的任意样式

1.操纵属性的第二种方式。2.将属性名作为参数传递。

style与className

函数传参：占一个位置，你往里传什么它就是什么。

什么时候使用传参---函数里定不下来的东西。

    <style>
        #div1{
            width: 100px;
            height: 100px;
            border: 1px black solid;
        }
    </style>
    <script>
        function setColor(color){
            var oDiv=document.getElementById('div1');

            oDiv.style.background=color;
        }
    </script>
</head>
<body>
<input type="button" value="变绿" onclick="setColor('green');"/>
<input type="button" value="变黄" onclick="setColor('yellow');"/>
<input type="button" value="变黑" onclick="setColor('black');"/>
<div id="div1"></div>
</body>

js中用.的地方都可以用[]代替。[]能做的事.不一定。

[]:要修改的属性不固定的时候用。将属性名作为参数传递。

 <script>
        function setText(name){
            var Otxt=document.getElementById('txt1');
            //第一种操作属性的方法
           /* Otxt.value='sdwfewfwfwegwegwefw';*/

            //第二种操作属性的方法.比第一个方法好在具体的属性名字是可变的。
            Otxt[name]='abcdefghijk';
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" value="改变文字" onclick="setText('value')"/>
</body>

<style>
    #div1{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
<script>
    function change(name,value){
        var oDiv=document.getElementById('div1');
        oDiv.style[name]=value;

    }
    
</script>

<body>
<input type="button" value="变宽" onclick="change('width','400px')"/>
<input type="button" value="变高" onclick="change('height','400px')"/>
<input type="button" value="变绿" onclick="change('background','green')"/>
<div id="div1"></div>

style与className：

样式优先级：*<标签<class<ID<行间

元素.style.属性=XXX 是修改行间样式。之后再修改className不会有效果。

对于同一个div，要么从头到尾操作的都是class，要么从头到尾都操作style。

行间事件：

把事件写在行间。比如οnclick=" ".写行间事件危险，不建议写。

提取行间事件：

<input type="button" value="按钮" id="btn1"/>
<script>
    var oBtn=document.getElementById('btn1');
    function abc(){
        alert('a');
    }
    oBtn.onclick=abc;
</script>

匿名函数：最大的好处就是不用取名字。

<input type="button" value="按钮" id="btn1"/>
<script>
    var oBtn=document.getElementById('btn1');
    oBtn.onclick=function(){
        alert('a');
    };

function 名字()

{

...

}

oBtn.οnclick=名字;

oBtn.οnclick=function(){

...

}

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function(){
            alert('a');
        };
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>

</body>

把script代码放进head中，会出现错误。因为不知名的按钮加事件。底下的东西压根就没加载进来。

window.onload在页面加载完再执行。

    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            oBtn.onclick=function(){
                alert('a');
            };
        }
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>

</body>

以上代码就正确了。btn1早就加载进来了。

别加行间样式，别加行间js事件。

获取一组元素(数组)：getElementsByTagName.了解数组。

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
            float: left;
        }
    </style>
    <script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');
            var i=0;                                 //1.初始化
            while(i<aDiv.length){                    //2.条件
            aDiv[i].style.background='red';          //3.语句
                i++;                                 //4.自增
            /*aDiv[0].style.background='red';
            aDiv[1].style.background='red';
            aDiv[2].style.background='red';
            aDiv[3].style.background='red';
            aDiv[4].style.background='red';*/
            }
        }
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

全选不选和反选：

 <script>
        window.onload=function(){
            var oBtn1=document.getElementById('btn1');
            var oBtn2=document.getElementById('btn2');
            var oBtn3=document.getElementById('btn3');
            var oDiv=document.getElementById('div1');
            var aCh=oDiv.getElementsByTagName('input');

            oBtn1.onclick=function(){
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked=true;
                }
            }
            oBtn2.onclick=function(){
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked=false;
                }
            }
            oBtn3.onclick=function(){
                for(var i=0;i<aCh.length;i++){
                    if(aCh[i].checked==true){
                        aCh[i].checked=false;
                    }else{
                        aCh[i].checked=true;
                    }

                }
            }
        }
    </script>



<body>
<input type="button" id="btn1" value="全选"/><br />
<input type="button" id="btn2" value="不选"/><br />
<input type="button" id="btn3" value="反选"/><br />
<div id="div1">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>
</body>

选项卡：

按钮实现：this的使用，先清空所有按钮，再选中当前按钮。

内容的实现：先隐藏所有的Div,再显示“当前”Div js添加index。

this:[object HTMLInputElement]

    <style>

        #div1 .active{
            background: yellow;
        }
        #div1 div{
            width: 200px;
            height: 200px;
            background: #cccccc;
            border: 1px solid #999999;
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var aBn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');

            for(var i=0;i<aBn.length;i++){
                aBn[i].index=i;
                //先让其他按钮都变成className为空
                aBn[i].onclick=function(){
                    for(var i=0;i<aBn.length;i++){
                        aBn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block'
                }
            }


        }
    </script>
</head>
<body>
<div id="div1">
    <input type="button" value="教育" class="active"/>
    <input type="button" value="培训"/>
    <input type="button" value="招生"/>
    <input type="button" value="出国"/>

    <div style="display: block;">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>
</body>

innerHTML:

<style>
    #div1{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

</style>
<script>
    window.onload=function(){
    var oTxt=document.getElementById('txt1');
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    oBtn.onclick=function(){
        oDiv.innerHTML=oTxt.value;
    }
    }
</script>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="设置文字"/>
<div id="div1">

</div>

alert('abc'+12+5+'def');弹出的结果是abc125def.

alert('abc'+(12+5)+'def');弹出的结果是abc17def.

制作简易日历：类似选项卡，只是下面只有一个div.

小知识：input使用.val,而其他标签则使用.innerHTML.

script>
    window.onload=function(){
        var arr=[
                '快过年了，大家可以商量着去哪玩吧~',
                '二月啦',
                '三月啦'
        ];
        var oDiv=document.getElementById('tab');
        var aLi=oDiv.getElementById('li');
        var oTxt=oDiv.getElementsByTagName('div')[0];
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className='';
                }
                this.className='active';
                oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'
            }

        }

    }
</script>
<body>
<div id="tab" class="calendar">
    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    <div class="text">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪玩吧~</p>
    </div>
</div>
</body>

蔡蔡动起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、全选不选和反选、选项卡)

第一个JS特效：鼠标提示框鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。&lt;style&gt; #div1{ width: 200px; height: 100px; background-color: #cccccc; border: 1px solid #999; ...
复制链接

扫一扫