WEEK17：jquery开发基础
- 选择器
- 转换
- jquery对象[0] --> DOM对象（jquery对象转换成DOM对象，只需要在jquery对象后面加[0]）
- Dom对象 --> $(DOM对象)（DOM对象转换成jquery对象，只需要使用$()将Dom对象包裹起来即可）
- 基本
- id
$('#id') - class
$('.c1') - 标签
$('a') - 所有
$('*') - 组合选择器(逗号==或)
$('a,.c2,#i10') //所有a标签、class=c2、id=i10的内容
- id
- 层级选择器(空格==且)
- $('#i10 a') //id=i10下面的所有a标签
- parent > child $('#i10 > a') //只寻找i10下一级的a标签
- prev + next
- prev ~ siblings
- 基本筛选器
- :first 获取第一个元素
- :last 获取最后个元素
- :not(selector) 去除所有与给定选择器匹配的元素
- :even 匹配所有索引值为偶数的元素，从 0 开始计数
- :odd 匹配所有索引值为奇数的元素，从 0 开始计数
- :eq(index) 匹配一个给定索引值的元素，从 0 开始计数
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :lang(language) 选择指定语言的所有元素
- :header 匹配如 h1, h2, h3之类的标题元素
- :animated 匹配所有正在执行动画效果的元素
- :focus 匹配当前获取焦点的元素
- :root 选择该文档的根元素
- :target 选择由文档URI的格式化识别码表示的目标元素
- 内容
- :parent 匹配含有子元素或者文本的元素
- :has(selector) 匹配含有选择器所匹配的元素的元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :contains(text) 匹配包含给定文本的元素
- 可见性
- :visible 匹配所有的可见元素
- :hidden 匹配所有不可见元素，或者type为hidden的元素
- 属性
- [attribute] 匹配包含给定属性的元素
- [attribute=value] 匹配给定的属性是某个特定值的元素
- [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
- [attribute^=value] 匹配给定的属性是以某些值开始的元素
- [attribute$=value] 匹配给定的属性是以某些值结尾的元素
- [attribute*=value] 匹配给定的属性是以包含某些值的元素
- [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
- 表单对象属性
- :enabled 匹配所有可用元素
- :disabled 匹配所有不可用元素
- :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
- :selected 匹配所有选中的option元素
- 表单
- :input 匹配所有 input, textarea, select 和 button 元素
- :text 匹配所有的单行文本框
- :password 匹配所有密码框
- :radio 匹配所有单选按钮
- :checkbox 匹配所有复选框
- :submit 匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性
- :image 匹配所有图像域
- :reset 匹配所有重置按钮
- :button 匹配所有按钮
- :file 匹配所有文件域
- 转换
- 文档处理
- 内部插入
- append(content|fn) 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似
- appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
- prepend(content|fn) 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式
- prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中
- 外部插入
- after(content|fn) 在每个匹配的元素之后插入内容
- before(content|fn) 在每个匹配的元素之前插入内容
- insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
- insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面
- 包裹
- wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来
- unwrap() 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
- wrapall(html|ele) 将所有匹配的元素用单个元素包裹起来
- wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
- 替换
- replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
- replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
- 删除
- empty() 删除匹配的元素集合中所有的子节点
- remove([expr]) 从DOM中删除所有匹配的元素
- detach([expr]) 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
- 复制
- clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
- 内部插入
- 属性
- 属性
- attr(name|pro|key,val|fn) 设置或返回被选元素的属性值（专门用来做自定义属性）
- removeAttr(name) 从每一个匹配的元素中删除一个属性
- prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值（专门用于checkbox,radio等）
- removeProp(name) 用来删除由.prop()方法设置的属性集
- CSS类
- addClass(class|fn) 为每个匹配的元素添加指定的类名
- removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
- toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
- HTML代码、文本、值、
- html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
- text([val|fn]) 取得所有匹配元素的内容
- val([val|fn|arr]) 获得或设置匹配元素的当前值
- 属性
- 工具
- 数组和对象操作
- $.parseXML(data) 解析一个字符串到一个XML文件
- $.merge(first,second) 合并两个数组,返回的结果会修改第一个数组的内容,第一个数组的元素后面跟着第二个数组的元素
- $.toArray() 把jQuery集合中所有DOM元素恢复成一个数组
- $.inArray(val,arr,[from]) 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )
- $.map(arr|obj,callback) 将一个数组中的元素转换到另一个数组中
- $.makearray(obj) 将类数组对象转换为数组对象
- $.when(deferreds) 提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件
- $.grep(array,fn,[invert]) 使用过滤函数过滤数组元素
- $.extend([d],tgt,obj1,[objN]) 用一个或多个其他对象来扩展一个对象，返回被扩展的对象
- $.each(object,[callback]) 通用遍历方法，可用于遍历对象和数组
- 数组和对象操作
- 事件
- 事件
- blur([[data],fn]) 当元素失去焦点时触发 blur 事件
- change([[data],fn]) 当元素的值发生改变时，会发生 change 事件
- click([[data],fn]) 触发每一个匹配元素的click事件
- dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件
- focus([[data],fn]) 当元素获得焦点时，触发 focus 事件
- focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
- focusout([data],fn) 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
- keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
- keypress([[data],fn]) 当键盘或按钮被按下时，发生 keypress 事件
- keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
- mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
- mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用
- mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
- mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
- mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用
- mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
- mouseup([[data],fn]) 当在元素上放松鼠标按钮时，会发生 mouseup 事件
- resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件
- scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件
- select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
- submit([[data],fn]) 当提交表单时，会发生 submit 事件。该事件只适用于表单元素
- 事件
- 核心
- jQuery对象访问
- index([selector|element]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数
- get([index]) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象
- context 返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数
- selector 返回传给jQuery()的原始选择器
- length jQuery 对象中元素的个数
- each(callback) 以每一个匹配的元素作为上下文来执行一个函数
- jQuery对象访问
- CSS
- CSS
- css(name|pro|[,val|fn]) 访问匹配元素的样式属性
- jQuery.cssHooks 直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性
- 位置
- offset([coordinates]) 获取匹配元素在当前视口的相对偏移
- position() 获取匹配元素相对父元素的偏移
- scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移
$(window).scrollTop() 获取当前窗口滚动条的位置
$(window).scrollTop(0) 设置滚动条回到顶部 - scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移
- 尺寸
- height([val|fn]) 取得匹配元素当前计算的高度值（px）
- width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）
- innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）
- innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
- outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）
- outerWidth([options]) 获取第一个匹配元素外部宽度（默认包括补白和边框）
- CSS
- 筛选
- 过滤
- eq(index|-index) 获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个
- first() 获取第一个元素
- last() 获取最后个元素
- hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
- filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合
- is(expr|obj|ele|fn) 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
- map(callback) 将一组元素转换成其他数组（不论是否是元素数组）
- has(expr|ele) 保留包含特定后代的元素，去掉那些不含有指定后代的元素
- not(expr|ele|fn) 从匹配元素的集合中删除与指定表达式匹配的元素
- slice(start,[end]) 选取一个匹配的子集
- 查找
- children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
- closest(e|o|e) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素 - find(e|o|e) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
- next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选 - nextAll([expr]) 查找当前元素之后所有的同辈元素
- nextUntil([e|e][,f]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
- offsetParent() 返回第一个匹配元素用于定位的父节点
- parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
- parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
- parentsUntil([e|e][,f]) 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
- prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
- prevAll([expr]) 查找当前元素之前所有的同辈元素
- prevUntil([e|e][,f]) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
- siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
- 串联
- add(e|e|h|o[,c]) 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
- addBack() 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器
- contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
- end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态
- 过滤
- 绑定方式
- 方法一：$('.c1').click()
- 方法二
- 绑定 $('.c1').bind('click',function(){...})
- 解绑 $('.c1').unbind('click',function(){...})
- 方法三：委托，可以对后面使用jquery添加的元素生效
- $('.c').delegate('a', 'click', function(){...})
- $('.c').undelegate('a', 'click', function(){...})
- 方法四
- $('.c1').on('click', function(){...})
- $('.c1').off('click', function(){...})
- 例子
- 多选、反选、取消
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="checkAll();" /> 9 <input type="button" value="反选" onclick="reverseAll();" /> 10 <input type="button" value="取消" onclick="cancleAll();"/> 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>选项</th> 15 <th>IP</th> 16 <th>PORT</th> 17 </tr> 18 </thead> 19 <tbody id="tb"> 20 <tr> 21 <td><input type="checkbox" /></td> 22 <td>1.1.1.1</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox" /></td> 27 <td>1.1.1.1</td> 28 <td>80</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox" /></td> 32 <td>1.1.1.1</td> 33 <td>80</td> 34 </tr> 35 </tbody> 36 </table> 37 38 <script src="jquery-1.12.4.js"></script> 39 <script> 40 function checkAll() { 41 $('#tb :checkbox').prop('checked',true); 42 } 43 function cancleAll() { 44 $('#tb :checkbox').prop('checked',false); 45 } 46 function reverseAll() { 47 $(':checkbox').each(function(){ 48 // this,代指当前循环的每一个元素 49 /*方法一：Dom 50 if(this.checked){ 51 this.checked = false; 52 }else{ 53 this.checked = true; 54 } 55 */ 56 /*方法二：jquery 57 if($(this).prop('checked')){ 58 $(this).prop('checked', false); 59 }else{ 60 $(this).prop('checked', true); 61 } 62 */ 63 // 方法三：三元运算var v = 条件? 真值：假值 64 var v = $(this).prop('checked')?false:true; 65 $(this).prop('checked',v); 66 }) 67 } 68 </script> 69 </body> 70 </html>
- 菜单隐藏（链式编程、绑定事件）
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: 20px; 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 class="content hide">内容11</div> 24 <div class="content hide">内容12</div> 25 <div class="content hide">内容13</div> 26 </div> 27 <div class="item"> 28 <div class="header">标题二</div> 29 <div class="content hide">内容11</div> 30 <div class="content hide">内容12</div> 31 <div class="content hide">内容13</div> 32 </div> 33 34 <div class="item"> 35 <div class="header">标题三</div> 36 <div class="content hide">内容11</div> 37 <div class="content hide">内容12</div> 38 <div class="content hide">内容13</div> 39 </div> 40 </div> 41 <script src="jquery-1.12.4.js"></script> 42 <script> 43 $(".content").mouseover(function () { 44 $(this).css("background-color","yellow") 45 }) 46 $(".content").mouseout(function () { 47 $(this).css("background-color","white") 48 }) 49 $('.header').click(function(){ 50 $(this).siblings().removeClass('hide').parent().siblings().find('.content').addClass('hide') 51 }) 52 </script> 53 </body> 54 </html>
- 编程框
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 68 </tr> 69 </table> 70 <div class="modal hide"> 71 <div> 72 <input name="hostname" type="text" /> 73 <input name="port" type="text" /> 74 <input name="ip" type="text" /> 75 </div> 76 77 <div> 78 <input type="button" value="取消" onclick="cancelModal();" /> 79 <input type="button" value="确定" onclick="confirmModal();" /> 80 </div> 81 </div> 82 <!--遮罩层--> 83 <div class="shadow hide"></div> 84 85 <script src="jquery-1.12.4.js"></script> 86 <script> 87 88 $('.del').click(function () { 89 $(this).parent().parent().remove(); 90 }); 91 92 function confirmModal() { 93 94 var tr = document.createElement('tr'); 95 var td1 = document.createElement('td'); 96 td1.innerHTML = "11.11.11.11"; 97 var td2 = document.createElement('td'); 98 td2.innerHTML = "8001"; 99 100 $(tr).append(td1); 101 $(tr).append(td2); 102 103 $('#tb').append(tr); 104 105 $(".modal,.shadow").addClass('hide'); 106 } 107 108 function addElement() { 109 $(".modal,.shadow").removeClass('hide'); 110 } 111 function cancelModal() { 112 $(".modal,.shadow").addClass('hide'); 113 $('.modal input[type="text"]').val(""); 114 } 115 116 $('.edit').click(function(){ 117 $(".modal,.shadow").removeClass('hide'); 118 // this 119 var tds = $(this).parent().prevAll(); 120 tds.each(function () { 121 // 获取td的target属性值 122 var n = $(this).attr('target'); 123 // 获取td中的内容 124 var text = $(this).text(); 125 var temp = '.modal input[name="' + n + '"]'; 126 $(temp).val(text); 127 }); 128 }); 129 </script> 130 </body> 131 </html>
- TAB切换菜单
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 42 </div> 43 44 </div> 45 <script src="jquery-1.12.4.js"></script> 46 <script> 47 $('.menu-item').click(function(){ 48 $(this).addClass('active').siblings().removeClass('active'); 49 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); 50 }); 51 </script> 52 </body> 53 </html>
- 绑定事件
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 11 <ul id="u1"> 12 <li>1</li> 13 <li>2</li> 14 </ul> 15 <script src="jquery-1.12.4.js"></script> 16 <script> 17 $('#a1').click(function () { 18 var v = $('#t1').val(); 19 var temp = "<li>" + v + "</li>"; 20 $('#u1').append(temp); 21 }); 22 23 // $('ul li').click(function () { 24 // var v = $(this).text(); 25 // alert(v); 26 // }) 27 28 // $('ul li').bind('click',function () { 29 // var v = $(this).text(); 30 // alert(v); 31 // }) 32 33 // $('ul li').on('click', function () { 34 // var v = $(this).text(); 35 // alert(v); 36 // }) 37 38 $('ul').delegate('li','click',function () { 39 var v = $(this).text(); 40 alert(v); 41 }) 42 43 </script> 44 </body> 45 </html>
- 表单验证
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> 9 10 <a id="i1" href="http://www.oldboyedu.com">走你2</a> 11 <script src="jquery-1.12.4.js"></script> 12 <script> 13 function ClickOn() { 14 alert(123); 15 return true; //后面的事件继续执行 16 } 17 $('#i1').click(function () { 18 alert(456); 19 return false; //后面的事件不执行 20 }) 21 </script> 22 </body> 23 </html>
- jQuery扩展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script src="jquery-1.12.4.js"></script> 10 <script src="plugin1.js"></script> 11 <script> 12 var v = $.wangsen(); 13 alert(v); 14 // $('#i1').css() 15 // $.ajax() 16 // jquery扩展 17 // 方法一： 18 // $.fn.extend({ 19 // "hanyang": function () { 20 // return 'db'; 21 // } 22 // }); 23 // var v = $('#i1').hanyang(); 24 // alert(v); 25 // 方法二： 26 // $.extend({ 27 // 'wangsen': function () { 28 // return 'sb'; 29 // } 30 // }); 31 // var v = $.wangsen(); 32 // alert(v); 33 </script> 34 </body> 35 </html>
1 // plugin1.js 2 status = 1; 3 $.extend({ 4 'wangsen': function () { 5 return 'sb'; 6 } 7 });
1 // plugin2.js 2 (function (arg) { 3 var status = 1; 4 arg.extend({ 5 'wangsen': function () { 6 return 'sb'; 7 } 8 }); 9 })(jQu$ery);
- 多选、反选、取消
仰天大笑出门去，吾辈岂是蓬蒿人！
