JavaScript 系列

时间 2019-12-10

原文原文链接

1.显示时间javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //建立时间对象
        //var date = new Date();
        ////获取世界时间，会提示当前时区
        //alert(date.toString());
        ////获取当前时区的当前时间
        //alert(date.toLocaleString());
        
        //代码分离：通常不将html与js混合写
        //定义函数，用于获取时间对象并显示当前时间
        function showTime() {
            var date = new Date();
            alert(date.toLocaleString());
            return false;//可让a的跳转不执行
        }
    </script>
    
    <input type="button" value="显示当前时间" onclick="showTime();"/>
    <hr/>
    点击超连接，执行js脚本，而不进行url跳转
    <br/>
    方式一：让js函数返回false,在onclick中也返回false;
        <a href="http://www.itcast.cn" onclick="return showTime();">显示当前时间</a>

    <br/>
    方式二：将href指定成一段脚本
    <a href="javascript:showTime();">点击显示时间</a>
    <br/>
</body>
</html>

View Code

2.方法的重载（求和）css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //不存在方法重载
        //后声明的函数会将先声明的函数覆盖
        
        function add(a, b) {
            alert(a + b);
        }
        
        function add(a,b,c) {
            alert(a + b + c);
        }

        //add(1, 2);
        
        //可变参数
        function sum(a) {
            //使用arguments获取全部参数，是一个数组
            //alert(arguments.length);//返回数组的元素个数
            var sum1 = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum1 += arguments[i];
            }
            alert(sum1);
        }
        
        //调用
        sum(1, 2, 3,4,5,6);
    </script>
</body>
</html>

View Code

3.匿名函数html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
    <body>
         <input type="button" id="btnShow" value="显示"/>
        <script>
            
            //快捷键：fun,tab
            //定义匿名函数，赋值给一个变量
            var f1 = function(a, b) {
                alert(a+b);
            };   
            //经过变量调用
            //f1(1, 2);

            //典型应用：为事件绑定处理函数，传递回调函数
            //根据id获取页面元素，为它绑定单击事件
            document.getElementById('btnShow').onclick = function() {
                alert(123);
            };
        </script>
    
   
    </body>
</html>

View Code

4.闭包java

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //定义一个函数show
        function show(name) {
            //返回一个函数
            return function () {
                //输出name的值
                alert(name);
            };
        }
        //运行show函数，将返回值赋给f1
        //由于返回值是函数，因此f1如今指向一个函数
        var f1 = show('a');
        //经过f1能够调用匿名函数执行
        f1();
        
        //闭包：支持在函数内部调用函数以前声明过的变量
        //做用域链：变量的做用域在当前函数中，及当前函数内部定义的函数中，造成了一个链条
        //建议：避免闭包，每次在用一个变量时，都要先声明再使用
    </script>
</body>
</html>

View Code

5.原型jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //原型：对象的类型

        function Person() {
            this.Age = 100;
        }

        var p1 = new Person();
        //p1.Title = 'abc';
        
        //访问原型
        p1.__proto__.Title = 'abc';//为原型注释数据成员
        //Person.prototype.Title = 'abc';//功能同上面的代码

        var p2 = new Person();
        alert(p2.Title);
    </script>
</body>
</html>

View Code

6.数组正则表达式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        //使用[]定义数组
        var array1 = [123, 'abc'];
        array1[0];

        //键值对{键:值,...}
        var array2 = {            
            name: 'zhh',
            age: 18,
            gender:'你猜'
        };
        //alert(array2['name']);//将array2认为是集合，经过键访问值
        //alert(array2.name);//将array2认为是json，经过属性访问值
        
        //定义json数组
        var temp = [{
            title: 'zhh',
            age:18
        }, {
            title: '牛头',
            age:20
        }, {
            title: '马面',
            age:22
        }];
        //输出每一个对象的title值
        for (var index in temp) {//temp是数组，因此index是索引
            alert(temp[index].title);
        }
    </script>
</body>
</html>

View Code

