开发工具：
Deamweaver
插件：http://xtnd.us/dreamweaver/jquery
MyEclipse
插件：http://spket.com/
JQuery对象与DOM对象
CSS选择器：
标签选择器
ID选择器 #
类选择器 E.className
群组选择器 E1，E2，E3
后代选择器 E F
通配符选择器 *
样式表：行间、内部、外部
JQuery选择器：
基本选择器
层次选择器
$("ancestor descendant")
$("parent > child")
$('prev+next')等价于$('prev').next('next')
$('prev~siblings')等价于$('prev').nextAll('siblings')
siblings()方法不限制位置
基本过滤选择器
:first
:last
:not(selector)
:even 偶数，从0开始
:odd 奇数
:eq(index)
:gt(index)
:lt(index)
:header
:animated
内容过滤选择器
:contains(text)
:empty
:has(selector)
:parent
可见性过滤选择器
:hidden
:visible
属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]以……开始
[attribute$=value]以……结束
[attribute*=value]
[selector1][selector2][selectorN]
子元素过滤选择器
:nth-child(index/even/odd)index从1开始
:first-child
:last-child
:only-child
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
表单选择器
:input选择所有的<input><textarea><select><button>
:text单行文本框
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
选择器中含有特殊字符，如“.”"#"等，怎么办？
用转义符"\\"
JQuery中的DOM操作
DOM操作的分类：DOM Cor、HTML_DOM(只能用于处理Web文档)、CSS_DOM
查找节点
查找元素节点
查找属性节点
创建节点
$(html)
插入节点
append()
appendTo()
prepend
prependTo()
after()
insertAfter()
before()
insertBefore()
删除节点
remove()
empty()
复制节点
clone()
clone(true)具有行为
替换节点
replaceWith()
replaceAll()
包裹节点
wrap()
wrapAll()
wrapInner()
属性操作
attr()
removeAttr()
样式操作
attr("class")
addClass()
removeClass()
toggleClass()重复切换样式
hasClass()等价于is()
设置和获取HTML、文本和值
html()
text()
val()
遍历节点
children()
next()
prev()
siblings()
closest()
CSS_DOM操作
css()
offset() top,left
position()
scrollTop()
scrollLeft()
JQuery中的事件
$(document).ready(function(){})、$(function(){})、$().ready(function(){})三者一样
事件绑定
bind(type[,data],fn)
合成事件
hover(enter,leave)光标滑过效果
toggle(fn1,fn2,fnN)
事件冒泡
事件对象
停止事件冒泡
event.stopPropagation()或者return false
propagation翻译为传播、蔓延
阻止默认行为
event.preventDefault()或者return false（同时调用停止事件冒泡、阻止默认行为的一种简写）
事件捕获：与事件冒泡相反，从最顶端往下触发。
JQuery不支持事件捕获
事件对象的属性
event.type()
event.stopPropagation()
event.preventDefault()
event.target()获取触发事件的元素
event.relatedTarget()
event.pageX()/event.pageY()
event.which()
event.metaKey()获取ctrl按键
event.originalEvent()
移除事件
unbind([type][,data])
one()与bind()
模拟操作
trigger(type[,data])
triggerHandler()
其他用法
bind()还可以绑定多个事件类型
添加事件命名空间，在所绑定的事件类型后加命名空间
相同事件名，不同命名空间
JQuery中的动画
JQuery做动画效果要求在标准模式下，即在文件头部包含如下DTD:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
show()和hide()
slow(600毫秒)、normal(400毫秒)、fast(200毫秒)
fadeOut()
fadeIn()
slideUp()
slideDown()
自定义动画方法animate(params,speed,callback)
position:relative或absolute
累加、累减动画：+=、-=
多重动画
动画回调函数
停止动画和判断是否处于动画状态
stop(clearQueue,gotoEnd)
判断是否处于动画状态
if(!$(element).is(":animated")){}
其他动画方法
toggle()切换动画的可见或隐藏状态
slideToggle()通过改变元素的高度，相当于slideUp(),slideDown()
fadeTo()
当一个animate（）中应用多个属性时，动画是同时发生的，而以链式的写法应用动画时，动画按顺序发生
多组元素上的动画效果，默认是同时发生，当以回调的形式应用动画时，动画按回调顺序发生。
删除和追加操作可直接用appendTo（）完成
trigger("blur")与triggerHandler("blur")的区别:
trigger()不仅会触发元素绑定的blur事件，而且会触发浏览器默认的blur事件
end()方法：回到当前对象
thisEle=$("#para").css("font-size")返回数字和单位
textFontSize=parseFloat(thisEle,10)去掉单位，第二个参数表示10进制
unit=thisEle.slice(-2)
slice()返回的是从指定的位置开始的一个子字符串，-2代表倒数第二个，这里的度量单位px是两字符
网页换肤技巧：将皮肤选择按钮<li>元素的id与皮肤的样式文件名称设置相同。
解决网页刷新后皮肤又被初始化的方法：引入JQuery的cookie插件：jquery.cookie.js
第六章 JQuery与Ajax的应用
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键---发送异步请求、接收响应及执行回调
在JQuery中，$.ajax()是最底层的方法，第二层(使用频率高)：load()、$.get()、$.post()，第三层：$.getScript()、$.getJSON()
load(url,data,callback),后两个参数可选，callback函数包含三个参数：responseText、textStatus、XMLHttpRequest
传递方式：有data决定，有参数则是post方式，无参数是get方式
load（）方法主要是获取静态的数据文件
$.get(url[,data][,callback][,type])
data:key/value会作为queryString附加到url请求中
callback:只有成功返回才会调用，与load（）不同，只有两个参数：data，textStatus
data：返回的内容，可以是HTML片段、xml（需要在服务器端添加设置：head（“Content-Type：text/xml；charset=utf-8”））、json
textStatus：请求状态，success、error、notmodified、timeout
$.post()与$.get()的比较：
传输数据大小限制
浏览器数据缓存、安全问题
服务器端获取方式
请求参数
$.getScript(url[,callback])
callback:成功载入后方才运行
$.getJSON(url[,callback])
$.each(data，function（commentIndex，comment）{})
全局函数，用于遍历
不同于JQuery对象的each（）方法，不操作JQuery对象
$.ajax(options)
参数以key/value形式存在
常用参数：url、type、timeout、data、dataType、beforeSend、complete、success、error、global
serialize（）
作用于JQuery对象
将DOM元素内容序列化为字符串
serializeArray（）
返回JSON格式的数据
$.param()
serialize（）方法的核心
JQuery中的Ajax全局事件
ajaxStart()
ajaxStop()
ajaxComplete()
ajaxError()
ajaxSuccess()
ajaxSend()
JQuery插件
表单插件
ajaxForm（）
ajaxSubmit（）
都能接收0或1个参数（callback或options）
options对象里的参数：
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit(表单提交前的验证用到它): showRequest, // 提交前
success: showResponse, // 提交后
//另外的一些属性:
//url: url // 默认是form的action，如果写的话，会覆盖from的action.
//type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.)
//clearForm: true // 成功提交后，清除所有的表单元素的值.
resetForm: true // 成功提交后，重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后，跳出请求.
//timeout: 3000
beforeSumit：validate（formData，jqForm，options）
可通过三种方式进行表单提交前的验证：第一种，通过formData参数（formData为数组类型，可通过遍历数组）；第二种，通过jqForm参数（jqForm为JQuery对象，故将其转换为DOM对象）；第三种，通过fieldValue（），可找出匹配元素的值，并返回一个集合。
livequery插件：
动态绑定事件
触发回调函数（实际应用中十分有用）
JQuery UI插件：
交互、微件、效果库
sortable（）拖动排序
cookie插件：
$.cookie('cookie名','cookie值(为null时表示删除)',options)
options包括：
编写插件：
目的：给已有的一系列方法或函数进行封装
种类：封装对象方法插件、封装全局函数插件、选择器插件
难点：闭包的概念
Deamweaver
插件：http://xtnd.us/dreamweaver/jquery
MyEclipse
插件：http://spket.com/
JQuery对象与DOM对象
CSS选择器：
标签选择器
ID选择器 #
类选择器 E.className
群组选择器 E1，E2，E3
后代选择器 E F
通配符选择器 *
样式表：行间、内部、外部
JQuery选择器：
基本选择器
层次选择器
$("ancestor descendant")
$("parent > child")
$('prev+next')等价于$('prev').next('next')
$('prev~siblings')等价于$('prev').nextAll('siblings')
siblings()方法不限制位置
基本过滤选择器
:first
:last
:not(selector)
:even 偶数，从0开始
:odd 奇数
:eq(index)
:gt(index)
:lt(index)
:header
:animated
内容过滤选择器
:contains(text)
:empty
:has(selector)
:parent
可见性过滤选择器
:hidden
:visible
属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]以……开始
[attribute$=value]以……结束
[attribute*=value]
[selector1][selector2][selectorN]
子元素过滤选择器
:nth-child(index/even/odd)index从1开始
:first-child
:last-child
:only-child
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
表单选择器
:input选择所有的<input><textarea><select><button>
:text单行文本框
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
选择器中含有特殊字符，如“.”"#"等，怎么办？
用转义符"\\"
JQuery中的DOM操作
DOM操作的分类：DOM Cor、HTML_DOM(只能用于处理Web文档)、CSS_DOM
查找节点
查找元素节点
查找属性节点
创建节点
$(html)
插入节点
append()
appendTo()
prepend
prependTo()
after()
insertAfter()
before()
insertBefore()
删除节点
remove()
empty()
复制节点
clone()
clone(true)具有行为
替换节点
replaceWith()
replaceAll()
包裹节点
wrap()
wrapAll()
wrapInner()
属性操作
attr()
removeAttr()
样式操作
attr("class")
addClass()
removeClass()
toggleClass()重复切换样式
hasClass()等价于is()
设置和获取HTML、文本和值
html()
text()
val()
遍历节点
children()
next()
prev()
siblings()
closest()
CSS_DOM操作
css()
offset() top,left
position()
scrollTop()
scrollLeft()
JQuery中的事件
$(document).ready(function(){})、$(function(){})、$().ready(function(){})三者一样
事件绑定
bind(type[,data],fn)
合成事件
hover(enter,leave)光标滑过效果
toggle(fn1,fn2,fnN)
事件冒泡
事件对象
停止事件冒泡
event.stopPropagation()或者return false
propagation翻译为传播、蔓延
阻止默认行为
event.preventDefault()或者return false（同时调用停止事件冒泡、阻止默认行为的一种简写）
事件捕获：与事件冒泡相反，从最顶端往下触发。
JQuery不支持事件捕获
事件对象的属性
event.type()
event.stopPropagation()
event.preventDefault()
event.target()获取触发事件的元素
event.relatedTarget()
event.pageX()/event.pageY()
event.which()
event.metaKey()获取ctrl按键
event.originalEvent()
移除事件
unbind([type][,data])
one()与bind()
模拟操作
trigger(type[,data])
triggerHandler()
其他用法
bind()还可以绑定多个事件类型
添加事件命名空间，在所绑定的事件类型后加命名空间
相同事件名，不同命名空间
JQuery中的动画
JQuery做动画效果要求在标准模式下，即在文件头部包含如下DTD:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
show()和hide()
slow(600毫秒)、normal(400毫秒)、fast(200毫秒)
fadeOut()
fadeIn()
slideUp()
slideDown()
自定义动画方法animate(params,speed,callback)
position:relative或absolute
累加、累减动画：+=、-=
多重动画
动画回调函数
停止动画和判断是否处于动画状态
stop(clearQueue,gotoEnd)
判断是否处于动画状态
if(!$(element).is(":animated")){}
其他动画方法
toggle()切换动画的可见或隐藏状态
slideToggle()通过改变元素的高度，相当于slideUp(),slideDown()
fadeTo()
当一个animate（）中应用多个属性时，动画是同时发生的，而以链式的写法应用动画时，动画按顺序发生
多组元素上的动画效果，默认是同时发生，当以回调的形式应用动画时，动画按回调顺序发生。
删除和追加操作可直接用appendTo（）完成
trigger("blur")与triggerHandler("blur")的区别:
trigger()不仅会触发元素绑定的blur事件，而且会触发浏览器默认的blur事件
end()方法：回到当前对象
thisEle=$("#para").css("font-size")返回数字和单位
textFontSize=parseFloat(thisEle,10)去掉单位，第二个参数表示10进制
unit=thisEle.slice(-2)
slice()返回的是从指定的位置开始的一个子字符串，-2代表倒数第二个，这里的度量单位px是两字符
网页换肤技巧：将皮肤选择按钮<li>元素的id与皮肤的样式文件名称设置相同。
解决网页刷新后皮肤又被初始化的方法：引入JQuery的cookie插件：jquery.cookie.js
第六章 JQuery与Ajax的应用
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键---发送异步请求、接收响应及执行回调
在JQuery中，$.ajax()是最底层的方法，第二层(使用频率高)：load()、$.get()、$.post()，第三层：$.getScript()、$.getJSON()
load(url,data,callback),后两个参数可选，callback函数包含三个参数：responseText、textStatus、XMLHttpRequest
传递方式：有data决定，有参数则是post方式，无参数是get方式
load（）方法主要是获取静态的数据文件
$.get(url[,data][,callback][,type])
data:key/value会作为queryString附加到url请求中
callback:只有成功返回才会调用，与load（）不同，只有两个参数：data，textStatus
data：返回的内容，可以是HTML片段、xml（需要在服务器端添加设置：head（“Content-Type：text/xml；charset=utf-8”））、json
textStatus：请求状态，success、error、notmodified、timeout
$.post()与$.get()的比较：
传输数据大小限制
浏览器数据缓存、安全问题
服务器端获取方式
请求参数
$.getScript(url[,callback])
callback:成功载入后方才运行
$.getJSON(url[,callback])
$.each(data，function（commentIndex，comment）{})
全局函数，用于遍历
不同于JQuery对象的each（）方法，不操作JQuery对象
$.ajax(options)
参数以key/value形式存在
常用参数：url、type、timeout、data、dataType、beforeSend、complete、success、error、global
serialize（）
作用于JQuery对象
将DOM元素内容序列化为字符串
serializeArray（）
返回JSON格式的数据
$.param()
serialize（）方法的核心
JQuery中的Ajax全局事件
ajaxStart()
ajaxStop()
ajaxComplete()
ajaxError()
ajaxSuccess()
ajaxSend()
JQuery插件
表单插件
ajaxForm（）
ajaxSubmit（）
都能接收0或1个参数（callback或options）
options对象里的参数：
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit(表单提交前的验证用到它): showRequest, // 提交前
success: showResponse, // 提交后
//另外的一些属性:
//url: url // 默认是form的action，如果写的话，会覆盖from的action.
//type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.)
//clearForm: true // 成功提交后，清除所有的表单元素的值.
resetForm: true // 成功提交后，重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后，跳出请求.
//timeout: 3000
beforeSumit：validate（formData，jqForm，options）
可通过三种方式进行表单提交前的验证：第一种，通过formData参数（formData为数组类型，可通过遍历数组）；第二种，通过jqForm参数（jqForm为JQuery对象，故将其转换为DOM对象）；第三种，通过fieldValue（），可找出匹配元素的值，并返回一个集合。
livequery插件：
动态绑定事件
触发回调函数（实际应用中十分有用）
JQuery UI插件：
交互、微件、效果库
sortable（）拖动排序
cookie插件：
$.cookie('cookie名','cookie值(为null时表示删除)',options)
options包括：
编写插件：
目的：给已有的一系列方法或函数进行封装
种类：封装对象方法插件、封装全局函数插件、选择器插件
难点：闭包的概念
扫一扫
3423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
