Jquery2

時間 2019-12-09

原文原文鏈接

拓展
關鍵字arguments表示方法的參數，是一個數組
方法call表示讓指定對象完成方法調用，這裏可使用this表示當前對象，接收零到多個參數
方法apply與call相似，不一樣點是apply能夠指定數組做爲參數
掌握這幾個知識點後，能夠閱讀jquery源代碼javascript

 1  <script>
 2         //call與apply的意義：在不改變對象源代碼的狀況下，可讓函數內部的this表示當前對象
 3 
 4         var id = 10;//爲window對象定義了屬性id
 5         function showId() {
 6             alert(this.id);
 7         }
 8 
 9         function Person(fn) {
10             this.id = 20;//爲類定義了屬性id
11             //this.sayId2 = fn;
12         }
13 
14         //var p1 = new Person();
15         //p1.sayId = showId;//將方法showId賦值給變量sayId
16         //p1.sayId();//調用方法,使用p1調用的方法，因此函數中的this就是p1
17 
18         //var p2 = new Person(showId);
19         //p2.sayId2();
20         
21         //在不改變原有成員的狀況下，讓person對象調用showId方法
22         //showId();
23         showId.call(new Person());//call表示由哪一個對象來調用這個方法，方法中的this就是這個對象
24     </script>

屬性選擇器
包含指定屬性的jquery對象
例：$(‘input[name]’)，表示獲取全部具備name屬性的input元素，只有硬編碼寫出了name屬性，纔會被選擇到
帶=的：表示屬性等於指定值的，如$('input[name=hello]')
帶*=的：表示屬性包含指定值的，如$('input[name*=hello]')
帶^=的：表示以指定字符開頭的
帶$=的：表示以指定字符結尾的
寫多個[]：表示同時具備多個屬性的，多個[]中的屬性不分前後，如$('input[id][name][style]')css

1  <script>
2         $(function() {
3             $('input');
4         });
5     </script>

