您的位置: 首页  >  IT文章  >  J2EE学习篇之--JQuery技术具体解释 简单介绍： 工具： jQuery对象 jQuery选择器 可见度过滤选择器： jQuery中的DOM操作 jQuery中的事件 jQuery的表单验证 jQuery中封装的Ajax请求

J2EE学习篇之--JQuery技术具体解释 简单介绍： 工具： jQuery对象 jQuery选择器 可见度过滤选择器： jQuery中的DOM操作 jQuery中的事件 jQuery的表单验证 jQuery中封装的Ajax请求

分类: IT文章 • 2022-06-07 21:06:15

前面我们解说了的J2EE的技术都是服务端的技术，以下我们来看一下前端的一些开发技术，这一篇我们来看一下jQuery技术


jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多

javascript高手增加其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做很多其它的事情。
它是轻量级的js库(压缩后仅仅有21k) ，这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个高速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，而且方便地为站点提供AJAX交互。
jQuery另一个比較大的优势是，它的文档说明非常全，并且各种应用也说得非常具体，同一时候还有很多成熟的插件可供选择。

jQuery可以使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，仅仅需定义id就可以。


工具：

我们在使用MyEclipse中编写jQuery的时候，是没有不论什么提示的，所以写代码非常难受的，我们须要借助额外的工具Aptana，这个在编写js，jQuery，Ajax等都会有相关的提示，详细怎样在MyEclipse中加入这个工具，看例如以下的一篇文章：

http://blog.csdn.net/jiangwei0910410003/article/details/28423545


jQuery的一个简单样例：

   <!--引入jquery的js库-->
    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>
    <script language="JavaScript">
      $(document).ready(function(){//等待dom元素载入完成,相似window.onload;
          alert("您好,我是张三丰");
      });
    </script>
这里要注意的是一定要记得引入jquery的js库：jquery-1.4.2.js文件


jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 假设一个对象是 jQuery 对象, 那么它就能够使用 jQuery 里的方法: $(“#test”).html();
比方： 
$("#test").html() 意思是指：获取ID为test的元素内的html代码。当中html()是jQuery里的方法 
这段代码等同于用DOM实现代码： 
document.getElementById(" test ").innerHTML; 
尽管jQuery对象是包装DOM对象后产生的，可是jQuery无法使用DOM对象的不论什么方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：假设获取的是 jQuery 对象, 那么要在变量前面加上 $. 
var $variable = jQuery对象
var variable = DOM对象


DOM对象转化成jQuery对象

对于已经是一个DOM对象，仅仅须要用$()把DOM对象包装起来，就能够获得一个jQuery对象了。$(DOM对象) 

J2EE学习篇之--JQuery技术具体解释 简单介绍： 工具： jQuery对象 jQuery选择器 可见度过滤选择器： jQuery中的DOM操作 jQuery中的事件 jQuery的表单验证 jQuery中封装的Ajax请求

转换后就能够使用 jQuery 中的方法了


jQuery对象转化成DOM对象

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
(1) jQuery对象是一个数组对象，能够通过[index]的方法，来得到对应的DOM对象

J2EE学习篇之--JQuery技术具体解释 简单介绍： 工具： jQuery对象 jQuery选择器 可见度过滤选择器： jQuery中的DOM操作 jQuery中的事件 jQuery的表单验证 jQuery中封装的Ajax请求

(2) jQuery本身提供，通过.get(index)方法，得到对应的DOM对象                        

J2EE学习篇之--JQuery技术具体解释 简单介绍： 工具： jQuery对象 jQuery选择器 可见度过滤选择器： jQuery中的DOM操作 jQuery中的事件 jQuery的表单验证 jQuery中封装的Ajax请求


jQuery选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
jQuery 选择器的长处:
简洁的写法                                                                                    
${“#id”}   等价于    document.getElementById("id");
${“tagName”}     等价于   document.getElementsByTagName("tagName");

完好的事件处理机制
val()获得第一个匹配元素的当前值.

//若网页中没有id=value的元素,浏览器会报错
document.getElementById("username").value;
   
//须要推断document.getElementById("username")是否存在



//使用JQUERY处理即使不存在也不会报错
var $username=$("#username");

alert("^^^ "+$username.val());


//注意:在javaScript中函数返回值为空,表示false







基本选择器：


基本选择器是 jQuery 中最经常使用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 仅仅能使用一次, class 同意反复使用).
1、#id使用方法: $(”#myDiv”);    返回值  单个元素的组成的集合

说明: 这个就是直接选择html中的id=”myDiv”
2、Element使用方法: $(”div”)     返回值  集合元素

说明: element的英文翻译过来是”元素”,所以element事实上就是html已经定义的标签元素,比如 div, input, a 等等.
3、class 使用方法: $(”.myClass”)      返回值  集合元素

说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(由于在同一html页面中class是能够存在多个相同值的).
4、*使用方法: $(”*”)      返回值  集合元素

说明: 匹配全部元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN      使用方法: $(”div,span,p.myClass”)    返回值  集合元素

说明: 将每个选择器匹配到的元素合并后一起返回.你能够指定随意多个选择器, 并将匹配到的元素合并到一个结果内.当中p.myClass是表示匹配元素

p class=”myClass”





基本选择器演示样例：


改变 id 为 one 的元素的背景色为 #0000FF

改变 class 为 mini 的全部元素的背景色为 #FF0033

改变元素名为 <div> 的全部元素的背景色为 #00FFFF

改变全部元素的背景色为 #00FF33

改变全部的<span>元素和 id 为 two 的元素的背景色为 #3399FF







层次选择器：


假设想通过 DOM 元素之间的层次关系来获取特定元素, 比如后代元素, 子元素, 相邻元素, 兄弟元素等, 则须要使用层次选择器.
1 、ancestor descendant

使用方法: $(”form input”) ;   返回值  集合元素

说明: 在给定的祖先元素下匹配全部后代元素.这个要以下讲的”parent > child”区分开.
2、parent > child 使用方法: $(”form > input”) ;    返回值  集合元素

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

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

说明: 匹配全部紧接在 prev 元素后的 next 元素
4、prev ~ siblings

使用方法: $(”form ~ input”) ;    返回值  集合元素

说明: 匹配 prev 元素之后的全部 siblings 元素.注意:是匹配之后的元素,不包括该元素在内,而且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意:  (“prev ~ div”) 选择器仅仅能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 仅仅要是同辈节点就能够选取





层次选择器演示样例：


改变全部td中<a>标签的字体

改变全部td中但不是td孙子下面的<a>标签的颜色

改变id为one的下一个td背景色

改变id为two的全部div的背景色









过滤选择器：


过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

依照不同的过滤规则, 过滤选择器能够分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.





基础过滤选择器：


1、:first

使用方法: $(”tr:first”) ;  返回值  单个元素的组成的集合

      说明: 匹配找到的第一个元素
2、:last

使用方法: $(”tr:last”)  返回值  集合元素

      说明: 匹配找到的最后一个元素.与 :first 相相应.
3、:not(selector)

使用方法: $(”input:not(:checked)”)返回值  集合元素

     说明: 去除全部与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even

使用方法: $(”tr:even”)  返回值  集合元素

     说明: 匹配全部索引值为偶数的元素，从 0 開始计数.js的数组都是从0開始计数的.比如要选择table中的行,由于是从0開始计数,所以table中的第一个tr就为偶数0.
5、: odd

使用方法: $(”tr:odd”) 返回值  集合元素

      说明: 匹配全部索引值为奇数的元素,和:even相应,从 0 開始计数.


6、:eq(index) 使用方法: $(”tr:eq(0)”)    返回值  集合元素

      说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号中面的是索引值,不是元素排列数.
7、:gt(index) 使用方法: $(”tr:gt(0)”)    返回值  集合元素

说明: 匹配全部大于给定索引值的元素.
8、:lt(index) 使用方法: $(”tr:lt(2)”)    返回值  集合元素  

      说明: 匹配全部小于给定索引值的元素.
9、:header(固定写法) 使用方法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素

      说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这种标题元素.
10、:animated(固定写法)   返回值  集合元素

      说明: 匹配全部正在运行动画效果的元素 





基础过滤选择器演示样例：



改变第一个 div 元素的背景色为 #0000FF

改变最后一个 div 元素的背景色为 #0000FF

改变class不为 one 的全部 div 元素的背景色为 #0000FF

改变索引值为偶数的 div 元素的背景色为 #0000FF

改变索引值为奇数的 div 元素的背景色为 #0000FF

改变索引值为大于 3 的 div 元素的背景色为 #0000FF

改变索引值为等于 3 的 div 元素的背景色为 #0000FF

改变索引值为小于 3 的 div 元素的背景色为 #0000FF

改变全部的标题元素的背景色为 #0000FF

改变当前正在运行动画的全部元素的背景色为 #0000FF














内容过滤选择器：


内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上
1、:contains(text) 使用方法: $(”div:contains(’John’)”)    返回值  集合元素

      说明: 匹配包括给定文本的元素.这个选择器比較实用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty 使用方法: $(”td:empty”)   返回值  集合元素

      说明: 匹配全部不包括子元素或者文本的空元素
3、:has(selector)

      使用方法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素

      说明: 匹配含有选择器所匹配的元素的元素.这个解释须要好好琢磨,可是一旦看了使用的样例就全然清楚了:给全部包括p元素的div标签加上class=”test”.
4、:parent 使用方法: $(”td:parent”)   返回值  集合元素

      说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.





内容过滤选择器演示样例：



改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF

改变不包括子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF

改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF

改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF

改变不含有文本 di; 的 div 元素的背景色











可见度过滤选择器：


可见度过滤选择器是依据元素的可见和不可见状态来选择对应的元素
1、:hidden 使用方法: $(”tr:hidden”)  返回值  集合元素

     说明: 匹配全部的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.相同,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的差别.
2、:visible 使用方法: $(”tr:visible”)  返回值  集合元素

    说明: 匹配全部的可见元素.





可见度过滤选择器演示样例：



改变全部可见的div元素的背景色为 #0000FF

选取全部不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF

选取全部的文本隐藏域, 并打印它们的值









属性过滤选择器：


属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素
1、[attribute] 使用方法: $(”div[id]“) ;  返回值  集合元素

      说明: 匹配包括给定属性的元素. 样例中是选取了全部带”id”属性的div标签.
2、[attribute=value] 使用方法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素

      说明: 匹配给定的属性是某个特定值的元素.样例中选取了全部 name 属性是 newsletter 的 input 元素.
3、[attribute!=value] 使用方法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素

      说明: 匹配全部不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value] 使用方法: $(”input[name^=‘news’]“)  返回值  集合元素 

      说明: 匹配给定的属性是以某些值開始的元素.,我们又见到了这几个类似于正则匹配的符号.如今想忘都忘不掉了吧?!


