首页 > 代码库 > Jquery2

Jquery2

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

 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]‘)

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

  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="http://www.mamicode.com/修改"/></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="http://www.mamicode.com/修改"/></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>

 

最后是显示的微博

<!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=http://www.mamicode.com/"css/main.css" rel="stylesheet" />
    <script src=http://www.mamicode.com/"../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="http://www.mamicode.com/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=http://www.mamicode.com/"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=http://www.mamicode.com/"javascript:void(0);" class="creatNew">话题</a> <a href=http://www.mamicode.com/"javascript:void(0);"
                            class="atSome">朋友</a> <a href=http://www.mamicode.com/"javascript:void(0);" class="insertFace">表情</a>
                        <a href=http://www.mamicode.com/"javascript:void(0);" class="uploadPic">照片</a> <a href=http://www.mamicode.com/"javascript:void(0);"
                            class="uploadVideo">视频</a>
                    </div>
                    <div id="sendBox">
                        <input type="button" class="sendBtn" value=http://www.mamicode.com/"" />
                        <span class="countTxt">还能输入<em>140</em>字</span>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

 

 


权限
有>> 、> 、<< 、< 共4个按钮
点击时分别实现全右移、右移选中项、全左移、左移选中项
设置select的multiple设置为true,成为列表框

 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