表單選擇器
選擇指定類型的元素，使用「:類型」，這是「input[type=類型]」的簡寫形式
$(':checkbox')：選擇全部的checkbox元素
jq對象調用val()方法，則返回第一個對象的value值；若是要獲取全部項的value，須要each循環遍歷
4種經常使用選擇器的簡寫
:enabled：選擇全部被啓用的元素
:disabled：選擇全部被禁用的元素
:checked：表示checked屬性爲選中狀態的元素，用於checkbox、radio控件
:selected：表示全部被selected的option，用於select控件html

  1  <script>
  2         var list = [
  3     { id: '1', country: '中國', capital: '北京' },
  4     { id: '2', country: '美國', capital: '華盛頓' },
  5     { id: '3', country: '日本', capital: '東京' },
  6     { id: '4', country: '韓國', capital: '首爾' }
  7         ];
  8 
  9         $(function () {
 10             //生成表格數據
 11             $.each(list, function() {
 12                 $('<tr id="'+this.id+'">' +
 13                     '<td><input type="checkbox"/></td>' +
 14                     '<td>'+this.id+'</td>' +
 15                     '<td>'+this.country+'</td>' +
 16                     '<td>'+this.capital+'</td>' +
 17                     '<td><input type="button" value="修改"/></td>' +
 18                     '</tr>').appendTo('#list');
 19             });
 20             
 21             //爲複選框chkAll設置點擊事件，完成全選、全消的功能
 22             $('#chkAll').click(function () {
 23                 //根據當前複選框的狀態設置其它行復選框的狀態
 24                 $('#list :checkbox').attr('checked', this.checked);
 25             });
 26             
 27             //反選
 28             $('#btnReverse').click(function () {
 29                 //獲取實際數據行的複選框
 30                 $('#list :checkbox').each(function() {//jquery對象.each
 31                     this.checked = !this.checked;
 32                 });
 33             });
 34             
 35             //刪除選中項
 36             $('#btnRemove').click(function() {
 37                 //確認
 38                 if (confirm('肯定要刪除嗎')) {
 39                     //獲取全部數據行中選中的checkbox
 40                     //$('#list :checked').parent().parent().remove();
 41                     //直接在祖宗節點中找到tr節點
 42                     $('#list :checked').parents('tr').remove();
 43                 }
 44             });
 45             
 46             //添加
 47             $('#btnAdd').click(function () {
 48                 //顯示添加界面
 49                 $('#bgDiv').css('display', 'block')
 50                     .css('width', window.innerWidth + 'px')
 51                     .height(window.innerHeight + 'px');
 52                 $('#fgDiv').css('display', 'block')
 53                     .css('left', (window.innerWidth - 300) / 2 + 'px')
 54                     .css('top', (window.innerHeight - 100) / 2 + 'px');
 55                 //清除文本框中的數據
 56                 $('#fgDiv :text,:hidden').val('');
 57             });
 58 
 59             //保存
 60             $('#btnSave').click(function () {
 61                 var id = $('#hidId').val();
 62                 if (id == '') { //添加
 63                     $('<tr id="' + $('#txtId').val() + '">' +
 64                         '<td><input type="checkbox"/></td>' +
 65                         '<td>' + $('#txtId').val() + '</td>' +
 66                         '<td>' + $('#txtCountry').val() + '</td>' +
 67                         '<td>' + $('#txtCapital').val() + '</td>' +
 68                         '<td><input type="button" value="修改"/></td>' +
 69                         '</tr>').appendTo('#list')
 70                         .find(':button').click(function () {//爲修改按鈕綁定事件
 71                             //顯示添加界面
 72                             $('#bgDiv').css('display', 'block')
 73                                 .css('width', window.innerWidth + 'px')
 74                                 .height(window.innerHeight + 'px');
 75                             $('#fgDiv').css('display', 'block')
 76                                 .css('left', (window.innerWidth - 300) / 2 + 'px')
 77                                 .css('top', (window.innerHeight - 100) / 2 + 'px');
 78                             //找到當前按鈕所在td的以前的全部td，由於數據就在這些td中
 79                             var tds = $(this).parent().prevAll();
 80                             //設置文本框的值
 81                             $('#hidId').val(tds.eq(2).text());//做用：在修改後用於查找原始數據的行
 82                             $('#txtId').val(tds.eq(2).text());
 83                             $('#txtCountry').val(tds.eq(1).text());
 84                             $('#txtCapital').val(tds.eq(0).text())
 85                         });
 86                 } else {//修改
 87                     var tds = $('#' + id + '>td');
 88                     tds.eq(1).text($('#txtId').val());
 89                     tds.eq(2).text($('#txtCountry').val());
 90                     tds.eq(3).text($('#txtCapital').val());
 91                     //改tr的id屬性，保持數據一致
 92                     $('#' + id).attr('id', $('#txtId').val());
 93                 }
 94 
 95                 //隱藏層
 96                 $('#bgDiv').css('display', 'none');
 97                 $('#fgDiv').css('display', 'none');
 98             });
 99             
100             //修改
101             $('#list :button').click(function() {
102                 //顯示添加界面
103                 $('#bgDiv').css('display', 'block')
104                     .css('width', window.innerWidth + 'px')
105                     .height(window.innerHeight + 'px');
106                 $('#fgDiv').css('display', 'block')
107                     .css('left', (window.innerWidth - 300) / 2 + 'px')
108                     .css('top', (window.innerHeight - 100) / 2 + 'px');
109                 //找到當前按鈕所在td的以前的全部td，由於數據就在這些td中
110                 var tds = $(this).parent().prevAll();
111                 //設置文本框的值
112                 $('#hidId').val(tds.eq(2).text());//做用：在修改後用於查找原始數據的行
113                 $('#txtId').val(tds.eq(2).text());
114                 $('#txtCountry').val(tds.eq(1).text());
115                 $('#txtCapital').val(tds.eq(0).text());
116             });
117         });
118     </script>