5、[attribute$=value] 使用方法: $(”input[name$=‘letter’]“)  返回值  集合元素 

     说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value] 使用方法: $(”input[name*=‘man’]“)   返回值  集合元素

     说明: 匹配给定的属性是以包括某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN] 使用方法: $(”input[id][name$=‘man’]“)  返回值  集合元素

     说明: 复合属性选择器,须要同一时候满足多个条件时使用.又是一个组合,这样的情况我们实际使用的时候非经常常使用.这个样例中选择的是全部含有 id 属性,而且它的 name 属性是以 man 结尾的元素.





属性过滤选择器演示样例：



选取下列元素,改变其背景色为 #0000FF

含有属性title 的div元素.

属性title值等于"test"的div元素.

属性title值不等于"test"的div元素(没有属性title的也将被选中).

属性title值 以"te"開始 的div元素.

属性title值 以"est"结束 的div元素.

属性title值 含有"es"的div元素.

选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素











子元素过滤选择器：


1、:nth-child(index/even/odd/equation) 使用方法: $(”ul li:nth-child(2)”)   返回值  集合元素

      说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0開始,后者是从1開始.
2、:first-child 使用方法: $(”ul li:first-child”)    返回值  集合元素 

      说明: 匹配第一个子元素.’:first’ 仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素.这里须要特别点的记忆下差别.
