Jquery2

拓展
关键字arguments表示方法的参数，是一个数组
方法call表示让指定对象完成方法调用，这里可以使用this表示当前对象，接收零到多个参数
方法apply与call类似，不同点是apply可以指定数组作为参数
掌握这几个知识点后，可以阅读jquery源代码

 <script>
        //call与apply的意义：在不改变对象源代码的情况下，可以让函数内部的this表示当前对象

        var id = 10;//为window对象定义了属性id
        function showId() {
            alert(this.id);
        }

        function Person(fn) {
            this.id = 20;//为类定义了属性id
            //this.sayId2 = fn;
        }

        //var p1 = new Person();
        //p1.sayId = showId;//将方法showId赋值给变量sayId
        //p1.sayId();//调用方法,使用p1调用的方法，所以函数中的this就是p1

        //var p2 = new Person(showId);
        //p2.sayId2();
        
        //在不改变原有成员的情况下，让person对象调用showId方法
        //showId();
        showId.call(new Person());//call表示由哪个对象来调用这个方法，方法中的this就是这个对象
    </script>

属性选择器
包含指定属性的jquery对象
例：$(‘input[name]’)，表示获取所有具有name属性的input元素，只有硬编码写出了name属性，才会被选择到
带=的：表示属性等于指定值的，如$('input[name=hello]')
带*=的：表示属性包含指定值的，如$('input[name*=hello]')
带^=的：表示以指定字符开头的
带$=的：表示以指定字符结尾的
写多个[]：表示同时具有多个属性的，多个[]中的属性不分先后，如$('input[id][name][style]')

 <script>
        $(function() {
            $('input');
        });
    </script>

表单选择器
选择指定类型的元素，使用“:类型”，这是“input[type=类型]”的简写形式
$(':checkbox')：选择所有的checkbox元素
jq对象调用val()方法，则返回第一个对象的value值；如果要获取所有项的value，需要each循环遍历
4种常用选择器的简写
:enabled：选择所有被启用的元素
:disabled：选择所有被禁用的元素
:checked：表示checked属性为选中状态的元素，用于checkbox、radio控件
:selected：表示所有被selected的option，用于select控件

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

最后是显示的微博

<!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，成为列表框

 $(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'));
            });
        });