7.不同的调用json

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        function f1() {
            alert('就是这么帅');
        }

        onload = function () {
            //document.getElementById('btn').onclick = f1;
            document.getElementById('btn').onclick = function () {
                alert('哈哈哈没想到吧');
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="按钮" onclick="f1();" />
    <input type="button" name="name" value="仍是按钮" id="btn" />
</body>
</html>

View Code

8.对话框api

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //alert('123');
        //确认框，有"肯定"、"取消"两个按钮
        //点击确认返回true,点击取消返回false
        //var result = confirm('确认要删除吗？');
        //alert(result);
        
        //输入框：有一个文本框，一个"肯定"按钮，一个"取消"按钮
        //点肯定则返回文本框中的值，点取消则返回null
        var result = prompt('请输入年龄','10');
        alert(result);
    </script>
</head>
<body>

</body>
</html>

View Code

9.记时5秒数组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //讨论问题：在函数内部使用变量时，写不写var的区别？
        //在script标签中定义的成员（变量，函数）都是属于window对象的
        //在函数内部使用var声明变量时，表示这个变量的做用域是当前函数
        //在函数内部使用一个未声明的变量时，浏览器会将这个变量声明到window上
        
        var time1 = 5;
        var id1, btnShow;
        onload = function () {
            //获取按钮
            btnShow = document.getElementById('btnShow');
            //启动定时器
            id1 = setInterval('changeBtn(btnShow)', 1000);
        };

        function changeBtn(btn1) {
            time1--;//更改计时数
            btn1.value = "等待" + time1 + "秒后可用";
            if (time1 == 0) {//当5秒结束后，让按钮可用
                btn1.value = "注册";
                btn1.disabled = false;
                clearInterval(id1);//中止定时器
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnShow" disabled="true" value="等待5秒后可用"/>
</body>
</html>

View Code

10.样式浏览器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .d1 {
            color: white;
        }
        </style>
    <script>
        //对于纯js的代码，不须要考虑加载顺序问题
        //须要考虑加载顺序的状况：使用js操做html时，要看对应的html是否已经存在
        
        onload = function() {
            var div1 = document.getElementById('div1');
            div1.style.width = '200px';//使用js操做样式
            //特例：background-color，由于命名中不容许使用-，因此改成：去掉-，将-后面的单词的首字母大写，格式如：backgroundColor
            div1.style.backgroundColor = 'blue';
            div1.className = 'd1';//将类样式应用到dom上
            //特例：float->cssFloat
            div1.style.cssFloat = 'right';
        };
        var p1 = 1;
    </script>
</head>
<body>
    <div id="div1" style="width:100px;height: 100px;background-image:  border: 1px solid red;">
        123
    </div>
    
    <script>
        
        </script>
</body>
</html>

View Code

11.超连接点击

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function () {
            //获取容器
            var div1 = document.getElementById('div1');
            
            //循环建立5个超连接
            for (var i = 0; i < 5; i++) {
                //建立a对象
                var a1 = document.createElement('a');
                //为属性赋值
                a1.href = 'http://www.itcast.cn';
                a1.innerHTML = '连接' + i;
                a1.onclick = function() {
                    //设置背景色为红色
                    this.style.backgroundColor = 'red';
                    return false;
                };
                //追加到容器中
                div1.appendChild(a1);
            }
        };
    </script>
</head>
<body>
    <div id="div1">
        
    </div>
</body>
</html>

View Code

12.透视图

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function () {
            //根据标签获取body元素
            var body = document.getElementsByTagName('body')[0];
            //规定初始值
            var width = 500, height = 500, left = 10, top = 10;
            //循环建立div
            while (true) {
                //建立div加入body中
                var div1 = document.createElement('div');
                div1.style.position = 'absolute';
                div1.style.left = left + 'px';
                div1.style.top = top + 'px';
                div1.style.border = '1px solid blue';
                div1.style.width = width + 'px';
                div1.style.height = height + 'px';
                body.appendChild(div1);
                
                //改写数值
                left += 5;
                top += 5;
                width -= 10;
                height -= 10;
                
                //当div的宽度<=0时，在页面上不会显示，因此退出循环
                if (width <= 0) {
                    break;
                }
            }
        };
    </script>
</head>
<body>
    <div style="position: absolute;left:10px;top:10px;width:500px;height:500px; border: 1px solid red;">
        
    </div>
</body>
</html>

View Code

13.表格数据

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        var bgColor;
        var list = [
            { id: '1', country: '中国', capital: '北京' },
            { id: '2', country: '美国', capital: '华盛顿' },
            { id: '3', country: '日本', capital: '东京' },
            { id: '4', country: '韩国', capital: '首尔' }
        ];
        onload = function() {
            var body = document.getElementsByTagName('body')[0];
            
            //建立表格
            var table = document.createElement('table');
            table.border = 1;
            body.appendChild(table);
            
            //建立标题行
            var thead = document.createElement('thead');
            var item0 = list[0];
            for (var key0 in item0) {
                //建立标题单元格
                var th = document.createElement('th');
                th.innerText = key0;
                thead.appendChild(th);
            }
            table.appendChild(thead);

            for (var i = 0; i < list.length; i++) {
                //遍历对象
                var item = list[i];
                //建立行
                var tr = document.createElement('tr');
                table.appendChild(tr);
                //注册事件
                tr.onmouseover = function () {//指向行时高亮
                    //改变颜色前，先获取值，用于恢复
                    bgColor = this.style.backgroundColor;
                    this.style.backgroundColor = 'green';
                };
                tr.onmouseout = function() {//移开行时恢复原来颜色
                    this.style.backgroundColor = bgColor;
                };
                //设置行的背景色
                if (i % 2 == 0) {
                    tr.style.backgroundColor = 'red';
                } else {
                    tr.style.backgroundColor = 'blue';
                }
                
                //遍历对象
                for (var key in item) {
                    //建立单元格
                    var td = document.createElement('td');
                    td.innerText = item[key];
                    tr.appendChild(td);
                }
            }
        };
    </script>
</head>
<body>
    
</body>
</html>

View Code

14.控制div的显示与隐藏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        div {
            width: 100px;height: 100px;
            border: 1px solid red;
        }
    </style>
    <script>
        onload = function() {
            document.getElementById('btnShow').onclick = function () {
                var divShow = document.getElementById('divShow');
                if (this.value == '隐藏') {
                    this.value = '显示';
                    divShow.style.display = 'none';//控制层隐藏
                } else {
                    this.value = '隐藏';
                    divShow.style.display = 'block';//控制层显示
                }
            };
        };
    </script>
</head>
    <body>
        <input type="button" id="btnShow" value="隐藏"/>
        <div id="divShow">
            123
        </div>
    </body>
</html>

View Code

15.显示id

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #divShowId {
            position: absolute;display: none;
            width: 100px;height: 100px;
            background-color: blue;color: white;
        }
    </style>
    <script>
        onload = function () {
            //获取全部按钮
            var btns = document.getElementsByTagName('input');
            //遍历按钮，绑定事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].onmouseover = function(e) {
                    //显示div，内容是id
                    //获取div
                    var divShowId = document.getElementById('divShowId');
                    divShowId.textContent = this.id;
                    //显示
                    divShowId.style.display = 'block';
                    //定义位置
                    divShowId.style.left = e.clientX + 'px';
                    divShowId.style.top = e.clientY + 'px';
                };
                btns[i].onmouseout = function() {
                    //隐藏div
                    //获取div
                    var divShowId = document.getElementById('divShowId');
                    //隐藏
                    divShowId.style.display = 'none';
                };
            }
        };
    </script>
</head>
<body>
    <input type="button" id="btn1" value="按钮1"/>
    <input type="button" id="btn2" value="按钮2"/>
    <input type="button" id="btn3" value="按钮3"/>
    <input type="button" id="btn4" value="按钮4"/>
    <input type="button" id="btn5" value="按钮5"/>
    <div id="divShowId"></div>
</body>
</html>

View Code

16.正则表达式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //一、匹配test
        //二、提取exec
        //三、替换：字符串对象的replace
        //四、全局模式g:使用时表示匹配全部，不使用表示匹配第一个

        onload = function () {
            //匹配test
            document.getElementById('btnTest').onclick = function() {
                //构造正则表达式对象
                //var regExp = /^\d{6}$/;//邮政编码
                var regExp=/\w+@[a-z0-9]+\..+/;//电子邮箱123@qq.com
                //获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //进行匹配
                if (regExp.test(txtMsg)) { //匹配成功返回True
                    alert('ok');
                } else {//匹配失败返回false
                    alert('no');
                }
            };
            
            //提取exec
            document.getElementById('btnExec').onclick = function() {
                var str = '火车12306电信10000火警119哈哈';
                //g表示全局模式，若是不加表示提取第一个，加了表示提取全部
                var reg = /\d+/;//匹配电话号码，连续的数字
                //var result = reg.exec(str);//若是未匹配到结果，则返回null，若是匹配到结果，则返回匹配的值，类型是数组
                //使用全局模式时，结合循环来写
                while (true) {
                    var result = reg.exec(str);
                    if (result == null) {
                        break;
                    }
                }
            };
            
            //提取组exec
            document.getElementById('btnExecGroup').onclick = function() {
                var str = '火车12306电信10000火警119哈哈';
                var reg = /\d(\d)\d*/g;//使用()完成提取组的功能
                while (true) {
                    var result = reg.exec(str);
                    //提取组时，结果数组中的0元素表示自己，从1元素开始是与(匹配的内容
                    if (result == null) {
                        break;
                    }
                }
            };
            
            //替换：字符串对象的replace方法，将正则对象做为参数
            document.getElementById('btnReplace').onclick = function() {
                //若是使用全局模式g，表示匹配多个；若是不使用g表示只匹配第一个
                var reg = /\s+/g;
                var str = "  abc  ";
                document.getElementById('txtMsg').value = '1' + str.replace(reg, '') + '1';
            };
        };
    </script>
</head>
<body>
    <input type="text" id="txtMsg"/>
    <input type="button" id="btnTest" value="匹配test"/>
    <input type="button" id="btnExec" value="提取exec"/>
    <input type="button" id="btnExecGroup" value="提取组exec"/>
    <input type="button" id="btnReplace" value="去除空格"/>
</body>
</html>

View Code

17.权限选择

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //为“所有右移”按钮绑定事件
            $('#btnRightAll').click(function () {
                //获取全部子元素,追加到右边的select中
                $('#selectLeft').children().appendTo('#selectRight');
            });
            
            //为“选中右移”按钮绑定事件
            $('#btnRight').click(function () {
                //获取到全部被选中的option
                $('#selectLeft :selected').appendTo('#selectRight');
            });
            
            //为“所有左移”按钮绑定事件
            $('#btnLeftAll').click(function() {
                //获取右侧全部的option
                $('#selectLeft').append($('#selectRight option'));
            });
            
            //为“选中左移”按钮绑定事件
            $('#btnLeft').click(function() {
                //获取右侧选中的项，加到左边
                $('#selectLeft').append($('#selectRight :selected'));
            });
        });
    </script>
