note
jQuery http://jquery.cuishifeng.cn/ 模块 《=》类库 DOM/BOM/JavaScript的类库 版本： 1.x 1.12 2.x 3.x 转换： jquery对象[0] => Dom对象 Dom对象 => $(Dom对象) 一、查找元素 DOM 10个左右 jQuery： 选择器，直接找到某个或者某类标签 1. id $('#id') 2. class <div class='c1'></div> $(".c1") 3. 标签 <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') 4. 组合 <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') $('.c2') $('a,.c2,#i10') 5. 层级 $('#i10 a') 子子孙孙 $('#i10>a') 儿子 6. 基本 :first :last :eq() #根据索引找，从0开始 7. 属性 $('[alex]') 具有alex属性的所有标签 $('[alex="123"]') alex属性等于123的标签 注意引号 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text') enabled disabled 实例： 多选，反选，全选 ---s2 - 选择器 - $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this，DOM对象，代指当前循环的元素 $(this) }) - var v = 条件 ? 真值 : 假值 筛选 ---s3 $('#i1').next() 找下一个 $('#i1').nextAll() 找下边所有 $('#i1').nextUntil('#ii1') <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() 找到所有的上辈 $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) 文本操作： $(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容 不解析 $(..).html() $(..).html("<a>1</a>") 解析 $(..).val() $(..).val(..) 样式操作： ---s8 addClass removeClass toggleClass 属性操作： # 专门用于做自定义属性 $(..).attr('n') 获取值 $(..).attr('n','v') 设置值 $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 获取索引位置 ---s10 文档处理： ---s11 append prepend after before remove empty clone css处理 $('t1').css('样式名称', '样式值') 点赞： ---s12 - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小，位置 位置： ---s13 $(window).scrollTop() 获取 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left 指定标签在html中的坐标 offset().top 指定标签在html中的坐标 position() 指定标签相对父标签(relative)标签的坐标 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div> $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true) # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距 事件 DOM： 三种绑定方式 jQuery： $('.c1').click() $('.c1')..... $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) ******************* ---s15 委托 $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ }) 阻止事件发生 return false # 当页面框架加载完成之后，自动执行 $(function(){ $(...) }) jQuery扩展： - $.extend $.方法 - $.fn.extend $(..).方法 ---自执行函数 避免全局变量冲突 (function(){ var status = 1; // 封装变量 })(jQuery) 二、操作元素 ===》实例： 作业： 一： $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true) # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距 二、所有实例敲一遍 三、编辑框
s1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="csswenjian" /> 7 <style> 8 </style> 9 </head> 10 <body> 11 <input type="text" /> 12 <input type="text" disabled /> 13 <input type="text" /> 14 <div id='i10' class='c1'> 15 <div> 16 <a>asd</a> 17 </div> 18 <a alex='123'>f2</a> 19 <a alex='456'>f2</a> 20 <a>f3</a> 21 <a>f4</a> 22 </div> 23 <div class='c1'> 24 <a>f</a> 25 </div> 26 <div class='c1'> 27 <div class='c2'> </div> 28 </div> 29 <script src="jquery-1.12.4.js"></script> 30 <script> 31 $("#i1") 32 </script> 33 </body> 34 </html>
s2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .header{ 8 background-color: black; 9 color: wheat; 10 } 11 .content{ 12 min-height: 50px; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="height:400px;width: 200px;border: 1px solid #dddddd"> 21 <div class="item"> 22 <div class="header">标题一</div> 23 <div id="i1" class="content hide">内容</div> 24 </div> 25 <div class="item"> 26 <div class="header">标题二</div> 27 <div class="content hide">内容</div> 28 </div> 29 <div class="item"> 30 <div class="header">标题三</div> 31 <div class="content hide">内容</div> 32 </div> 33 </div> 34 <script src="jquery-1.12.4.js"></script> 35 <script> 36 // 绑定onclick 37 $('.header').click(function(){ 38 // 当前点击的标签 $(this) 39 // 获取某个标签的下一个标签 40 // 获取某个标签的父标签 41 // 获取所有的兄弟标签 42 // 添加样式和移除样式 43 // $('.i1').addClass('hide') 44 // $('#i1').removeClass('hide') 45 // var v = $("this + div"); 用这种太麻烦 46 // $("label + input") 47 // console.log(v); 48 // 49 // $("afsldkfja;skjdf;aksdjf") 50 51 // 筛选器 52 /* 53 $(this).next() 下一个 54 $(this).prev() 上一个 55 $(this).parent() 父 56 $(this).children() 孩子 57 $('#i1').siblings() 兄弟 58 $('#i1').find('#i1') 子子孙孙中查找 59 // . . . 60 // 61 $('#i1').addClass(..) 62 $('#i1').removeClass(..) 63 */ 64 // 链式编程 65 // $(...).click(function(){ 66 // this.. 67 // }) 68 // $(this).next().removeClass('hide'); 69 // $(this).parent().siblings().find('.content').addClass('hide') 70 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') 71 }) 72 </script> 73 </body> 74 </html>
s3
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .header{ 8 background-color: black; 9 color: wheat; 10 } 11 .content{ 12 min-height: 50px; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="height:400px;width: 200px;border: 1px solid #dddddd"> 21 <div class="item"> 22 <div class="header">标题一</div> 23 <div id="i1" class="content hide">内容</div> 24 </div> 25 <div class="item"> 26 <div class="header">标题二</div> 27 <div class="content hide">内容</div> 28 </div> 29 <div class="item"> 30 <div class="header">标题三</div> 31 <div class="content hide">内容</div> 32 </div> 33 </div> 34 <script src="jquery-1.12.4.js"></script> 35 <script> 36 // 绑定onclick 37 $('.header').click(function(){ 38 // 当前点击的标签 $(this) 39 // 获取某个标签的下一个标签 40 // 获取某个标签的父标签 41 // 获取所有的兄弟标签 42 // 添加样式和移除样式 43 // $('.i1').addClass('hide') 44 // $('#i1').removeClass('hide') 45 // var v = $("this + div"); 用这种太麻烦 46 // $("label + input") 47 // console.log(v); 48 // 49 // $("afsldkfja;skjdf;aksdjf") 50 51 // 筛选器 52 /* 53 $(this).next() 下一个 54 $(this).prev() 上一个 55 $(this).parent() 父 56 $(this).children() 孩子 57 $('#i1').siblings() 兄弟 58 $('#i1').find('#i1') 子子孙孙中查找 59 // . . . 60 // 61 $('#i1').addClass(..) 62 $('#i1').removeClass(..) 63 */ 64 // 链式编程 65 // $(...).click(function(){ 66 // this.. 67 // }) 68 // $(this).next().removeClass('hide'); 69 // $(this).parent().siblings().find('.content').addClass('hide') 70 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') 71 }) 72 </script> 73 </body> 74 </html>
s4
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <a>1</a> 10 <a>21</a> 11 <a id="i1">133</a> 12 <a>144</a> 13 <a>155</a> 14 </div> 15 <script src="jquery-1.12.4.js"></script> 16 </body> 17 </html>
s5
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 <table border="1" id="tb"> 36 <tr> 37 <td target="hostname">1.1.1.11</td> 38 <td target="port">80</td> 39 <td target="ip"> 80</td> 40 <td> 41 <a class="edit">编辑</a > | <a class="del">删除</a> 42 </td> 43 </tr> 44 <tr> 45 <td target="hostname">1.1.1.12</td> 46 <td target="port">80</td> 47 <td target="ip">80</td> 48 <td> 49 <a class="edit">编辑</a> | <a class="del">删除</a> 50 </td> 51 </tr> 52 <tr> 53 <td target="hostname">1.1.1.13</td> 54 <td target="port">80</td> 55 <td target="ip">80</td> 56 <td> 57 <a class="edit">编辑</a> | <a class="del">删除</a> 58 </td> 59 </tr> 60 <tr> 61 <td target="hostname">1.1.1.14</td> 62 <td target="port">80</td> 63 <td target="ip">80</td> 64 <td> 65 <a class="edit">编辑</a> | <a class="del">删除</a> 66 </td> 67 </tr> 68 </table> 69 <div class="modal hide"> 70 <div> 71 <input name="hostname" type="text" /> 72 <input name="port" type="text" /> 73 <input name="ip" type="text" /> 74 </div> 75 76 <div> 77 <input type="button" value="取消" onclick="cancelModal();" /> 78 <input type="button" value="确定" onclick="confirmModal();" /> 79 </div> 80 </div> 81 <div class="shadow hide"></div> 82 <script src="jquery-1.12.4.js"></script> 83 <script> 84 $('.del').click(function () { 85 $(this).parent().parent().remove(); 86 }); 87 function confirmModal() { 88 var tr = document.createElement('tr'); 89 var td1 = document.createElement('td'); 90 td1.innerHTML = "11.11.11.11"; 91 var td2 = document.createElement('td'); 92 td2.innerHTML = "8001"; 93 $(tr).append(td1); 94 $(tr).append(td2); 95 $('#tb').append(tr); 96 $(".modal,.shadow").addClass('hide'); 97 // $('.modal input[type="text"]').each(function () { 98 // // var temp = "<td>..." 99 // }) 100 } 101 function addElement() { 102 $(".modal,.shadow").removeClass('hide'); 103 } 104 function cancelModal() { 105 $(".modal,.shadow").addClass('hide'); 106 $('.modal input[type="text"]').val(""); 107 } 108 $('.edit').click(function(){ 109 $(".modal,.shadow").removeClass('hide'); 110 // this 111 var tds = $(this).parent().prevAll(); 112 tds.each(function () { 113 // 获取td的target属性值 114 var n = $(this).attr('target'); 115 // 获取td中的内容 116 var text = $(this).text(); 117 var a1 = '.modal input[name="'; 118 var a2 = '"]'; 119 var temp = a1 + n + a2; 120 $(temp).val(text); 121 }); 122 // var port = $(tds[0]).text(); 123 // var host = $(tds[1]).text(); 124 // 125 // $('.modal input[name="hostname"]').val(host); 126 // $('.modal input[name="port"]').val(port); 127 // 循环获取tds中内容 128 // 获取 <td>内容</td> 获取中间的内容 129 // 赋值给input标签中的value 130 }); 131 </script> 132 </body> 133 </html>
s6
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="c1"> 9 <p> 10 <span id="i1">Hello</span> 11 </p> 12 <span>Hello Again</span> 13 </div> 14 <script src="jquery-1.12.4.js"></script> 15 </body> 16 </html>
s7
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1">asdfasdf<a>asdfasdf</a></div> 9 <input id="i2" type="text" /> 10 <script src="jquery-1.12.4.js"></script> 11 </body> 12 </html>
s8
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input type='checkbox' id='i2' /> 14 <input id="i1" type="button" value="开关" /> 15 <div class="c1 hide">asdfasdf</div> 16 <script src="jquery-1.12.4.js"></script> 17 <script> 18 $('#i1').click(function(){ 19 // if($('.c1').hasClass('hide')){ 20 // $('.c1').removeClass('hide'); 21 // }else{ 22 // $('.c1').addClass('hide'); 23 // } 24 $('.c1').toggleClass('hide'); 25 }) 26 </script> 27 </body> 28 </html>
s9
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; /*小手*/ 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin:0 auto"> 32 <div class="menu"> 33 <div class="menu-item active" a="1">菜单一</div> 34 <div class="menu-item" a="2">菜单二</div> 35 <div class="menu-item" a="3">菜单三</div> 36 </div> 37 <div class="content"> 38 <div b="1">内容一</div> 39 <div class="hide" b="2">内容二</div> 40 <div class="hide" b="3">内容三</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $('.menu-item').click(function(){ 46 $(this).addClass('active').siblings().removeClass('active'); 47 var target = $(this).attr('a'); 48 $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); 49 }); 50 </script> 51 </body> 52 </html>
s10
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin:0 auto"> 32 <div class="menu"> 33 <div class="menu-item active" >菜单一</div> 34 <div class="menu-item" >菜单二</div> 35 <div class="menu-item" >菜单三</div> 36 </div> 37 <div class="content"> 38 <div >内容一</div> 39 <div class="hide" >内容二</div> 40 <div class="hide">内容三</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $('.menu-item').click(function(){ 46 $(this).addClass('active').siblings().removeClass('active'); 47 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); 48 }); 49 </script> 50 </body> 51 </html>
s11
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input id="a1" type="button" value="添加" /> 10 <input id="a2" type="button" value="删除" /> 11 <input id="a3" type="button" value="复制" /> 12 <ul id="u1"> 13 <li>1</li> 14 <li>2</li> 15 </ul> 16 <script src="jquery-1.12.4.js"></script> 17 <script> 18 $('#a1').click(function () { 19 var v = $('#t1').val(); 20 var temp = "<li>" + v + "</li>"; 21 // $('#u1').append(temp); 22 $('#u1').prepend(temp); 23 // $('#u1').after(temp) 24 // $('#u1').before(temp) 25 }); 26 $('#a2').click(function () { 27 var index = $('#t1').val(); 28 //$('#u1 li').eq(index).remove(); 29 //$('#u1 li').eq(index).empty(); 30 }); 31 $('#a3').click(function () { 32 var index = $('#t1').val(); 33 var v = $('#u1 li').eq(index).clone(); 34 $('#u1').append(v); 35 //$('#u1 li').eq(index).remove(); 36 //$('#u1 li').eq(index).empty(); 37 }) 38 </script> 39 </body> 40 </html>
s12
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 50px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 position: relative; 13 width: 30px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>赞</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>赞</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>赞</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>赞</span> 36 </div> 37 </div> 38 <script src="jquery-1.12.4.js"></script> 39 <script> 40 $('.item').click(function () { 41 AddFavor(this); 42 }); 43 function AddFavor(self) { 44 // DOM对象 45 var fontSize = 15; 46 var top = 0; 47 var right = 0; 48 var opacity = 1; 49 var tag = document.createElement('span'); 50 $(tag).text('+1'); 51 $(tag).css('color','green'); 52 $(tag).css('position','absolute'); 53 $(tag).css('fontSize',fontSize + "px"); 54 $(tag).css('right',right + "px"); 55 $(tag).css('top',top + 'px'); 56 $(tag).css('opacity',opacity); 57 $(self).append(tag); 58 var obj = setInterval(function () { 59 fontSize = fontSize + 10; 60 top = top - 10; 61 right = right - 10; 62 opacity = opacity - 0.1; 63 $(tag).css('fontSize',fontSize + "px"); 64 $(tag).css('right',right + "px"); 65 $(tag).css('top',top + 'px'); 66 $(tag).css('opacity',opacity); 67 if(opacity < 0){ 68 clearInterval(obj); 69 $(tag).remove(); 70 } 71 }, 40); 72 } 73 </script> 74 </body> 75 </html>
s13
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1"></div> 9 <div style="height: 100px;width:100px;overflow: auto"> 10 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 11 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 12 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 13 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 14 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 15 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 16 </div> 17 <div id="i2"></div> 18 <div style="height: 1000px;"></div> 19 <script src="jquery-1.12.4.js"></script> 20 </body> 21 </html>
s14
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;"></div> 10 <div style="height: 300px;"></div> 11 </div> 12 <script type="text/javascript" src="jquery-1.12.4.js"></script> 13 <script> 14 $(function(){ 15 $('#title').mouseover(function(){ 16 $(this).css('cursor','move'); 17 }); 18 $("#title").mousedown(function(e){ 19 //console.log($(this).offset()); 20 var _event = e || window.event; 21 var ord_x = _event.clientX; 22 var ord_y = _event.clientY; 23 var parent_left = $(this).parent().offset().left; 24 var parent_top = $(this).parent().offset().top; 25 $('#title').on('mousemove', function(e){ 26 var _new_event = e || window.event; 27 var new_x = _new_event.clientX; 28 var new_y = _new_event.clientY; 29 var x = parent_left + (new_x - ord_x); 30 var y = parent_top + (new_y - ord_y); 31 $(this).parent().css('left',x+'px'); 32 $(this).parent().css('top',y+'px'); 33 }) 34 }); 35 $("#title").mouseup(function(){ 36 $("#title").off('mousemove'); 37 }); 38 }) 39 </script> 40 </body> 41 </html>
s15
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input id="a1" type="button" value="添加" /> 10 <ul id="u1"> 11 <li>1</li> 12 <li>2</li> 13 </ul> 14 <script src="jquery-1.12.4.js"></script> 15 <script> 16 $('#a1').click(function () { 17 var v = $('#t1').val(); 18 var temp = "<li>" + v + "</li>"; 19 $('#u1').append(temp); 20 }); 21 // $('ul li').click(function () { 22 // var v = $(this).text(); 23 // alert(v); 24 // }) 这种添加之后不可以 25 // $('ul li').bind('click',function () { 26 // var v = $(this).text(); 27 // alert(v); 28 // }) 这种也不可以 29 // $('ul li').on('click', function () { 30 // var v = $(this).text(); 31 // alert(v); 32 // }) 这种也不可以 33 //委托 34 $('ul').delegate('li','click',function () { 35 var v = $(this).text(); 36 alert(v); 37 }) 38 </script> 39 </body> 40 </html>
s16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <!-- Dom --> 9 <a id="i1" href="http://www.oldboyedu.com">走你2</a> <!--jQuery --> 10 <script src="jquery-1.12.4.js"></script> 11 <script> 12 function ClickOn() { 13 alert(123); 14 return true; 15 } 16 $('#i1').click(function () { 17 alert(456); 18 return false; 19 }) 20 </script> 21 </body> 22 </html>
s17
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form id="f1" action="s5.html" method="POST"> 14 <div><input name="n1" tex = "用户名" type="text" /></div> 15 <div><input name="n2" tex = "密码" type="password" /></div> 16 <div><input name="n3" tex = "邮箱" type="text" /></div> 17 <div><input name="n4" tex = "端口" type="text" /></div> 18 <div><input name="n5" tex = "IP" type="text" /></div> 19 <input type="submit" value="提交" /> 20 <img src="..."> 21 </form> 22 <script src="jquery-1.12.4.js"></script> 23 <script> 24 // 当页面框架加载完毕后，自动执行 25 $(function(){ 26 $.Login('#f1') 27 }); 28 $(function(){ 29 // 当页面所有元素完全加载完毕后，执行 30 $(':submit').click(function () { 31 $('.error').remove(); 32 var flag = true; 33 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 34 var v = $(this).val(); 35 var n = $(this).attr('tex'); 36 if(v.length <= 0){ 37 flag = false; 38 var tag = document.createElement('span'); 39 tag.className = "error"; 40 tag.innerHTML = n + "必填"; 41 $(this).after(tag); 42 // return false; 43 } 44 }); 45 return flag; 46 }); 47 }); 48 // $(':submit').click(function () { 49 // var v = $(this).prev().val(); 50 // if(v.length > 0){ 51 // return true; 52 // }else{ 53 // alert('请输入内容'); 54 // return false 55 // } 56 // }) 57 </script> 58 </body> 59 </html>
s18
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src="jquery-1.12.4.js"></script> 9 <script src="plugin1.js"></script> 10 <script> 11 var v = $.wangsen(); 12 alert(v); 13 // $('#i1').css() 14 // $.ajax() 15 // jquery扩展 16 // $.fn.extend({ 17 // "hanyang": function () { 18 // return 'db'; 19 // } 20 // }); 21 // var v = $('#i1').hanyang(); 22 // alert(v); 23 // $.extend({ 24 // 'wangsen': function () { 25 // return 'sb'; 26 // } 27 // }); 28 // var v = $.wangsen(); 29 // alert(v); 30 </script> 31 </body> 32 </html>
扫一扫
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
