js，jQuery和DOM操作的总结（一）

      var n4;//六种数据类型用typeof来确定类型，Null类型的用typeof是不行的，这个是特殊
        alert(typeof (n4));
        var n1 = 123;
        alert(typeof n1);
        var n2 = "hahaha";
        alert(typeof (n2));
        var n3 = true;
        alert(typeof (n3));
        var n5 = null;
        alert(String(n5));
        var n6 = new Object();
        alert(typeof (n6));

   var n1 = null;
        var n2;
        alert(Boolean(n1));
        alert(Boolean(n2));
        if (n1 === n2) {//这里双等号和三等号是不同的，两个等号会将值进行类型转换再判断，三个等号不仅判断值还判断数据类型
            alert("相等");
        } else {
            alert("不相等");
        }
        var n3;
        //判断一个变量或者对象是不是可以使用
        if (typeof (n3) != undefined && n3 != null) {
            alert("可以使用");
        } else {
            alert("不能使用");
        }

    //类型转换， parseInt和parseFloat
        var n = ‘10‘;
                alert(parseInt(n) + 90);

        var n = ‘10skdfj‘;
                alert(parseInt(n));

        var n = ‘2.513‘;
                alert(parseFloat(n));

        var n = ‘sdf‘;
                alert(parseInt(n));//如果是不能转换的类型，即返回NAN，就是not a number
        //---------------判断是否转换成功
        var n = ‘string‘;
        if (isNaN(parseInt(n))) {
            alert(‘不可以使用‘);
        } else {
        alert(‘可以使用‘);
                }
       // ------------------测试调试
        var sum = 0;
        for (var i = 0; i < 6; i++) {
            sum += i;
        }
        alert(sum.toString());

    //  访问修饰符+返回值类型+方法名+【参数列表】   C#中的方法声明
        //  public void Show(string str)
        //关键字function +方法名+【参数列表(无须声明参数类型)】   js中的方法声明（注意没有返回值类型）
        function func(n) {
            alert(‘嘎嘎‘);
        }
        function func() {
            alert(‘不要闹‘);
        }
        func(‘哈哈‘);//js中没有方法的重载这么一说，就是浏览器从上到下一行一行解析

   function Person() {
        }
        var per = new Person();
        per.name = ‘张三‘;
        per.Sayhello = function () {
            alert(‘大家好，我叫‘ + per.name);
        }
        alert(per.name);
        per.Sayhello();
        //===================//
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.Sayhello = function () {
                alert(‘大家好，我叫‘ + this.name + ‘我今年‘ + this.age + ‘岁了‘);
            }
        }
        var per = new Person(‘李四‘, 51);
        alert(per.name);
        per.Sayhello();

  // 1，字符串.length表示字符串的长度
                var str = new String(‘嘎嘎‘);
                alert(str+str.length);
                var str = ‘我是字符串的内容‘;
                alert(str.length);
                alert(‘今天天气好晴朗处处好风光‘.length);
       // 2,字符串.charAt();表示获取指定索引位置的字符串
                var char = ‘今天天气好晴朗处处好风光‘;
                alert(char.charAt(6));
      //  3,indexOf(‘字符串‘,startIndex)方法，获取指定字符串第一次出现的位置,找不到就放回-1
                var str = ‘啦啦啦德玛西亚哦‘;
                alert(str.indexOf(‘西‘,6));
       // 4,spilt(‘字符串‘,limit);根据分隔符把字符串返回为一个数组
                var str = ‘今|天|天|气|好|晴|朗‘;
                var result = str.split(‘|‘);//接受数组不需要循环，但是一个一个输出需要循环，否则就一次行输出，用逗号隔开
                alert(result);
                for (var i = 0; i < result.length; i++) {
                    alert(result[i]);
                }
        //5,spilt切割字符串可以用正则表达式
                var str = ‘a☆b★c#d‘;
                alert(str.split(/☆|★|#/));
        //6,substr和substring，都是从索引位置开始切割，第二个参数有所不同,一个是切割多少个，一个是切割到哪个索引
                var str = ‘今天天气好晴朗处处好风光‘;
                alert(str.substr(3, 2));
                alert(str.substring(3, 5));
        //7,touppercase和tolowercase 转换大小写
                var str = ‘i  need  you ‘;
                alert(str.toUpperCase());

 window.onload = function () {
        //复制内容
            document.body.oncopy = function () {
                setTimeout(function () {
                    var txt = clipboardData.getData(‘text‘) + ‘本文作者李白‘;//为粘贴板中的内容加标注，注意粘贴板对象clipboardData没有智能提示，别写错了
                    clipboardData.setData(‘text‘, txt);
                }, 100);
            }
        }

  window.onload = function () {
            document.getElementById(‘btnCreate‘).onclick = function () {//这里一开始写成了click，click和onclick的区别是onclick才是给这个按钮注册click事件
                //创建一个层，也就是一个DOM对象
                var divObj = document.createElement(‘div‘);
                //为创建的这个层设置属性
                divObj.style.height = "300px";
                divObj.style.width = "500px";
                divObj.style.backgroundColor = "red";
                divObj.id = ‘dv1‘;
                //把这个层添加到body里面
                document.body.appendChild(divObj);
            }
            document.getElementById(‘btnDelete‘).onclick = function () {
                var Div = document.getElementById(‘dv1‘);
                document.body.removeChild(Div); //这行代码就是删除一个body里面的元素
            }
            var i = 0;
            document.getElementById(‘btnAdd‘).onclick = function () {
                i++;
                var inputObj = document.createElement(‘input‘);
                inputObj.type = ‘button‘;
                inputObj.value = ‘我是新来的‘ + i;
                //获取当前的元素，就是当前的层
                var newObj = document.getElementById(‘dv1‘);
                //  newObj.appendChild(inputObj);
                newObj.insertBefore(inputObj, newObj.firstChild);
            }
        }

  window.onload = function () {
            document.getElementById(‘btn‘).onclick = function () {
                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" }; //创建名字和网址的超链接
                var tb = document.createElement(‘table‘); //创建一个表
                tb.border = ‘1‘;
                for (var key in dic) {
                    //创建行
                    var trObj = document.createElement(‘tr‘);
                    //创建单元格
                    var td1 = document.createElement(‘td‘);
                    if (typeof (td1.innerText) == ‘string‘) {
                        td1.innerText = key; //为单元格的文字赋值 所以是 td1.innerText,这个是IE里面的
                    }
                    else {
                        td1.textContent = key; //如果td1.innerText的类型不是string 那么就是在火狐浏览器里面，就用td1.textContent
                    }
                    var td2 = document.createElement(‘td‘);
                    td2.innerHTML = ‘<a href="‘ + dic[key] + ‘">‘ + key + ‘</a>‘; //在单元格里面创建一个超链接，所以用td2.innerHTML
                    trObj.appendChild(td1); //下面就是把单元格加到行中，把行加到表中，把表加到body里面
                    trObj.appendChild(td2);
                    tb.appendChild(trObj);
                }
                document.body.appendChild(tb);
            }
        }
    

        window.onload = function () {
            document.getElementById(‘btn‘).onclick = function () {
                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
                var tb = document.createElement(‘table‘);
                tb.border = ‘1‘;
                for (var key in dic) {
                    var tr = tb.insertRow(-1);
                    var td1 = tr.insertCell(-1);
                    td1.innerText = key;
                    var td2 = tr.insertCell(-1);
                    td2.innerHTML = ‘<a href="‘ + dic[key] + ‘">‘ + key + ‘<a/>‘;
                }
                document.body.appendChild(tb);
            }
        }

   //注意这类功能都是在click中把兄弟元素的属性重新遍历设置一遍
        window.onload = function () {
            var as = document.getElementsByTagName(‘a‘);
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    for (var j = 0; j < as.length; j++) {
                        as[j].style.backgroundColor = ‘‘;
                    }
                    this.style.backgroundColor = ‘red‘;
                    return false;
                }
            }
        }

 window.onload = function () {
            var datas = {
                ‘mv/1-1.jpg‘: ["mv/1.jpg", "老牛", "163cm"],
                ‘mv/2-1.jpg‘: ["mv/2.jpg", "老马", "165cm"],
                ‘mv/3-1.jpg‘: ["mv/3.jpg", "老蒋", "150cm"]
            };
            var dvs = document.getElementById(‘dvSmall‘);
            for (var key in datas) {
                var imageObj = document.createElement(‘image‘);
                imageObj.src = key;
                imageObj.setAttribute(‘k‘, key);
                imageObj.style.marginLeft = ‘10px‘;
                imageObj.style.cursor = ‘pointer‘; //鼠标进入的时候显示小手的样子
                dvs.appendChild(imageObj);
                imageObj.onmouseover = function () {
                    var dvB = document.getElementById(‘dvBig‘);
                    //脱离文档流，确定位置，显示
                    dvB.style.position = ‘absolute‘;
                    dvB.style.left = this.offsetLeft + ‘px‘;
                    dvB.style.top = this.offsetTop + this.offsetHeight + ‘px‘;
                    dvB.style.display = ‘block‘;
                    //把键值对里面的值（这里是一个数组）取出来
                    var values = datas[this.getAttribute(‘k‘)];
                    //确定显示的内容
                    document.getElementById(‘imBig‘).src = values[0];
                    document.getElementById(‘spName‘).innerText = values[1];
                    document.getElementById(‘spHeight‘).innerText = values[2];
                }
                //鼠标离开的时候大图隐藏
                imageObj.onmouseout = function () {
                    if (document.getElementById(‘dvBig‘).style.display==‘block‘) {
                        document.getElementById(‘dvBig‘).style.display = ‘none‘
                    }
                }
            }

        };

