jquery课件
五条禁令-关于感恩的演讲稿
Jquery课件
1 Jquery简介
为了简化
JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript
库封装了很
多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0
特性
的富客户端页面, 并且兼容各大浏览器
当前流行的 JavaScript
库有:
jQuery, MooTools,
Prototype, Dojo, YUI, EXT_JS DWR
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即可。
2 Jquery实例
2.1jquery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象,
那么它就可以使
用 jQuery 里的方法: $$(“#test”).html()；比如： $$(
意思是指：
获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代
码等同于用DOM实现代码：mentById(
虽然jQuery对象是包装DO
M对象后产生的，但是jQuery无法使用DOM对象
的任何方法，同理DOM对象也不能使用jQu
ery里的方法.乱使用会报错
•
约定：如果获取的是 jQuery
对象, 那么要在变量前面加上 $$.
var $$variable = jQuery 对象
var variable = DOM 对象
2.2
dom对象转化为jquery对象
对于已经是一个DOM对象，只需要用$$()把DOM对象包
装起来，就可以获得
一个jQuery对象了。$$(DOM对象)
2.3 jquery对象转化为dom对象
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)
jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM
对象
(2)
jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
2.4jquery选择器
1、选择器是jquery
的基础。在jquery中，对事件进行处理，遍历dom和ajax
操作都依赖选择器。
2、jquery选择器写法简单
$$(#username) = mentById(“username”);
$$(“tagName”)=mentsByTagName(“tagName”);
2.4.1基本选择器
基本选择器是jquery中最简单，也是最
常用的选择器。它通过元素id,class和
标签名来查找DOM元素
2.4.1.1
#id
$$(#id) 返回值：单个元素组成的集合
2.4.1.2标签元素
$$(element标签)
返回值：元素集合
2.4.1.3 class
$$(.class) 说明: 这个标签是直接选择html代码中class=”myClass”的元素或元
素组(因为在同一html页面中class是可以存在多个同样值的).
2.4.1.4
*
$$(*) 匹配所有的元素
2.4.1.5
select1,select2…
用法:
$$(”div,span,s”)
返回值 集合元素
说明:
将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择
器,
并将匹配到的元素合并到一个结果内.
2.4.2 层次选择器
如果想通
过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素
等。则需要通过层次选择器。
2.4.2.1 ancestor descendant
用法:
$$(”form input”)
返回值 集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent >
child”区分开
2.4.2.2 parent > child
用法:
$$(”form > input”)
返回值 集合元素
说明:
在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
2.4.2.3 prev +
next
用法:
$$(”label + input”)
返回值
集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
2.4.2.4prev ~ siblings
用法:
$$(”form ~
input”)
返回值 集合元素
说明: 匹配 prev 元素之后的所有
siblings 元素.注意:是匹配之后的元素,不包
含该元素在内,并且siblings匹配的
是和prev同辈的元素,其后辈元素不
被匹配.
注意: (“prev ~ div”)
选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中
的方法
siblings() 与前后位置无关, 只要是同辈节点就可以选取
2.4.3过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都
以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤,
属
性过滤, 子元素过滤和表单对象属性过滤选择器.
2.4.3.1 :first
用法: $$(”tr:first”) 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素
2.4.3.2 :last
用法:
$$(”tr:last”) 返回值 集合元素
说明: 匹配找到的最后一个元素.与
:first 相对应
2.4.3.3 :not(selector)
用法:
$$(”input:not(:checked)”)返回值 集合元素
说明: 去除所有与给定选
择器匹配的元素.有点类似于”非”,意思是没有被选
中的input(当input的type=”c
heckbox”).
2.4.3.4 :even
用法: $$(”tr:even”)
返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0
开始计
数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一
个
tr就为偶数0.
2.4.3.5 : odd
用法:
$$(”tr:odd”) 返回值 集合元素
说明:
匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
2.4.3.6
:eq(index)
用法: $$(”tr:eq(0)”) 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的
是索引
值,不是元素排列数.
2.4.3.7:gt(index)
用法:
$$(”tr:gt(0)”) 返回值 集合元素
说明:
匹配所有大于给定索引值的元素.
2.4.3.8:lt(index)
用法:
$$(”tr:lt(2)”) 返回值 集合元素
说明:
匹配所有小于给定索引值的元素.
2.4.3.9:header(固定写法)
用法:
$$(”:header”).css(”background”, “#EEE”) 返回值
集合元素
说明: 匹配如 h1, h2,
h3之类的标题元素.这个是专门用来获取h1,h2这样
的标题元素.
2.4.4内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
2.4.4.1 :contains(text)
用法:
$$(”div:contains(’John’)”) 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom
标签元素时,它就
派上了用场了,它的作用是查找被标签”围”起来的文本内
容是否符合指定的内容的.
2.4.4.2:empty
用法: $$(”td:empty”) 返回值
集合元素
说明: 匹配所有不包含子元素或者文本的空元素
2.4.4.3:has(selector)
用法:
$$(”div:has(p)”).addClass(”test”) 返回值
集合元素(只能包含一层)
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要
好好琢磨,但是一旦看了
使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”
test”.
2.4.4.4:parent
用法: $$(”td:parent”)
返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:par
ent”,可不是”.parent”哦!
感觉与上面讲的”:empty”形成反义词.
2.4.5可见过滤选择器
根据元素的可见和不可见状态来选择相应的元素
2.4.5.1:hidden
用法: $$(”tr:hidden”) 返回值
集合元素
说明: 匹配所有的不可见元素，input 元素的 type
属性为 “hidden”
的话也会被匹
配到.意思是css中display:none和input
type=”hidden”的都会被匹配到.同
样,要在脑海中彻底分清楚冒号”:”,
点号”.”和逗号”,”的区别.
2.4.5.2:visible
用法:
$$(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
2.4.6属性过滤器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
2.4.6.1[attribute]
用法: $$(”div[id]“) 返回值
集合元素
说明: 匹配包含给定属性的元素.
例子中是选取了所有带”id”属性的div标
签.
2.4.6.2[attribute=value]
用法:
$$(”input[name='newsletter']“).attr(”checked”,
true); 返回值 集合
元素
说明:
匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是
newsletter 的 input 元素.
2.4.6.3[attribute!=value]
用法:
$$(”input[name!='newsletter']“).attr(”checked”,
true); 返回值 集
合元 素 。
说明：匹配所有不
含有指定的属性，或者属性不等于特定值的元素.此选择
器等价于:not([attr=value]
),要匹配含有特定属性但不等于特定值的元
素,请使用[attr]:not([attr=valu
e]).之前看到的 :not 派上了用场.
2.4.6.4[attribute^=value]
用法:
$$(”input[name^=‘news’]“) 返回值 集合元素
说明: 匹配给定的
属性是以某些值开始的元素.,我们又见到了这几个类似于
正则匹配的符号.现在想忘都忘不掉了吧?!
2.4.6.5[attribute$$=value]
用法:
$$(”input[name$$=‘letter’]“) 返回值 集合元素
说明:
匹配给定的属性是以某些值结尾的元素.
2.4.6.6[attribute*=value]
用法: $$(”input[name*=‘man’]“) 返回值 集合元素
说明: 匹配给定的属性是以包含某些值的元素.
2.4.6.7[attributeFilter
1][attributeFilter2][attributeFilterN]
用法:
$$(”input[id][name$$=‘man’]“) 返回值 集合元素
说明: 复合属
性选择器,需要同时满足多个条件时使用.又是一个组合,这种情
况我们实际使用的时候很常用.这个例
子中选择的是所有含有 id 属性,
并且它的 name 属性是以 man
结尾的元素.几种组合的交集。
2.4.7子元素过滤选择器
2.4.7.1:nth-child(indexevenoddequation)
用法: $$(”ul li:nth-child(2)”) 返回值 集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过
滤(Basic
Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,
后者是从1开始.
2.4.7.2:first-child
用法: $$(”ul
li:first-child”) 返回值 集合元素
说明:
匹配第一个子元素.’:first’
只匹配一个元素,而此选择符将为每个父元
素匹配一个子元素.这里需要特别点的记忆下区别.
2.4.7.3:last-child
用法: $$(”ul li:last-
child”) 返回值 集合元素
说明:
匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父 元
素匹配一个子元素.
2.4.7.4: only-child
用法: $$(”ul li:only-
child”) 返回值 集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会
被匹配.如果父元素中
含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
2.4.8表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
2.4.8.1:enabled
用法: $$(”input:enabled”)
返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有
dis
abled=”disabled”的input.不为disabled,当然就为enabled啦.
2.4.8.2:disabled
用法: $$(”input:disabled”)
返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
2.4.8.3:checked
用法:
$$(”input:checked”) 返回值 集合元素
说明: 匹配所有选中的被选中元
素(复选框、单选框等，不包括select中的
option).这话说起来有些绕口.
2.4.8.4:selected
用法: $$(”select
option:selected”) 返回值 集合元素
说明:
匹配所有选中的option元素.
2.4.9 表单选择器
2.4.9.1:input
用法: $$(”:input”) 返回值 集合元素
说明:匹配所有
input, textarea, select 和 button 元素
2.4.9.2:text
用法: $$(”:text”) 返回值 集合元素
说明: 匹配所有的单行文本框.
2.4.9.3:password
用法:
$$(”:password”) 返回值 集合元素
说明: 匹配所有密码框.
2.4.9.4:radio
用法: $$(”:radio”) 返回值 集合元素
说明: 匹配所有单选按钮.
2.4.9.5:checkbox
用法: $$(”:checkbox”) 返回值 集合元素
说明: 匹配所有复选框
2.4.9.6:submit
用法: $$(”:submit”) 返回值
集合元素
说明: 匹配所有提交按钮
2.4.9.7:image
用法:
$$(”:image”) 返回值 集合元素
说明: 匹配所有图像域.
2.4.9.8:reset
用法: $$(”:reset”) 返回值 集合元素
说明: 匹配所有重置按钮.
2.4.9.9:button
用法:
$$(”:button”) 返回值 集合元素
说明:
匹配所有按钮.这个包括直接写的元素button.
2.4.9.10:file
用法:
$$(”:file”) 返回值 集合元素
说明: 匹配所有文件域.
2.4.9.11:hidden
用法: $$(”input:hidden”)
返回值 集合元素
说明: 匹配所有不可见元素，或者type为hidden的元
素.这个选择器就不仅
限于表单了,除了匹配input中的hidden外,那些style为hid
den的也
会被匹配.
2.5 jquery中的dom操作
2.5.1内部插入节点
2.5.1.1 append(content)
向每个匹配的元素的内部的结尾处追加内容
2.5.1.2
appendTo(content)
将每个匹配的元素追加到指定的元素中的内部结尾处
2.5.1.3 prepend(content)
向每个匹配的元素的内部的开始处插入内容
2.5.1.4
prependTo(content)
将每个匹配的元素插入到指定的元素内部的开始处
2.5.2外部插入节点
2.5.2.1after(content) :
在每个匹配的元素之后插入内容
2.5.2.2before(content)
在每个匹配的元素之前插入内容
2.5.2.3insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面
2.5.2.4insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面
2.5.3查找节点
查找属性节点: 通过 jQuery 选择器完成.
查找属性节点:
查找到所需要的元素之后, 可以调用 jQuery 对象的 attr()
方法
来获取它的各种属性值
2.5.4 创建节点
创建节点: 使用
jQuery 的工厂函数 $$(): $$(html); 会根据传入的 html
标记字符
串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery
对象返回.
•
注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方
法将其插入到文档中;
• 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式.
例如创
建一个
元素, 可以使用 $$(“
”) 或 $$(“
”), 但不能使用 $$(“
”)
或 $$(“
”)
创建文本节点就是在创建元素节点时直接把文本内容写出来;
创建属性节点也
是在创建元素节点时一起创建
2.5.5删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery
表达
式来筛选元素. 当某个节点用 remove() 方法删除后,
该节点所包含的所有后代
节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
2.6jquery验证
调用te({});方法进行验证
$$(
*
自定义验证规则
* 自定义提示信息
})
2.6.1自定义验证规则
2.6.2 自定义验证消息
2.6.3自定义校验规则
自定义校验规则可以通过自定义检验函数的方式新增加校验规则，
步骤如下
1.
在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息
1.
在定义校验规则之前定义一个新的方法
2.在rules中指定这个某个域使用此校验规则
3.
在messages中指定这个域使用此校验规则没有通过的提示信息
3Jquery的ajax应用
Jquery对aja
x操作进行了封装。在jquery中，最底层的方法是$$.ajax(),第
二层是 load(),
$$.get() 和 $$.post(), 第三层是 $$.getScript() 和
$$.getJSON()
3.1load方法
load()方法是
jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的
HTML 代码并插入到
DOM 中. 它的结构是: load(url[, data][,callback])
程序员只需要使用 jQuery 选择器为 HTML
片段指定目标位置, 然后将要加载的
文件的 url 做为参数传递给 load() 方法即可
如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的
URL
参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML
文档中选出所需要的内容.
传递方式: load() 方法的传递参数根据参数
data 来自动自定. 如果没有参数传
递, 采用 GET 方式传递, 否则采用 POST
方式
对于必须在加载完才能继续的操作, load() 方法提供了回调函数,
该函数有三个
参数: 代表请求返回内容的 data; 代表请求状态的 textStatus
对象和
XMLHttpRequest 对象
方法的返回值是 jQuery
3.2 get或者post方法
$$.get() 方法使用 GET
方式来进行异步请求. 它的结构是: $$.get(url[, data][,
callback][, type]);
$$.get()
方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档,
JSON
文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss,
error, notmodify, timeout 4 种.
方法的返回值:XMLHttpRequest对象
$$.get() 和
$$.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对
jQuery 对象进行操作的方法
4jquery tree
4.1zTree的简介
1、是jquery树插件的一种，具有特点强大的API，实例和
说明，是学习和工作
的很好选择。
2、支持JSON数据格式，使得整个开发变得简单化。
3、支持事件响应及反馈。
4、可以让代码方便化和简洁化。
5、支持ajax异步加载的方式，可以不用刷新就能把整个树加载进去。
4.2
zTree组成
jQuery的核心类库
Jquery树插件的核心类库
zTree插件的样式文件
4.3zTree核心API
4.3.1zTree(setting, [zTreeNodes])
4.3.1.1说明
这个函数接受一个 JSON 格式的数据对象 setting 和
一个 JSON 格式的数
据对象 zTreeNodes，从而建立 Tree
4.3.1.2例子
4.3.2核心配置setting
4.3.2.1treeNodeKey
设置节点唯一标识属性名称，转换数据格式时使用
4.3.2.2 treeNodeParentKey
设置节点的父节点唯一标识属性名称，转换数据格式时使用
4.3.2.3
showLine
设置 zTree 是否显示节点之间的连线
4.3.2.4 root
zTree 数据节点的根，全部节点数据都处于 内
4.3.2.5
callback
专门用于用户自定义各种 callback 回调函数
4.3.3回调函数
4.3.3.1
expand
当一
层节点展开时，所触发的函数。在zTree里，都是通过在setting的设置来
执行回调函数的。
从如图可以看出，当一个节点进行展开的时候要触发zTreeOnExpand方法。
这个函数有三个参数：
Event 标准的event对象
treeId 对应于树的根节点
treeNode
被展开的节点的JSON数据对象
4.3.3.2 collapse
当一层节点关闭时所触发的函数，从图上可以看出，当一个节点关闭时触发
zTreeOnCollap
se函数。
这个函数有三个参数：
Event
标准的event对象
treeId 对应于树的根节点
treeNode 被展开的节点的JSON数据对象
4.3.4
addNodes
1、 在指定节点下增加子节点。
2、该方法有三个参数
1、parentNode
指定的父节点，如果增加根节点，请设置 parentNode
为 null 即可
2、newNodes 需要增加的节点数据 JSON
对象集合，支持将节点的n级
子节点一次性增加，只需要符合zTree的节点数据结构即
可
3、isSilent
设定增加节点后是否展开其父节点。isSilent = true
时，
不展开父节点，其他值或缺省状态都自动展开
3、由树节点的引用调用该方法