JQuery笔记
jQuery概要
JavaWeb和框架内容
javascript和javascript类库(框架)
* 定义：封装了很多预定义的对象和实用函数。 * javascript脚本语言是面向对象的。 * 能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。 * Web1.0和Web2.0： * Web1.0：以内容为主的网站（门户网站） * Web2.0：以人的关系为主的网站（社交网站） * Web3.0：基于移动互联网的社交网站 * (富)胖客户端页面和瘦客户端页面 * (富)胖客户端页面：静态页面加上操作(交互) * 瘦客户端页面：静态页面
流行的javascript库：
当前流行的 JavaScript 库有：
jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR
推荐给大家一个网站：www.open-open.com上百种js库
JQuery的优势
jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
1.轻量级 jQuery非常轻巧，采用Dean Edwards编写的Packer（http://dean.edwards.name/packer/）压缩后，大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。 2.强大的选择器 jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。 3.出色的DOM操作的封装 jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。 4.可靠的事件处理机制 吸收了javascript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候非常可靠。在预留退路、循序渐进以及非入侵式变成思想方面，jQuery做得非常不错。 5.完善的Ajax 使开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 6.不污染顶级变量 jQuery只建立一个名为jQuery对象，其所有的函数方法都在这个对象之下。 7.出色的浏览器兼容性 jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。 8.链式操作方式 jQuery中最有特色的莫过于它的链式操作方式 —— 即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。 9.隐式迭代 行为层与结构层的分离 开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱开发冲突或个人单干的开发模式。 10.丰富的插件支持 jQuery的易扩展性，吸引了来自全球的开发者编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。 11.完善的文档 jQuery的文档非常丰富
jQuery：（js的类库）
* jQuery官网团队： * 核心研发 * UI研发 * 插件研发 * jQuery分类： * Web版本：我们主要学习 * UI版本：UI界面 * mobile版本：针对移动开发 * qunit版本：用于测试 * jQuery版本： * 1.4.2版本：企业开发主流 * 1.8.3版本：学习研究主流 * 1.11.0版本：目前最新版本 * 2.1.0版本：目前最新版本(jQuery官方宣布不再支持IE浏览器:6.0\7.0\8.0\9.0) * jQuery具有两个文件： * 正常版本：学习研究，代码和注释 * 压缩版本(min)：开发使用，只有代码 * 顶级变量(顶级对象) * jQuery中只有一个对象：jQuery * jQuery的顶级对象，只能调用 * jQuery具有约束符："$" jQuery.属性名 == $.属性名 * 隐式迭代：只关心开始和结束(要遍历谁和遍历后的结果) * 行为层与结构层的分离 * 行为层：逻辑部分 * 结构层：HTML标签 * DOM对象和jQuery对象： * DOM对象：通过DOM解析HTML页面元素，所得到的DOM元素
DOM解析HTML页面，将页面元素解释为元素节点、属性节点和文本节点。
而通过DOM解析HTML页面元素，所得到的DOM元素就是DOM对象。
DOM对象可以使用JavaScript中的方法。
jQuery对象(底层还是DOM对象)：通过jQuery包装DOM对象后产生的对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。乱使用会报错。
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $。
DOM对象转换成jQuery对象：$(DOM对象)
转换后就可以使用jQuery中的方法了
jQuery对象转换成DOM对象： * jQuery对象是数组对象：jQuery对象[索引值] * jQuery提供了get(index)方法
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
比较：
* DOM对象与jQuery对象互操作?不可以
* jQuery相对于DOM来讲，具有比较完善的事情处理机制
JQuery选择器
* 选择器是jQuery中的根基
1.什么是jQuery选择器 jQuery中的选择器完全集成了CSS的风格。 利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素。 学会使用选择器是学习jQuery的基础。 2.jQuery选择器的优势 简介的写法： $( ) 函数在很多javascript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。 3.支持CSS1到CSS3选择器 jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时拥有少量独有的选择器。 使用jQuery选择器时无需考虑浏览器是否支持这些选择器。 4.完善的处理机制
jQuery的九大选择器(分类)
A.基本选择器：
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
1、#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合
说明: 这个就是直接选择html中的id=”myDiv”
2、Element 用法: $(”div”) 返回值 集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a等等.
3、class 用法: $(”.myClass”) 返回值 集合元素
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
4、* 用法: $(”*”) 返回值 集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值 集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
p class=”myClass”
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>01-基本选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 //== window.onload = function(){} 12 $(document).ready(function(){ 13 // <input type="button" value="选择 id为 one 的元素." id="btn1"/> 14 $("#btn1").click(function(){ 15 /* 16 * css(name, value) 17 * * name:指定样式名称,对应css帮助文档的内容 18 * * value:指定样式值 19 */ 20 $("#one").css("background","yellow"); 21 }); 22 23 // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> 24 $("#btn2").click(function(){ 25 //jQuery支持类似于批处理的操作 26 $(".mini").css("background","yellow"); 27 }); 28 29 // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> 30 $("#btn3").click(function(){ 31 $("div").css("background","yellow"); 32 }); 33 34 // <input type="button" value="选择 所有的元素." id="btn4"/> 35 $("#btn4").click(function(){ 36 $("*").css("background","yellow"); 37 }); 38 39 // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> 40 $("#btn5").click(function(){ 41 //多个选择器并列使用,用","隔开(并集) 42 $("span,#two").css("background","yellow"); 43 }); 44 45 }); 46 47 </script> 48 </head> 49 <body> 50 <button id="reset">手动重置页面元素</button> 51 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 52 <h3>基本选择器.</h3> 53 54 <!-- 控制按钮 --> 55 <input type="button" value="选择 id为 one 的元素." id="btn1"/> 56 <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> 57 <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> 58 <input type="button" value="选择 所有的元素." id="btn4"/> 59 <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> 60 61 <br /><br /> 62 63 <!-- 测试的元素 --> 64 <div class="one" id="one" > 65 id为one,class为one的div 66 <div class="mini">class为mini</div> 67 </div> 68 69 <div class="one" id="two" title="test" > 70 id为two,class为one,title为test的div. 71 <div class="mini" title="other">class为mini,title为other</div> 72 <div class="mini" title="test">class为mini,title为test</div> 73 </div> 74 75 <div class="one"> 76 <div class="mini">class为mini</div> 77 <div class="mini">class为mini</div> 78 <div class="mini">class为mini</div> 79 <div class="mini"></div> 80 </div> 81 82 83 84 <div class="one"> 85 <div class="mini">class为mini</div> 86 <div class="mini">class为mini</div> 87 <div class="mini">class为mini</div> 88 <div class="mini" title="tesst">class为mini,title为tesst</div> 89 </div> 90 91 92 <div style="display:none;" class="none">style的display为"none"的div</div> 93 94 <div class="hide">class为"hide"的div</div> 95 96 <div> 97 包含input的type为"hidden"的div<input type="hidden" size="8"/> 98 </div> 99 100 101 <span id="mover">正在执行动画的span元素.</span> 102 103 <!-- Resources from http://down.liehuo.net --> 104 </body> 105 </html>
B.层次选择器：
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
1 、ancestor descendant
用法: $(”form input”) ; 返回值 集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
2、parent > child 用法:
$(”form > input”) ; 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
3、prev + next
用法: $(”label + input”) ; 返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
4、prev ~ siblings
用法: $(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>02-层次选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选择 body内的所有div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 //祖先元素和后代元素的关系 15 $("body div").css("background","yellow"); 16 }); 17 18 // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> 19 $("#btn2").click(function(){ 20 //父子元素的关系 21 $("body>div").css("background","yellow"); 22 }); 23 24 // <input type="button" value="选择 id为one 的下一个兄弟节点为div元素." id="btn3"/> 25 $("#btn3").click(function(){ 26 $("#one+div").css("background","yellow"); 27 }); 28 29 // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 30 $("#btn4").click(function(){ 31 $("#two~div").css("background","yellow"); 32 }); 33 34 // <input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/> 35 $("#btn5").click(function(){ 36 $("#two").siblings("div").css("background","yellow"); 37 }); 38 }) 39 </script> 40 </head> 41 <body> 42 <h3>层次选择器.</h3> 43 <button id="reset">手动重置页面元素</button> 44 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 45 46 <input type="button" value="选择 body内的所有div元素." id="btn1"/> 47 <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> 48 <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> 49 <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 50 <input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/> 51 <br /> 52 <br /> 53 54 <!-- 测试的元素 --> 55 <div class="one" id="one" > 56 id为one,class为one的div 57 <div class="mini">class为mini</div> 58 </div> 59 60 <div class="one" id="two" title="test" > 61 id为two,class为one,title为test的div. 62 <div class="mini" title="other">class为mini,title为other</div> 63 <div class="mini" title="test">class为mini,title为test</div> 64 </div> 65 66 <div class="one"> 67 <div class="mini">class为mini</div> 68 <div class="mini">class为mini</div> 69 <div class="mini">class为mini</div> 70 <div class="mini"></div> 71 </div> 72 73 74 75 <div class="one"> 76 <div class="mini">class为mini</div> 77 <div class="mini">class为mini</div> 78 <div class="mini">class为mini</div> 79 <div class="mini" title="tesst">class为mini,title为tesst</div> 80 </div> 81 82 83 <div style="display:none;" class="none">style的display为"none"的div</div> 84 85 <div class="hide">class为"hide"的div</div> 86 87 <div> 88 包含input的type为"hidden"的div<input type="hidden" size="8"/> 89 </div> 90 91 92 <span id="mover">正在执行动画的span元素.</span> 93 94 <!-- Resources from http://down.liehuo.net --> 95 </body> 96 </html>
过滤选择器：
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。
C.基础过滤选择器：
1、:first用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素
2、:last用法: $(”tr:last”) 返回值 集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector)用法: $(”input:not(:checked)”)返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even用法: $(”tr:even”) 返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd用法: $(”tr:odd”) 返回值 集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
6、:eq(index)用法: $(”tr:eq(0)”) 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
7、:gt(index)用法: $(”tr:gt(0)”) 返回值 集合元素
说明: 匹配所有大于给定索引值的元素.
8、:lt(index)用法: $(”tr:lt(2)”) 返回值 集合元素
说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法)用法: $(”:header”).css(”background”, “#EEE”) 返回值 集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法) 返回值 集合元素
说明: 匹配所有正在执行动画效果的元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>03-基本过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选择第一个div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:first").css("background","yellow"); 15 }) 16 17 // <input type="button" value="选择最后一个div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:last").css("background","yellow"); 20 }) 21 22 // <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 //class不为one的元素,包含没有class属性的 25 $("div:not('.one')").css("background","yellow"); 26 }) 27 28 // <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 29 $("#btn4").click(function(){ 30 $("div:even").css("background","yellow"); 31 }) 32 33 // <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 34 $("#btn5").click(function(){ 35 $("div:odd").css("background","yellow"); 36 }) 37 38 // <input type="button" value="选择索引值等于3的元素." id="btn6"/> 39 $("#btn6").click(function(){ 40 $("div:eq(3)").css("background","yellow"); 41 }) 42 43 // <input type="button" value="选择索引值大于3的元素." id="btn7"/> 44 $("#btn7").click(function(){ 45 $("div:gt(3)").css("background","yellow"); 46 }) 47 48 // <input type="button" value="选择索引值小于3的元素." id="btn8"/> 49 $("#btn8").click(function(){ 50 $("div:lt(3)").css("background","yellow"); 51 }) 52 53 // <input type="button" value="选择所有的标题元素." id="btn9"/> 54 $("#btn9").click(function(){ 55 $(":header").css("background","yellow"); 56 }) 57 58 // <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 59 function move(){ 60 $("#mover").slideToggle("fast",move); 61 } 62 move(); 63 64 $("#btn10").click(function(){ 65 $(":animated").css("background","yellow"); 66 }) 67 68 }); 69 </script> 70 </head> 71 <body> 72 <h3>基本过滤选择器.</h3> 73 <button id="reset">手动重置页面元素</button> 74 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 75 76 <input type="button" value="选择第一个div元素." id="btn1"/> 77 <input type="button" value="选择最后一个div元素." id="btn2"/> 78 <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 79 <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 80 <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 81 <input type="button" value="选择索引值等于3的元素." id="btn6"/> 82 <input type="button" value="选择索引值大于3的元素." id="btn7"/> 83 <input type="button" value="选择索引值小于3的元素." id="btn8"/> 84 <input type="button" value="选择所有的标题元素." id="btn9"/> 85 <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 86 87 <br /><br /> 88 89 <!-- 测试的元素 --> 90 <div class="one" id="one" > 91 id为one,class为one的div 92 <div class="mini">class为mini</div> 93 </div> 94 95 <div class="one" id="two" title="test" > 96 id为two,class为one,title为test的div. 97 <div class="mini" title="other">class为mini,title为other</div> 98 <div class="mini" title="test">class为mini,title为test</div> 99 </div> 100 101 <div class="one"> 102 <div class="mini">class为mini</div> 103 <div class="mini">class为mini</div> 104 <div class="mini">class为mini</div> 105 <div class="mini"></div> 106 </div> 107 108 109 110 <div class="one"> 111 <div class="mini">class为mini</div> 112 <div class="mini">class为mini</div> 113 <div class="mini">class为mini</div> 114 <div class="mini" title="tesst">class为mini,title为tesst</div> 115 </div> 116 117 118 <div style="display:none;" class="none">style的display为"none"的div</div> 119 120 <div class="hide">class为"hide"的div</div> 121 122 <div> 123 包含input的type为"hidden"的div<input type="hidden" size="8"/> 124 </div> 125 126 127 <span id="mover">正在执行动画的span元素.</span> 128 129 <!-- Resources from http://down.liehuo.net --> 130 </body> 131 </html>
D.内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text)用法: $(”div:contains(’John’)”) 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty用法: $(”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: $(”div:has(p)”).addClass(”test”) 返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent用法: $(”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>04-内容过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:contains('di')").css("background","yellow"); 15 }) 16 17 // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:empty").css("background","yellow"); 20 }) 21 22 // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:has('.mini')").css("background","yellow"); 25 }) 26 27 // <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div:parent").css("background","yellow"); 30 }) 31 32 }); 33 </script> 34 </head> 35 <body> 36 <h3>内容过滤选择器.</h3> 37 <button id="reset">手动重置页面元素</button> 38 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 39 40 <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> 41 <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 42 <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> 43 <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> 44 45 46 <br /><br /> 47 48 <!-- 测试的元素 --> 49 <div class="one" id="one" > 50 id为one,class为one的div 51 <div class="mini">class为mini</div> 52 </div> 53 54 <div class="one" id="two" title="test" > 55 id为two,class为one,title为test的div. 56 <div class="mini" title="other">class为mini,title为other</div> 57 <div class="mini" title="test">class为mini,title为test</div> 58 </div> 59 60 <div class="one"> 61 <div class="mini">class为mini</div> 62 <div class="mini">class为mini</div> 63 <div class="mini">class为mini</div> 64 <div class="mini"></div> 65 </div> 66 67 68 69 <div class="one"> 70 <div class="mini">class为mini</div> 71 <div class="mini">class为mini</div> 72 <div class="mini">class为mini</div> 73 <div class="mini" title="tesst">class为mini,title为tesst</div> 74 </div> 75 76 77 <div style="display:none;" class="none">style的display为"none"的div</div> 78 79 <div class="hide">class为"hide"的div</div> 80 81 <div> 82 包含input的type为"hidden"的div<input type="hidden" size="8"/> 83 </div> 84 85 86 <span id="mover">正在执行动画的span元素.</span> 87 88 <!-- Resources from http://down.liehuo.net --> 89 </body> 90 </html>
E.可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>05-可见性过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value=" 选取所有可见的div元素" id="b1"/> 13 $("#b1").click(function(){ 14 $("div:visible").css("background","yellow"); 15 }); 16 17 // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> 18 $("#b2").click(function(){ 19 $("div:hidden").show(3000).css("background","yellow"); 20 }); 21 22 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> 23 $("#b3").click(function(){ 24 /* 25 * <!--文本隐藏域--> 26 <input type="hidden" value="hidden_1"> 27 <input type="hidden" value="hidden_2"> 28 <input type="hidden" value="hidden_3"> 29 <input type="hidden" value="hidden_4"> 30 */ 31 var $inputs = $("input:hidden"); 32 33 // for(var i=0;i<$inputs.length;i++){ 34 // var input = $inputs[i]; 35 // alert(input.value); 36 // } 37 38 /* 39 * jQuery提供的隐式迭代的方法 40 * each(callback) 41 * * callback:回调函数,function(index,domEle){} 42 * * index:索引值 43 * * domEle:DOM对象 44 */ 45 $inputs.each(function(index,domEle){ 46 alert(domEle.value) 47 }); 48 49 }); 50 51 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> 52 $("#b4").click(function(){ 53 /* 54 * <!--文本隐藏域--> 55 <input type="hidden" value="hidden_1"> 56 <input type="hidden" value="hidden_2"> 57 <input type="hidden" value="hidden_3"> 58 <input type="hidden" value="hidden_4"> 59 */ 60 var $inputs = $("input:hidden"); 61 62 /* 63 * jQuery还提供了隐式迭代的方法 64 * jQuery.each(object,callback) 65 * * jQuery.each()和each()方法的区别: 66 * * each():相当于Java中的实例方法,$(expr).each() 67 * * jQuery.each():相当于Java中的静态方法,$.each() 68 * * jQuery.each(object,callback) 69 * * object:需要例遍的对象或数组。 70 * * callback:回调函数,function(index,domEle){} 71 * * index:索引值 72 * * domEle:DOM对象 73 */ 74 $.each($inputs,function(index,domEle){ 75 //alert(domEle.value); 76 //alert($(domEle).val()); 77 78 /* 79 * this的用法: 80 * * 指代当前页面元素内容,这里的元素内容就可以称之为DOM对象 81 * * this的使用,必须要在一个具有上下文环境 82 * * 建议:实际开发中,this的使用尽量不要用 83 */ 84 //alert(this.value); 85 alert($(this).val()); 86 }); 87 88 }); 89 90 }) 91 </script> 92 </head> 93 <body> 94 <h3>可见性过滤选择器.</h3> 95 <button id="reset">手动重置页面元素</button> 96 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 97 <br/><br/> 98 <input type="button" value=" 选取所有可见的div元素" id="b1"/> 99 <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> 100 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> 101 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> 102 <br /><br /> 103 104 <!--文本隐藏域--> 105 <input type="hidden" value="hidden_1"> 106 <input type="hidden" value="hidden_2"> 107 <input type="hidden" value="hidden_3"> 108 <input type="hidden" value="hidden_4"> 109 110 <div class="one" id="one" > 111 id为one,class为one的div 112 <div class="mini">class为mini</div> 113 </div> 114 115 <div class="one" id="two" title="test" > 116 id为two,class为one,title为test的div. 117 <div class="mini" title="other">class为mini,title为other</div> 118 <div class="mini" title="test">class为mini,title为test</div> 119 </div> 120 121 <div class="one"> 122 <div class="mini">class为mini</div> 123 <div class="mini">class为mini</div> 124 <div class="mini">class为mini</div> 125 <div class="mini" title="tesst">class为mini,title为tesst</div> 126 </div> 127 128 129 <div style="display:none;" class="none">style的display为"none"的div</div> 130 131 <div class="hide">class为"hide"的div</div> 132 133 <span id="mover">正在执行动画的span元素.</span> 134 <!-- Resources from http://down.liehuo.net --> 135 </body> 136 </html>
F.属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute]用法: $(”div[id]“) ; 返回值 集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
2、[attribute=value]用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
3、[attribute!=value]用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value]用法: $(”input[name^=‘news’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
5、[attribute$=value]用法: $(”input[name$=‘letter’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value]用法: $(”input[name*=‘man’]“) 返回值 集合元素
说明: 匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN]用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>06-属性选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div[title]").css("background","yellow"); 15 }); 16 17 // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div[title=test]").css("background","yellow"); 20 }); 21 22 // <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div[title!=test]").css("background","yellow"); 25 }); 26 27 // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div[title^=te]").css("background","yellow"); 30 }); 31 32 // <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> 33 $("#btn5").click(function(){ 34 $("div[title$=est]").css("background","yellow"); 35 }); 36 37 // <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> 38 $("#btn6").click(function(){ 39 $("div[title*=es]").css("background","yellow"); 40 }); 41 42 // <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> 43 $("#btn7").click(function(){ 44 //多个属性过滤选择器并列使用(交集) 45 $("div[id][title*=es]").css("background","yellow"); 46 }); 47 48 }); 49 </script> 50 </head> 51 <body> 52 <button id="reset">手动重置页面元素</button> 53 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 54 55 56 57 <h3> 属性选择器.</h3> 58 <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> 59 <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> 60 <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> 61 <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 62 <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> 63 <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> 64 <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> 65 66 67 68 69 <br /><br /> 70 <div class="one" id="one" > 71 id为one,class为one的div 72 <div class="mini">class为mini</div> 73 </div> 74 75 <div class="one" id="two" title="test" > 76 id为two,class为one,title为test的div. 77 <div class="mini" title="other">class为mini,title为other</div> 78 <div class="mini" title="test">class为mini,title为test</div> 79 </div> 80 81 <div class="one"> 82 <div class="mini">class为mini</div> 83 <div class="mini">class为mini</div> 84 <div class="mini">class为mini</div> 85 <div class="mini"></div> 86 </div> 87 88 89 90 <div class="one"> 91 <div class="mini">class为mini</div> 92 <div class="mini">class为mini</div> 93 <div class="mini">class为mini</div> 94 <div class="mini" title="tesst">class为mini,title为tesst</div> 95 </div> 96 97 98 <div style="display:none;" class="none">style的display为"none"的div</div> 99 100 <div class="hide">class为"hide"的div</div> 101 102 <div> 103 包含input的type为"hidden"的div<input type="hidden" size="8"/> 104 </div> 105 106 107 <span id="mover">正在执行动画的span元素.</span> 108 <!-- Resources from http://down.liehuo.net --> 109 </body> 110 </html>
G.子元素过滤选择器
1、:nth-child(index/even/odd/equation)用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child用法: $(”ul li:first-child”) 返回值 集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child用法: $(”ul li:last-child”) 返回值 集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child用法: $(”ul li:only-child”) 返回值 集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>07-子元素过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 /* 15 * * 子元素过滤选择器的特殊用法,要在其前面增加空格 16 * * 子元素过滤选择器的起始位置为"1" 17 */ 18 $("div[class=one] :nth-child(1)").css("background","yellow"); 19 }) 20 21 // <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> 22 $("#btn2").click(function(){ 23 $("div[class=one] :first-child").css("background","yellow"); 24 }) 25 26 // <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> 27 $("#btn3").click(function(){ 28 $("div[class=one] :last-child").css("background","yellow"); 29 }) 30 31 // <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/> 32 $("#btn4").click(function(){ 33 $("div[class=one] :only-child").css("background","yellow"); 34 }) 35 36 }) 37 38 </script> 39 </head> 40 <body> 41 <button id="reset">手动重置页面元素</button> 42 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 43 44 <h3>子元素过滤选择器.</h3> 45 <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 46 <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> 47 <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> 48 <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/> 49 50 51 52 53 <br /><br /> 54 <div class="one" id="one" > 55 id为one,class为one的div 56 <div class="mini">class为mini</div> 57 </div> 58 59 <div class="one" id="two" title="test" > 60 id为two,class为one,title为test的div. 61 <div class="mini" title="other">class为mini,title为other</div> 62 <div class="mini" title="test">class为mini,title为test</div> 63 </div> 64 65 <div class="one"> 66 <div class="mini">class为mini</div> 67 <div class="mini">class为mini</div> 68 <div class="mini">class为mini</div> 69 <div class="mini"></div> 70 </div> 71 72 73 74 <div class="one"> 75 <div class="mini">class为mini</div> 76 <div class="mini">class为mini</div> 77 <div class="mini">class为mini</div> 78 <div class="mini" title="tesst">class为mini,title为tesst</div> 79 </div> 80 81 82 <div style="display:none;" class="none">style的display为"none"的div</div> 83 84 <div class="hide">class为"hide"的div</div> 85 86 <div> 87 包含input的type为"hidden"的div<input type="hidden" size="8"/> 88 </div> 89 90 91 <span id="mover">正在执行动画的span元素.</span> 92 <!-- Resources from http://down.liehuo.net --> 93 </body> 94 </html>
H.表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
1、:enabled用法: $(”input:enabled”) 返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled用法: $(”input:disabled”) 返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked用法: $(”input:checked”) 返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
4、:selected用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>08-表单对象属性过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 // <button id="btn1">对表单内 可用input 赋值操作.</button> 14 $("#btn1").click(function(){ 15 /* 16 * 可用元素：<input name="add" value="可用文本框"/> <br/> 17 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 18 可用元素： <input name="che" value="可用文本框" /><br/> 19 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 20 */ 21 /* 22 * val():获取和设置 23 * * 获取:不传参数 24 * * 设置:传递传输 25 */ 26 $("input:enabled").val("xxxxx"); 27 28 }); 29 30 // <button id="btn2">对表单内 不可用input 赋值操作.</button> 31 $("#btn1").click(function(){ 32 /* 33 * 可用元素：<input name="add" value="可用文本框"/> <br/> 34 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 35 可用元素： <input name="che" value="可用文本框" /><br/> 36 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 37 */ 38 /* 39 * val():获取和设置 40 * * 获取:不传参数 41 * * 设置:传递传输 42 */ 43 $("input:disabled").val("xxxxx"); 44 45 }); 46 47 // <button id="btn3">获取多选框选中的个数.</button> 48 $("#btn3").click(function(){ 49 /* 50 * <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 51 <input type="checkbox" name="newsletter" value="test2" />test2 52 <input type="checkbox" name="newsletter" value="test3" />test3 53 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 54 <input type="checkbox" name="newsletter" value="test5" />test5 55 */ 56 alert($("input[name=newsletter]:checked").length); 57 58 }); 59 60 // <button id="btn4">获取下拉框选中的内容.</button> 61 $("#btn4").click(function(){ 62 /* 63 * 下拉列表1：<br/> 64 <select name="test" multiple="multiple" style="height:100px"> 65 <option>浙江</option> 66 <option selected="selected">湖南</option> 67 <option>北京</option> 68 <option selected="selected">天津</option> 69 <option>广州</option> 70 <option>湖北</option> 71 </select> 72 73 <br/><br/> 74 下拉列表2：<br/> 75 <select name="test2" > 76 <option>浙江</option> 77 <option>湖南</option> 78 <option selected="selected">北京</option> 79 <option>天津</option> 80 <option>广州</option> 81 <option>湖北</option> 82 </select> 83 */ 84 alert($("select>option:selected").text()); 85 86 }); 87 88 }); 89 </script> 90 91 </head> 92 <body> 93 <h3> 表单对象属性过滤选择器.</h3> 94 <form id="form1" action="#"> 95 <button type="reset">重置所有表单元素</button> 96 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 97 <br /><br /> 98 <button id="btn1">对表单内 可用input 赋值操作.</button> 99 <button id="btn2">对表单内 不可用input 赋值操作.</button> 100 <button id="btn3">获取多选框选中的个数.</button> 101 <button id="btn4">获取下拉框选中的内容.</button> 102 103 <br /><br /> 104 105 可用元素：<input name="add" value="可用文本框"/> <br/> 106 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 107 可用元素： <input name="che" value="可用文本框" /><br/> 108 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 109 <br/> 110 多选框：<br/> 111 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 112 <input type="checkbox" name="newsletter" value="test2" />test2 113 <input type="checkbox" name="newsletter" value="test3" />test3 114 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 115 <input type="checkbox" name="newsletter" value="test5" />test5 116 <div></div> 117 118 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 119 下拉列表1：<br/> 120 <select name="test" multiple="multiple" style="height:100px"> 121 <option>浙江</option> 122 <option selected="selected">湖南</option> 123 <option>北京</option> 124 <option selected="selected">天津</option> 125 <option>广州</option> 126 <option>湖北</option> 127 </select> 128 129 <br/><br/> 130 下拉列表2：<br/> 131 <select name="test2" > 132 <option>浙江</option> 133 <option>湖南</option> 134 <option selected="selected">北京</option> 135 <option>天津</option> 136 <option>广州</option> 137 <option>湖北</option> 138 </select> 139 <br/><br/> 140 141 <div></div> 142 </form> 143 144 145 146 <!-- Resources from http://down.liehuo.net --> 147 </body> 148 </html>
I.表单选择器
1、:input用法: $(”:input”) ; 返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素
2、:text用法: $(”:text”) ; 返回值 集合元素
说明: 匹配所有的单行文本框.
3、:password用法: $(”:password”) ; 返回值 集合元素
说明: 匹配所有密码框.
4、:radio用法: $(”:radio”) ; 返回值 集合元素
说明: 匹配所有单选按钮.
5、:checkbox用法: $(”:checkbox”) ; 返回值 集合元素
说明: 匹配所有复选框
6、:submit用法: $(”:submit”) ; 返回值 集合元素
说明: 匹配所有提交按钮.
7、:image用法: $(”:image”) 返回值 集合元素
说明: 匹配所有图像域.
8、:reset用法: $(”:reset”) ; 返回值 集合元素
说明: 匹配所有重置按钮.
9、:button用法: $(”:button”) ; 返回值 集合元素
说明: 匹配所有按钮.这个包括直接写的元素button.
10、:file用法: $(”:file”) ; 返回值 集合元素
说明: 匹配所有文件域.
11、:hidden用法: $(”input:hidden”) ; 返回值 集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>09-表单选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 //<![CDATA[ 10 $(document).ready(function(){ 11 12 var $alltext = $("#form1 :text"); 13 var $allpassword= $("#form1 :password"); 14 var $allradio= $("#form1 :radio"); 15 var $allcheckbox= $("#form1 :checkbox"); 16 17 var $allsubmit= $("#form1 :submit"); 18 var $allimage= $("#form1 :image"); 19 var $allreset= $("#form1 :reset"); 20 var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配 21 var $allfile= $("#form1 :file"); 22 var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配. 23 var $allselect = $("#form1 select"); 24 var $alltextarea = $("#form1 textarea"); 25 26 var $AllInputs = $("#form1 :input"); 27 var $inputs = $("#form1 input"); 28 29 $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>") 30 .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>") 31 .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>") 32 .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>") 33 .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>") 34 .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>") 35 .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>") 36 .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>") 37 .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>") 38 .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>") 39 .append(" 有" + $allselect.length + " 个（ select 元素）<br/>") 40 .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>") 41 .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>") 42 .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>") 43 .css("color", "red") 44 45 $("form").submit(function () { return false; }); // return false;不能提交. 46 47 }); 48 //]]> 49 </script> 50 </head> 51 <body> 52 <form id="form1" action="#"> 53 <input type="button" value="Button"/><br/> 54 <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> 55 <input type="file" /><br/> 56 <input type="hidden" /><div style="display:none">test</div><br/> 57 <input type="image" /><br/> 58 <input type="password" /><br/> 59 <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> 60 <input type="reset" /><br/> 61 <input type="submit" value="提交"/><br/> 62 <input type="text" /><br/> 63 <select><option>Option</option></select><br/> 64 <textarea rows="5" cols="20"></textarea><br/> 65 <button>Button</button><br/> 66 </form> 67 68 <div></div> 69 <!-- Resources from http://down.liehuo.net --> 70 </body> 71 </html>
* 建议：
* 一定要将九个页面强加练习
* 熟悉jQuery的帮助文档
DOM操作
对比原生DOM操作来学习
* 获取节点： * 元素节点：所有选择器 * 文本节点：text() * 属性节点： * attr() * removeAttr() * 创建节点： * 元素节点：$(HTML代码),注意标签的闭合 * 文本节点：text() * 属性节点：attr() * 删除节点： * remove()：删除自身节点及后代节点 * empty()：删除后代节点，保留自身节点
查找节点
查找元素节点
var $usernameElement = $("#username");
alert("jquery "+$usernameElement.val());
查找属性节点
jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
$usernameElement.attr("value");
查找文本节点
jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
$usernameElement.text();
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>01_查找节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li id="bj"></li> 11 <li id="tj" name="tianjin">天津</li> 12 13 </ul> 14 </body> 15 <script type="text/javascript"> 16 // alert($("#bj").text()); 17 // 18 // $("#bj").text("北京"); 19 // alert($("#bj").text()); 20 21 alert($("#bj").attr("name")); 22 23 $("#bj").attr("name","beijing"); 24 alert($("#bj").attr("name")); 25 26 $("#bj").removeAttr("name"); 27 alert($("#bj").attr("name")); 28 </script> 29 30 </html>
创建节点
创建元素节点
使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var $option = $("<option></option>");
创建文本节点
创建元素节点后，使用text()方法来设置其节点的文本内容。
$option.text("北京");
创建元素节点时，直接将其节点的文本内容插入其中。
var $option = $("<option>北京</option>");
创建属性节点
创建元素节点后，使用attr()方法来设置其节点的属性。
$option.attr("value","北京");
创建元素节点时，直接将其节点的属性插入其中。
var $option = $("<option value="北京">北京</option>");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>02_创建节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul id="city"> 10 <li id="bj" name="beijing">北京</li> 11 </ul> 12 </body> 13 <script type="text/javascript"> 14 //在city下增加<li id="tj" name="tianjin">天津</li>节点 15 //1 创建<li id="tj" name="tianjin">天津</li> 16 // //1 创建元素节点<li></li> 17 // var $li = $("<li></li>"); //创建元素节点:$(HTML代码) 标签闭合 18 // 19 // //2 设置属性 20 // $li.attr("id","tj"); 21 // $li.attr("name","tianjin"); 22 // 23 // //3 设置文本内容 24 // $li.text("天津"); 25 26 var $li = $("<li id='tj' name='tianjin'>天津</li>"); 27 28 //2 获取id="city"标签 29 //3 添加 30 $("#city").append($li); 31 32 </script> 33 34 </html>
插入节点
1.内部插入节点（标签内部插入）
append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>03_内部插入节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京</li> 12 <li id="tj" name="tianjin">天津</li> 13 <li id="cq" name="chongqing">重庆</li> 14 </ul> 15 16 17 <ul id="love"> 18 <li id="fk" name="fankong">反恐</li> 19 <li id="xj" name="xingji">星际</li> 20 </ul> 21 22 <div id="foo1">Hello1</div> 23 24 </body> 25 <script type="text/javascript"> 26 //* append(content) :向每个匹配的元素的内部的结尾处追加内容 27 //append后面的元素插入到append前面的元素的后面 28 // $("#bj").append($("#fk")); 29 30 //* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 31 //appendTo前面的元素插入到appendTo后面的元素的后面 32 // $("#bj").appendTo($("#fk")); 33 34 //* prepend(content):向每个匹配的元素的内部的开始处插入内容 35 //prepend后面的元素插入到prepend前面的元素的前面 36 $("#bj").prepend($("#fk")); 37 38 //* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处 39 //prependTo前面元素插入到prependTo后面元素的前面 40 // $("#bj").prependTo($("#fk")); 41 42 </script> 43 44 </html>
2.外部插入节点（标签外部插入）
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>04_外部插入节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京</li> 12 <li id="tj" name="tianjin">天津</li> 13 <li id="cq" name="chongqing">重庆</li> 14 </ul> 15 16 <p id="p3">I would like to say: p3</p> 17 18 <p id="p2">I would like to say: p2</p> 19 20 <p id="p1">I would like to say: p1</p> 21 22 </body> 23 <script type="text/javascript"> 24 //* after(content) :在每个匹配的元素之后插入内容 25 //after后面的元素插入到after前面的元素的后面 26 // $("#bj").after($("#p2")); 27 28 //* before(content):在每个匹配的元素之前插入内容 29 //before后面的元素插入到before前面的元素的前面 30 $("#bj").before($("#p2")); 31 32 //* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面 33 //insertAfter前面的元素插入到insertAfter后面的元素的后面 34 // $("#bj").insertAfter($("#p2")); 35 36 //* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 37 //insertBefore前面的元素插入到insertBefore后面的元素的前面 38 // $("#bj").insertBefore($("#p2")); 39 40 </script> 41 42 </html>
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>05_删除节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京<p>海淀区</p></li> 12 <li id="tj" name="tianjin">天津<p>河西区</p></li> 13 <li id="cq" name="chongqing">重庆</li> 14 </ul> 15 <p class="hello">Hello</p> how are <p>you?</p> 16 </body> 17 <script type="text/javascript"> 18 //删除<li id="bj" name="beijing">北京</li> 19 $("#bj").remove(); 20 21 //删除所有的子节点 清空元素中的所有后代节点(不包含属性节点). 22 $("#tj").empty(); 23 24 alert($("#tj").attr("name")); 25 26 27 </script> 28 29 </html>
复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件 （true代表同时复制该元素事件）；
<button>保存</button> <p>段落</p> $("button").click(function(){ alert("点击按钮"); }); //克隆节点，不克隆事件 $("button").clone().appendTo("p"); //克隆节点，克隆事件 $("button").clone(true).appendTo("p");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>06_复制节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <button>保存</button><br> 10 <p>段落</p> 11 </body> 12 <script type="text/javascript"> 13 //button增加事件 14 $("button").click(function(){ 15 alert("button"); 16 }); 17 18 19 //克隆button 追加到p上 ,但事件不克隆 20 //clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为 21 $("button").clone(true).appendTo($("p")) 22 23 24 //克隆button 追加到p上 ,但事件也克隆 25 //clone(true): 复制元素的同时也复制元素中的的事件 26 27 </script> 28 </html>
替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素，前面的元素是被替换元素；后面的元素是替换元素
replaceAll(): 颠倒了的 replaceWith() 方法.前面的元素是替换元素；后面的元素是被替换元素
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
//<p>段落</p> //方式一 $("p").replaceWith("<button>登陆</button>"); //方式二 $("<button>登陆</button>").replaceAll("p");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>07_替换节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <html> 9 <p>段落</p> 10 <p>段落</p> 11 <p>段落</p> 12 <button>保存</button> 13 </html> 14 <script type="text/javascript"> 15 //$("button")用 <p>tttttttt</p>替换 16 $("button").replaceWith($("<p>tttttttt</p>")); 17 18 // p 用 <button>保存</button> 替换 19 $("<button>保存</button>").replaceAll($("p")); 20 21 </script> 22 </html>
样式操作
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>08_样式操作.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 .one{ 9 width: 200px; 10 height: 140px; 11 margin: 40px; 12 background: red; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div,span{ 20 width: 140px; 21 height: 140px; 22 margin: 20px; 23 background: #9999CC; 24 border: #000 1px solid; 25 float:left; 26 font-size: 17px; 27 font-family:Roman; 28 } 29 30 div.mini{ 31 width: 30px; 32 height: 30px; 33 background: #CC66FF; 34 border: #000 1px solid; 35 font-size: 12px; 36 font-family:Roman; 37 } 38 </style> 39 40 41 </head> 42 <body> 43 <input type="button" value="采用属性增加样式" id="b1"/> 44 <input type="button" value=" addClass" id="b2"/> 45 <input type="button" value="removeClass" id="b3"/> 46 <input type="button" value=" 切换样式" id="b4"/> 47 <input type="button" value=" hasClass" id="b5"/> 48 49 50 <h1>天气冷了</h1> 51 <h2>天气又冷了</h2> 52 53 54 55 <br> 56 <div id="mover"> 57 动画 58 </div> 59 <br> 60 <span class="spanone"> span 61 </span> 62 63 </body> 64 <script type="text/javascript"> 65 //<input type="button" value="采用属性增加样式" id="b1"/> 66 $("#b1").click(function(){ 67 $("#mover").attr("class","one"); 68 }); 69 70 //<input type="button" value=" addClass" id="b2"/> 71 $("#b2").click(function(){ 72 $("#mover").addClass("mini"); 73 }); 74 75 //<input type="button" value="removeClass" id="b3"/> 76 $("#b3").click(function(){ 77 /* 78 * removeClass() 79 * * 不传:删除所有样式 80 * * 传递:删除指定样式 81 */ 82 $("#mover").removeClass(); 83 }); 84 85 //<input type="button" value=" 切换样式" id="b4"/> 86 $("#b4").click(function(){ 87 //toggleClass():切换样式是在没有样式与指定样式之间 88 $("#mover").toggleClass("one"); 89 }); 90 91 //<input type="button" value=" hasClass" id="b5"/> 92 $("#b5").click(function(){ 93 //hasClass():是判断是否含有某个具体样式 94 alert($("#mover").hasClass("one")); 95 }); 96 97 </script> 98 </html>
html()方法就相当于DOM中的innerHTML属性
遍历节点
* 父节点：parent()
* 子节点：children()
* 兄弟节点
* 上一个兄弟节点：prev()
* 下一个兄弟节点：next()
* 所有兄弟节点：siblings()
* find(expr)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>09_遍历节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 11 12 <ul id="city"> 13 <li id="bj" name="beijing">北京</li> 14 <li id="tj" name="tianjin">天津</li> 15 <li id="nj" name="nanjing">南京</li> 16 </ul> 17 18 </body> 19 <script type="text/javascript"> 20 //获取北京节点的父节点 21 //alert($("#bj").parent().attr("id")); 22 23 //获取city标签下的所有子节点的个数 24 //alert($("#city").children().length); 25 26 //获取天津节点的上一个兄弟节点和下一个兄弟节点 27 // alert($("#tj").prev().attr("name")); 28 // alert($("#tj").next().attr("name")); 29 30 //获取city标签下所有li标签 31 alert($("#city").find("li").length); 32 33 </script> 34 35 </html>
包裹节点
* wrap()：分别包裹
* wrapAll()：一起包裹
* wrapInner()：包裹指定标签内部
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>10_包裹节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 8 </head> 9 10 <body> 11 <strong title="jQuery">jQuery</strong> 12 <strong title="jQuery">jQuery</strong> 13 </body> 14 <script type="text/javascript"> 15 //jQuery代码如下： 16 $("strong").wrap("<b></b>"); 17 18 /* 19 * 得到的结果如下 20 * <b><strong title="jQuery">jQuery</strong></b> 21 * <b><strong title="jQuery">jQuery</strong></b> 22 */ 23 24 //jQuery代码如下： 25 $("strong").wrapAll("<b></b>"); 26 27 /* 28 * 得到的结果如下 29 * <b> 30 * <strong title="jQuery">jQuery</strong> 31 * <strong title="jQuery">jQuery</strong> 32 * </b> 33 */ 34 35 //jQuery代码如下： 36 $("strong"). wrapInner("<b></b>"); 37 38 /* 39 * 得到的结果如下 40 * <strong title="jQuery"><b>jQuery</b></strong> 41 * <strong title="jQuery"><b>jQuery</b></strong> 42 */ 43 44 </script> 45 46 </html>
案例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 6 <style type="text/css"> 7 <!-- 8 BODY 9 { 10 font-family:"Courier"; 11 font-size: 12px; 12 margin:0px 0px 0px 0px; 13 overflow-x:no; 14 overflow-y:no; 15 background-color: #B8D3F4; 16 } 17 td 18 { 19 font-size:12px; 20 } 21 .default_input 22 { 23 border:1px solid #666666; 24 height:18px; 25 font-size:12px; 26 } 27 .default_input2 28 { 29 border:1px solid #666666; 30 height:18px; 31 font-size:12px; 32 } 33 .nowrite_input 34 { 35 border:1px solid #849EB5; 36 height:18px; 37 font-size:12px; 38 background-color:#EBEAE7; 39 color: #9E9A9E; 40 } 41 .default_list 42 { 43 font-size:12px; 44 border:1px solid #849EB5; 45 } 46 .default_textarea 47 { 48 font-size:12px; 49 border:1px solid #849EB5; 50 } 51 52 .nowrite_textarea 53 { 54 border:1px solid #849EB5; 55 font-size:12px; 56 background-color:#EBEAE7; 57 color: #9E9A9E; 58 } 59 60 .wordtd5 { 61 font-size: 12px; 62 text-align: center; 63 vertical-align:top; 64 padding-top: 6px; 65 padding-right: 5px; 66 padding-bottom: 3px; 67 padding-left: 5px; 68 background-color: #b8c4f4; 69 } 70 71 .wordtd { 72 font-size: 12px; 73 text-align: left; 74 vertical-align:top; 75 padding-top: 6px; 76 padding-right: 5px; 77 padding-bottom: 3px; 78 padding-left: 5px; 79 background-color: #b8c4f4; 80 } 81 .wordtd_1 { 82 font-size: 12px; 83 vertical-align:top; 84 padding-top: 6px; 85 padding-right: 5px; 86 padding-bottom: 3px; 87 padding-left: 5px; 88 background-color: #516CD6; 89 color:#fff; 90 } 91 .wordtd_2{ 92 font-size: 12px; 93 text-align: right; 94 vertical-align:top; 95 padding-top: 6px; 96 padding-right: 5px; 97 padding-bottom: 3px; 98 padding-left: 5px; 99 background-color: #64BDF9; 100 } 101 .wordtd_3{ 102 font-size: 12px; 103 text-align: right; 104 vertical-align:top; 105 padding-top: 6px; 106 padding-right: 5px; 107 padding-bottom: 3px; 108 padding-left: 5px; 109 background-color: #F1DD34; 110 } 111 .inputtd 112 { 113 font-size:12px; 114 vertical-align:top; 115 padding-top: 3px; 116 padding-right: 3px; 117 padding-bottom: 3px; 118 padding-left: 3px; 119 } 120 .inputtd2 121 { 122 text-align: center; 123 font-size:12px; 124 vertical-align:top; 125 padding-top: 3px; 126 padding-right: 3px; 127 padding-bottom: 3px; 128 padding-left: 3px; 129 } 130 .tablebg 131 { 132 font-size:12px; 133 } 134 135 .tb{ 136 border-collapse: collapse; 137 border: 1px outset #999999; 138 background-color: #FFFFFF; 139 } 140 .td2{line-height:22px; text-align:center; background-color:#F6F6F6;} 141 .td3{background-color:#B8D3F4; text-align:center; line-height:20px;} 142 .td4{background-color:#F6F6F6;line-height:20px;} 143 .td5{border:#000000 solid; 144 border-right-width:0px; 145 border-left-width:0px; 146 border-top-width:0px; 147 border-bottom-width:1px;} 148 149 .tb td{ 150 font-size: 12px; 151 border: 2px groove #ffffff; 152 } 153 154 155 156 157 .noborder { 158 border: none; 159 } 160 161 .button { 162 border: 1px ridge #ffffff; 163 line-height:18px; 164 height: 20px; 165 width: 45px; 166 padding-top: 0px; 167 background:#CBDAF7; 168 color:#000000; 169 font-size: 9pt; 170 font-family:"Courier"; 171 } 172 173 .textarea { 174 font-family: Arial, Helvetica, sans-serif, "??"; 175 font-size: 9pt; 176 color: #000000; 177 border-bottom-width: 1px; 178 border-top-style: none; 179 border-right-style: none; 180 border-bottom-style: solid; 181 border-left-style: none; 182 border-bottom-color: #000000; 183 background-color:transparent; 184 text-align: left 185 } 186 --> 187 </style></head> 188 189 <body> 190 191 <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"> 192 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> 193 <tr> 194 <td width="126"> 195 <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> 196 <select name="first" multiple="multiple" size=10 class="td3" id="first"> 197 <option value="选项1">选项1</option> 198 <option value="选项2">选项2</option> 199 <option value="选项3">选项3</option> 200 <option value="选项4">选项4</option> 201 <option value="选项5">选项5</option> 202 <option value="选项6">选项6</option> 203 <option value="选项7">选项7</option> 204 <option value="选项8">选项8</option> 205 </select> 206 </td> 207 <td width="69" valign="middle"> 208 <input name="add" id="add" type="button" class="button" value="-->" /> 209 <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 210 <input name="remove" id="remove" type="button" class="button" value="<--" /> 211 <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 212 </td> 213 <td width="127" align="left"> 214 <select name="second" size="10" multiple="multiple" class="td3" id="second"> 215 <option value="选项9">选项9</option> 216 </select> 217 </td> 218 </tr> 219 </table> 220 </div> 221 </body> 222 <script type="text/javascript"> 223 // <input name="add" id="add" type="button" class="button" value="-->" /> 224 // 外部插入错误 225 // $("#add").click(function(){ 226 // $("#first>option:selected").insertAfter($("#second")); 227 // }); 228 $("#add").click(function(){ 229 $("#second").append($("#first>option:selected")); 230 }) 231 232 // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 233 $("#add_all").click(function(){ 234 $("#first>option").appendTo($("#second")); 235 }); 236 237 // <input name="remove" id="remove" type="button" class="button" value="<--" /> 238 $("#remove").click(function(){ 239 $("#second>option:selected").appendTo($("#first")); 240 }); 241 242 // <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 243 $("#remove_all").click(function(){ 244 $("#second>option").appendTo($("#first")); 245 }); 246 247 $("#first").dblclick(function(){ 248 $("#first>option:selected").appendTo($("#second")); 249 }); 250 251 $("#second").dblclick(function(){ 252 $("#second>option:selected").appendTo($("#first")); 253 }); 254 255 </script> 256 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>动态列表效果.html</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body {font-size:12px;text-align:center;} 9 a { color:#04D; text-decoration:none;} 10 a:hover { color:#F50; text-decoration:underline;} 11 .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 12 .SubCategoryBox ul { list-style:none;} 13 .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 14 .showmore { clear:both; text-align:center;padding-top:10px;} 15 .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 16 .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 17 .promoted a { color:#F50;} 18 </style> 19 <!-- 引入jQuery --> 20 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 //1 获取指定的内容 24 var $li = $("li:gt(5):not(':last')"); 25 26 //2 将指定内容隐藏 27 $li.hide(); 28 29 //3 获取按钮的onclick事件 30 $("a>span").click(function(){ 31 if($li.is(":hidden")){ 32 //4 将指定隐藏的内容,显示 33 $li.show(); 34 35 $("a>span").text("精简显示品牌"); 36 }else{ 37 //4 将指定隐藏的内容,显示 38 $li.hide(); 39 40 $("a>span").text("显示全部品牌"); 41 } 42 43 return false; 44 }); 45 46 }); 47 </script> 48 </head> 49 <body> 50 <div class="SubCategoryBox"> 51 <ul> 52 <li ><a href="#">佳能</a><i>(30440) </i></li> 53 <li ><a href="#">索尼</a><i>(27220) </i></li> 54 <li ><a href="#">三星</a><i>(20808) </i></li> 55 <li ><a href="#">尼康</a><i>(17821) </i></li> 56 <li ><a href="#">松下</a><i>(12289) </i></li> 57 <li ><a href="#">卡西欧</a><i>(8242) </i></li> 58 <li ><a href="#">富士</a><i>(14894) </i></li> 59 <li ><a href="#">柯达</a><i>(9520) </i></li> 60 <li ><a href="#">宾得</a><i>(2195) </i></li> 61 <li ><a href="#">理光</a><i>(4114) </i></li> 62 <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> 63 <li ><a href="#">明基</a><i>(1466) </i></li> 64 <li ><a href="#">爱国者</a><i>(3091) </i></li> 65 <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> 66 </ul> 67 <div class="showmore"> 68 <a href="#"><span>显示全部品牌</span></a> 69 </div> 70 </div> 71 <!-- Resources from http://down.liehuo.net --> 72 </body> 73 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文字提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 p{ 18 clear:both; 19 margin:0; 20 padding:.5em 0; 21 } 22 /* tooltip */ 23 #tooltip{ 24 position:absolute; 25 border:1px solid #333; 26 background:#f7f5d1; 27 padding:1px; 28 color:#333; 29 display:none; 30 } 31 </style> 32 <script type="text/javascript"> 33 $(document).ready(function(){ 34 var x = 10, y = 20; 35 var myTitle; 36 //1 获取操作的a标签:鼠标悬停事件\鼠标移除事件 37 $("a[class=tooltip]").mouseover(function(e){ 38 //1 获取对应a标签的title属性值 39 myTitle = this.title; 40 41 //2 创建用于信息提示的标签 42 var $div = $("<div id='tooltip'>"+myTitle+"</div>"); 43 44 //3 删除自带提示 45 this.title = ""; 46 47 //4 将自定义标签,添加到body标签下 48 $("body").append($div); 49 50 //5 将自定义标签的位置调整:根据鼠标的坐标值(e.pageX,e.pageY) 51 $("#tooltip").css({ 52 top : e.pageY + y + "px", 53 left : e.pageX + x + "px" 54 }).show(1000); 55 56 }).mouseout(function(){ 57 this.title = myTitle; 58 $("#tooltip").remove(); 59 }).mousemove(function(e){ 60 $("#tooltip").css({ 61 top : e.pageY + y + "px", 62 left : e.pageX + x + "px" 63 }) 64 }); 65 66 }); 67 </script> 68 </head> 69 <body> 70 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 71 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 72 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 73 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> 74 <!-- Resources from http://down.liehuo.net --> 75 </body> 76 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 img{border:none;} 18 ul,li{ 19 margin:0; 20 padding:0; 21 } 22 li{ 23 list-style:none; 24 float:left; 25 display:inline; 26 margin-right:10px; 27 border:1px solid #AAAAAA; 28 } 29 30 /* tooltip */ 31 #tooltip{ 32 position:absolute; 33 border:1px solid #ccc; 34 background:#333; 35 padding:2px; 36 display:none; 37 color:#fff; 38 } 39 </style> 40 <script type="text/javascript"> 41 $(document).ready(function(){ 42 var x = 10, y = 20; 43 var myHref; 44 $("a[class=tooltip]").mouseover(function(e){ 45 myHref = this.href; 46 var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>"); 47 $("body").append($div); 48 $("#tooltip").css({ 49 top : e.pageY + y + "px", 50 left : e.pageX + x + "px" 51 }).show(1000); 52 }).mouseout(function(){ 53 this.href = myHref; 54 $("#tooltip").remove(); 55 }).mousemove(function(e){ 56 $("#tooltip").css({ 57 top : e.pageY + y + "px", 58 left : e.pageX + x + "px" 59 }) 60 }); 61 }); 62 </script> 63 64 </head> 65 <body> 66 <h3>有效果：</h3> 67 <ul> 68 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 69 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 70 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 71 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 72 </ul> 73 74 75 <br/><br/><br/><br/> 76 <br/><br/><br/><br/> 77 78 79 <h3>无效果：</h3> 80 <ul> 81 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 82 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 83 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 84 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 85 </ul> 86 <!-- Resources from http://down.liehuo.net --> 87 </body> 88 </html>
事件
* 常规事件：click()\dblclick()等
* 特殊事件：
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
ready()：面试
$(docment).ready(function(){}) == window.onload
* ready的执行效率高
* ready在一个页面可以有多个
* ready的简写方法：
* $().ready(function(){})
* $(function(){})
* bind()与unbind()：绑定事件与解绑定事件
* 绑定事件： 将页面元素绑定到具体事件上
我们除了可以直接为页面的元素增加事件，也可以利用bind()方法为页面元素来绑定事件。
语法：bind(type, [data], fn)
参数type：含有一个或多个事件类型的字符串。
提供可以绑定的事件有：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
参数data：作为event.data属性值传递给事件对象的额外数据对象。
参数fn：绑定到每个匹配元素的事件上面的处理函数
* $(expr).click()
1 <body> 2 <div id="panel"> 3 <h5 class="head">什么是jQuery?</h5> 4 <div class="content"> 5 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").bind("click",function(){ 12 var $content = $(this).next("div.content"); 13 if($content.is(":visible")){ 14 $content.hide(); 15 }else{ 16 $content.show(); 17 } 18 }) 19 }) 20 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">什么是jQuery?</h5> 4 <div class="content"> 5 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").bind("mouseover mouseout",function(){ 12 var $content = $(this).next("div.content"); 13 if($content.is(":visible")){ 14 $content.hide(); 15 }else{ 16 $content.show(); 17 } 18 }) 19 }) 20 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">退出</h5> 4 </div> 5 </body> 6 <script language="JavaScript"> 7 $(function(){ 8 $("#panel h5.head").bind("click",{text:"你确认要退出吗？"},function(event){ 9 var flag = confirm(event.data.text); 10 if(!flag){ 11 return false; 12 }else{ 13 alert("退出成功！"); 14 return false; 15 } 16 }) 17 }) 18 </script>
1 <body> 2 <input type="button" value="移除事件"> 3 <div id="panel"> 4 <h5 class="head">什么是jQuery?</h5> 5 <div class="content"> 6 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 7 </div> 8 </div> 9 </body> 10 <script language="JavaScript"> 11 $(function(){ 12 $("#panel h5.head").bind("click",{bn:true},function(event){ 13 var $content = $(this).next("div.content"); 14 if($content.is(":visible")){ 15 $content.hide(); 16 }else{ 17 $content.show(); 18 } 19 }) 20 $("input").click(function(){ 21 $("#panel h5.head").unbind(); 22 }) 23 }) 24 </script>
1 <body> 2 <input type="button" value="移除事件"> 3 <div id="panel"> 4 <h5 class="head">什么是jQuery?</h5> 5 <div class="content"> 6 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 7 </div> 8 </div> 9 </body> 10 <script language="JavaScript"> 11 $(function(){ 12 $("#panel h5.head").bind("mouseover mouseout", 13 {bn:true},function(event){ 14 var $content = $(this).next("div.content"); 15 if($content.is(":visible")){ 16 $content.hide(); 17 }else{ 18 $content.show(); 19 } 20 }) 21 $("input").click(function(){ 22 $("#panel h5.head").unbind("mouseout"); 23 }) 24 }) 25 </script>
1 <script language="JavaScript"> 2 $(function(){ 3 function event(){ 4 var $content = $(this).next("div.content"); 5 if($content.is(":visible")){ 6 $content.hide(); 7 }else{ 8 $content.show(); 9 } 10 } 11 $("#panel h5.head").bind("click",event) 12 $("input").click(function(){ 13 $("#panel h5.head").unbind("click",event); 14 }) 15 }) 16 </script>
绑定事件与解绑定事件
* 绑定与解绑单个事件
* 绑定与解绑多个事件
* 绑定与解绑支持多少事件：blur, focus, focusin, focusout, load,
resize, scroll, unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave, change,
select, submit, keydown, keypress, keyup, error 。
* 其实常规事件就是绑定事件的简写方式。
* 事件切换
* hover(over, out)：模拟一个鼠标悬停事件(over,out)
* over:mouseover
* out:mouseout
* 为什么要这样做：
* 实现鼠标悬停更简单
* 多用于页面效果
* toggle()：多用于页面效果
1 <body> 2 <div id="panel"> 3 <h5 class="head">什么是jQuery?</h5> 4 <div class="content"> 5 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").hover(function(){ 12 $(this).next("div.content").show(); 13 },function(){ 14 $(this).next("div.content").hide(); 15 }) 16 }) 17 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">什么是jQuery?</h5> 4 <div class="content"> 5 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").toggle(function(){ 12 $(this).next("div.content").show(); 13 },function(){ 14 $(this).next("div.content").hide(); 15 }) 16 }) 17 </script>
Ajax
$.ajax()：最复杂、最灵活，最接近原生Ajax的用法
load()：最简单、最不灵活
load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。
它的结构是: load(url[, data][,callback])
程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
对于必须在加载完才能继续的操作, load() 方法提供了回调函数,
该函数有三个参数:
代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
方法的返回值是 jQuery
如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容.
load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
$.get()：请求类型是GET
$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
方法的返回值:XMLHttpRequest对象
$.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>get()方法</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js库--> 33 34 </head> 35 36 <body> 37 <form action="" name="form1" id="form1"> 38 <input type="text" name="username" id="username" value="zhang"><br> 39 <input type="text" name="psw" id="psw" value="99999"><br> 40 <input type="button" id="b1" value="登陆"> 41 </form> 42 43 <div id="one"> 44 </div> 45 46 </body> 47 <script language="JavaScript"> 48 $(function(){ 49 $("#b1").click(function(){ 50 /* 51 * $.ajax(options) 52 * * options:(可选) 53 * * url:请求路径 54 * * type:请求类型 55 * * async:表示是否异步 56 * * data:发送到服务器端的请求数据,格式是key/value格式 57 * * success:表示Ajax异步交互请求成功后,回调函数(接收服务器端的响应) 58 * * function(data, textStatus){} 59 * * data:请求返回的数据内容 60 * * textStatus:表示请求的状态,值有success、error、notmodify、timeout等 61 * * error:表示Ajax异步交互请求失败后,回调函数 62 * function(XMLHttpRequest, textStatus, errorThrown){} 63 * XMLHttpRequest对象 64 * textStatus:表示请求的状态,值有success、error、notmodify、timeout等 65 * errorThrown:异常对象 66 * * 返回值:XMLHttpRequest对象 67 */ 68 var json = { 69 username : $("#username").val(), 70 psw : $("#psw").val() 71 } 72 73 $.ajax({ 74 url : "get.jsp", 75 type : "get", 76 async : true, 77 data : json, 78 success : function(data, textStatus){ 79 alert(data); 80 }, 81 error : function(XMLHttpRequest, textStatus, errorThrown){ 82 alert("请求错误啦。。。"); 83 } 84 }); 85 86 }); 87 }); 88 </script> 89 </html>
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <% 3 System.out.println(request.getMethod()); 4 5 System.out.println("connection server success!"); 6 7 System.out.println("username = "+request.getParameter("username")); 8 System.out.println("password = "+request.getParameter("psw")); 9 10 out.println("helloworld"); 11 %>
$.post()：请求类型是POST
$.getScript()：获取脚本代码
有时候，在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时，动态创建<script>标签。但这种方式并不理想。
为此，jQuery提供了$.getScript()方法直接加载.js文件，与加载一个HTML片段一样简单方便。
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加载"/> 5 </p> 6 7 <div class="comment">已有评论：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getScript('test.js'); 16 }); 17 }) 18 </script>
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加载"/> 5 </p> 6 7 <div class="comment">已有评论：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getScript('test.js',function(){ 16 $('#resText').html(html); 17 }); 18 }); 19 }) 20 </script>
$.getJSON()：返回的数据格式是JSON格式
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加载"/> 5 </p> 6 7 <div class="comment">已有评论：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getJSON('test.json', function(data) { 16 $('#resText').empty(); 17 var html = ''; 18 $.each( data , function(commentIndex, comment) { 19 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; 20 }) 21 $('#resText').html(html); 22 }) 23 }) 24 }) 25 </script>
序列化元素
* serialize()
* 序列化的是JSON格式中的key/value格式
* 返回的是JSON字符串
* serializeArray()
* 序列化的是JSON格式中的数组格式
* 返回的是JSON对象
* 插件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>test</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 <script language="JavaScript" src="../../js/jquery-1.4.2.js"></script> 9 <style> 10 * { margin:0; padding:0;} 11 body { font-size:12px;} 12 .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} 13 .comment h6 { font-weight:700; font-size:14px;} 14 .para { margin-top:5px; text-indent:2em;background:#DDD;} 15 .block{width:80px;height:80px;background:#DDD;} 16 </style> 17 </head> 18 <body> 19 <p id="results"><b>Results: </b> </p> 20 <form> 21 <select name="single"> 22 <option>Single</option> 23 <option>Single2</option> 24 </select> 25 <select name="multiple" multiple="multiple"> 26 <option selected="selected">Multiple</option> 27 <option>Multiple2</option> 28 <option selected="selected">Multiple3</option> 29 </select><br/> 30 <input type="checkbox" name="check" value="check1"/> check1 31 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 32 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 33 <input type="radio" name="radio" value="radio2"/> radio2 34 </form> 35 </body> 36 <script language="JavaScript"> 37 $(function(){ 38 $("#results").click(function(){ 39 $("#results").append( "<br><tt>" + $("form").serialize() + "</tt><br>" ); 40 }); 41 }) 42 </script> 43 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>test</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 <script language="JavaScript" src="../../js/jquery-1.4.2.js"></script> 9 <style> 10 * { margin:0; padding:0;} 11 body { font-size:12px;} 12 .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} 13 .comment h6 { font-weight:700; font-size:14px;} 14 .para { margin-top:5px; text-indent:2em;background:#DDD;} 15 .block{width:80px;height:80px;background:#DDD;} 16 </style> 17 </head> 18 <body> 19 <p id="results"><b>Results: </b> </p> 20 <form> 21 <select name="single"> 22 <option>Single</option> 23 <option>Single2</option> 24 </select> 25 <select name="multiple" multiple="multiple"> 26 <option selected="selected">Multiple</option> 27 <option>Multiple2</option> 28 <option selected="selected">Multiple3</option> 29 </select><br/> 30 <input type="checkbox" name="check" value="check1"/> check1 31 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 32 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 33 <input type="radio" name="radio" value="radio2"/> radio2 34 </form> 35 </body> 36 <script language="JavaScript"> 37 $(function(){ 38 var fields = $("select, :radio").serializeArray(); 39 jQuery.each( fields, function(i, field){ 40 $("#results").append(field.value + " "); 41 }); 42 }) 43 </script> 44 </html>
实现跨域请求
域名：（英语：Domain Name），又称网域、网域名称，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。
跨域：两个不同域名之间的通信，称之为跨域。例如：http://www.baidu.com和http://www.sina.com.cn。
jQuery如何实现跨域请求？使用JSONP形式实现跨域
什么是JSONP
JSONP（JSON with Padding）是数据交换格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
由于同源策略，一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <title>实现跨域请求</title> 6 <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <input type="button" id="send" value="实现跨域"> 11 </body> 12 <script type="text/javascript"> 13 $(function(){ 14 $("#send").click(function(){ 15 //$.getJSON(url,data,callback); 16 // * url:请求路径 17 $.getJSON("sinaServlet?timeStamp="+new Date().getTime(),function(){ 18 alert("跨域请求成功啦。。。"); 19 }); 20 21 }); 22 }); 23 </script> 24 </html>
1 package app.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 public class SinaServlet extends HttpServlet { 12 13 public void doGet(HttpServletRequest request, HttpServletResponse response) 14 throws ServletException, IOException { 15 16 response.setContentType("text/html"); 17 PrintWriter out = response.getWriter(); 18 19 System.out.println("connection sina server success!"); 20 21 //jsonp1402020857020 22 String callback = request.getParameter("callback"); 23 24 System.out.println("callback = "+callback); 25 26 //假设将callback当作一个函数的函数名来处理:callback(参数) 27 //out.println("sina news!"); 28 String json = "{'msg':'sina news!'}"; 29 30 //服务器端进行响应时,构建了一个函数的调用体:callback(json) 31 out.println(callback+"("+json+")"); 32 33 } 34 35 public void doPost(HttpServletRequest request, HttpServletResponse response) 36 throws ServletException, IOException { 37 38 doGet(request, response); 39 } 40 41 }
JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.
JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
jQuery插件
* 研究jQuery插件机制
* 目的：
* 为了将来实际开发中，快速上手新的插件
* 为了将来大家面试的：独立制作插件
种类：
* 机制（分类）： * 封装对象方法的插件 * $(expr).each()：对象方法 * jQuery.fn.extend(object) * 封装全局函数的插件 * $.each()：全局函数 * jQuery.extend(object) * 选择器插件：这一类插件，现在几乎不用了。例如XPath插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 <!-- 引入jQuery文件 --> 10 <script src="../../js/jquery-1.4.2.js"></script> 11 <!-- 引入jQuery的插件文件 --> 12 <script src="test.js"></script> 13 </head> 14 <script type="text/javascript"> 15 $(function(){ 16 $("input").click(function(){ 17 var a = prompt("请输入一个数值"); //window对象的prompt():标准输入框 18 var b = prompt("请再输入一个数值"); 19 //minValue()和maxValue()两个方法不是jQuery的,但是调用和jQuery的方法一样. 20 var c = $.minValue(a,b); 21 var d = jQuery.maxValue(a,b); 22 alert("你输入的最大值是："+d+"\n你输入的最小值是："+c); 23 }); 24 }) 25 26 </script> 27 <body> 28 <input type="button" value="jQuery插件扩展测试"> 29 </body> 30 </html>
1 //测试extend()方法 2 jQuery.extend({ 3 minValue : function(a,b){ 4 return a < b ? a : b; 5 }, 6 maxValue : function(a,b){ 7 return a < b ? b : a; 8 } 9 }); 10 11 //JSON格式的数据内容(key/value格式),这种"key/value"的JSON格式其实就是javascript对象 12 //var method = { 13 // minValue : function(a,b){ 14 // return a < b ? a : b; 15 // }, 16 // maxValue : function(a,b){ 17 // return a < b ? b : a; 18 // } 19 //}
* 使用：
* 先引入jQuery文件
* 再引入jQuery的插件文件
* this的用法：（了解）
* 作用：
* 指代DOM对象：明确指代页面中的具体元素
* 指代jQuery对象：在插件中使用，基本都是jQuery对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 <script src="../../js/jquery-1.4.2.js"></script> 10 <script src="test.js"></script> 11 </head> 12 <script type="text/javascript"> 13 $(function(){ 14 $("input").click(function(){ 15 //this指代页面元素input标签 16 $(this).test(); 17 18 // $("intpu").test = function(){ 19 // this 20 // } 21 22 }); 23 }) 24 </script> 25 <body> 26 <input type="button" value="jQuery插件扩展测试"> 27 </body> 28 </html>
1 ////测试extend()方法 2 jQuery.fn.extend({ 3 test : function(){ 4 //谁调用test()方法,打印谁的value属性值 5 //this指代DOM对象还是jQuery对象?jQuery对象 6 //jQuery对象是数组对象,数组可以遍历 7 $.each(this,function(){ 8 alert($(this).val()); 9 }); 10 } 11 });
注意：尽量不用
* 举例：表单验证插件
1.导入jQuery.js和JQuery validation.js表单验证插件的js文件
2.使用：插件指定对应的jQuery版本（换版本可能导致插件失效）
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validation plug-in - main demo</title> 5 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 6 <script type="text/javascript" src="./js/jquery.js"></script> 7 <script type="text/javascript" src="./js/jquery.validate.js"></script> 8 9 <script type="text/javascript"> 10 $(function(){ 11 /* 12 * 如何不能满足验证需求时,自定义验证方法 13 * * $.validator.addMethod(name,method,message):固定写法 14 * * name:添加的方法的名字 15 * * method:一个函数,function(value,element,param){} 16 * * value:是元素的值,需要验证的元素的value属性值 17 * * element:是元素本身,对应页面的元素 18 * * param:是参数,调用自定义验证方法后的value值 19 * * message:就是自定义的错误提示(不用) 20 * label标签的错误提示 -> messages设置的错误提示 -> 自定义错误提示 21 */ 22 $.validator.addMethod("cartLength",function(value,element,param){ 23 //验证文本框的内容的长度 24 //1 获取到对应文本框内容的长度 25 var len = value.length; 26 27 //2 判断 28 if(len==15||len==18){ //len!=15&&len!=18 29 return true; 30 } 31 return false; 32 }); 33 $.validator.addMethod("cartCheck",function(value,element,param){ 34 //验证文本框的内容的长度 35 //1 获取到对应文本框内容的长度 36 var len = value.length; 37 38 //2 分情况判断 39 if(len==15){ 40 var p = /^[0-9]{15}$/; 41 var flag = p.test(value); 42 return flag; 43 } 44 if(len==18){ 45 var p = /^[0-9]{18}|[0-9]{17}x$/; 46 var flag = p.test(value); 47 return flag; 48 } 49 }); 50 /*******************************************/ 51 $("#empForm").validate({ 52 debug:true, 53 rules:{ 54 realname : "required", 55 gender : "required", 56 edu : "required", 57 cart : { 58 required : true, 59 cartLength : true, 60 cartCheck : true 61 } 62 }, 63 messages:{ 64 realname : "真实姓名不能为空", 65 /* 66 * 不起作用,不需要设置 67 * label标签的错误提示 -> messages设置的错误提示 68 */ 69 gender : "你没有第三种选择", 70 /* 71 * 下拉选框的验证,起作用的话: 72 * * 保证其中一个option选项的value值为空 73 * * 保证其中为空的option选项必须是第一个 74 */ 75 edu : "请选择你的学历", 76 cart : "请输入正确的身份证号码" 77 } 78 }); 79 80 }); 81 </script> 82 </head> 83 <body> 84 <p>员工信息录入</p> 85 <form name="empForm" id="empForm" method="post" action="test.html"> 86 <table border=1> 87 <tr> 88 <td>真实姓名(不能为空 ,没有其他要求)</td> 89 <td><input type="text" id="realname" name="realname" /> 90 </td> 91 </tr> 92 <tr> 93 <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td> 94 <td><input type="text" id="username" name="username" /></td> 95 </tr> 96 <tr> 97 <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> 98 <td><input type="password" id="psw" name="psw" style="width:120px" /></td> 99 </tr> 100 <tr> 101 <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> 102 <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td> 103 </tr> 104 <!-- 105 <label style="display: none" for="gender" class="error">请选择性别</label> 106 * for:设置对应元素的name属性值 107 * class:设置样式 108 * style:设置成隐藏 109 * 文本内容:错误提示信息 110 111 表单验证插件的错误提示信息,默认显示在第一个验证的元素的后面 112 113 研究表单验证插件的运行机制:会到对应的页面中查找是否存在对应label标签 114 * 对应页面中存在对应的label标签,表单验证插件利用对应页面中的label标签,进行错误信息的提示 115 * 对应页面中没有对应的label标签,表单验证插件通过底层代码,创建label标签,进行错误信息的提示 116 117 errorClass: "error", 118 validClass: "valid", 119 errorElement: "label", 120 121 // create label 122 label = $("<" + this.settings.errorElement + "/>") //<label></label> 123 .attr({"for": this.idOrName(element), generated: true})//<label for='gender'></label> 124 .addClass(this.settings.errorClass) //<label class='error' for='gender'></label> 125 .html(message || ""); //<label class='error' for='gender'>错误提示信息</label> 126 --> 127 <tr> 128 <td>性别(必选其一)</td> 129 <td> 130 <input type="radio" id="gender_male" value="m" name="gender"/>男 131 <input type="radio" id="gender_female" value="f" name="gender"/>女 132 <label style="display: none" for="gender" class="error">请选择性别</label> 133 </td> 134 </tr> 135 <tr> 136 <td>年龄(必填26-50):</td> 137 <td><input type="text" id="age" name="age" /></td> 138 </tr> 139 140 <tr> 141 <td>你的学历:</td> 142 <td> <select name="edu" id="edu"> 143 <option value="">－－请选择你的学历－－</option> 144 <option value="a">专科</option> 145 <option value="b">本科</option> 146 <option value="c">研究生</option> 147 <option value="e">硕士</option> 148 <option value="d">博士</option> 149 </select> 150 </td> 151 </tr> 152 153 <tr> 154 <td>出生日期(1982/09/21):</td> 155 <td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td> 156 </tr> 157 158 <tr> 159 <td>兴趣爱好:</td> 160 <td colspan="2"> 161 <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 162 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 163 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网 164 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游 165 <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物 166 <label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label> 167 </td> 168 </tr> 169 <tr> 170 <td align="left">电子邮箱:</td> 171 <td><input type="text" id="email" style="width:120px" name="email" /></td> 172 </tr> 173 <tr> 174 <td align="left">身份证(15-18):</td> 175 <td><input type="text" id="cart" style="width:200px" name="cart" /></td> 176 </tr> 177 <tr> 178 <td></td> 179 <td></td> 180 <td><input type="submit" name="firstname" id="firstname" value="保存"></td> 181 </tr> 182 </table> 183 184 </form> 185 <script language="JavaScript"> 186 187 </script> 188 189 </body> 190 </html>
1 /* 2 * Translated default messages for the jQuery validation plugin. 3 * Locale: CN 4 */ 5 jQuery.extend(jQuery.validator.messages, { 6 required: "必选字段", 7 remote: "请修正该字段", 8 email: "请输入正确格式的电子邮件", 9 url: "请输入合法的网址", 10 date: "请输入合法的日期", 11 dateISO: "请输入合法的日期 (ISO).", 12 number: "请输入合法的数字", 13 digits: "只能输入整数", 14 creditcard: "请输入合法的信用卡号", 15 equalTo: "请再次输入相同的值", 16 accept: "请输入拥有合法后缀名的字符串", 17 maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), 18 minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), 19 rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), 20 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), 21 max: jQuery.validator.format("请输入一个最大为 {0} 的值"), 22 min: jQuery.validator.format("请输入一个最小为 {0} 的值") 23 });
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 $.validator.setDefaults({ 14 submitHandler: function() { alert("submitted!"); } 15 }); 16 17 $().ready(function() { 18 // validate the comment form when it is submitted 19 $("#commentForm").validate(); 20 21 // validate signup form on keyup and submit 22 $("#signupForm").validate({ 23 rules: { 24 firstname: "required", 25 lastname: "required", 26 username: { 27 required: true, 28 minlength: 2 29 }, 30 password: { 31 required: true, 32 minlength: 5 33 }, 34 confirm_password: { 35 required: true, 36 minlength: 5, 37 equalTo: "#password" 38 }, 39 email: { 40 required: true, 41 email: true 42 }, 43 topic: { 44 required: "#newsletter:checked", 45 minlength: 2 46 }, 47 agree: "required" 48 }, 49 messages: { 50 firstname: "Please enter your firstname", 51 lastname: "Please enter your lastname", 52 username: { 53 required: "Please enter a username", 54 minlength: "Your username must consist of at least 2 characters" 55 }, 56 password: { 57 required: "Please provide a password", 58 minlength: "Your password must be at least 5 characters long" 59 }, 60 confirm_password: { 61 required: "Please provide a password", 62 minlength: "Your password must be at least 5 characters long", 63 equalTo: "Please enter the same password as above" 64 }, 65 email: "Please enter a valid email address", 66 agree: "Please accept our policy" 67 } 68 }); 69 70 // propose username by combining first- and lastname 71 $("#username").focus(function() { 72 var firstname = $("#firstname").val(); 73 var lastname = $("#lastname").val(); 74 if(firstname && lastname && !this.value) { 75 this.value = firstname + "." + lastname; 76 } 77 }); 78 79 //code to hide topic selection, disable for demo 80 var newsletter = $("#newsletter"); 81 // newsletter topics are optional, hide at first 82 var inital = newsletter.is(":checked"); 83 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 84 var topicInputs = topics.find("input").attr("disabled", !inital); 85 // show when newsletter is checked 86 newsletter.click(function() { 87 topics[this.checked ? "removeClass" : "addClass"]("gray"); 88 topicInputs.attr("disabled", !this.checked); 89 }); 90 }); 91 </script> 92 93 <style type="text/css"> 94 #commentForm { width: 500px; } 95 #commentForm label { width: 250px; } 96 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 97 #signupForm { width: 670px; } 98 #signupForm label.error { 99 margin-left: 10px; 100 width: auto; 101 display: inline; 102 } 103 #newsletter_topics label.error { 104 display: none; 105 margin-left: 103px; 106 } 107 </style> 108 109 </head> 110 <body> 111 112 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> 113 <div id="main"> 114 115 <p>Default submitHandler is set to display an alert into of submitting the form</p> 116 117 <form class="cmxform" id="commentForm" method="get" action=""> 118 <fieldset> 119 <legend>Please provide your name, email address (won't be published) and a comment</legend> 120 <p> 121 <label for="cname">Name (required, at least 2 characters)</label> 122 <input id="cname" name="name" class="required" minlength="2" /> 123 <p> 124 <label for="cemail">E-Mail (required)</label> 125 <input id="cemail" type="email" name="email" class="required" /> 126 </p> 127 <p> 128 <label for="curl">URL (optional)</label> 129 <input id="curl" type="url" name="url" /> 130 </p> 131 <p> 132 <label for="ccomment">Your comment (required)</label> 133 <textarea id="ccomment" name="comment" class="required"></textarea> 134 </p> 135 <p> 136 <input class="submit" type="submit" value="Submit"/> 137 </p> 138 </fieldset> 139 </form> 140 141 <form class="cmxform" id="signupForm" method="get" action=""> 142 <fieldset> 143 <legend>Validating a complete form</legend> 144 <p> 145 <label for="firstname">Firstname</label> 146 <input id="firstname" name="firstname" /> 147 </p> 148 <p> 149 <label for="lastname">Lastname</label> 150 <input id="lastname" name="lastname" /> 151 </p> 152 <p> 153 <label for="username">Username</label> 154 <input id="username" name="username" /> 155 </p> 156 <p> 157 <label for="password">Password</label> 158 <input id="password" name="password" type="password" /> 159 </p> 160 <p> 161 <label for="confirm_password">Confirm password</label> 162 <input id="confirm_password" name="confirm_password" type="password" /> 163 </p> 164 <p> 165 <label for="email">Email</label> 166 <input id="email" name="email" type="email" /> 167 </p> 168 <p> 169 <label for="agree">Please agree to our policy</label> 170 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 171 </p> 172 <p> 173 <label for="newsletter">I'd like to receive the newsletter</label> 174 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 175 </p> 176 <fieldset id="newsletter_topics"> 177 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 178 <label for="topic_marketflash"> 179 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 180 Marketflash 181 </label> 182 <label for="topic_fuzz"> 183 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 184 Latest fuzz 185 </label> 186 <label for="topic_digester"> 187 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 188 Mailing list digester 189 </label> 190 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 191 </fieldset> 192 <p> 193 <input class="submit" type="submit" value="Submit"/> 194 </p> 195 </fieldset> 196 </form> 197 198 <h3>Syntetic examples</h3> 199 <ul> 200 <li><a href="errorcontainer-demo.html">Error message containers in action</a></li> 201 <li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li> 202 <li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li> 203 <li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li> 204 <li><a href="custom-methods-demo.html">Custom methods and message display.</a></li> 205 <li><a href="dynamic-totals.html">Dynamic forms</a></li> 206 <li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li> 207 </ul> 208 <h3>Real-world examples</h3> 209 <ul> 210 <li><a href="milk/">Remember The Milk signup form</a></li> 211 <li><a href="marketo/">Marketo signup form</a></li> 212 <li><a href="multipart/">Buy and Sell a House multipart form</a></li> 213 <li><a href="captcha/">Remote captcha validation</a></li> 214 </ul> 215 216 <h3>Testsuite</h3> 217 <ul> 218 <li><a href="../test/">Validation Testsuite</a></li> 219 </ul> 220 221 </div> 222 223 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 224 </script> 225 <script type="text/javascript"> 226 _uacct = "UA-2623402-1"; 227 urchinTracker(); 228 </script> 229 </body> 230 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 <script src="js/messages_cn.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 //validate()方法就是表单验证方法 16 $("#commentForm").validate(); 17 18 }); 19 </script> 20 21 <style type="text/css"> 22 #commentForm { width: 500px; } 23 #commentForm label { width: 250px; } 24 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 25 #signupForm { width: 670px; } 26 #signupForm label.error { 27 margin-left: 10px; 28 width: auto; 29 display: inline; 30 } 31 #newsletter_topics label.error { 32 display: none; 33 margin-left: 103px; 34 } 35 </style> 36 37 </head> 38 <body> 39 40 <form class="cmxform" id="commentForm" method="get" action=""> 41 <fieldset> 42 <legend>Please provide your name, email address (won't be published) and a comment</legend> 43 <p> 44 <label for="cname">Name (required, at least 2 characters)</label> 45 <input id="cname" name="name" class="required" minlength="2" /> 46 <p> 47 <label for="cemail">E-Mail (required)</label> 48 <input id="cemail" type="email" name="email" class="required" /> 49 </p> 50 <p> 51 <label for="curl">URL (optional)</label> 52 <input id="curl" type="url" name="url" /> 53 </p> 54 <p> 55 <label for="ccomment">Your comment (required)</label> 56 <textarea id="ccomment" name="comment" class="required"></textarea> 57 </p> 58 <p> 59 <input class="submit" type="submit" value="Submit"/> 60 </p> 61 </fieldset> 62 </form> 63 64 </body> 65 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)æ¹æ³ 18 * * optoins:符åJSONæ ¼å¼çkey/valueæ ¼å¼ 19 */ 20 $("#signupForm").validate({ 21 rules: { 22 firstname: "required", 23 lastname: "required", 24 username: { 25 required: true, 26 minlength: 2 27 }, 28 password: { 29 required: true, 30 minlength: 5 31 }, 32 confirm_password: { 33 required: true, 34 minlength: 5, 35 equalTo: "#password" 36 }, 37 email: { 38 required: true, 39 email: true 40 }, 41 topic: { 42 required: "#newsletter:checked", 43 minlength: 2 44 }, 45 agree: "required" 46 }, 47 messages: { 48 firstname: "Please enter your firstname", 49 lastname: "Please enter your lastname", 50 username: { 51 required: "Please enter a username", 52 minlength: "Your username must consist of at least 2 characters" 53 }, 54 password: { 55 required: "Please provide a password", 56 minlength: "Your password must be at least 5 characters long" 57 }, 58 confirm_password: { 59 required: "Please provide a password", 60 minlength: "Your password must be at least 5 characters long", 61 equalTo: "Please enter the same password as above" 62 }, 63 email: "Please enter a valid email address", 64 agree: "Please accept our policy" 65 } 66 }); 67 }); 68 </script> 69 70 <style type="text/css"> 71 #commentForm { width: 500px; } 72 #commentForm label { width: 250px; } 73 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 74 #signupForm { width: 670px; } 75 #signupForm label.error { 76 margin-left: 10px; 77 width: auto; 78 display: inline; 79 } 80 #newsletter_topics label.error { 81 display: none; 82 margin-left: 103px; 83 } 84 </style> 85 86 </head> 87 <body> 88 89 <form class="cmxform" id="signupForm" method="get" action=""> 90 <fieldset> 91 <legend>Validating a complete form</legend> 92 <p> 93 <label for="firstname">Firstname</label> 94 <input id="firstname" name="firstname" /> 95 </p> 96 <p> 97 <label for="lastname">Lastname</label> 98 <input id="lastname" name="lastname" /> 99 </p> 100 <p> 101 <label for="username">Username</label> 102 <input id="username" name="username" /> 103 </p> 104 <p> 105 <label for="password">Password</label> 106 <input id="password" name="password" type="password" /> 107 </p> 108 <p> 109 <label for="confirm_password">Confirm password</label> 110 <input id="confirm_password" name="confirm_password" type="password" /> 111 </p> 112 <p> 113 <label for="email">Email</label> 114 <input id="email" name="email" type="email" /> 115 </p> 116 <p> 117 <label for="agree">Please agree to our policy</label> 118 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 119 </p> 120 <p> 121 <label for="newsletter">I'd like to receive the newsletter</label> 122 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 123 </p> 124 <fieldset id="newsletter_topics"> 125 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 126 <label for="topic_marketflash"> 127 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 128 Marketflash 129 </label> 130 <label for="topic_fuzz"> 131 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 132 Latest fuzz 133 </label> 134 <label for="topic_digester"> 135 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 136 Mailing list digester 137 </label> 138 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 139 </fieldset> 140 <p> 141 <input class="submit" type="submit" value="Submit"/> 142 </p> 143 </fieldset> 144 </form> 145 146 </body> 147 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)方法 18 * * optoins:符合JSON格式的key/value格式 19 * { 20 * rules : { 21 * key : value 22 * }, 23 * messages : { 24 * key : value 25 * } 26 * rules:设置表单验证对应页面元素使用的验证方法 27 * key:设置表单验证对应页面元素的name属性值 28 * value:设置表单验证对应使用的验证方法 29 * * required:验证不能为空 30 * messages:设置表单验证对应页面元素的错误提示信息 31 * key:设置表单验证对应页面元素的name属性值 32 * value:设置表单验证的错误提示信息 33 * } 34 */ 35 $("#signupForm").validate({ 36 rules: { 37 firstname: "required" 38 }, 39 messages: { 40 firstname: "请输入你的名" 41 } 42 }); 43 }); 44 </script> 45 46 <style type="text/css"> 47 #commentForm { width: 500px; } 48 #commentForm label { width: 250px; } 49 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 50 #signupForm { width: 670px; } 51 #signupForm label.error { 52 margin-left: 10px; 53 width: auto; 54 display: inline; 55 } 56 #newsletter_topics label.error { 57 display: none; 58 margin-left: 103px; 59 } 60 </style> 61 62 </head> 63 <body> 64 65 <form class="cmxform" id="signupForm" method="get" action=""> 66 <fieldset> 67 <legend>Validating a complete form</legend> 68 <p> 69 <label for="firstname">Firstname</label> 70 <input id="firstname" name="firstname" /> 71 </p> 72 <p> 73 <label for="lastname">Lastname</label> 74 <input id="lastname" name="lastname" /> 75 </p> 76 <p> 77 <label for="username">Username</label> 78 <input id="username" name="username" /> 79 </p> 80 <p> 81 <label for="password">Password</label> 82 <input id="password" name="password" type="password" /> 83 </p> 84 <p> 85 <label for="confirm_password">Confirm password</label> 86 <input id="confirm_password" name="confirm_password" type="password" /> 87 </p> 88 <p> 89 <label for="email">Email</label> 90 <input id="email" name="email" type="email" /> 91 </p> 92 <p> 93 <label for="agree">Please agree to our policy</label> 94 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 95 </p> 96 <p> 97 <label for="newsletter">I'd like to receive the newsletter</label> 98 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 99 </p> 100 <fieldset id="newsletter_topics"> 101 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 102 <label for="topic_marketflash"> 103 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 104 Marketflash 105 </label> 106 <label for="topic_fuzz"> 107 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 108 Latest fuzz 109 </label> 110 <label for="topic_digester"> 111 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 112 Mailing list digester 113 </label> 114 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 115 </fieldset> 116 <p> 117 <input class="submit" type="submit" value="Submit"/> 118 </p> 119 </fieldset> 120 </form> 121 122 </body> 123 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)方法 18 * * optoins:符合JSON格式的key/value格式 19 * { 20 * rules : { 21 * key : value 22 * }, 23 * messages : { 24 * key : value 25 * } 26 * rules:设置表单验证对应页面元素使用的验证方法 27 * key:设置表单验证对应页面元素的name属性值 28 * value:设置表单验证对应使用的验证方法 29 * * required:验证不能为空(required: true实际上等价于required) 30 * * minlength:验证最小长度 31 * * equalTo:验证当前元素内容是否等于指定元素内容 32 * * email:验证email地址格式是否正确 33 * messages:设置表单验证对应页面元素的错误提示信息 34 * key:设置表单验证对应页面元素的name属性值 35 * value:设置表单验证的错误提示信息 36 * } 37 */ 38 $("#signupForm").validate({ 39 rules: { 40 firstname: "required", 41 lastname: "required", 42 username: { 43 required: true, 44 minlength: 2 45 }, 46 password: { 47 required: true, 48 minlength: 5 49 }, 50 confirm_password: { 51 required: true, 52 minlength: 5, 53 equalTo: "#password" 54 }, 55 email: { 56 required: true, 57 email: true 58 }, 59 topic: { 60 required: "#newsletter:checked", 61 minlength: 2 62 }, 63 agree: "required" 64 }, 65 messages: { 66 firstname: "请输入你的名" 67 } 68 }); 69 }); 70 </script> 71 72 <style type="text/css"> 73 #commentForm { width: 500px; } 74 #commentForm label { width: 250px; } 75 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 76 #signupForm { width: 670px; } 77 #signupForm label.error { 78 margin-left: 10px; 79 width: auto; 80 display: inline; 81 } 82 #newsletter_topics label.error { 83 display: none; 84 margin-left: 103px; 85 } 86 </style> 87 88 </head> 89 <body> 90 91 <form class="cmxform" id="signupForm" method="get" action=""> 92 <fieldset> 93 <legend>Validating a complete form</legend> 94 <p> 95 <label for="firstname">Firstname</label> 96 <input id="firstname" name="firstname" /> 97 </p> 98 <p> 99 <label for="lastname">Lastname</label> 100 <input id="lastname" name="lastname" /> 101 </p> 102 <p> 103 <label for="username">Username</label> 104 <input id="username" name="username" /> 105 </p> 106 <p> 107 <label for="password">Password</label> 108 <input id="password" name="password" type="text" /> 109 </p> 110 <p> 111 <label for="confirm_password">Confirm password</label> 112 <input id="confirm_password" name="confirm_password" type="text" /> 113 </p> 114 <p> 115 <label for="email">Email</label> 116 <input id="email" name="email" type="email" /> 117 </p> 118 <p> 119 <label for="agree">Please agree to our policy</label> 120 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 121 </p> 122 <p> 123 <label for="newsletter">I'd like to receive the newsletter</label> 124 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 125 </p> 126 <fieldset id="newsletter_topics"> 127 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 128 <label for="topic_marketflash"> 129 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 130 Marketflash 131 </label> 132 <label for="topic_fuzz"> 133 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 134 Latest fuzz 135 </label> 136 <label for="topic_digester"> 137 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 138 Mailing list digester 139 </label> 140 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 141 </fieldset> 142 <p> 143 <input class="submit" type="submit" value="Submit"/> 144 </p> 145 </fieldset> 146 </form> 147 148 </body> 149 </html>
JQueryUI入门
1.导入js文件
2.导入css文件
3.编辑HTML文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_如何引入jQueryUI.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 10 <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 11 <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script> 12 </head> 13 <script> 14 $(function() { 15 //构建了JSON格式的数据内容,自动提示的备选内容 16 var availableTags = [ 17 "ActionScript", 18 "AppleScript", 19 "Asp", 20 "BASIC", 21 "C", 22 "C++", 23 "Clojure", 24 "COBOL", 25 "ColdFusion", 26 "Erlang", 27 "Fortran", 28 "Groovy", 29 "Haskell", 30 "Java", 31 "JavaScript", 32 "Lisp", 33 "Perl", 34 "PHP", 35 "Python", 36 "Ruby", 37 "Scala", 38 "Scheme" 39 ]; 40 //autocomplete()方法提供自动提示的方法 41 $( "#tags" ).autocomplete({ 42 source: availableTags 43 }); 44 }); 45 </script> 46 <body> 47 <input id="tags"> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_如何引入jQueryUI.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 10 <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 11 <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script> 12 <script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script> 13 </head> 14 <script> 15 $(function() { 16 $( "#datepicker" ).datepicker(); 17 }); 18 </script> 19 <body> 20 <input type="text" id="datepicker"> 21 </body> 22 </html>
合群是堕落的开始 优秀的开始是孤行