3、:last-child 使用方法: $(”ul li:last-child”)      返回值  集合元素

      说明: 匹配最后一个子元素.’:last’仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素.
4、: only-child 使用方法: $(”ul li:only-child”)   返回值  集合元素 

      说明: 假设某个元素是父元素中唯一的子元素,那将会被匹配.假设父元素中含有其它元素,那将不会被匹配.意思就是:仅仅有一个子元素的才会被匹配!





nth-child() 选择器具体解释例如以下：

(1):nth-child(even/odd): 能选取每一个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每一个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每一个父元素下的索引值是 3 的倍数 的元素

(3):nth-child(3n + 1): 能选取每一个父元素下的索引值是 3n + 1的元素





子元素过滤选择器演示样例：





选取下列元素,改变其背景色为 #0000FF

每一个class为one的div父元素下的第2个子元素.

每一个class为one的div父元素下的第一个子元素

每一个class为one的div父元素下的最后一个子元素

假设class为one的div父元素下的只唯独一个子元素，那么选中这个子元素









表单对象属性过滤选择器：


此选择器主要对所选择的表单元素进行过滤
1、:enabled 使用方法: $(”input:enabled”)    返回值  集合元素

      说明: 匹配全部可用元素.意思是查找全部input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled 使用方法: $(”input:disabled”)    返回值  集合元素

      说明: 匹配全部不可用元素.与上面的那个是相相应的.
3、:checked 使用方法: $(”input:checked”)   返回值  集合元素

      说明: 匹配全部选中的被选中元素(复选框、单选框等，不包含select中的option).这话说起来有些绕口.
4、:selected 使用方法: $(”select option:selected”)   返回值  集合元素

       说明: 匹配全部选中的option元素.





表单属性过滤选择器：



利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值

利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值

利用 jQuery 对象的 length 属性获取多选框选中的个数

利用 jQuery 对象的 text() 方法获取下拉框选中的内容











表单选择器：


1、:input 使用方法: $(”:input”) ;   返回值  集合元素

      说明:匹配全部 input, textarea, select 和 button 元素 
2、:text 使用方法: $(”:text”) ;  返回值  集合元素

      说明: 匹配全部的单行文本框.
3、:password 使用方法: $(”:password”) ; 返回值  集合元素

      说明: 匹配全部password框.
4、:radio 使用方法: $(”:radio”) ; 返回值  集合元素

     说明: 匹配全部单选button.
5、:checkbox 使用方法: $(”:checkbox”) ; 返回值  集合元素

      说明: 匹配全部复选框
6、:submit 使用方法: $(”:submit”) ;   返回值  集合元素

      说明: 匹配全部提交button.


7、:image 使用方法: $(”:image”)   返回值  集合元素

      说明: 匹配全部图像域.
8、:reset 使用方法: $(”:reset”) ;  返回值  集合元素

      说明: 匹配全部重置button.
9、:button 使用方法: $(”:button”) ;  返回值  集合元素

      说明: 匹配全部按钮.这个包含直接写的元素button.
10、:file 使用方法: $(”:file”) ;  返回值  集合元素

     说明: 匹配全部文件域.
