js基础2应用案例

来源：互联网发布：java开发常见问题编辑：程序博客网时间：2024/05/22 09:39

1. 变量声明提升面试题！！！

Var a = 10, b = 20;

等价的

Var a =10;

Var b =20;

1   function fun(){2          console.log(num);3          var num = 20;4  }

相当于 ---

5  function fun(){6          var num;7          console.log(num);    // undefined8          Num = 20;9  }

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。只提升变量声明，不赋值。

面试题：

var a = 18;f1();function f1(){    var b=9;    console.log(a);    console.log(b);    var a = '123';}

结果是： undefined 9

2. 应用案例函数传参数显示盒子内嵌式

<style>        div {            width: 100px;            height: 100px;            background-color: pink;            margin:20px;            display: none;        }    </style>

<script>        window.onload = function(){        function fn(obj){        var ob = document.getElementById(obj);        ob.style.display = "block";        }        }    </script>

<body><button onclick = "fn('demo1')">第1个按钮</button><button onclick = "fn('demo2')">第2个按钮</button><button onclick = "fn('demo3')">第3个按钮</button><button onclick = "fn('demo4')">第4个按钮</button><div id="demo1">1</div><div id="demo2">2</div><div id="demo3">3</div><div id="demo4">4</div></body>

3. 轮播图的切换，函数封装原理！！背景图切换

<style>        *{margin:0;padding:0;}        ul{list-style:none;}        #box {            height: 70px;            width: 360px;            padding-top: 360px;            border:1px solid #ccc;            margin:100px auto;            overflow: hidden;            background: url(images/01big.jpg) no-repeat;        }        #box ul{            overflow: hidden;            border-top:1px solid #ccc;        }        #box li {            float: left;        }    </style>

 <script>        window.onload = function(){           /*  一共有五组   这些有哪些相同的部分：              鼠标经过   背景更换图片    我们可以吧这两个放到一个函数里面 重复使用就可以*/            //事件源    li   事件  鼠标经过   事件处理程序   box 更换背景          /*  var li02 = document.getElementById("li02");            var box = document.getElementById("box");            li02.onmouseover = function(){                box.style.backgroundImage = "url(images/02big.jpg)";            }            var li01 = document.getElementById("li01");            var box = document.getElementById("box");            li01.onmouseover = function(){                box.style.backgroundImage = "url(images/01big.jpg)";            }*/            var box = document.getElementById("box");            function fn(liid,bg){  // 封装函数  参数的传递                var obj = document.getElementById(liid);                obj.onmouseover = function(){                    box.style.backgroundImage = bg;                }            }            fn("li01","url(images/01big.jpg)"); // 实参  调用函数            fn("li02","url(images/02big.jpg)");            fn("li03","url(images/03big.jpg)");            fn("li04","url(images/04big.jpg)");            fn("li05","url(images/05big.jpg)");        }    </script>

<div id="box">    <ul>        <liid="li01"><img src="images/01.jpg" alt=""/></li>        <liid="li02"><img src="images/02.jpg" alt=""/></li>        <liid="li03"><img src="images/03.jpg" alt=""/></li>        <liid="li04"><img src="images/04.jpg" alt=""/></li>        <liid="li05"><img src="images/05.jpg" alt=""/></li>    </ul></div>

4. 返回值 return

定义：

一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。

定义函数的返回值：

在函数内部用return来设置返回值，一个函数只能有一个返回值。

同时，终止代码的执行。

所有的自定义函数默认没有返回值；

Return 后面不要换行

5. 算数运算符

A++ ++后置每次自加1 先运算后自加

++a ++前置每次自加1 先自加后运算

6. 搜索框 onfocus onblur css案例只要是理清楚业务逻辑

<style>        input,button {            border:0 none;            padding:0;        }        .search {            width:258px;            height:40px;            margin: 100px auto;            background-color: pink;        }        .search input {            width:208px;            height: 40px;            background: url(images/left.jpg) no-repeat;            outline-style: none;            padding-left: 8px;            color: #ccc;            float: left;        }        .search button {            height: 40px;            width: 42px;            background: url(images/right.jpg) no-repeat;            float: left;            cursor: pointer;        }    </style>

<script>        window.onload = function(){            var txt = document.getElementById("txt");            txt.onfocus = function(){ //得到焦点                //alert("得到了焦点");                //什么时候该清空呢                //用户没有输入的时候，用户第一次使用的时候               // 如果 这里input 里面的文字 是 请输入...  说明用户没有用过，就应该清空                if(txt.value == "请输入..."  )                {                    txt.value = "";                    txt.style.color = "#333";                }            }            txt.onblur = function(){ //失去焦点                //alert("失去了焦点");                //什么时候再还原呢？                //input的值是 空的时候，我们再复原                if(txt.value == "")                {                    txt.value = "请输入...";                    txt.style.color = "#ccc";                }            }                    }    </script>

<body><div class="search">    <input type="text" value="请输入..." id="txt"/>    <button></button></div></body>

7. this 表单验证案例 if(){ }else if() {}

指的是本身

This 主要是指事件的调用者。

className 类名

$("result").className ="wrong";

innerHTML 更换盒子里面的内容文字标签都换.

表单更换内容 Input.value

isNaN nan 不是一个数字 is 是是不是一个数字

isNaN(“12”) 如果里面的不是个数字返回 true 否则返回false

<style>        .box {            text-align: center;            margin:100px auto;        }        span {            display: inline-block;            width: 150px;            height: 20px;            border: 1px solid #ccc;            font-size:12px;            line-height: 20px;            text-align: left;            padding-left: 20px;            background-color: #eee;            color:#999;        }        .right {  /*正确的*/            color: #5EFF5E;            background:url(images/right.png) no-repeat #DFFFDF 4px 3px;            border: 1px solid #ACFFAC;        }        .wrong {  /*错误的*/            background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;            border: 1px solid #FFAC91;            color: #FF6B39;        }    </style>

<script>        window.onload = function(){           function $id(id){return document.getElementById(id)};           $id("txt").onblur = function(){           if (this.value == "") {           $id("result").className = "wrong";           $id("result").innerHTML = "内容不能为空";           }else if(isNaN(this.value)){           $id("result").className = "wrong";           $id("result").innerHTML = "内容必须为数字";           }else if(this.value > 150 || this.value < 0){           $id("result").className = "wrong";           $id("result").innerHTML = "内容不正确";           }else{           $id("result").className = "right";           $id("result").innerHTML = "输入正确";           }           }        }    </script>

<body><div class="box">    语文: <input type="text" id="txt"/>  <span id="result">请输入成绩</span></div></body>

8. 搜索框鼠标自动获取焦点focus( ) 鼠标经过选择表单select( )

 <script>        window.onload = function(){            var txt = document.getElementById("txt");            var sele = document.getElementById("select");            txt.focus(); //自动获得焦点            sele.onmouseover = function(){                this.select(); //选择            }        }    </script>

<body>自动获得焦点:<input type="text" id="txt"/>鼠标经过选择表单:<input type="text" id="select"/></body>

9. for循环 输出金字塔案例掌握思想

<script>       for (var i = 0; i <=100; i+=3) {       document.write("<hr width="+i+"%>");  //重点     };    </script>

10. getElementsByTagName()

我们想要获取某类标签比如说所有的div li span

getElementsByTagName(); 很多个所以是复数很多个

0 0