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="修改"/></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>
最后是显示的微博
<!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，成为列表框
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 });