11、:hidden 使用方法: $(”input:hidden”) ; 返回值  集合元素

      说明: 匹配全部不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.

      注意: 要选取input中为hidden值的方法就是上面样例的使用方法,可是直接使用 “:hidden” 的话就是匹配页面中全部的不可见元素,包含宽度或高度为0的,





jQuery中的DOM操作


DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口能够轻松地訪问页面中全部的标准组件

DOM 操作的分类:

DOM Core: DOM Core 并不专属于 JavaScript, 不论什么一种支持 DOM 的程序设计语言都能够使用它. 它的用途并不是仅限于处理网页, 也能够用来处理不论什么一种是用标记语言编写出来的文档, 比如: XML

HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有很多专属于 HTML-DOM 的属性

CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性





内部插入节点：





append(content) :向每一个匹配的元素的内部的结尾处追加内容



appendTo(content) :将每一个匹配的元素追加到指定的元素中的内部结尾处



prepend(content):向每一个匹配的元素的内部的開始处插入内容



prependTo(content) :将每一个匹配的元素插入到指定的元素内部的開始处







案例：













外部插入节点：







after(content):在每一个匹配的元素之后插入内容



before(content):在每一个匹配的元素之前插入内容



insertAfter(content):把全部匹配的元素插入到还有一个、指定的元素元素集合的后面



insertBefore(content) :把全部匹配的元素插入到还有一个、指定的元素元素集合的前面以上方法不但能将新创建的 DOM 元素插入到



档中, 也能对原有的 DOM 元素进行移动.







案例：










查找节点：




查找属性节点: 通过 jQuery 选择器完毕.



查找属性节点: 查找到所须要的元素之后, 能够调用 jQuery 对象的 attr() 方法来获取它的各种属性值






创建节点


使用 jQuery 的工厂函数 $(): $(html); 会依据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.

注意: 

动态创建的新元素节点不会被自己主动加入到文档中, 而是须要使用其它方法将其插入到文档中; 

当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 比如创建一个<p>元素, 能够使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)

创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建





案例：







删除节点：


remove(): 从 DOM 中删除全部匹配的元素, 传入的參数用于依据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包括的全部后代节点将被同一时候删除. 这种方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 – 清空元素中的全部后代节点(不包括属性节点).





案例：







复制节点：



clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有不论什么行为.

clone(true): 复制元素的同一时候也复制元素中的的事件 









替换节点：


replaceWith(): 将全部匹配的元素都替换为指定的 HTML 或 DOM 元素

replaceAll(): 颠倒了的 replaceWith() 方法.

注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失


案例：







属性操作：




attr(): 获取属性和设置属性

当为该方法传递一个參数时, 即为某元素的获取指定属性

当为该方法传递两个參数时, 即为某元素设置指定属性的值

jQuery中有非常多方法都是一个函数实现获取和设置.如:attr(), html(), text(), val(),height(), width(), css() 等.

removeAttr(): 删除指定元素的指定属性





案例：







样式操作：




获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都能够使用 attr() 方法来完毕.

追加样式: addClass()

移除样式: removeClass() --- 从匹配的元素中删除所有或指定的 class

切换样式: toggleClass()  --- 控制样式上的反复切换.假设类名存在则删除它, 假设类名不存在则加入它.

推断是否含有某个样式: hasClass() --- 推断元素中是否含有某个 class, 假设有, 则返回 true; 否则返回 false


案例：







设置和获取 HTML, 文本和值


读取和设置某个元素中的 HTML 内容: html() . 该方法能够用于 XHTML, 但不能用于 XML 文档

读取和设置某个元素中的文本内容: text(). 该方法既能够用于 XHTML 也能够用于 XML 文档.

读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框仅仅能返回第一个值).假设为多选下拉列表框, 则返回一个包括全部选择值的数组





经常使用的遍历节点方法


取得匹配元素的全部子元素组成的集合: children(). 该方法仅仅考虑子元素而不考虑不论什么后代元素.

