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

浏览数：43 / 时间：2015年06月09日

废话不说，直接上图技术分享

一 js的基本操作

(1)js 的六种数据类型

      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));

（2）是否相等的两种判断‘==‘和‘===

   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("不能使用");
        }

(3)类型转换的问题

    //类型转换， 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());

（4）js中的方法

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

（5）最简单的面向对象，

   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();

（6）字符串对象的几个常用方法

  // 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());

二 DOM操作

整个页面或者说窗口就是一个window对象
所以页面的一些元素都可以通过window点出来

1.
页面的点击事件有两个,
body的onclick----------只限于在body中点击才能触发
document.onclick----------整个页面内点击都可以触发

2.
动态设置事件有两种方式:
(1)
直接在某个标签中写js代码,如:
<input type="button" onclick="js代码" />
(2)
通过document.getElementById(‘id‘).onclick=匿名函数;在这个匿名函数中写要执行的代码;

3.
window对象的属性和方法:
一般情况,使用window的属性或者方法可以省略window,直接写方法名就可以;如:
window.alert(‘我好帅‘);----我们可以省略window;
confirm(‘弹出内容‘);----这个方法返回bool类型,可以通过这个方法尽心弹框
window.navigate(url);----这个方法的意思是指重新导航;---------------IE和空中支持
window.location.href=url;-----这个可以直接赋值,表示的是去这个网址-所有浏览器都支持
window.location.reload();----这个方法相当于刷新

4.
js中的两个计时器
setInterval(code,delay);这个计时器指的是每隔多长时间执行一次里面的代码
setTimeout(code,delay);这个计时器指的是隔多长时间就执行一次
两个计时器都是方法,返回值都是他们本身的id,有了id就可以销毁计时器
clearInterval(intervalId);---是第一个计时器的销毁方法
clearTimeout(setTimeoutId);----是清除第二个计时器的方法

5.
doucument的事件三个
onload（页面加载后触发）---常用
onunload（页面卸载后触发）--不常用
onbeforeunload（页面卸载前触发）---经常用

6.
window.event----一般兼容IE,火狐不兼容

window.event.altKey---检测用户按下的是alt键

window.event.ctrlKey---检测用户按下的是ctrl键

window.event.shiftKey--检测用户按下的是shift键

window.event.clientX---发生事件的时候鼠标在客户区的横坐标

window.event.clientY---发生事件的时候鼠标在客户区的纵坐标

window.event.screenX---发生事件时鼠标在屏幕上的横坐标

window.event.screenY---发生事件时鼠标在屏幕上的纵坐标

window.event.offsetX---发生事件时鼠标相对于事件源的横坐标

window.event.offsetY---发生事件时鼠标相对于事件源的纵坐标

window.event.returnValue---值为false的时候指的是取消事件的处理和return false一样(后者常用,兼容问题)

window.event.srcElement---事件源

window.event.button---鼠标按键的值

window.clipboardData.setData(‘text‘,值);---设置剪切板内容

window.clipboardData.getData(‘text‘);---获得剪切板内容

在火狐里都可以用参数的方式
jquery中全部传参数

body.oncopy---复制的事件

body.onpaste---粘贴的事件

案例一：DOM操作粘贴板

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

案例二：DOM动态创建元素

  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);
            }
        }

案例三： DOM方式态添加表格超链接

  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>

案例六：DOM下列表的高亮显示

    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 = ‘[email protected]‘;
//        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>

案例九：DOM下的省市联动

   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);
                }

            };
        }

案例十：DOM的权限管理

   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>