让你了解jquery(续)

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.1 after(content)

在每个匹配的元素之后插入内容 

2.5.2.2 before(content)

在每个匹配的元素之前插入内容 

2.5.2.3 insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面 

2.5.2.4 insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面

2.5.3 查找节点

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

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

2.5.4 创建节点

• 创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
• 注意: 
  • 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 
  • 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
• 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

2.5.5 删除节点

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

2.6  jquery验证

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

$("#empForm").validate({

      *     //自定义验证规则

      *     //自定义提示信息

})

2.6.1 自定义验证规则

2.6.2 自定义验证消息

2.6.3 自定义校验消息

自定义校验规则可以通过自定义检验函数的方式新增加校验规则，

步骤如下：

1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息 

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

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

des: {

required:true;

desValidate:"1"

}

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

des:"不能为空",

3 Jquery的ajax应用

  Jquery对ajax操作进行了封装。在jquery中，最底层的方法是$.ajax(),第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()

3.1  load方法

• 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 对象进行操作的方法

4 Jquery tree

4.1  zTree简介

1. 是jquery树插件的一种，具有特点强大的API，实例和说明，是学习和工作的很好选择。
2. 支持JSON数据格式，使得整个开发变得简单化。
3. 支持事件响应及反馈。
4. 可以让代码方便化和简洁化。
5. 支持ajax异步加载的方式，可以不用刷新就能把整个树加载进去。

4.2  zTree组成

4.2.1 jquery-1.4.2.js

   jQuery的核心类库

4.2.2 jquery-ztree-2.5.js

Jquery树插件的核心类库

4.3  zTree核心API

4.3.1 zTree(setting, [zTreeNodes])

4.3.1.1 说明

这个函数接受一个 JSON 格式的数据对象 setting 和 一个 JSON 格式的数据对象 zTreeNodes，从而建立 Tree

4.3.1.2 例子

4.3.2 核心配置setting

4.3.2.1 treeNodeKey

设置节点唯一标识属性名称，转换数据格式时使用

4.3.2.2 treeNodeParentKey

设置节点的父节点唯一标识属性名称，转换数据格式时使用

4.3.2.3 showLine

设置 zTree 是否显示节点之间的连线

4.3.2.4 root

 zTree 数据节点的根，全部节点数据都处于 root.nodes 内

4.3.2.5 callback

专门用于用户自定义各种 callback 回调函数

4.3.3 回调函数

4.3.3.1 expand

  当一层节点展开时，所触发的函数。在zTree里，都是通过在setting的设置来执行回调函数的。

4.3.3.2 collapse

从如图可以看出，当一个节点进行展开的时候要触发zTreeOnExpand方法。

这个函数有三个参数：

• 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.  由树节点的引用调用该方法