</head>
<body>
    <select id="selectLeft" multiple="true">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    <input type="button" id="btnRightAll" value=">>"/>
    <input type="button" id="btnRight" value=">"/>
    <input type="button" id="btnLeft" value="<"/>
    <input type="button" id="btnLeftAll" value="<<"/>
    <select id="selectRight" multiple="true"></select>
</body>
</html>

View Code

18.表格数据

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #bgDiv {
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: black;
            opacity: 0.2; /*设置不透明度，便可以看到层下面的内容，可是因为层的遮挡，是不能够进行操做的*/
            display: none;
        }

        #fgDiv {
            position: absolute;
            width: 300px;
            height: 100px;
            border: 1px solid red;
            background-color: #e7e7e7;
            display: none;
        }
    </style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        var list = [
    { id: '1', country: '中国', capital: '北京' },
    { id: '2', country: '美国', capital: '华盛顿' },
    { id: '3', country: '日本', capital: '东京' },
    { id: '4', country: '韩国', capital: '首尔' }
        ];

        $(function () {
            //生成表格数据
            $.each(list, function() {
                $('<tr id="'+this.id+'">' +
                    '<td><input type="checkbox"/></td>' +
                    '<td>'+this.id+'</td>' +
                    '<td>'+this.country+'</td>' +
                    '<td>'+this.capital+'</td>' +
                    '<td><input type="button" value="修改"/></td>' +
                    '</tr>').appendTo('#list');
            });
            
            //为复选框chkAll设置点击事件，完成全选、全消的功能
            $('#chkAll').click(function () {
                //根据当前复选框的状态设置其它行复选框的状态
                $('#list :checkbox').attr('checked', this.checked);
            });
            
            //反选
            $('#btnReverse').click(function () {
                //获取实际数据行的复选框
                $('#list :checkbox').each(function() {//jquery对象.each
                    this.checked = !this.checked;
                });
            });
            
            //删除选中项
            $('#btnRemove').click(function() {
                //确认
                if (confirm('肯定要删除吗')) {
                    //获取全部数据行中选中的checkbox
                    //$('#list :checked').parent().parent().remove();
                    //直接在祖宗节点中找到tr节点
                    $('#list :checked').parents('tr').remove();
                }
            });
            
            //添加
            $('#btnAdd').click(function () {
                //显示添加界面
                $('#bgDiv').css('display', 'block')
                    .css('width', window.innerWidth + 'px')
                    .height(window.innerHeight + 'px');
                $('#fgDiv').css('display', 'block')
                    .css('left', (window.innerWidth - 300) / 2 + 'px')
                    .css('top', (window.innerHeight - 100) / 2 + 'px');
                //清除文本框中的数据
                $('#fgDiv :text,:hidden').val('');
            });

            //保存
            $('#btnSave').click(function () {
                var id = $('#hidId').val();
                if (id == '') { //添加
                    $('<tr id="' + $('#txtId').val() + '">' +
                        '<td><input type="checkbox"/></td>' +
                        '<td>' + $('#txtId').val() + '</td>' +
                        '<td>' + $('#txtCountry').val() + '</td>' +
                        '<td>' + $('#txtCapital').val() + '</td>' +
                        '<td><input type="button" value="修改"/></td>' +
                        '</tr>').appendTo('#list')
                        .find(':button').click(function () {//为修改按钮绑定事件
                            //显示添加界面
                            $('#bgDiv').css('display', 'block')
                                .css('width', window.innerWidth + 'px')
                                .height(window.innerHeight + 'px');
                            $('#fgDiv').css('display', 'block')
                                .css('left', (window.innerWidth - 300) / 2 + 'px')
                                .css('top', (window.innerHeight - 100) / 2 + 'px');
                            //找到当前按钮所在td的以前的全部td，由于数据就在这些td中
                            var tds = $(this).parent().prevAll();
                            //设置文本框的值
                            $('#hidId').val(tds.eq(2).text());//做用：在修改后用于查找原始数据的行
                            $('#txtId').val(tds.eq(2).text());
                            $('#txtCountry').val(tds.eq(1).text());
                            $('#txtCapital').val(tds.eq(0).text())
                        });
                } else {//修改
                    var tds = $('#' + id + '>td');
                    tds.eq(1).text($('#txtId').val());
                    tds.eq(2).text($('#txtCountry').val());
                    tds.eq(3).text($('#txtCapital').val());
                    //改tr的id属性，保持数据一致
                    $('#' + id).attr('id', $('#txtId').val());
                }

                //隐藏层
                $('#bgDiv').css('display', 'none');
                $('#fgDiv').css('display', 'none');
            });
            
            //修改
            $('#list :button').click(function() {
                //显示添加界面
                $('#bgDiv').css('display', 'block')
                    .css('width', window.innerWidth + 'px')
                    .height(window.innerHeight + 'px');
                $('#fgDiv').css('display', 'block')
                    .css('left', (window.innerWidth - 300) / 2 + 'px')
                    .css('top', (window.innerHeight - 100) / 2 + 'px');
                //找到当前按钮所在td的以前的全部td，由于数据就在这些td中
                var tds = $(this).parent().prevAll();
                //设置文本框的值
                $('#hidId').val(tds.eq(2).text());//做用：在修改后用于查找原始数据的行
                $('#txtId').val(tds.eq(2).text());
                $('#txtCountry').val(tds.eq(1).text());
                $('#txtCapital').val(tds.eq(0).text());
            });
        });
    </script>

