jQuery基础

一、简介

主流的js库有protoype、dojo、ExtJS、jQuery。
jQuery 是一个JavaScript库。提供更简洁，更快速的方法来操作页面的元素。
网址：http://jquery.com 当前版本1.4.2

二、核心函数的使用：$代表jQuery对象。

1. $(expr[,context]) 工厂函数：根据指定的表达式查找所有匹配的元素，并存放到jQuery对象中。
   ·参数expr: 是一个由CSS选择器组成的表达式
   ·参数context: 指定查找的上下文，默认是整个文档。

2. $(html): 根据提供的原始HTML标记字符串，创建由jQuery对象包装的DOM元素。
   document.createElement(“img”);

3. $(elements)：把传入的DOM元素转成jQuery包装的对象并放入jQuery对象中。

4. (callback):是(document).ready(callback)的简写。用得少。
   常用方式：$(document).ready(callback);

5. 对象访问：each(callback) 以每一个匹配的元素作为上下文来执行一个函数。

三、选择器：

基本
1. * 匹配所有元素。多用于结合上下文来搜索。
2. .class 根据给定的类匹配元素。 如 (“.myClass”)3.element根据给定的元素名匹配所有元素。如(“input”)
4. #id 根据给定的ID匹配一个元素。如 $(‘#myId’)
5. selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。

层次
6. ancestor descendant 在给定的祖先元素下匹配所有的后代元素 (匹配后代节点)
7. parent > child 在给定的父元素下匹配所有的子元素 (匹配子节点)
8. prev + next 匹配所有紧接在 prev 元素后的 next 元素 (匹配兄弟节点)
9. prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 (匹配兄弟节点)

过滤：通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以”:”开头。
基本过滤 :first、:last、:not、:not、:even、:odd、:eq、:gt、:lt、:header、:animated
内容过滤 :contains、:empty、:has、:parent
可见性过滤 :hidden、:visible
属性过滤 jQuery1.3中前导的@符号已经被废除
[attName]、[attName=value]、 [attName!=value]、 [attName^=value]、 [attName$=value]、 [attName*=value]、 [selector1][selector2][selectorN]
子元素过滤 :nth-child、:first-child、:last-child、:only-child
表单对象过滤选择器： :input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:file、:hidden
表单对象属性过滤选择器： :enabled、:disabled、:checked、:selected

四、操作元素的属性

 attr(name)               取得第一个匹配元素的属性值attr(properties)       将一个“名/值”形式的对象设置为所有匹配元素的属性： $('p').attr({"id": "abc"});attr(key,value)         为所有匹配的元素设置一个属性值attr(key,[fn])            为所有匹配的元素设置一个计算的属性值removeAttr(name)  从每一个匹配的元素中删除一个属性

五、操作html的方法

1. html代码
   html() 取得第一个匹配元素的html内容。
   html(val) 设置每一个匹配元素的html内容。
2. 文本
   text() 取得所有匹配元素的内容。
   text(val) 设置所有匹配元素的文本内容
3. 值
   val() 获得第一个匹配元素的当前值。
   val(val) 设置每一个匹配元素的值。

六、DOM文档处理

1. 内部插入
   append(content), appendTo(content), prepend(content), prependTo(content).
2. 外部插入
   after(content), before(content), insertAfter(content), insertBefore(content).
3. 包裹：wrap()、wrapAll()
4. 替换：replaceWith(content)、
5. 删除：empty()、 remove([expr])、detach([expr])
6. 复制：clone()、clone(true)

七、CSS操作

css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。属性名包含 “-”的话，必须使用引号
css(name,value) 在所有匹配的元素中，设置一个样式属性的值

八、事件

页面载入事件：ready(fn)
事件处理： bind , one , trigger, triggerHandler, unbind
事件委派： live(type,[fn]), die([type],[data])
事件切换： hover(over, out), toggle(fn, fn2, [fn3, fn4, …])
事件：
load([fn]) 、 unload([fn])、 error([fn])、
blur([fn])、focus([fn])、resize([fn])、scroll([fn])、select([fn])、
change([fn])、click([fn])、dbclick([fn])、 submit([fn])、
keydown([fn])、keypress([fn])、keyup([fn])、
mousedown([fn])、mousemove([fn])、mouseout([fn])、mouseover([fn])、mouseup([fn])

九、效果

1. 基本
   show() 显示隐藏的匹配元素
   show(speed,[callback]) 动画显示所有匹配的元素，显示完成后可选地触发一个回调函数
   三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
   hide()、hide(speed,[callback])
   toggle() 、toggle(switch)、toggle(speed, [callback])
2. 滑动
   slideDown(speed, [callback])
   slideUp(speed,[callback])
   slideToggle(speed, [callback])
3. 淡入淡出
   fadeIn(speed, [callback])
   fadeOut(speed, [callback])
4. clone([true]),有true的话会连事件一起克隆
   even(偶)
5. 页面中的代码是从上往下执行的，要执行JS中的代码，可使用$(document).ready()
6. 先创建再加载内容与先加载内容再建dialog的区别。
7. 页面中的代码是从上往下执行的，要执行JS中的代码，可使用$(document).ready()

十、AJAX的支持

1. jQuery.ajax([options]) jQuery底层AJAX实现
2. load(url, [data], [callback]) 载入远程HTML文件代码并插入至DOM中
   默认使用 GET 方式，传递附加参数时自动转换为 POST 方式
3. jQuery.get(url, [data], [callback], [type ]) 通过GET请求载入信息
4. jQuery.getJSON(url, [data], [callback]) 通过GET请求载入JSON数据
5. jQuery.getScript(url, [callback]) 通过GET请求载入并执行一个JS文件
6. jQuery.post(url, [data], [callback], [type]) 通过POST请求载入信息，如果响应类型为json，自动转换成JSON对象。
7. 事件：ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)
8. jQuery.ajaxSetup([options]) 设置全局AJAX默认选项
9. serialize() 序列化表单内容为字符串（名=值&名=值）
10. serializeArray() 序列化表单内容为JSON数组结构数据 ({“名”：值, “名”: 值})

十一、插件应用

1. 表单验证插件：formValidator3.5
2. 官方UI：常用组件：Datepicker、Dialog、Tabs
   1) 添加插件JS、某个主题的样式表和图片：
   jquery-ui-1.8.1.custom.min.js、jquery-ui-1.8.1.custom.css、images
3. 数据表格插件： jqGrid
4. 数据表格排序插件：tablesorter
5. 对话框插件：jqModal