<body>
    <div id="dvSmall">
    </div>
    <div id="dvBig" style="background-color: Orange; border: 1px solid green; width: 630px;
        display: none;">
        大头像:<br />
        <img id="imBig" src="#" alt="Alternate Text" />
        姓名:<span id="spName"></span><br />
        身高:<span id="spHeight"></span>
    </div>
</body>

    window.onload = function () {
            var uls = document.getElementById(‘u‘).getElementsByTagName(‘li‘);
            for (var i = 0; i < uls.length; i++) {
                uls[i].onmouseover = function () {
                    for (var j = 0; j < uls.length; j++) {
                        uls[j].style.backgroundColor = ‘‘;
                    }
                    this.style.backgroundColor = ‘red‘; //这里用this，不能用uls[i],因为这个是uls[i]注册的时间里面调用到自己
                }
                uls[i].onclick = function () {
                    for (var j = 0; j < uls.length; j++) {
                        this.style.fontSize = ‘‘;
                    }
                    this.style.fontSize = ‘50px‘;
                }
            }
        }

//        var s = ‘111@sdf.com‘;
//        var regex = /.+@.+/;
//        var mat = s.match(regex);
        //        alert(mat);   字符串的.match
//        var msg = ‘杨中科：13888888888苏坤：13999999999小胡：133888888888‘;
        //        var result = msg.replace(/(\d{3})(\d{4})(\d{4})/, ‘$1****$3‘);
        var msg = ‘     今天天气好晴朗处处好风光         ‘;
        function trimString(s) {
            return s.replace(/^\s+/, ‘‘).replace(/\s+$/,‘‘) ;//^表示匹配输入字符串的开始位置，$表示匹配字符串的结束位置
        }                                                                           //先切前半部分，再切后面，jQuery源码里面就是这么写的
        var result = trimString(msg);
        alert(result);

 <script type="text/javascript">
        window.onload = function () {
            var tds = document.getElementById(‘tb‘).getElementsByTagName(‘td‘);

            document.getElementById(‘txt‘).onkeyup = function () {//onkeyup 就是键盘抬起的事件
                for (var i = 0; i < tds.length; i++) {
                    tds[i].style.backgroundColor = ‘gray‘;
                }
                var result = chechPwd(this.value);
                if (this.value.length > 0) {
                    if (result <= 1) {
                        tds[0].style.backgroundColor = ‘red‘;
                    } else if (result == 2) {
                        tds[0].style.backgroundColor = ‘blue‘;
                        tds[1].style.backgroundColor = ‘blue‘;
                    } else if (result == 3) {
                        for (var i = 0; i < tds.length; i++) {
                            tds[i].style.backgroundColor = ‘green‘;
                        }
                    }
                }
            }
        }
        function chechPwd(str) {
            var lvl = 0;
            if (str.match(/\d/)) {
                lvl++;
            }
            if (str.match(/[a-zA-Z]/)) {
                lvl++;
            }
            if (str.match(/^[0-9a-zA-Z]/)) {
                lvl++;
            }
            if (str.length < 6) {
                lvl--;
            }
            return lvl;
        }
    </script>

   window.onload = function () {
            var datas = {
                "吉林": ["长春", "四平", "松原"],
                "山东": ["青岛", "济南", "烟台"],
                "山西": ["大同", "太原", "运城"]
            };
            var defult = ‘山东‘;
            //把省份加载到第一个下拉框中
            var s1 = document.getElementById(‘se1‘);
            for (var key in datas) {
                var opt1 = document.createElement(‘option‘);
                opt1.innerText = key;
                opt1.value = key;
                opt1.selected = key == defult ? true : false;
                s1.appendChild(opt1);
            }
            //把对应的城市加载到第二个下拉框中
            var se2 = document.getElementById(‘se2‘);
            for (var i = 0; i < datas[defult].length; i++) {
                var opt2 = document.createElement(‘option‘);
                opt2.value = datas[defult][i];
                opt2.innerText = datas[defult][i];
                se2.appendChild(opt2);
            }
            //注册一个第一个select的Change时间
            se1.onchange = function () {
                while (se2.firstChild) {
                    se2.removeChild(se2.firstChild);//用一个循环和removeChild来清空
                }     
                for (var i = 0; i < datas[this.value].length; i++) {
                    var opt3 = document.createElement(‘option‘);
                    opt3.innerText = datas[this.value][i];
                    opt3.value = datas[this.value][i];
                    se2.appendChild(opt3);
                }

            };
        }

   window.onload = function () {
            document.getElementById(‘toAllLeft‘).onclick = function () {
                allLeftToRight(document.getElementById(‘se1‘), document.getElementById(‘se2‘));
            };
            document.getElementById(‘toAllRight‘).onclick = function () {
                allLeftToRight(document.getElementById(‘se2‘), document.getElementById(‘se1‘));
            };
            function allLeftToRight(s1, s2) {
                var opts = s1.getElementsByTagName(‘option‘);
                for (var i = opts.length - 1; i >= 0; i--) {
                    s2.insertBefore(opts[i], s2.firstChild); //这里要注意 用的不是.appendchild
                }
            };
            //===========================
            document.getElementById(‘toRight‘).onclick = function () {
                LeftToRight(document.getElementById(‘se1‘), document.getElementById(‘se2‘));
            };
            document.getElementById(‘toLeft‘).onclick = function () {
                LeftToRight(document.getElementById(‘se2‘), document.getElementById(‘se1‘));
            };
            function LeftToRight(s1, s2) {
                var opts = s1.getElementsByTagName(‘option‘);
                for (var i = 0; i < opts.length; i++) {
                    if (opts[i].selected) {
                        s2.appendChild(opts[i]);
                        i--;//因为把select1里面的元素移动后   元素个数发生了变化，所以需要I--
                    }
                }
            }
        };

<body>
    <div style="margin-left: 400px; margin-top: 10px;">
        <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
            <option>添加</option>
            <option>删除</option>
            <option>修改</option>
            <option>查询</option>
            <option>打印</option>
        </select>
        <div style="width: 50px; float: left;">
            <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
            <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
            <input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
            <input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
        </div>
        <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
        </select>
    </div>
</body>