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
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
类似资料：