JQuery笔记

2019年11月18日 阅读数:143
这篇文章主要向大家介绍JQuery笔记,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

jQuery概要

 JavaWeb和框架内容  javascript

 javascript和javascript类库(框架)

        * 定义:封装了不少预约义的对象和实用函数。
            * javascript脚本语言是面向对象的。
        * 能帮助使用者创建有高难度交互的 Web2.0 特性的富客户端页面, 而且兼容各大浏览器。
            * Web1.0和Web2.0* Web1.0:之内容为主的网站(门户网站)
                * Web2.0:以人的关系为主的网站(社交网站)
                * Web3.0:基于移动互联网的社交网站
            * (富)胖客户端页面和瘦客户端页面
                * (富)胖客户端页面:静态页面加上操做(交互)
                * 瘦客户端页面:静态页面

 

流行的javascript库:

当前流行的 JavaScript 库有:css

jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR

推荐给你们一个网站:www.open-open.com上百种js库html

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的文档很是丰富
View Code

 

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元素
View Code

 

DOM解析HTML页面,将页面元素解释为元素节点、属性节点和文本节点。
而经过DOM解析HTML页面元素,所获得的DOM元素就是DOM对象。
DOM对象可使用JavaScript中的方法。

 jQuery对象(底层仍是DOM对象):经过jQuery包装DOM对象后产生的对象java

jQuery对象就是经过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的。
虽然jQuery对象是包装DOM对象后产生的,可是jQuery没法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
虽然jQuery对象是包装DOM对象后产生的,可是jQuery没法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。乱使用会报错。
约定:若是获取的是 jQuery 对象, 那么要在变量前面加上 $。

DOM对象转换成jQuery对象:$(DOM对象)jquery

转换后就可使用jQuery中的方法了git

jQuery对象转换成DOM对象:
                * jQuery对象是数组对象:jQuery对象[索引值]
                * jQuery提供了get(index)方法

 

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)  jQuery对象是一个数组对象,能够经过[index]的方法,来获得相应的DOM对象程序员


(2) jQuery自己提供,经过.get(index)方法,获得相应的DOM对象
面试

比较:ajax

* DOM对象与jQuery对象互操做?不能够
* jQuery相对于DOM来说,具备比较完善的事情处理机制

JQuery选择器


            * 选择器是jQuery中的根基json

      

1.什么是jQuery选择器
 jQuery中的选择器彻底集成了CSS的风格。
 利用jQuery选择器,能够很是便捷和快速地找出特定的DOM元素。
 学会使用选择器是学习jQuery的基础。
2.jQuery选择器的优点
 简介的写法:
    $( ) 函数在不少javascript类库中都被做为一个选择器函数来使用,在jQuery中也不例外。
3.支持CSS1到CSS3选择器
    jQuery选择器支持CSS一、CSS2的所有和CSS3的部分选择器,同时拥有少许独有的选择器。
    使用jQuery选择器时无需考虑浏览器是否支持这些选择器。
4.完善的处理机制

jQuery的九大选择器(分类)

A.基本选择器:

基本选择器是 jQuery 中最经常使用的选择器, 也是最简单的选择器, 它经过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 容许重复使用).

一、#id     用法: $(”#myDiv”);    返回值  单个元素的组成的集合

       说明: 这个就是直接选择html中的id=”myDiv”

二、Element       用法: $(”div”)     返回值  集合元素

       说明: element的英文翻译过来是”元素”,因此element其实就是html已经定义的标签元素,例如 div, input, a等等.

三、class          用法: $(”.myClass”)      返回值  集合元素

       说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(由于在同一html页面中class是能够存在多个一样值的).

四、*          用法: $(”*”)      返回值  集合元素

      说明: 匹配全部元素,多用于结合上下文来搜索

五、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”区分开.
二、parent > child 用法:

 

$(”form > input”) ;    返回值  集合元素

      说明: 在给定的父元素下匹配全部子元素.注意:要区分好后代元素与子元素
三、prev + next

 用法: $(”label + input”) ;   返回值  集合元素

      说明: 匹配全部紧接在 prev 元素后的 next 元素
四、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.基础过滤选择器:

一、:first用法: $(”tr:first”) ;   返回值  单个元素的组成的集合
      说明: 匹配找到的第一个元素
二、:last用法: $(”tr:last”)   返回值  集合元素
      说明: 匹配找到的最后一个元素.与 :first 相对应.
三、:not(selector)用法: $(”input:not(:checked)”)返回值  集合元素
     说明: 去除全部与给定选择器匹配的元素.有点相似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
四、:even用法: $(”tr:even”)   返回值  集合元素
     说明: 匹配全部索引值为偶数的元素,从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,由于是从0开始计数,因此table中的第一个tr就为偶数0.
五、: odd用法: $(”tr:odd”) 返回值  集合元素
      说明: 匹配全部索引值为奇数的元素,和:even对应,从 0 开始计数.
六、:eq(index)用法: $(”tr:eq(0)”)    返回值  集合元素
      说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
七、:gt(index)用法: $(”tr:gt(0)”)    返回值  集合元素
说明: 匹配全部大于给定索引值的元素.
八、:lt(index)用法: $(”tr:lt(2)”)    返回值  集合元素  
      说明: 匹配全部小于给定索引值的元素.
九、:header(固定写法)用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
      说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