</head>
    <body>
        修改操做：一、将原有数据展现在div中；二、点击保存时，须要知道对应表格中的哪行数据；3、为新增的修改按钮绑定事件
        <br/>
        难点：在第2步中，如何在点击div中按钮时，知道对应原表格中的哪行数据
        <hr/>
        <input type="button" id="btnAdd" value="添加" />
        <input type="button" id="btnReverse" value="反转"/>
        <input type="button" id="btnRemove" value="删除选中项"/>
        <table border="1">
            <thead>
                <th width="100"><input type="checkbox" id="chkAll"/></th>
                <th width="100">编号</th>
                <th width="100">国家</th>
                <th width="100">首都</th>
                <th width="100">修改</th>
            </thead>
            <tbody id="list">
            
            </tbody>
        </table>
    
    

        <div id="bgDiv">
        </div>
        <div id="fgDiv">
            <input type="hidden" id="hidId"/>
            编号：<input type="text" id="txtId"/>
            <br/>
            国家：<input type="text" id="txtCountry"/>
            <br/>
            首都：<input type="text" id="txtCapital"/>
            <br/>
            <input type="button" id="btnSave" value="保存"/>
        </div>
    </body>
</html>

View Code

19.点谁谁哭

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('input').click(function() {
                $('input').val('哈哈');
                this.value = '呜呜';
            });
        });
    </script>
