智能社JS笔记——Js基础1

时间:2022-08-22 18:07:22
一、初探JS魅力
     这部分的内容有5课时,是JS最基础的部分,在学习过程中简单了解了JS变量、事件、函数,还有知道一些常见的JS语法像通过Id或标签获取元素。
 
事件:用户操作;(onmouseover,onmouseout, onclick)
 
函数:
     函数定义:只是告诉系统有这个函数,不会实际执行;
     函数调用:真正执行函数里的代码;
函数传参:
     参数就是占位符;什么时候用传参——函数里定不下来的东西;
 
变量:
     给一个东西取一个别名;
     字符串和变量:(用引号和不用引号)
     -字面量(常量):看到东西,自然知道是什么;  比如:12 、‘abc’
     -变量:可以变的量; 比如:a
     -变量和参数不需要加引号,除此之外的字符串需要加引号;
 
getElementById:
     第一个JS兼容性问题,在FF下直接使用ID存在问题——引入document.getElementById(),document.getElementById在任何浏览器下均可使用;
 
this:
     当前发生事件的元素
 
样式优先级:
     *<标签<class<ID<行间
          
 
练习:
 
1、鼠标提示框
鼠标移入到input上,让div1显示;(onmouseover)
鼠标移除input 让div1隐藏; (onmouseout)
 
onmouseover="div1.style.display='block';"
onmouseout="div1.style.display='none';"
 
兼容性(Firefox div不能直接用,要用documnent.getElementById)
onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1') .style.display='none';"
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标提示框</title>
    <!-- 行内样式的写法 -->
    <style type="text/css">
        #div1{width: 200px; height: 100px; background: #999; border: 1px solid black; display: none;}
    </style>
</head>
<body>
    <!-- 当鼠标移入到checkbox上,div显示;移出,div消失; -->
 
    <!-- IE/chrome-->
    <!-- <input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'" />
    <div id="div1">为了你的信息安全</div> -->
 
 
    <!-- FF/低版本的chrome下面不能直接使用div的id-->
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'" />
    <div id="div1">为了你的信息安全</div>
 
</body>
</html>
 
 
 
2、Div的颜色和大小都在改变
函数基本格式
function toGreen(){
     var odiv=document.getElementById('div1');
     odiv.style.width='300px';
     odiv.style.height='300px';
     odiv.style.background='red';
}
onmouseover='toGreen()'
 
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变div样式</title>
    <style type="text/css">
        #div1{width: 200px; height: 200px; background: red; }
    </style>
    <script type="text/javascript">
        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="200px";
            oDiv.style.height="200px";
            oDiv.style.background="red";
        }
    </script>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
 
 
 
 
3、网页换肤
     -任何标签都可以加id,包括link; <link id='l1'  rel='stylesheet'  type='text/css'  href='huanfu1.css' />
     -任何标签里的任何属性,也都可以修改; 
     -HTML里怎么写,JS里就怎么写;
     (通过一些属性来增加东西,HTML对应于什么属性,JS里面就可以添加什么属性,但className是个例外,html中class属性在Js中要写className)
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换肤</title>
    <!-- 任何标签都可以加id 包括link和html -->
    <link id="l1" rel="stylesheet" type="text/css" href="css2.css">   
    <script type="text/javascript">
        function to1(){
            var oL=document.getElementById("l1");
            oL.href="css1.css";
        }
        function to2(){
            var oL=document.getElementById("l1");
            oL.href="css2.css";
        }
    </script>
</head>
<body>
<!--     点击换肤1,使用css1样式,点击换肤2,使用css2样式; -->
    <input type="button" value="换肤1" onclick="to1()" />
    <input type="button" value="换肤2" onclick="to2()" />
</body>
</html>
 
 
/*css1.css*/
 
body{
    background: black;
}
 
input{
    width: 200px;
    height: 100px;
    background: yellow;
}
 
/*css2.css*/
 
body{
    background: #ccc;
}
 
input{
    width: 100px;
    height: 50px;
    background: red;
}
 
 
4、改文字  //点击按钮,文本框有title
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改文字</title>
    <script type="text/javascript">
        function showTxt(){
            var oTxt=document.getElementById("txt1");
            // html里怎么写,JS里面就怎么写
            txt1.title="sdfdgfdgfg";
        };
    </script>
</head>
<body>
    <!-- 点击按钮,文本框里有文字显示 -->
    <input id="txt1" type="text" >
    <input type="button" value="改文字" onclick="showTxt()">
</body>
</html>
 
 
 