最後是顯示的微博java

<!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>
    <link href="css/main.css" rel="stylesheet" />
    <script src="../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '發呆', '4.gif': '得意', '5.gif': '流淚', '6.gif': '害羞', '7.gif': '閉嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尷尬', '11.gif': '發怒', '12.gif': '調皮', '13.gif': '呲牙', '14.gif': '驚訝', '15.gif': '難過', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可愛', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '飢餓', '25.gif': '困', '26.gif': '驚恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奮鬥', '31.gif': '咒罵', '32.gif': '疑問', '33.gif': '噓', '34.gif': '暈', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髏', '38.gif': '敲打', '39.gif': '再見', '40.gif': '擦汗', '41.gif': '摳鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '壞笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙視', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '陰險', '52.gif': '親親', '53.gif': '嚇', '54.gif': '可憐', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '籃球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '飯', '62.gif': '豬頭', '63.gif': '玫瑰', '64.gif': '凋謝', '65.gif': '示愛', '66.gif': '愛心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '閃電', '70.gif': '炸彈', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢蟲', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太陽', '77.gif': '禮物', '78.gif': '擁抱', '79.gif': '強', '80.gif': '弱', '81.gif': '握手', '82.gif': '勝利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳頭', '86.gif': '差勁', '87.gif': '愛你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '愛情', '91.gif': '飛吻', '92.gif': '跳跳', '93.gif': '發抖', '94.gif': '慪火', '95.gif': '轉圈', '96.gif': '磕頭', '97.gif': '回頭', '98.gif': '跳繩', '99.gif': '揮手', '100.gif': '激動', '101.gif': '街舞', '102.gif': '獻吻', '103.gif': '左太極', '104.gif': '右太極', '105.gif': '淡定', '106.gif': '暈', '107.gif': '不滿', '108.gif': '睡覺', '109.gif': '小調皮', '110.gif': '咒罵', '111.gif': '發怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震驚', '115.gif': '囧' };


        //點擊好友時的要求：只出現一個div好友列表
        $(function () {
            //設置文本框默認值
            $('#msgTxt').val('#輸入話題標題#')
                //計算字符個數
                .keyup(function() {
                    var txtLength =140- $(this).val().length;
                    if (txtLength >= 0) {//在140範圍內
                        $('.countTxt').css('color','black').html('還能輸入<em>'+txtLength+'</em>字');
                    } else {//超過
                        $('.countTxt').css('color', 'red').html('已經超過<em>'+-1*txtLength+'</em>字');
                    }
                });
            
            //廣播點擊事件
            $('.sendBtn').click(function () {
                //若是文本框空，則設置默認值
                if ($('#msgTxt').val() == '') {
                    $('#msgTxt').val('#輸入話題標題#');
                }
                //若是值是#輸入話題標題#，則讓文本高亮顯示
                if ($('#msgTxt').val() == '#輸入話題標題#') {
                    $('#msgTxt')[0].setSelectionRange(1, 7);
                }
            })
                //設置廣播的背景圖片
                .hover(function() {//移上
                    $(this).css('background-position','-0px -195px');
                }, function() {//移開
                    $(this).css('background-position', '-117px -165px');
                });
            
            //@好友
            $('.atSome').click(function(e) {
                var friendsList = ['中國', '日本', '韓國', '朝鮮', '蒙古'];
                var divFriendList = $('#divFriendList');
                //判斷是否已經有一個叫divFriendList的div，若是有，則什麼也不作，若是沒有，則新建
                if (divFriendList.length > 0) {
                    return;
                }
                divFriendList = $('<div id="divFriendList"></div>').css({
                    'position': 'absolute',
                    'left': e.clientX + 'px',
                    'top': e.clientY + 'px',
                    'width': '50px',
                    'height': '100px',
                    'border': '1px solid red',
                    'background-color': '#a7a7a7',
                    'padding':'5px'
                }).appendTo('body');
                $.each(friendsList, function() {
                    $('<span>' + this + '</span><br>')
                        .css('cursor','pointer')//設置小手圖標
                        .one('click',function() {//在對象上執行一次指定事件
                            $('#msgTxt').val($('#msgTxt').val()+'@'+$(this).text());
                        })
                        .appendTo(divFriendList);//將span顯示到div上
                });
                //增長一個關閉的圖標
                $('<span>×</span>')
                    .css('cursor', 'pointer')//設置小手圖標
                    .click(function() {
                        divFriendList.remove();
                    })
                    .appendTo(divFriendList);
            });
            
            //添加表情
            $('.insertFace').click(function(e) {
                var divFace = $('#divFace');
                if (divFace.length > 0) {
                    return;//若是顯示錶情的div已經存在，則不作任何操做
                }
                divFace = $('<div id="divFace"></div>')
                    .css({
                        'position': 'absolute',
                        'left': e.clientX + 'px',
                        'top': e.clientY + 'px',
                        'width': '300px',
                        'height': '300px',
                        'border': '1px solid red',
                        'background-color': '#a7a7a7',
                        'padding': '5px'
                    }).appendTo('body');
                //遍歷表情鍵值對
                $.each(userFaces, function(key, value) {
                    $('<img src="faces/' + key + '" id="' + value + '" />"')
                        .click(function() {//點擊圖片，添加表情
                            $('#msgTxt').val($('#msgTxt').val() + '[' + $(this).attr('id') + ']');
                        })
                        .appendTo(divFace);//將圖片添加到div上
                });
                //關閉按鈕
                $('<br><br><span>×</span>')
                    .css('cursor', 'pointer')
                    .click(function() {
                        divFace.remove();//點擊關閉表情的div
                    }).appendTo(divFace);
            });
        });
    </script>
