jquery学习笔记

创建元素包装集

基本选择（查找器）

1) * 匹配任何元素

2) E 匹配标签名为E的所有元素

3) E F 匹配标签名为F，而且是E的后代

3) E>F 匹配标签名为F，而且是E的直接子节点

4) E+F 匹配标签名为F，而且前面邻近兄弟是E（E和F紧挨着）

5) E-F 匹配标签名为F，而且前面任何兄弟是E（E和F不用紧挨着）

6) E:has(F) 匹配标签E，而且标签E有子节点F

7) E.C 匹配标签E，而且标签E含有类C

8) E#I 匹配标签E，而且标签E的ID为I

9) E[A] 匹配标签E，而且标签E含有属性A

10) E[A=v] 匹配标签E，而且标签E的属性A的值等于V

11) E[A^=V] 匹配标签E，而且标签E的属性A的值以V开头

12) E[A$=V] 匹配标签E，而且标签E的属性A的值以V结尾
13) E[A*=V] 匹配标签E，而且标签E的属性A的值包含V

位置选择(筛选器)

1) :first 最先匹配的元素
2) :last 最后匹配的元素
3) :first-child 最先匹配的子元素
4) :last-child 最后匹配的子元素
5) :only-child 没有兄弟节点的元素
6) :nth-child 第n个子节点
7) :nth-child(even|odd) 偶数或奇数的子节点
8) :nth-child(Xn+Y) 返回n的倍数后的第Y节点
9) :even 页面范围内偶数的匹配元素
10) :odd 页面范围内奇数的匹配元素

11) :eq(n) 第n个匹配元素

12) :gt(n) 大于n的匹配元素

13) :lt(n) 从0到n的匹配元素

自定义选择

1) :animated 当前处于动态控制之下的元素

2) :button 选择按钮如submit, reset, button

3) :checkbox 仅选择复选框元素

4) :checked 仅选择复选框或单选按钮

5) :contains(text) 仅选择包含文本text的元素

6) :disabled 仅选择disabled表单元素

7) :enabled 仅选择enabled表单元素

8) :file仅选择文件元素(input[type=file])

9) :header仅选择标题元素

10) :hidden 仅选择隐藏元素

11) :image 仅选择表单图像元素

12) :input 仅选择表单元素(<input>，<select>，<textarea>，<button>)

13) :not(filter) 根据指定筛选器取反

14) :parent 选择拥有后代节点的元素

15) :password 选择口令元素

16) :radio 选择单选按钮元素

17) :reset 选择复位按钮元素

18) :selected 选择已选中的元素

19) :submit 选择提交按钮元素

20) :text 选择文本字段元素

21) :visible 选择可见元素

自定义选择器和属性选择器也是筛选器，可以使用:not取反，div p:not(:hidden) 选择div下非隐藏的p

生成新HTML

$("<div class='foo'>you are foo!</div>").filter('.foo').click(function(){alert('you are really foo!');}).end().appendTo('#front_div')

第一步生成新的div片段，第二步注册onclick事件，第三步把div追加到front_div后面

管理包装元素集合

$('#somediv').html('There are ' + $('a').size() + 'link(s) on the page.'); 计算a链接的个数

$('img[alt]')[0] <==> $('img[alt]').get(0) 获取匹配元素集合第0个元素

$('img').index($('img[alt]')[0]) 反解元素下标

$('img[alt], img[title]') 包含img[alt]和img[ttile]的元素包装集

$('im[alt]').add('img[title]') 首先生成包含img[alt]的包装集，再把img[title]的元素添加到包装集

$('p').add('<div>temporary element.</div>') 添加新建的div元素到包装集

var elements = $('img'); $('div').add(elements); 添加元素数组到包装集

var element = $('img')[0]; $('div').add(element) 添加元素到包装集

$('img[title]').not('[title*=puppy]') 删除img['title*=puppy']的元素

var elements = $('img[title*=puppy]'); $('img[title]').not(elements) 删除包装集中的元素组

var element = $('img[title*=puppy]')[0]; $('img[title]').not(element) 删除包装集中的元素

$('img[title]').filter('[title*=puppy]')  选择img['title*=puppy']的元素

$('img[title]').filter(function(){return this.InnerHtml.match('/^\d+$/')}) 选择满足匹配条件的元素

