jQuery 小节

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


二、核心函数的使用：$代表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、:even、:odd、:eq、:gt、:lt、:header、:animated
内容过滤  :contains、:empty、:has、:parent
可见性过滤:hidden、:visible
属性过滤  [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)   将一个“名/值”形式的对象设置为所有匹配元素的属性
   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", "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])


十、AJAX的支持
1. $.ajax([options])               jQuery底层AJAX实现
2. load(url, [data], [callback])   载入远程HTML文件代码并插入至DOM中
    默认使用 GET 方式，传递附加参数时自动转换为POST方式
3. $.get(url, [data], [callback], [type])   通过GET请求载入信息
4. $.getJSON(url, [data], [callback])       通过GET请求载入JSON数据
5. $.getScript(url, [callback])             通过GET请求载入并执行一个JS文件
6. $.post(url, [data], [callback], [type])  通过POST请求载入信息，如果响应类型为json，自动转换成JSON对象。


7. 事件：ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)


8. $.ajaxSetup([options])  设置全局AJAX默认选项: $.ajaxSetup({cache:false});
9. serialize()             序列化表单内容为字符串(名=值&名=值)
10. serializeArray()       序列化表单内容为JSON数组结构数据({"名"：值, "名": 值})


十一、插件应用
1. 表单验证插件：
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