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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。