5、下拉菜单(!!!!!!!!!!!!!!!)
当用户点击的时候,如果div是显示的,隐藏掉;如果div是隐藏的,显示出来;
if(odiv.style.display=='block'){
odiv.style.display='none';
}else{
odiv.style.display='block';
}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏if使用</title>
    <style type="text/css">
        div{width: 200px; height: 200px; background: red; display: none;}
    </style>
    <script type="text/javascript">
        function showHide(){
            var oDiv=document.getElementById("div1");
            if(oDiv.style.display=="block"){
                oDiv.style.display="none";
            }else{
                oDiv.style.display="block";
            }
        };
    </script>
    </head>
<body>
    <!-- 当div显示,点击按钮,隐藏;当div隐藏,点击按钮,显示; -->
    <input type="button" value="显示隐藏" onclick="showHide()">
    <div id="div1"></div>
</body>
</html>
 
 
6、为a链接添加JS
     <a href='javascript: ;' ></a>
     -平时在href里面是放一个网址;
     -也可以在a里面放js,表示执行这个js语句;
     -一般不会在Js里面放置代码,而是让它空着,1 a里面放Js非常不好(后面会学到),给个空的放到这儿代替#号(不会跳转);
 
 
 
 
 
7、改变背景颜色/样式(!!!!!!!!!!!!!)
<input type='button' value='变黄' onclick='setColor('yellow')' />
<div id='div1'>
</div>
//改变背景颜色 传颜色1个参数
function setColor(color){
 var odiv=document.getElementById('div1');
 odiv.style。background="yellow";
}
 
//改变背景样式 传name value两个参数
function setStyle(name, value){
     var odiv=document.getElementById('div1');
     odiv.style[name]=value;
}
<input type='button' value='变宽' onclick='setStyle('width', '400px')' />
<input type='button' value='变黄' onclick='setStyle('background', 'yellow')' />
 
 
操作属性的方法
 
智能社JS笔记——Js基础1
 
 
 
 
-----------------------------------------------------------------04------------------------------------------------------------------------------
 
8、函数传参
style与className
-元素.style.属性=XXX是修改行间样式
-之后再修改className不会有效果
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参改变div颜色</title>
    <style type="text/css">
        #div1{width: 200px; height: 200px; border: 1px solid black; }
    </style>
    <script type="text/javascript">
    function setColor (color) {
        var oDiv=document.getElementById("div1");
        oDiv.style.background=color;
    };
    </script>
</head>
<body>
    <input type="button" value="变红" onclick="setColor('red')" />
    <input type="button" value="变绿" onclick="setColor('green')" />
    <input type="button" value="变黄" onclick="setColor('yellow')" />
    <div id="div1"></div>
</body>
</html>
 
 
 
9、改变div属性的任意样式
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方括号属性操作样式</title>
    <style type="text/css">
        #div1{width: 100px; height: 100px; background: red; }
    </style>
    <script type="text/javascript">
        function setStyle(name,value){
            var oDiv=document.getElementById("div1");
            oDiv.style[name]=value;
        };
    </script>
</head>
<body>
    <input type="button" value="变宽" onclick="setStyle('width','300px')" />
    <input type="button" value="变高" onclick="setStyle('height','300px')" />
    <input type="button" value="变绿" onclick="setStyle('background','green')" />
    <div id="div1"></div>
</body>
</html>
 
 
 
10、提取行间事件
          style加样式,在行间里加;style取样式,在行间里取;
-如何为元素添加事件 
     事件和其他属性一样,可以用JS添加
     window.onload的意义     页面加载完成的时候发生  window.onload=function (){};
     行为、样式、结构三者分离
          -获取一组元素
               getElementsByTagName
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提取行间事件onclick</title>
    <!-- script放在head中,用window.onload,页面加载完成后执行 -->
     <script type="text/javascript">
        window.onload=function (){
            var oBtn=document.getElementById("btn1");
            oBtn.onclick=function (){
                alert('a');
            };
        };
     </script>
</head>
<body>
    <input id="btn1" type="button" value="按钮" />
    <!-- script放在head里会出错 -->
    <script>
    // var oBtn=document.getElementById("btn1");
    // function abc(){
    //     alert('a');
    // };
                // 记住这里添加事件是直接给函数的名字
    //oBtn.onclick=abc;
    </script>
</body>
</html>
 
问题:Js函数调用什么时候加括号,什么时候不加括号
函数只要是要调用它进行执行的,都必须加括号。此时,函数()实际上等于函数的返回值。当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码。
不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码。它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行。
所以一般时候我们都是采用的是无括号的原因。这也是由于括号的二义性,因为括号是“函数调用运算符”,相当于在执行这样一个函数,所以产生的问题在理解了之后也就理解了。
 
 
11、匿名函数
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数</title>
</head>
<body>
    <input id="btn1" type="button" value="按钮" />
    <script type="text/javascript">
     var oBtn=document.getElementById("btn1");
     oBtn.onclick=function (){
         alert('a');
     };
    </script>