十、: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.内容过滤选择器

内容过滤选择器的过滤规则主要体如今它所包含的子元素和文本内容上
一、:contains(text)用法: $(”div:contains(’John’)”)    返回值  集合元素
      说明: 匹配包含给定文本的元素.这个选择器比较有用,当咱们要选择的不是dom标签元素时,它就派上了用场了,它的做用是查找被标签”围”起来的文本内容是否符合指定的内容的.
二、:empty用法: $(”td:empty”)   返回值  集合元素
      说明: 匹配全部不包含子元素或者文本的空元素
三、:has(selector)
      用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素
      说明: 匹配含有选择器所匹配的元素的元素.这个解释须要好好琢磨,可是一旦看了使用的例子就彻底清楚了:给全部包含p元素的div标签加上class=”test”.
四、: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.可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
一、:hidden用法: $(”tr:hidden”)  返回值  集合元素
     说明: 匹配全部的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.一样,要在脑海中完全分清楚冒号”:”, 点号”.”和逗号”,”的区别.
二、: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.属性过滤选择器

属性过滤选择器的过滤规则是经过元素的属性来获取相应的元素
一、[attribute]用法: $(”div[id]“) ;  返回值  集合元素
      说明: 匹配包含给定属性的元素. 例子中是选取了全部带”id”属性的div标签.
二、[attribute=value]用法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素
      说明: 匹配给定的属性是某个特定值的元素.例子中选取了全部 name 属性是 newsletter 的 input 元素.
三、[attribute!=value]用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素
      说明: 匹配全部不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).以前看到的 :not 派上了用场.
四、[attribute^=value]用法: $(”input[name^=‘news’]“)  返回值  集合元素
      说明: 匹配给定的属性是以某些值开始的元素.,咱们又见到了这几个相似于正则匹配的符号.如今想忘都忘不掉了吧?!
五、[attribute$=value]用法: $(”input[name$=‘letter’]“)  返回值  集合元素
     说明: 匹配给定的属性是以某些值结尾的元素.
六、[attribute*=value]用法: $(”input[name*=‘man’]“)   返回值  集合元素
     说明: 匹配给定的属性是以包含某些值的元素.
七、[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.子元素过滤选择器
一、:nth-child(index/even/odd/equation)用法: $(”ul li:nth-child(2)”)   返回值  集合元素
      说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和以前说的基础过滤(Basic Filters)中的 eq() 有些相似,不一样的地方就是前者是从0开始,后者是从1开始.
二、:first-child用法: $(”ul li:first-child”)    返回值  集合元素
      说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每一个父元素匹配一个子元素.这里须要特别点的记忆下区别.
三、:last-child用法: $(”ul li:last-child”)      返回值  集合元素
      说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每一个父元素匹配一个子元素.
 四、: 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.表单对象属性过滤选择器

      此选择器主要对所选择的表单元素进行过滤
一、:enabled用法: $(”input:enabled”)    返回值  集合元素
      说明: 匹配全部可用元素.意思是查找全部input中不带有disabled=”disabled”的input.不为disabled,固然就为enabled啦.
二、:disabled用法: $(”input:disabled”)    返回值  集合元素
      说明: 匹配全部不可用元素.与上面的那个是相对应的.
三、:checked用法: $(”input:checked”)   返回值  集合元素
      说明: 匹配全部选中的被选中元素(复选框、单选框等,不包括select中的option).这话提及来有些绕口.
四、: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.表单选择器

一、:input用法: $(”:input”) ;   返回值  集合元素
      说明:匹配全部 input, textarea, select 和 button 元素
二、:text用法: $(”:text”) ;  返回值  集合元素
      说明: 匹配全部的单行文本框.
三、:password用法: $(”:password”) ; 返回值  集合元素
      说明: 匹配全部密码框.
四、:radio用法: $(”:radio”) ; 返回值  集合元素
     说明: 匹配全部单选按钮.
五、:checkbox用法: $(”:checkbox”) ; 返回值  集合元素
      说明: 匹配全部复选框
六、:submit用法: $(”:submit”) ;   返回值  集合元素
      说明: 匹配全部提交按钮.
七、:image用法: $(”:image”)   返回值  集合元素
      说明: 匹配全部图像域.
八、:reset用法: $(”:reset”) ;  返回值  集合元素
      说明: 匹配全部重置按钮.
九、:button用法: $(”:button”) ;  返回值  集合元素
      说明: 匹配全部按钮.这个包括直接写的元素button.
十、:file用法: $(”:file”) ;  返回值  集合元素
     说明: 匹配全部文件域.
十一、: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="&lt;--" />
211        <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
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="&lt;--" />
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="&lt;==" />
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>
事件切换hover()
 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>
事件切换toggle()

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>
Ajax.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 %>
Ajax.jsp

$.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>
$.getScript()方法
 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>
$.getScript()方法

$.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>
$.getJSON()方法

序列化元素

                * 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>
Test_1
 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>
Test_2

实现跨域请求

域名:(英语: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>
Test.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 //}
Test.js

            * 使用:
                * 先引入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>
Test.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 });
Test.js

注意:尽可能不用
        * 举例:表单验证插件

 

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>
emp_cn.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 });
messages.js
  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>
index1.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>
index2.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>
index3.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>
index4.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>
index5.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>
JQueryUI.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">