取得匹配元素后面紧邻的同辈元素的集合:next(); 

取得匹配元素前面紧邻的同辈元素的集合:prev()

取得匹配元素前后全部的同辈元素: siblings()





CSS-DOM操作：




获取和设置元素的样式属性: css()

获取和设置元素透明度: opacity 属性

注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览 

opacity:0.1


获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若仅仅传递数字, 则默认单位是 px. 如须要使用其它单位则需传递一个字符串, 比如 $(“p:first”).height(“2em”);

获取元素在当前视窗中的相对位移: offset(). 其返回对象包括了两个属性: top, left. 该方法仅仅对可见元素有效


em是相对长度单位。相对于当前对象内文本的字体尺寸 








jQuery解析并载入XML





JQuery 能够通过 $.get() 或 $.post() 方法来载入 xml.
J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求
JQuery 解析 XML 与解析 DOM 一样, 能够使用 find(), children() 等函数来解析和用 each() 方法来进行遍历





jQuery中的事件






在页面载入完成后, 浏览器会通过 JavaScript 为 DOM 元素加入事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.





J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求











jQuery的表单验证


下载地址和Demo 
http://jquery.bassistance.de/validate/jquery.validate.zip 

首页： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jQuery validation 1.7  ---验证插件 须要:jQuery 1.3.2 或 1.4.2版本号


下载之后能够查看他的demo，从demo中抽取出来案例






jquery表单验证 默认值校验规则 





J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求






jquery表单验证 默认的提示 


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求





表单验证：


调用jquery.validate({});方法进行验证
$("#empForm").validate({

      *     //自己定义验证规则

      *     //自己定义提示信息

})





jquery自己定义验证规则


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求


这里的採用的都是标签的name属性值，而不是依据标签的id操作的


比方：<input type="text"  />，定义规则的时候採用的name属性,这个原因非常easy的，由于我们知道id是唯一的，可是对于后面的radio标签的时候我们想要定义规则的时候，假设要是用id来操作的话，就不行了，name属性是能够多个的，所以使用name


realname:"required",事实上这个required是一个函数，我们能够查看jquery插件的源代码：


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求


后面的都是类似的，都能够在源码中找到





当然一个标签也能够定义多个规则：

username: {
required:true,
minlength:"5",
maxlength:"8"

}

这里的required:true的功能和上面的的realname那种方式是一样的，同一时候minlength和maxlength都是方法的，源代码例如以下：


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求


我们须要传递一个參数值，然后进行推断的，这个后面我们会在自己定义的方法中具体说明





jQuery自己定义消息：


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求


这个作用就是给上面的校验规则中定义相相应的说明提示


这里面的提示信息，假设未定义的话，会默认使用源代码中的提示信息：


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求





jQuery的自己定义校验规则:


自己定义校验规则能够通过自己定义检验函数的方式新添加校验规则

过程例如以下：

1. 在定义校验规则之前定义一个新的方法

2. 在rules中指定某个域使用此校验规则

3. 在messages中指定这个域使用此校验规则没有通过的提示

信息 





1. 在定义校验规则之前定义一个新的方法


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求







2. 在rules中指定这个某个域使用此校验规则


J2EE学习篇之--JQuery技术具体解释
简单介绍：
工具：
jQuery对象
jQuery选择器
可见度过滤选择器：
jQuery中的DOM操作
jQuery中的事件
jQuery的表单验证
jQuery中封装的Ajax请求





3. 在messages中指定这个域使用此校验规则没有通过的提示信息 







案例：






调用：




 cert：{
	       required:true,
	       checkId:"4"
	}

我们在使用checkId方法的时候



value:元素的值

element 元素本身

params 參数


当中value就相应标签name为cert标签的value值，element就是这个标签，params就是传递的參数：4



以下来看一下完整的一个校验的Demo:




															

																					

								

									相关推荐