$('div').slice(0,4) 选择0-3这四个元素组成新包装集

$('div').slice(4) 选择下标4及以后的元素组成新的包装集

$('div').children() 返回原始包装集元素的所有子元素

$('div').contents() 返回原始包装集元素的内容

$('div').next() 返回原始包装集元素下一个兄弟

$('div').next() 返回原始包装集元素所有后续兄弟

$('div').parent() 返回原始包装集元素的直接父亲

$('div').parents() 返回原始包装集元素的祖先

$('div').prev() 返回原始包装集元素的前一个元素

$('div').prevAll() 返回原始包装集元素的所有前面兄弟

$('div').siblings() 返回原始包装集元素的所有兄弟

$('div').find('p cite') 返回匹配p cite的所有元素

$('div').is('img[title]') 包装集中是否包含匹配img[title]的元素

$('dive').clone().end() 退回到前一个包装集

让页面生动起来

操作元素属性

$('img').each(function(n){this.alt='This is image[' + n + '] with an id of ' + this.id;})  遍历包装集元素，对于每个元素修改alt属性

$('*').attr('title', function(index){return 'I am element' + index + 'and my name is' + this.id}); 遍历包装集，修改每个元素title属性

$('input').attr({'value' : 'value', 'title' : 'please enter a value'}) 同时设置多个属性值

$('input').attr('value', 'value_va') 设置单个属性值

$('img').removeAttr('title') 删除属性，不改变DOM元素特性

修改元素样式

$('tr').addClass('stripped')  添加stripped样式

$('tr').removeClass('stripped') 删除stripped样式

$('tr').toggleClass('stripped') 如果没有stripped，则添加stripped，如果有，则删除

$('div.expandable').css('width', function() {return $(this).width() + 20 + 'px';}) 遍历包装集，修改元素宽度

$('div.expandable').css('width') <==> $('div.expandable').width 获取元素宽度 

$('div.expandable').css('width', '500px') <==> $('div.expandable').width('500px') 设置元素宽度

$('p:first').hasClass('SurpriseMe') 判断是否有SupriseMe样式

设置元素内容

$('#theList').html() 获取元素内容

$('#theList').text() 获取元素内容

$('#theList').html('<p>title</p>') 设置元素内容

$('#theList').text('<p>title</p>') 设置元素内容

$('#flower').appendTo('#targets p') 追加元素到现有内容的末尾

$('#targets p').append('#flower') 追加元素到现有内容的末尾

$('#flower').prependTo('#targets p') 追加元素到现有内容的开头

$('#targets p').prepend('#flower') 追加元素到现有内容的开头

$('#flower').insertBefore('#targets p') 插入元素到前面

$('#flower').insertAfter('#targets p') 插入元素到后面

$('a.surprise').wrap('<div class=hello></div>') 用div包裹每个a元素

$('a.surprise').wrap($('div:first')[0]) 用div包裹每个a元素

$('a.surpise').wrapAll('<div class=hello></div>') 用div包裹所有的a元素

$('a.surprise').wrapInner('<div class=hello></div>') 用div包裹所有a元素的内容

删除元素

$('div.elementToReplace').insertAfter('<p>I am replacing the div</p>').remove(); 删除原有元素，并用新元素替换

克隆元素

$('img').clone().appendTo('filedset.photo') 克隆img元素追加到filedset

处理表单元素

$('[name=radioGroup]:checked').val() 过去单选项的值

$('input.select').val(['one', 'two', 'three']) 选中多选项

事件

浏览器事件模型

$(function(){$('#vstart')[0].onmouseover = function(event) {say('whee!');}};);  注册mouseover事件

<img id='vstart' src='vstar.jpg' οnclick="say('Vroom vroom')"> 注册onclick事件 <==> imageElement.onclick = function(event) { say('vroom vroom');}

if(!event) event = window.event  适配IE浏览器event对象

事件冒泡， 事件向上传递, event.stopPropagation() 或event.canBubble=true 取消向上传播

DOM-LEVEL2事件模型

标准浏览器：

捕获阶段root->sub_level1->sub_level2 冒泡阶段sub_level2->sub_level1->root

