Download presentation
Presentation is loading. Please wait.
1
JQuery 讲师:金云龙 北京传智播客教育
2
流行的JavaScript类库 jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR
为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的 JavaScript 库有: jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR 北京传智播客教育
3
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即可。 北京传智播客教育
4
jQuery:简单例子 <!--引入jquery的js库-->
<script type="text/javascript" src="script/jquery js"></script> <script language="JavaScript"> $(document).ready(function(){//等待dom元素加载完毕,类似window.onload; alert("您好,我是张三丰"); }); </script> 北京传智播客教育
5
什么是jQuery对象？ var $variable = jQuery 对象 var variable = DOM 对象
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 对象 北京传智播客教育
6
DOM对象转成jQuery对象 转换后就可以使用 jQuery 中的方法了
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 转换后就可以使用 jQuery 中的方法了 北京传智播客教育
7
jQuery对象转成DOM对象 (1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象 (2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 北京传智播客教育
![jQuery对象转成DOM对象 (1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象](http://slidesplayer.com/slide/11418240/61/images/7/jQuery%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%88%90DOM%E5%AF%B9%E8%B1%A1+%281%29+jQuery%E5%AF%B9%E8%B1%A1%E6%98%AF%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%5Bindex%5D%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E6%9D%A5%E5%BE%97%E5%88%B0%E7%9B%B8%E5%BA%94%E7%9A%84DOM%E5%AF%B9%E8%B1%A1.jpg "两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象. (2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象. 北京传智播客教育")
8
jQuery 选择器 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
简洁的写法 完善的事件处理机制 ${“#id”} 等价于 document.getElementById("id"); ${“tagName”} 等价于 document.getElementsByTagName("tagName"); 北京传智播客教育
9
jQuery 选择器 //注意:在javaScript中函数返回值为空,表示false //若网页中没有id=value的元素,浏览器会报错
document.getElementById("username").value; //需要判断document.getElementById("username")是否存在 if(document.getElementById("username")){ var username=document.getElementById("username"); alert(username.value); }else{ alert("没有该id元素"); } //使用JQUERY处理即使不存在也不会报错 var $username=$("#username"); alert("^^^ "+$username.val()); //注意:在javaScript中函数返回值为空,表示false 北京传智播客教育
10
基本选择器 基本选择器是 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” 北京传智播客教育
11
基本选择器示例 改变 id 为 one 的元素的背景色为 #0000FF
改变 class 为 mini 的所有元素的背景色为 #FF0033 改变元素名为 <div> 的所有元素的背景色为 #00FFFF 改变所有元素的背景色为 #00FF33 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF 北京传智播客教育
12
层次选择器 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器. 1 、ancestor descendant 用法: $(”form input”) ; 返回值 集合元素 说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开. 2、parent > child 用法: $(”form > input”) ; 返回值 集合元素 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素 3、prev + next 用法: $(”label + input”) ; 返回值 集合元素 说明: 匹配所有紧接在 prev 元素后的 next 元素 4、prev ~ siblings 用法: $(”form ~ input”) ; 返回值 集合元素 说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配. 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取 注意: 1. $("#one + div") 选择 id 为 one 的下一个 div 元素, 必须是近邻的! 2. $(“#two ~ div”) 选择 id 为 two 的元素 后面 的所有 div 兄弟元素 北京传智播客教育
13
层次选择器示例 改变 <body> 内所有 <div> 的背景色为 #0000FF
改变 id 为 one 的下一个 <div> 的背景色为 #0000FF 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF 北京传智播客教育
14
过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 北京传智播客教育
15
基础过滤选择器 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 开始计数. 需要注意: $(“div:first”) 和 $(“div :first”) 的区别! 北京传智播客教育
16
基础过滤选择器 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:first”) 和 $(“div :first”) 的区别! 北京传智播客教育
17
基础过滤选择器示例 改变第一个 div 元素的背景色为 #0000FF 改变最后一个 div 元素的背景色为 #0000FF
改变class不为 one 的所有 div 元素的背景色为 #0000FF 改变索引值为偶数的 div 元素的背景色为 #0000FF 改变索引值为奇数的 div 元素的背景色为 #0000FF 改变索引值为大于 3 的 div 元素的背景色为 #0000FF 改变索引值为等于 3 的 div 元素的背景色为 #0000FF 改变索引值为小于 3 的 div 元素的背景色为 #0000FF 改变所有的标题元素的背景色为 #0000FF 改变当前正在执行动画的所有元素的背景色为 #0000FF function cartoon(){//执行动画的方法 $("#mover").slideToggle("normal",cartoon); } cartoon(); 北京传智播客教育
18
内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
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”形成反义词. 注意：没有其它子节点是 :empty, 相反的是 :parent 北京传智播客教育
19
$("div:not(:contains('di'))").css("background","#FF0033");
内容过滤选择器示例 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF 改变不含有文本 di; 的 div 元素的背景色 $("div:not(:contains('di'))").css("background","#FF0033"); 北京传智播客教育
20
可见度过滤选择器 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden 用法: $(”tr:hidden”) 返回值 集合元素 说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别. 2、:visible 用法: $(”tr:visible”) 返回值 集合元素 说明: 匹配所有的可见元素. 北京传智播客教育
21
可见度过滤选择器示例 改变所有可见的div元素的背景色为 #0000FF
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF 选取所有的文本隐藏域, 并打印它们的值 增加css div.visible{ display:none; } 北京传智播客教育
22
属性过滤选择器 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
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’]“) 返回值 集合元素 说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?! 该选择器不是以 : 开头! 北京传智播客教育
23
属性过滤选择器 说明: 匹配给定的属性是以某些值结尾的元素. 说明: 匹配给定的属性是以包含某些值的元素.
5、[attribute$=value] 用法: $(”input[name$=‘letter’]“) 返回值 集合元素 说明: 匹配给定的属性是以某些值结尾的元素. 6、[attribute*=value] 用法: $(”input[name*=‘man’]“) 返回值 集合元素 说明: 匹配给定的属性是以包含某些值的元素. 7、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: $(”input[id][name$=‘man’]“) 返回值 集合元素 说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素. 该选择器不是以 : 开头! 北京传智播客教育
24
属性过滤选择器示例 选取下列元素,改变其背景色为 #0000FF 含有属性title 的div元素.
属性title值等于"test"的div元素. 属性title值不等于"test"的div元素(没有属性title的也将被选中). 属性title值 以"te"开始 的div元素. 属性title值 以"est"结束 的div元素. 属性title值 含有"es"的div元素. 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素. 北京传智播客教育
25
子元素过滤选择器 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”) 返回值 集合元素 说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配! 子元素需要加空格! 北京传智播客教育
26
子元素过滤选择器 nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素 子元素需要加空格! 北京传智播客教育
27
子元素过滤选择器示例 选取下列元素,改变其背景色为 #0000FF 每个class为one的div父元素下的第2个子元素.
北京传智播客教育
28
表单对象属性过滤选择器 此选择器主要对所选择的表单元素进行过滤
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元素. 注意 select 标签中的 option 是 select 的子元素 北京传智播客教育
29
表单对象属性过滤选择器示例 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
利用 jQuery 对象的 length 属性获取多选框选中的个数 利用 jQuery 对象的 text() 方法获取下拉框选中的内容 $("select option:selected").each(function(){ alert($(this).text()); }); 北京传智播客教育
30
表单选择器 说明:匹配所有 input, textarea, select 和 button 元素 说明: 匹配所有密码框.
1、:input 用法: $(”:input”) ; 返回值 集合元素 说明:匹配所有 input, textarea, select 和 button 元素 2、:text 用法: $(”:text”) ; 返回值 集合元素 说明: 匹配所有的单行文本框. 3、:password 用法: $(”:password”) ; 返回值 集合元素 说明: 匹配所有密码框. 4、:radio 用法: $(”:radio”) ; 返回值 集合元素 说明: 匹配所有单选按钮. 5、:checkbox 用法: $(”:checkbox”) ; 返回值 集合元素 说明: 匹配所有复选框 6、:submit 用法: $(”:submit”) ; 返回值 集合元素 说明: 匹配所有提交按钮. 北京传智播客教育
31
表单选择器 7、:image 用法: $(”:image”) 返回值 集合元素 说明: 匹配所有图像域.
8、:reset 用法: $(”:reset”) ; 返回值 集合元素 说明: 匹配所有重置按钮. 9、:button 用法: $(”:button”) ; 返回值 集合元素 说明: 匹配所有按钮.这个包括直接写的元素button. 10、:file 用法: $(”:file”) ; 返回值 集合元素 说明: 匹配所有文件域. 11、:hidden 用法: $(”input:hidden”) ; 返回值 集合元素 说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配. 注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的, 北京传智播客教育
32
练习1 1. 给网页中所有的 <p> 元素添加 onclick 事件 <p>段落1</p>
2. 使一个特定的表格隔行变色 <p>段落1</p> <p>段落2</p> <p>段落3</p> $(“table:eq(0) tr:even").css("background","red"); 北京传智播客教育
33
练习 3. 对多选框进行操作, 输出选中的多选框的个数 北京传智播客教育
34
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 对象的各种属性 北京传智播客教育
35
内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容
* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * prepend(content):向每个匹配的元素的内部的开始处插入内容 * prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处 北京传智播客教育
36
练习2: 下拉框应用 北京传智播客教育
37
外部插入节点 以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
* after(content) :在每个匹配的元素之后插入内容 * before(content):在每个匹配的元素之前插入内容 * insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 * insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动. 北京传智播客教育
38
查找节点 查找节点: 查找属性节点: 通过 jQuery 选择器完成.
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 北京传智播客教育
39
创建节点 创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)或$(“p”) 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建 北京传智播客教育
40
创建新节点案例 <li id="tj" name="tianjin">天津</li> 在该节点下添加新的节点
北京传智播客教育
41
删除节点 remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点). 北京传智播客教育
42
练习3:使用 JQuery 实现 北京传智播客教育
43
复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件 <button>保存</button> <p>段落</p> $("button").click(function(){ alert("点击按钮"); }); //克隆节点，不克隆事件 $("button").clone().appendTo("p"); //克隆节点，克隆事件 $("button").clone(true).appendTo("p"); 北京传智播客教育
44
替换节点 replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法. 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失 //<p>段落</p> //方式一 $("p").replaceWith("<button>登陆</button>"); //方式二 $("<button>登陆</button>").replaceAll("p"); 北京传智播客教育
45
属性操作 attr(): 获取属性和设置属性 当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值 jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等. removeAttr(“属性名”): 删除指定元素的指定属性 $(“div”).html(“<p>奥运接受了</p>"); $(“div”).html(); 北京传智播客教育
46
练习4: 多选框应用 北京传智播客教育
47
样式操作 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false 北京传智播客教育
48
设置和获取 HTML, 文本和值 读取和设置某个元素中的 HTML 内容: html(“<p></p>”) . 该方法可以用于 XHTML, 但不能用于 XML 文档 读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档. 读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组 即便是一组 radio, 利用 val() 方法为其赋值时, 也要使用 js 数组来为其赋值 北京传智播客教育
49
练习5 val()练习_1 获取焦点 输入信息 $(document).ready(function(){
$("#username").focus(function(){ alert("表单元素的默认值 "+this.defaultValue); }); defaultValue 表单元素的默认值属性 北京传智播客教育
50
提示：javaScript中数组表示法[“a”, “b”]
练习5 val()练习_2 提示：javaScript中数组表示法[“a”, “b”] 北京传智播客教育
![提示：javaScript中数组表示法[ a , b ]](http://slidesplayer.com/slide/11418240/61/images/50/%E6%8F%90%E7%A4%BA%EF%BC%9AjavaScript%E4%B8%AD%E6%95%B0%E7%BB%84%E8%A1%A8%E7%A4%BA%E6%B3%95%5B+a+%2C+b+%5D.jpg "练习5 val()练习_2. 提示：javaScript中数组表示法[ a , b ] 北京传智播客教育")
51
常用的遍历节点方法 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合:next(); 取得匹配元素前面紧邻的同辈元素的集合:prev() 取得匹配元素前后所有的同辈元素: siblings() <input type="button" value="查找所有子元素" id="b2"/> <input type="button" value="获取后面的同辈元素" id="b3"/> <input type="button" value="获取前面的同辈元素" id="b4"/> 北京传智播客教育
52
练习6 弹出层 北京传智播客教育
53
CSS-DOM 操作 获取和设置元素的样式属性: css() 获取和设置元素透明度: opacity 属性
注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览 opacity:0.1 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”); 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效 em是相对长度单位。相对于当前对象内文本的字体尺寸 北京传智播客教育
54
jQuery 中的事件 -- 加载 DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法. 可以用$(window).load(function(){}) $().ready(); 北京传智播客教育
55
练习7 crm项目中的权限控制 北京传智播客教育
56
jquery表单验证 下载地址和Demo 首页： jQuery validation 验证插件 需要:jQuery 或 1.4.2版本 北京传智播客教育
57
jquery表单验证 默认值校验规则 北京传智播客教育
58
jquery表单验证 默认的提示 北京传智播客教育
59
jquery表单验证 调用jquery.validate({});方法进行验证 $("#empForm").validate({
* //自定义验证规则 * //自定义提示信息 }) 北京传智播客教育
60
jquery自定义验证规则 自定义验证规则 北京传智播客教育
61
jquery自定义消息 自定义消息 北京传智播客教育
62
jquery自定义校验规则 自定义校验规则可以通过自定义检验函数的方式新增加校验规则
步骤如下： 1. 在定义校验规则之前定义一个新的方法 2. 在rules中指定某个域使用此校验规则 3. 在messages中指定这个域使用此校验规则没有通过的提示 信息 北京传智播客教育
63
jquery自定义校验规则 1. 在定义校验规则之前定义一个新的方法 北京传智播客教育
64
jquery自定义校验规则 2. 在rules中指定这个某个域使用此校验规则 北京传智播客教育
65
jquery自定义校验规则 3. 在messages中指定这个域使用此校验规则没有通过的提示信息
北京传智播客教育
66
让 Aptana 提示 jQuery 北京传智播客教育
Similar presentations