</head>
<body>
    <img id="logo" src="img/b3_100901.png" alt="" />
    <center>
        <div id="myBody">
            <div id="myBdLeft">
                <div id="talkBox">
                    <h2>
                        <a>夏天來了，你懂得......</a></h2>
                    <textarea id="msgTxt"></textarea>
                    <div id="funBox">
                        <a href="javascript:void(0);" class="creatNew">話題</a> <a href="javascript:void(0);"
                            class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
                        <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
                            class="uploadVideo">視頻</a>
                    </div>
                    <div id="sendBox">
                        <input type="button" class="sendBtn" value="" />
                        <span class="countTxt">還能輸入<em>140</em>字</span>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

權限
有>> 、> 、<< 、< 共4個按鈕
點擊時分別實現全右移、右移選中項、全左移、左移選中項
設置select的multiple設置爲true，成爲列表框jquery

 1  $(function () {
 2             //爲「所有右移」按鈕綁定事件
 3             $('#btnRightAll').click(function () {
 4                 //獲取全部子元素,追加到右邊的select中
 5                 $('#selectLeft').children().appendTo('#selectRight');
 6             });
 7             
 8             //爲「選中右移」按鈕綁定事件
 9             $('#btnRight').click(function () {
10                 //獲取到全部被選中的option
11                 $('#selectLeft :selected').appendTo('#selectRight');
12             });
13             
14             //爲「所有左移」按鈕綁定事件
15             $('#btnLeftAll').click(function() {
16                 //獲取右側全部的option
17                 $('#selectLeft').append($('#selectRight option'));
18             });
19             
20             //爲「選中左移」按鈕綁定事件
21             $('#btnLeft').click(function() {
22                 //獲取右側選中的項，加到左邊
23                 $('#selectLeft').append($('#selectRight :selected'));
24             });
25         });

相關標籤/搜索

jquery2

jquery2.x

JQuery

每日一句

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