$('img').addEventListener('click', function(event){say('captured')'}, true); 注册捕获阶段处理函数 

$('img').addEventListener('click', fucntion(event){say("bubbled");},  false); 注册冒泡阶段处理函数

IE浏览器：

无捕获阶段，只有冒泡阶段 sub_level2->sub_level1->root

$('img').attachEvent('onclick', function(event){say('captured')});

JQuery事件模型

$('img').bind('click', function(event) {alert('Hi there!');});  绑定onclick事件处理函数

$('thing1').bind('click.editMode', someListener); 注册click事件并且仅在edit模式起作用

$('img').one('click', function(event) {alert('Hi there!');});  注册click事件并且调用一次后删除这个事件

$('img').click( function(event) {alert('Hi there!');}) 注册click事件的快捷方式，但是不支持data

$('img').unbind(eventType, listener) 删除eventType类型监听器，或是listener对应的监听器

$('img').unbind(event) 删除Event实例对应的监听器

Event实例

Event属性：

altKey 按ALT键为true，否则为false

ctlKey 按ctl键为true, 否则为false

data 注册时间传入data

pageX 鼠标X坐标

pageY 鼠标Y坐标

event.stopProgation() 阻止事件向上传播

$('img').trigger('click')  <==> $('img').click()  调用img绑定的click事件处理函数

$('img').toggle(listenOdd, listenEven) 注册两个click事件处理函数，来回切换

$('#outer2').hover(report, report) 注册mouserover和mouserout的处理函数，区别在与一个元素包裹另一个元素，外层元素移动到内层元素，不产生事件

$('div', $(this).parents('div:first')) 第二个参数表示在这个匹配元素内查找div元素

$('~span:first', this).text()  选择第一个span兄弟元素，并且是this下的元素

用动画和效果来装扮页面

使元素显示和隐藏

$('div').hide().addClass('fun') 隐藏元素

$('div').show().addClass('fun') 显示元素

$('div').children().toggle(); 切换显示和隐藏，来回调用hide/show

渐进式显示和隐藏

$('div').hide(speed, callback)  speed持续时间，callback隐藏完毕的回调函数

$('div').show(speed, callback)  speed持续时间，callback显示完毕的回调函数

$('div').children().toggle(speed, callback);  speed持续时间，callback翻转显示隐藏完毕的回调函数

元素淡入和淡出

$('div').fadeIn(speed, callback)  speed持续时间，callback隐藏完毕的回调函数

$('div').fadeOut(speed, callback)  speed持续时间，callback显示完毕的回调函数

$('div').fadeTo(speed, opacity, callback)  speed持续时间，opacity目标透明度，callback显示完毕的回调函数

元素滑上和滑下

$('div').slideDown(speed, callback)  speed持续时间，callback隐藏完毕的回调函数

$('div').sideUp(speed, callback)  speed持续时间，callback显示完毕的回调函数

$('div').slideToggle(speed, callback)  speed持续时间，opacity目标透明度，callback显示完毕的回调函数

停止动画

$('div').stop(); 停止包装集中的动画

创建自定义动画

$('div').animate(properties, duration, easing, callback)  properites目标属性值（字典类型），duration持续时间，easing缓和函数，callback动画完毕回调函数

$('div').animate(properties, options) properties目标属性值，options = {'duration' : duration, 'easing' : easing,  'complete' : complete_func, 'queue' : true}

使用工具函数

检测用户代理

$.browser.msie IE浏览器时为true

$.browser.mozilla mozilla系列浏览器为true

$.browser.safari safari浏览器为true

$.browser.opera opera浏览器为true

$.broswer.verison 引擎版本

确定方框模型

$.boxModel W3C方框模型为true

方框模型分为两类W3C和IE模型

W3C方框模型：W3C模型不包含内边距和边框宽度

IE方框模型：IE模型包含内边距和边框宽度

获取浮动样式

$.styleFloat 获得浮动样式属性名

释放$引用

$.noConflict() 释放$应用，仍然可以使用jquery变量访问jquery库

Javascript对象和集合

$.trim('abc ') 除去前后的空格换行

$.each(container, callback) 遍历数组或字典，callback接收两个参数，如果是数组的话为n, value，如果是字典的话为name, value

$.grep(container, callback, invert) 筛选数组，callback返回True，被保留。invert=True的话，callback返回False被保留，callback接收两个参数value,n 

$.map(container, callback) 数组转换，callback接收两个参数value,n，callback返回undefined或null被忽略

$.inArray(value, array) 返回value在array中的下标，没有返回-1

$.makeArray(object) 可以创建基于元素列表的数组

$.unique(object) 由唯一元素构成数组

$.extend(target, source1, source2) 用字典 source1和source2扩展字典target

动态加载脚本

$.getScript(url, callback) url脚本路径，callback获取成功后的回调函数，接收两个参数text, result, text脚本文本，result为'success'

自定义插件扩展JQuery

给文件和函数命名

jquery.compent_name.function_name.js

小心$

(function($){plugin definitions goes here})(jquery);  在函数体内部使用$引用jquery

简化参数列表

function complex(p1, options) {

    var settings = $.extend({

        option1 : default1,

        option2 : default2 ,

        option3 : default3,

        option4 : default4,

        option5 : default5,

        option6 : default6,

    }, options || {})  options等于null或undefined求值为{}空字典，extend扩展字典，被扩展值相同的，取后面字典的值。

}

自定义实用工具函数

(function($){$.say = function(what){alert(what);}; })(jquery);  $.say扩展jquery属性

添加包装器方法

(function($){$.fn.setReadOnly = function(readonly) {return this.filter('input:text')

    .attr('readonly', readonly)

    .css('opacity', readonly ? 0.5 : 1.0);}

})(jQuery);   添加包装集，设置文本只读状态

javascript闭包

(function($){

    var settings;

    $.fn.iterator = functio() {settings.value=0;};}

)  外部变量可以在内部函数中使用

Ajax与服务器交互

创建XHR实例

xhr_new = xhr.open('GET', '/some/resouce/url') 创建一个xhr请求

xhr.onreadystatuschange = function() {

    if (xhr.readyState == 4) {

        if (xhr.status >= 200 && xhr.status < 300) {

            //success

        }

    }

    else {

        //fail

    }

} 请求状态变化回调函数

xhr.send(null) 发送GET请求

xhr.send('a=1&b=2') 发送请求

获取响应

$('#someContainer').load('/serverResource') 从服务器加载html片段到someContainer 等价于发送xhr请求

$('.injectMe').load(url, parameter, callback) url请求地址，parameter为POST请求参数(有参数为POST请求，参数为null则为GET请求) callback为响应数据加载完毕的回调函数

$.serializeArray()收集表单数据到字典中

$.serialize 收集表单数据到查询字符串

发起GET和POST请求

$.get(url, parameters, callback) 与服务器交互url，parameters字典类型或uRI格式字符串，callback请求完成时的回调函数，

$.getJSON(url, parameters, callback) 发起GET请求，返回json格式数据，参数类似于$.get函数

$.post(url, parameters, callback) 发起post请求，参数类似于$.get函数

$.ajax(options) 完全控制ajax发送，

参数选项：

url ：与服务器交互url

type：交互类型GET或者POST

data：交互参数，类型为字典

dataType：返回数据类型，可以是xml、HTML、json、jsonp、script、text

timeout：交互超时时间

gloal：是否为全局函数发送

contentType：请求类型，默认为application/x-www-form-urlencoded

success：返回成功时的回调函数

error：返回失败时的回调函数

complete：请求完成时的回调函数

beforeSend：发送前的回调函数

async：是否为异步发送

processData：是否允许传递数据被加工为url编码

ifModified：数据是否改变

$.ajaxSetup(properites) 设置ajax请求默认参数

$('#errorConsole').ajaxError(reportError) 在errorConsole元素上报告ajax error

$('#errorConsole').ajaxStart(reportError) 在errorConsole元素上报告ajax start

$('#errorConsole').ajaxSend(reportError) 在errorConsole元素上报告ajax send

$('#errorConsole').ajaxSuccess(reportError) 在errorConsole元素上报告ajax success

$('#errorConsole').ajaxComplete(reportError) 在errorConsole元素上报告ajax complete

$('#errorConsole').ajaxStop(reportError) 在errorConsole元素上报告ajax stop

实用的插件

表单插件

$('#testForm *').filedValue() 返回表单有效项值数据

$('#testForm').formSerialize(semantic) 收集表单数据项格式化为查询字符串

$('#testForm').filedSerialize(semantic) 收集表单数据项格式化为查询字符串，仅收集input元素

$('#testForm').clearForm() 清空表单项

$('#testForm').resetForm() 还原表单项为初始值

$('#testForm').ajaxSubmit() 提交表单

参数：

url 与服务器交互url

type 提交类型GET或POST

dataType 返回数据类型xm、json、script

target 返回数据接收元素

beforeSubmit 提交前回调函数

success 返回成功回调函数

clearForm 返回后清楚表单

resetForm 返回后重置表单

semantic 提交参数按语义排序

$('#testForm').ajaxForm(options) 参数同ajaxSubmit，在表单内有button时使用

$('$testForm').ajaxFormUnbind() 删除提交处理函数设置

尺寸插件

$('div').width() 元素宽度

$('div').height() 元素高度

$('div').innerWidth() 内部宽度，包含内边距

$('div').innerHeight() 内部高度，包含内边距

$('div').outerWidth() 包含边框宽度和外边距(可选择)

$('div').outerHeight() 包含边框高度和外边距(可选择)

滚动尺寸

$('div').scrollTop(value) 设置、获取上下滚动条的位置，传入value设置滚动条位置，不传入获取滚动条位置

$('div').scrollLeft(value) 设置、获取左右滚动条的位置，传入value设置滚动条位置，不传入获取滚动条位置

偏移和位置

$('div').offsetParent() 获取偏移父元素，偏移父元素为带有relative或absolute最近祖先元素(并带有position)

$('div').position() 返回相对于偏移父原元素的相位置值(一个字典)

$('div').offset(options, results) 返回相对于body的位置值

参数：

relativeTo 相对于那个祖先元素，这个元素带有relative或absolute的position属性，省略则为body

lite 指定是否启用优化

scroll 是否把滚动考虑进去

padding 是否把内边距包括进去

border 是否把边框考虑进去

margin 是否把外边距考虑进去

参数results 传递返回位置信息到results参数，函数返回包装集，如果没有传递从函数返回位置信息

实时查询插件

$('div.testSuject').livequery('click', function() {$(this.toggleClass('matched'))}) 添加实时click处理函数，对现有元素和新增元素都起作用

$('div.matched').livequery(function() {reporatMatch()}, function(){reqportDismatch}) 添加matched/dismatched处理函数，对现有元素和新增元素都起作用

$('div').expire()

$('div').expire(event, listener)

$('div').expire(onmatch, ondismatch) 取消实时监听器

拖动元素

$('div').draggable(options) 

参数:

helper 指定被拖动元素，默认为original，原始元素被拖放，clone则复制原始元素拖放，function(e) {return $(e).clone().css('color' : 'green');} 指定函数生产拖动元素

ghosting 指定true，相当于helper clone

handle 拖动把柄元素，点击这个元素开始拖动

preventionDistance 点击之后移动多少像素开始拖动

dragPrevetion 点击那些元素不执行拖动操作，默认为input, textarea, button, select, option

cursorAt 与拖动元素左上角相对关系，top, left组成的字典

appendTo 拖动结束后被拖动元素放在的位置

start 拖动开始前的回调函数, 参数为event target为被拖动元素和一个字典包含helper, position(当前鼠标位置)，offset为cursorAt，options创建可拖动对象时指定的options

stop 拖动完成后的回调函数，参数event同start，position拖动后元素左上角的位置

drag 拖动过程中的回调函数，参数同stop

axis 指定拖动沿哪个轴移动

containment 指定拖动范围，可以为父元素，窗口，或相对父元素的一个范围(left right top bottom)

$('div').draggleDestroy() 取消拖动

$('div').draggleDisable() disable拖动

$('div').draggleEnable() enable拖动

放置元素

$('div').droppable(options) 设置可放置元素

参数：

accept 指定哪些元素为可放置原元素，可以是筛选器，可以是函数

tolerance 指定为touch 可拖动元素与可放置元素重叠，进入武装态， 指定为pointer鼠标进入可放置元素，进入武装态, intersect 50%相交进入武装态

activate 进入活动态回调函数

deactivate 进入不活动态回调函数

over 活动态进入武装态回调函数

out 武装态进入活动态回调函数

drop 放置之后回调函数

activeClass 进入活动态的css类名称

hoverClass 进入武装态的css类名称

$('div).droppableDestroy() 取消放置

$('div').droppableDisable() disable放置

$('div').droppableEnable() enable放置