第19章 jquery类库
Opened this issue · 0 comments
19.1jQuery基础
全局函数jQuery()，快捷名称$
jQuery.noConflict()释放$变量
jQuery是工厂函数，不是构造函数，返回新创建对象
链式调用
19.1.1jQuery()函数
四种用法
-CSS选择器（字符串）给$()方法，返回匹配元素集，第二参数可选，定义起始点，称为上下文
-传递Element/Document/Window对象给$()方法，返回jQuery包装对象，传递数组返回元素集
-传递HTML文本字符串，包含<>，第二参数可传递Document，object对象
-传入函数，文档加载完毕DOM可操作，函数被调用，onLoad()函数
$(document).ready(f);
jQuery(f);
this 指向document对象
注册函数在DOMContentLoaded事件触发由jQuery触发，不支持时，load事件触发时由jQuery触发，文档解析完，图片还在加载
19.1.2查询与查询结果
size() 代替length属性
get() 代替方括号索引
toArray() 将jQuery对象转化为真实数组
selector 选择器字符串
context 上下文对象
jquery 版本号
each() 中this代表Element对象，将索引值和元素作为一二参数传递，false终止，返回jQuery对象
this和第二参数是原生文档元素
$(:header)返回h1到h5
map() 映射
index() 返回索引值
is() 至少一个匹配选择器返回true
19.2jQuery的getter和setter
同一个方法既是getter又是setter
setter给每一个元素设置值
getter查询第一个元素，遍历使用map()，不会回调自身对象，用在末尾
setter对象参数，每个属性设置键值对
setter函数参数，函数计算设置值
19.2.1获取和设置HMTL属性
attr() HTML属性的getter/setter
removeAttr() 删除属性
19.2.2获取和设置CSS属性
css() 返回当前计算样式，返回单个样式，将样式添加到是style中
允许使用连字符和驼峰格式样式名
可以设置符合样式
获取样式时将数值转换带有单位后缀的字符串，设置时会把数值转化为字符串，必要时添加px
19.2.3获取和设置CSS类
class属性值，js通过classname访问
addClass()和removeClass()添加和删除类
toggleClass()没有添加，反之删除，第二参数true类似addClass，false类似removeClass
hasClass()判断是否存在，接受单个类名，不接受函数参数
19.2.4获取和设置HTML表单值
val() HTML表单元素的value属性
获取和设置复选框、单选按钮及<select>元素选中状态
19.2.5设置和获取元素内容
text()和html()获取和设置元素的纯文本或HTML内容
text() 不带参数，返回匹配元素的子孙文本节点纯文本内容
html() 不带参数，返回第一个匹配元素的HTML内容，使用innerHTML实现
19.2.6获取和设置元素的位置高宽
offset()获取设置位置，相对文档计算位置，返回一个对象，带有left和top属性
position()只能用做getter()，相对父元素
width()和height() 返回基本的宽度和高度，不包含内边距、边框和外边距
-元素为Window对象或Document对象，窗口为视口大小或文档整体尺寸
-可获取可查询，可传入数值、字符串、函数
-getter和setter不对称 CSS box-sizing 设置为border-box 包含边框，context-box不包含边框
innerWith()和innerHeight 返回包含内边距宽度和高度
outerWith()和outerHeight 返回包含内边距和边框尺寸，传入true，包含外边距
scrollTop和scrollLeft，滚动条位置，不可传递函数
19.2.7获取和设置元素数据
data() 设置或获取元素相关联的数据，接受对象，名/值替换，不接受函数
removeData() 删除数据
19.3.1插入和替换元素
append() 在结尾添加
prepend() 在起始处添加
before() 在前面添加
after() 在后面添加
replaceWith() 替换
如果传入函数，第一参数为索引值，第二参数为当前内容HTML字符串形式
目标元素作为参数
appendTo()
prependTo()
insertAfter()
insertBefore()
replaceAll()
不接受函数参数，返回插入操作后新内容
document.createTextNode() 创建纯文本
19.3.2复制元素
clone() 得到副本，包括元素子孙节点
想要复制事件处理程序和与元素关联其他数据，传入true
19.3.3包装元素
wrap() 包装每一个选中的元素
wrapInner() 包装每一个选中元素的内容
wrapAll() 选中元素作为一组包装
19.3.4删除元素
empty() 删除选中子节点，不删除本身
remove() 删除选中节点，传入参数删除匹配元素，包括事件处理程序
detach() 删除元素，不移除事件处理程序
filter() 将元素从选中集中移除，不需要从文档中移除
unwrap() 移除每个选中元素的父元素
19.4 使用jQuery处理事件
blur() focusin() mousedown() mouseup()
change() focusout() mouseenter() resize()
click() keydown() mouseleave() scroll()
dbclick() keypress(0 mousemove() select()
error() keyup() mouseout() submit()
focus() load() mouseover() unload()
focus和blur不支持冒泡，focusin和focusout支持冒泡
mouseenter和mouseleave非冒泡
resize和unload只在window对象上触发，$(window)调用
scroll常用在$(window)和有滚动条元素上
error用于图片加载失败
hover(f,g) 给mouseenter(f)和mouseleave(g)注册事件
toggle() 绑定到单机事件，两个或多个处理程序
19.4.2jQuery事件处理程序
事件处理程序传入jQuery事件对象作为第一个参数，事件相关信息
trigger() 显示触发事件
返回false 取消冒泡
值储存在Event对象的result属性中
19.4.3jQuery事件对象
原生Event对象复制到jQuery Event对象上
altKey ctrlKey newValue screenX
attrChange currentTarget offsetX screenY
attrName detail offsetY shiftKey
bubbles eventPhase origianlTarget srcElement
button fromElement pageX target
cancelable keyCode pageY toElement
charCode layerX prevVlaue view
clientX layerY relatedNode wheelDelta
clientY metaKey relatedTarget which
Event对象还定义
preventDefault isDefaultPrevented()
stopPropagation isPropagationStopped
stopImmediatePropagation isImmediatePropagationStopped
metaKey 没有metaKey，会和ctrlKey一样，Mac中Command和meta一样
pageX,pageY 文档坐标
target,currentTarget,relatedTarget target其上发生事件的文档元素，currentTarget执行事件注册的元素，和this一样，过渡事件，mouseover事件中relatedTarget指移开的元素，可来自toElement,fromElement
timesStamp 事件发生事件，毫秒，Date.getTime()返回
which 事件发生事件中接下来的鼠标按钮和键盘按键，可来自charCode或keyCode
jQeury添加
data 额外的数据
handler 当前调用事件处理函数的引用
result 返回值
originalEvent 原生事件对象的引用
19.4.4事件处理程序的高级注册
$('p'),click(f);
$('p').bind('click',f); 事件类型字符串，处理函数
第二参数可传入任何值，设置为Event对象的data属性
$('a').hover(f)
$('a').bind('mouseenter mouseleave',f);
$('a').bind('mouseout.myMod.yourMod',f); //可添加命名空间
$('a').bind({mouseenter:f,mouseleave:g}); //第一参数可为对象
one()和bind()相同 但只调用一次
19.4.5注销事件处理程序
$('*').unbind() 注销事件
$('a').unbind('mouseover mouseout') 指明事件类型
//指定空间
$('a').unbind('mouseover.myMod mouseout.myMod')
$('a').unbind('.myMod');
$('a').unbind('click.ns1.ns2');
$('#mybutton').unbind('click',myClickHandler);//注销指定函数
$('a').unbind({mouseover:mouseverHanlder,mouseout:mouseoutHandler});
传入Event对象
unbind(ev)等价unbind(ev.type,ev.handler);
19.4.6触发事件
$('#my_form').submit(); //触发事件
事件触发时同步的
$('#my_form').trigger() 触发事件
$('button').trigger('click.ns1') //触发命名空间事件
$('button').trgger('click!') // 触发没有命名空间程序
可传入Event对象，jQuery事件对象，普通对象
可向trigger触发函数传入第二参数
jQuery.event.trigger() 全局触发事件
trigger() 在调用事件处理程序后，执行触发事件默认操作
triggerHandler() 不会冒泡，不会执行默认操作
19.4.7自定义事件
bind() 可自定义事件
trigger() 调用
$.event.trigger 全局触发器
19.4.8实时事件
bind() 不是实时绑定
判断冒泡是否匹配字符串
delegate()和undelegeta('a','mouseover',linkHandler) 实时绑定，用在document
live()和die()一样
$('a').live('mouseover',linkHandler);
19.5动画效果
fast 200ms
slow 600ms
默认 400ms
jQuery.fx.speeds['medium-fast']=300 添加映射关系添加新的时长名字
jQuery.fx.off 设置为true，禁用动画，时长为0ms
可设置回调函数，this为设置动画文档元素
jQuery动画默认是队列化的
可传入对象属性
{duration:'fast',
complete:function(){$(this).text('hello');}}
19.5.1简单动画
9个简单动画
-fadeIn()/fadeOut()/fadeTo() 改变opacity
-show()/hide()/toggle() 改变opacity，宽高为0
-slideDown()/slideUp()/slideToggle() 改变高度，display为none
19.5.2自定义动画
animate() 自定义动画
第一个参数，变化的CSS属性和目标值
第二个参数，duration、callback
1.动画属性对象
数值默认为像素，字符串可指定字符串，可使用相对值
属性对象中hide设置为0，调用hide
2.动画选项对象
step 每一步的回调函数
queue 是否需要队列化
缓动函数默认为swing，线性linear
jQuery.easing['squareroot']=Math.sqrt;
easing 缓动函数名
specialEasing 指定缓动函数
[目标值，缓动函数]
19.5.3动画的取消、延迟和队列
stop 停止动画 第一参数true，停止动画队列，默认false忽略
第二参数true，变化到最终值，默认false，保持当前
delay() 时长，队列名
queue() 添加新的函数，传入函数组，替代当前队列，无参数，返回队列
clearQueue() 清除队列
dequeue() 取消下一函数
19.6.1load()方法
URL、参数、回调函数
load() 传入URL，异步加载将内容传入元素
$('#temp').load('wheather_report.html #temperature');加载指定内容
jQuery选择器 加载选好的HTML
传入字符串自动追加GET请求，传入对象转化为字符串&POST请求
jQuery的Ajax状态码，回调函数的第二个参数是字符串
'success' 成功完成
'notmodified' 服务器返回HTTP304，和上次请求相同
'error' 错误
'timeout' 超市区间完成
'parsererror' 请求完成，无法解析
19.6.2Ajax工具函数
1.jQuery.getScript()
第一个参数是js文件URL，异步加载，全局作用域执行
第二个为回调函数
同源使用XMLHTTPRequest对象，第一个参数脚本内容，第二个success状态吗，第三个是XMLHttpRequest对象，返回XMLHttpRequest对象
跨域使用<script> 第一第三是undefined，返回值也是undefined
2.jQuery.getJSON()
将文本解析为JSON，使用jQuery.parseJSON
第一参数解析结果JSON，第二success，第三XMLHttpRequest
接受对象参数，为第二个，用？和&添加到URL后面
URL使用&分隔键值对，是‘application/x-www-form-urlencoded’MIME类型
serialize()方法，调用表单元素
jQuery.param() 将对象转化为字符串，可将数组转为字符串
传递true给第二参数，设置traditional为true阻止进一步序列化
contentType指定数据类型，将processData设置为false阻止传递对象给param
3.jQuery.get()和jQuery.post()
方法接受三个参数，必须的URL、可选字符串或对象、回调函数
回调函数接收三个参数，返回数据、success字符串、XMLHttpRequest对象
指定请求数据的类型，在传入回调函数钱处理
load() html类型
jQuery.getScript() script类型
jQuery.getJSON() json类型
jQuery.get和jQuey.post() 6种
-text 纯文本，不处理
-html 纯文本，load使用
-xml 使用XMLHttpRequest对象的responseXML属性代替responseText属性，返回Document对象
-script 认为是js文件，会当做脚本执行，使用<script>代替XMLHttpRequest对象，可跨域
-json 使用jQuery.parseJSON()解析，含有‘=？’会转换成jsonp
-jsonp 跨域请求，url中包含‘&jsonp=？’或‘&callback=？’，产生回调函数名
没包含检查响应中Content-Type头
19.6.3jQuery.ajax()函数
Ajax工具最后调用jQuery.ajax()
jQuery.ajaxSetup({
timeout:2000,//2秒后取消所有Ajax请求
cache:false//不缓存
])
1 通用选项
-type 请求方法，GET、POST、DELETE、PUSH，与数据类型无关，method
-url 获取的URL，GET时data会添加到URL后，JSONP请求cache为false时，jQuery可添加参数到URL中
-data GET中URL后，POST请求内容的数据，可是字符串或对象，通常字符串
-dataType 相应数据与其类型，处理数据方法，text/html/script/json/jsonp/xml
-contentType 指定请求的HTTP Cntent-Type，默认application/x-www-form-urlenconded，想发送纯文本或XML文档需要设置
-timeout 超时时间，毫秒。没有完成取消请求，发送error回调，
-cache 对于GET，false添加一个‘_=’加时间格式，禁用缓存
-ifModified 设置为true，为每个请求的URL记录Last-Modified和If-None-Match响应头的值，请求中为相同URL设置头部信息，传入succes回调的状态码是notmodified，默认不记录
-global 是否触发上面描述的Ajax事件，设置为false会禁用
-options 请求设置
-async boolean 请求为异步
2 回调
-context 指定上下文对象，就是this，指向选项对象
-beforeSend 发送到服务器前的回调函数，第一个参数是XMLHttpRequest对象，第二个是选项对象。有机会在XMLHttpRequest对象上自定义HTTP头部
-success 完成时调用的回调，第一个参数是服务器发送数据，第二个是jQuery状态码，第三个是XMLHttpRequest对象，xml返回Document对象
-error 不成功时回调，第一个是XMLHttpRequest对象，第二个是状态码，error错误，timeout超时，parseerror服务器响应时出错，xml或json对象不符合格式，第三个Error对象
-complete 完成时激活，第一个是XMLHttpRequest对象，第二个是状态码
3.不常用的选项和钩子
-async HTTP请求本身是异步的，false开启阻塞行为，
-dataFIlter 过滤或预处理服务器返回数据，第一个参数是原始数据，字符串或XML请求的Document对象，第二个是dataType选项值，在JSON解析和脚本执行之前，跨域不调用
-jsonp url或data包含‘jsonp=？’参数，会插入默认是callback，
-jsonpCallback ?替换包装函数名
-processData 第二参数转化为字符串，遵守表单标准，想将Document对象作为POST请求发送，设置为false
-scriptCharset 指定script和jsonp请求的charset属性值
-traditinal 1.4使用对象序列化方法，true回复到原来的方式
-username,password 指定用户名密码
-xhr 工厂函数，获得XMLHttpRequest对象，
19.6.4Ajax事件
回调 事件类型 处理程序注册方法
beforeSend ajaxSend ajaxSend()
success ajaxSuccess ajaxSuccess()
error ajaxError ajaxError()
complete ajaxComplete ajaxComplete()
ajaxStart ajaxStart()
ajaxStop ajaxStop()
可使用bind方法和第二列事件字符串注册Ajax事件，也可以使用第三列事件注册方法
event带有2个参数，第一个是XMLHttpRequest对象，第二个是选项对象
ajaxError事件第三个参数是Error对象
绑定context后在元素上触发
19.7工具函数
-jQuery.browser 客户端嗅探，IE有一个msie属性为true，Firefox有一个Mozilla属性为true，Safari和Chrome有一个webkit属性为true，Opera中opera为true，version为版本号
-jQuery.contains 第一个包含第二个返回true
-jQuery.each() each()遍历jQuery对象，函数遍历数组或对象属性，第一个参数为遍历的数组或对象，第二个参数是每个元素或属性上调用的函数，带有两个参数，序号和属性值。返回false停止遍历，返回第一个参数的值，for/in遍历可枚举属性，不包括继承属性，不跳过undefined
-jQuery.extend() 第二个及以后参数对象属性复制到第一个对象中，同名覆盖，忽略undefined和null，只传入一个参数，复制到jQuery对象中并返回，如果第一个为true进行深拷贝到第二个
-jQuery.globalEval() 全局上下文执行js代码字符串，<script>一样
-jQuery.grep() 类似Array对象的filter() 第一个参数数组，第二个判断函数，返回新数组，返回真值元素，第三个参数传入true，反转判断函数，返回false或假值
-jQuery.inArray() 类似Array对象的indexOf()方法，第一个是任意值，第二个是数组，返回在数组中第一次出现序号
-jQuery.isArray() 是原生数组返回true
-jQuery.isEmptyObject() 没有可枚举属性返回true
-jQuery.isFunction 是原生Function对象，返回true
-jQuery.makeArray() 类数组对象，复制到真数组，并返回，不是类数组对象，返回新数组和传入参数
-jQuery.map() 类似Array对象map()，第一个参数数组或类数组，第二个参数是映射函数，返回映射组成新数组，不返回null，返回数组元素添加到数组中
-jQuery.merge() 接受两个数组或类数组，将第二个参数元素添加到第一个上，返回第一个
-jQuery.parseJSON() 解析JSON格式字符串，使用标准JSON.parse()，没有序列化函数
-jQuery.proxy() 类似Function对象bind()方法，第一参数函数，第二个参数对象，返回新函数，作为第二个参数的对象方法调用，第一参数对象，第二参数属性名，属性值是一个函数
-jQuery.support() 类似jQuery.brower，可移植性的特性探测，值是对象，属性是布尔值，jQuery.support.boxModel，CSS标准context-box，属性为true，IE67怪异模型为false
-jQuery.trim() 字符串添加的trim()类似，接受字符串采纳数，返回开头结尾空白移除
19.8.1jQuery选择器
1.简单选择器
#id 匹配id元素
.class 匹配class属性
[attr] 匹配attr属性
[attr=val] 匹配attr属性为val元素
[attr!=val] 匹配attr属性不为val元素
[attr^=val] 匹配attr以val开头
[attr$=val] 匹配attr以val结尾
[attr*=val] 匹配attr含有val的元素
[attr~=val] 空格隔开时由val元素，'div.note'='div[class~=note]'
[attr|=val] 匹配attr以val开头其后没有其他字符，或是以连字符开头元素
:animated 动画中元素，由jQuery产生
:checked 匹配选中input元素
:contains(text) 匹配含有text的文本的元素
:disabled 匹配禁用元素
:empty 匹配没有子节点、文本内容的元素
:eq(n) 基于文档顺序、序列号从0开始选中列表中第n个元素
:even 匹配偶数序号的元素，从0开始
:odd 匹配奇数序号元素
:first 匹配列表第一个元素，和':eq(0)'相同
:first-child 匹配是父节点的第一个子元素
:gt(n) 匹配序号大于n的元素
:has(sel) 匹配拥有匹配内嵌选择器sel的子孙元素
:header 匹配头元素：<h1>
:hidden 匹配屏幕上不可见，offsetWidth和offsetHeight为0
:last 匹配选中列表最后一个元素
:last-child 匹配是其父节点最后一个子元素
:lt(n) 基于文档顺序，小于n
:not(sel) 匹配不内嵌选择器sel
:nth(n) 与eq(n)相同
:nth-child(n) 匹配元素是其父第n个元素，从1开始
:only-child 匹配其实父节点唯一节点的元素
:parent 匹配是父节点元素，与‘empty’相反
:input 匹配输入元素:<input>/<textarea>/<select>/<button>
:button 匹配<button tpye='button'>和<input type='button'>
:checkbox 匹配 <input type='checkbox'>，显示带有‘input:checkbox’跟高效
:password 匹配是<input type='password'>
:radio 匹配是<input type='radio'>
:file 匹配<input type='file'>元素
:image 匹配<input type='image'>元素，不匹配<img>
:selected 匹配选中<option>，使用‘:checked’选取的复选框和单选框
:reset 匹配是<input type='reset'>和<button type='reset'>
:submit 匹配<input ype='submit'>和<button type='submit'>
:text 匹配<input type='text'>
:visible 匹配所有可见元素
2.组合选择器
A B 从匹配选择器A元素子孙元素中，匹配选择器B的文档元素
A>B 从匹配A子元素中B
A+B 从匹配A下一个兄弟元素选中B
A~B 从匹配A元素后面元素中选取B
19.8.2选取方法
-slice() 和Array.slice()方法类似，前者接受开始和结束序号（负号从结尾开始）
-filter() 传递字符串返回jQuery对象；传递另一个对象，返回交集；传递判断函数，为每个元素调用函数，返回jQuery对象，this为当前值，参数为元素序号
-not() 和filter()一样，含义相反
-has() 选取包含子孙元素匹配选择器的选中元素
-add() 扩充选区，移除重复元素，按文档元素排序
1.将选中元素集用做上下文
-find() 当前选中元素子孙元素中寻找指定元素
-children() 返回每个选中元素的直接子元素
-contents() 返回所有子节点，包括文本节点，不接受选择器参数，包含<iframe>文档对象
-next()和prev() 返回上一个和下一个兄弟元素
-nextAll()和prevAll() 返回前面或后面的所有兄弟元素
-silbings() 返回每一个选中元素的兄弟元素
-nextUntill()和prevUntill() 每一个元素，接受一个选择器直到找到匹配该选择器兄弟位置
-parent() 返回选中元素的父节点
-parents() 每一个返回祖先元素直到
-parentsUntill() 每一个祖先元素，直到匹配元素
-closest() 返回匹配的祖先元素中最近的一个
2.恢复到之前的选中元素集
添加派生自的旧jQuery对象的内部引用，创建jQuery对象的链式表或栈
-end() 弹出栈
-pushStack() 手动定义选中元素集，原来元素压入栈中
-andSelf() 返回新的jQuery对象，包含之前所有选中元素
19.9jQuery的插件扩展
添加新功能的而模块成为插件（plug-in），在jQuery之后引入插件
jQuery.fn 是所有jQuery对象的原型对象
jQuery插件约定：
-不要依赖$标识符
(function($){
//插件代码
}(jQuery))
-返回自己的值，jQuery对象以便链式调用
-不要污染jQuery命名空间，使用插件名作为方法名前缀
-插件绑定事件处理程序，使用插件名命名空间
-使用data()方法与元素关联数据，将数据值放在单一对象中，插件名相同键值作为单一值存储
-jQuery.plugin.js 命名方式保存插件代码
jQuery.fx.speeds 添加动画时长名
jQuery.easing 添加属性添加新的缓动函数
jQuery.expr[':'] 添加属性添加新的伪类过滤器
自定义选择器（元素，整数序号-候选元素组位置，调用RegExp.exec()返回数组，候选元素组）
19.10jQuery UI类库