</body>
</html>
 
 
 
12、循环
     for(var i=0; i<odiv.length; i++)
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
    <style type="text/css">
        div{width: 200px; height: 200px; border: 1px solid black; float: left; margin:20px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var oDivs=document.getElementsByTagName("div");
        for(var i=0; i<oDivs.length; i++){
            oDivs[i].style.background="red"
;        }
    };
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
 
 
 
 
13、复选框
         邮箱全选/不选/反选
          var obtn1=document.getElementById('btn1');
          var odiv=document.getElementById('div1');
          var ach=odiv.getElementsByTagName('input');
     
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script type="text/javascript">
    window.onload=function (){
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBtn3=document.getElementById("btn3");
        var ach=document.getElementsByTagName("input");
        oBtn1.onclick=function (){
            for(var i=1; i<ach.length; i++){
                ach[i].checked=true;
            }
        };
        oBtn2.onclick=function (){
            for(var i=1; i<ach.length; i++){
                ach[i].checked=false;
            }
        };
        oBtn3.onclick=function (){
            for(var i=1; i<ach.length; i++){
                if(ach[i].checked==true){
                    ach[i].checked=false;
                }else{
                    ach[i].checked=true;
                }
 
            }
        };
    };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="全选" />
    <input id="btn2" type="button" value="不选" />
    <input id="btn3" type="button" value="反选" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
</body>
</html>
 
 
 
 
 
11、选项卡/标签切换(!!!!!!!!!)//了解逻辑过程
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        #div1 div{width: 200px; height: 200px; background: #ccc; border: 1px solid black; display: none; }
        #div1 .active{ background: yellow;}
    </style>
    <script type="text/javascript">
    window.onload=function (){
        var oDiv=document.getElementById("div1");
        var aBtn=div1.getElementsByTagName("input");
        var aDiv=div1.getElementsByTagName("div");
        for(var i=0; i<aBtn.length; i++){
            //给当前事件一个自定义的属性,用来储存下标
            aBtn[i].index=i;
            aBtn[i].onclick=function (){
                for(var j=0; j<aBtn.length; j++){
                    aBtn[j].className=" ";
                    aDiv[j].style.display="none";
                }
                this.className="active";
                aDiv[this.index].style.display="block";
            };
        }
    };
    </script>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="教育" />
        <input type="button" value="培训" />
        <input type="button" value="出国" />
        <input type="button" value="招生" />
        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>
</body>
</html>
 
 
 
 
 
 
12、JS简易日历(!!!!!!!!!!)
     类似选项卡,只是下面只有一个div
     innerHTML     
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js年历</title>
    <link rel="stylesheet" type="text/css" href="calendar.css">
    <script type="text/javascript">
        window.onload=function (){
            var arr=[
                "dfdgfdgfg",
                "dfdfdsfdfdsfdf",
                "dsfsq23r",
                "dfertg",
                "dfdgfdgfg",
                "dfdfdsfdfdsfdf",
                "dsfsq23r",
                "dfertg",
                "dfdgfdgfg",
                "dfdfdsfdfdsfdf",
                "dsfsq23r",
                "dfertg",
            ];
            var oDiv=document.getElementById("tab");
            var aLi=oDiv.getElementsByTagName("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 j=0; j<aLi.length; j++){
                        aLi[j].className=" ";
                    }
                    this.className="active";
                    oTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+arr[this.index]+"</p>";
                };
            }
        };
    </script>
</head>
<body>
    <div id="tab" class="calendar">
        <ul>
 
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>JAN</p></li>
            <li><h2>3</h2><p>JAN</p></li>
            <li><h2>4</h2><p>JAN</p></li>
            <li><h2>5</h2><p>JAN</p></li>
            <li><h2>6</h2><p>JAN</p></li>
            <li><h2>7</h2><p>JAN</p></li>
            <li><h2>8</h2><p>JAN</p></li>
            <li><h2>9</h2><p>JAN</p></li>
            <li><h2>10</h2><p>JAN</p></li>
            <li><h2>11</h2><p>JAN</p></li>
            <li><h2>12</h2><p>JAN</p></li>
        </ul>
        <div class="text">
            <h2>1月活动</h2>
            <p>过年了,大家可以商量着去哪儿玩呢~</p>
        </div>
    </div>
</body>
</html>