</head>
<body>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
</html>

View Code

20.淘宝评分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            var star2 = 'Images/star2.png';
            var star1 = 'Images/star1.png';
            var index;
            $('img').click(function() {
                index = parseInt(this.id) + 1;
            });
            $('img').hover(function() {
                $(this).attr('src', star2).prevAll().attr('src', star2).end().nextAll().attr('src', star1);
            }, function() {
                $('img').attr('src', star1);
                $('img:lt('+index+')').attr('src', star2);
            });
        });
    </script>
</head>
<body>
    <img src="Images/star1.png" id="0" />
    <img src="Images/star1.png" id="1"/>
    <img src="Images/star1.png" id="2"/>
    <img src="Images/star1.png" id="3"/>
    <img src="Images/star1.png" id="4"/>
</body>
</html>

View Code

21.照片显示详细地址

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div {
            position: absolute;
            display: none;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: white;
        }
        img {
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        var list = {
            'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
            'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一块儿劳动，却想到仇视'],
            'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
            'hg': ['韩国', '首尔', '无穷', '民族意识超强']
        };
        $(function () {
            $('img').hover(function (e) {
                var info = list[this.id];
                var msg = '国家：'+info[0]+'<br/>首都:'+info[1]+'<br/>国花:'+info[2]+'<br/>简介:'+info[3]+'<br/>';
                $('div').css({left:e.clientX, top:e.clientY, display:'block'}).html(msg);
            }, function() {
                $('div').css('display', 'none');
            });
        });
    </script>
</head>
<body>
    <div id="div">Hello</div>
    <img src="Images/hg.jpg" id="hg" />
    <img src="Images/mg.jpg" id="mg" />
    <img src="Images/rb.jpg" id="rb" />
    <img src="Images/zg.jpg" id="zg" />
</body>
</html>

View Code