前端入门—js第三天

1.输入事件

对于正常的浏览器oninput即可监听输入事件，但是对于IE6、7、8则需要使用onpropertychange来监听。之前我做过一个简单的@事件，就是这样使用的，当监听到输入框中输入@时，就弹出我关注人的列表。下面举例：

<head>
    <meta charset="UTF-8">
    <title>01监听输入事件</title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin: 30px auto;
            position: relative;
        }
        .search input{
            width: 250px;
            height: 26px;
        }
        .search label{
            position: absolute;
            left: 10px;
            top: 8px;
            font-size: 12px;
            cursor: text;
        }
    </style>
    <script>
        window.onload = function(){
            //定义id函数（共用）
            function $(id){
                return document.getElementById(id);
            }
            //oninput 支持大部分浏览器  检测用户表单输入内容
            //onpropertychange  支持IE678  检测用户表单输入内容
            $("txt").oninput = $("txt").onpropertychange = function(){
                if(this.value == ""){
                    $("message").style.display = "block";
                }else{
                    $("message").style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" id="txt">
    <label for="txt" id="message">七夕礼物</label>
</div>
</body>

在这里因为同一事件源的事件用的同一事件处理程序，中间可以使用连等来兼容不同的浏览器，label的for属性值值等于input的id属性值，可以在点击label的使用把鼠标定位到input中，之后采用定位（字绝父相）将label定位到输入框中（h5中使用placeholder可以更方便实现），cursor: text;可以在获取焦点后将光标变为输入样式。

1	<input type="text" placeholder="七夕礼物"/>

2.数组

2.1声明数组

使用[]; 如：var arr1 = [1,2,3,4,5];
使用Array关键字；如：var arr2 = new Array(1,3,5,7,9);
2.2使用数组
使用数组的方法是：数组名[索引值]。但是需要注意的是索引值是从0开始算的。如：arr1[1] = 2;
2.3数组长度
计算数组长度的方法是：数组名.length。例如：arr1.length = 5.
2.4数组遍历
数组的遍历使用for循环。
1
2
3
4
5
6
7
8
9
for(var i = 0; i<arr1.length;i++) // 遍历数组
{
console.log(arr1[i]);
}
或
for(var i= 0, len = arr1.length; i<len;i++) // 遍历数组
{
console.log(arr1[i]);
}

其中下面这种效率更高，因为它只计算了一次len长度，但是我经常采用上面的那种，习惯了。
下面看一个隔行变色的例子，就是使用到了数组的相关知识

<head>
    <meta charset="UTF-8">
    <title>02隔行变色</title>
    <style>
        .box{
            width: 360px;
        }
        .box ul{
            line-height: 30px;
            list-style-type: none;
        }
        .box li span{
            margin: 8px;
        }
        .now{
            background-color: #aaa!important;
        }
    </style>
    <script>
        window.onload = function(){
            //获取所有li并遍历，隔行换颜色。
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                if(i%2==0){
                    lis[i].style.backgroundColor = "#eee";
                }else{
                    lis[i].style.backgroundColor = "#ddd";
                }
                lis[i].onmouseover = function(){
                    //鼠标经过变颜色,this代表事件的调用者lis[i]
                    this.className = "now";
                }
                lis[i].onmouseout = function () {
                    //鼠标划出变原来的样式
                    this.className = "";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
        <li><span>中国核建</span><span>增仓59199</span><span>13.35</span><span>9.97%</span></li>
    </ul>
</div>
</body>

使用this.className,this代表事件的调用者。className后面如果有值则给这个元素添加样式，如果没有值则将元素的样式清空。这里当鼠标经过时给元素添加now样式，鼠标划出移除样式，而在now样式中通过important来提高权重，使这个颜色生效。

3.input输入表单

所有通过input输入取过来的值均是String类型，即使输入的是Number类型也不行，这点在类型转换时或相加时需要注意。

<head>
    <meta charset="UTF-8">
    <title>03input输入类型</title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            document.getElementsByTagName("button")[0].onclick = function(){
                alert(typeof txt.value);  //string
                alert(typeof Number(txt.value));  //number
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt">
<button>点击</button>
</body>

getElementsByTagName获取到的是标签的数组列表，要想使用某一个记得不要忘记后面的索引号，设置获取input输入框的值js中用value，jq中用val()。

4.三目运算

表达式?结果1:结果2;
意思是如果表达式的结果成立，则执行结果1，不成立则执行结果2。
等价于if else语句。
看下面的全选，反选，取消示例：

<head>
    <meta charset="UTF-8">
    <title>04全选和反选</title>
    <style>
        #box ul{
            list-style-type: none;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            //获取id是box的元素下面的所有input元素。
            var inputs = document.getElementById("box").getElementsByTagName("input");
            //封装公共的全选或取消按钮
            function all(flag){
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked = flag;
                }
            }
            btns[0].onclick = function(){
                all(true); //全选
            }
            btns[1].onclick = function(){
                all(false); //取消
            }
            //反选
            btns[2].onclick = function(){
                for(var i=0;i<inputs.length;i++)
                {
                    inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
<div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div id="box">
    <ul>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>

5.排他思想

排他思想的指的是先干掉所有人（包括自己），然后再选中自己。

<head>
    <meta charset="UTF-8">
    <title>05排他思想</title>
    <style>
        .me{
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            for(var i=0;i<btns.length;i++){
                btns[i].index = i;  //给每个button都定义一个index属性,这里用不到，但之后用索引号的话就需要
                btns[i].onclick = function(){
                    //点击时清除掉所有样式，包括自己的
                    for(var j=0;j<btns.length;j++){
                        btns[j].className="";
                    }
                    //清除完之后再选定自己
                    this.className="me";
                }
            }
        }

    </script>
</head>
<body>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
</body>

6.变量和属性

js中变量是自由的，独立存在的；而属性和方法是属于对象的。如：

var index = 10;  //变量  独立存在的，谁都可以使用
var arr = [];   // 数组，是一个对象
arr.index = 20;    // 自定义属性  他是arr的属性，只能在arr 中能使用
alert(arr.index);

再如我们在上面排他思想中定义的，btns[i].index = i;。这个index就是btns的属性，只能btns有权利使用。
下面是一个tabs栏切换的示例，就用到了自定义属性。

<head>
    <meta charset="UTF-8">
    <title>06tab栏切换</title>
    <style>
        .box{
            width: 400px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        #bottom div{
            width: 100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .green{
            background-color: green;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("bottom").getElementsByTagName("div");
            for(var i=0;i<btns.length;i++){
                btns[i].index = i;  // 给button设置index属性，下面可以用，这是本例的难点
                btns[i].onclick = function(){
                    //alert(this.index);
                    //把所有按钮和所有div的样式去掉
                    for(var j=0;j<btns.length;j++){
                        btns[j].className="";
                    }
                    for(var k=0;k<btns.length;k++){
                        divs[k].style.display = "none";
                    }
                    //给当前按钮添加样式
                    this.className="green";
                    //获取当前点击的那个按钮的索引号，把对应索引号的div的样式显示。
                    divs[this.index].style.display = "block";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div id="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div id="bottom">
        <div style="display: block">1号盒子</div>
        <div>2号盒子</div>
        <div>3号盒子</div>
        <div>4号盒子</div>
        <div>5号盒子</div>
    </div>
</div>
</body>

友情提示，如果控制台报这样的错（Uncaught TypeError: Cannot read property ‘getElementsByTagName’ of null），十有八九是因为没有写入口函数window.onload，导致页面还没加载完毕就开始执行了。
代码地址：https://git.oschina.net/catchu/web-study