【Jquery-leearning notes-2015】by lijun
1 Jquery是javascript实现的库，目标在于改变web应用的高交互性的方式。
其不唐突性：样式(.css)、脚本文件(.js)从页面结构中分离出来,页面结构(body)专注于标签元素的设计布局:
<html>
<head>
<!--.css样式文件的引入-->
<!--.js 脚本文件的引入-->
</head>
<body>
<!--结构元素的设计布局-->
</body>
</html>
//window.onload延迟到页面全部加载完成后才执行
window.onload=funtion(){
alter(“run after the page loaded completly”);
}
//下面页面加载DOM树后即可执行的脚本，不必延迟至页面资源全部加载后！
Jquery==$ 等价于
1.参数document
$(document).ready(
function(){
jquery(function(){
$(‘div.myclass’).hide();//隐藏含有css类名myclass的div元素
});
}
);
2.简写形式
$(function(){
//执行的代码
});
3.默认参数document
$().ready(function(){
//执行的代码
});
2 jquery对象的操作
Jqeury对象的定义：类似组的对象，包含的属性主要是整型属性、length属性以及一系列的jqeury的寒素。
$(参数) 参数可以是dom元素(document.body)/选择器表达式/jquery对象
返回的是包装集的jquery对象 非DOM对象
关系: var dom=$(‘div.myclass’)[0]; var jquery=$(‘div’);
基本选择：
a 匹配所有的链接元素:$(‘a’)
区别id类型 css样式 元素id属性的获取方式
#aid 匹配id为aid的元素:$(‘#id’)
.myclass 匹配含有css类名myclass的元素:$(‘.myclass’)
a#aid.myclass 匹配含有此id(既可以是标签的属性 也可以是样式)且含有此css类的a元素:$(‘a#aid.myclass’)
eq(index) 选取下标位置index的对象下·元素 从0开始
层次选择：
$(‘*’):匹配所有的元素
$(‘e f’):匹配e标签内的子孙元素f
$(‘e>f’):匹配e标签的直接子元素f
$(‘e+f’):匹配e标签后的同级第一个元素f
$(‘e~f’):匹配e标签后的所有同级元素f
属性选择：
$(‘e[name]’):匹配含有属性name的e元素
$(‘e[name=’lijun’]’):匹配含有属性name且值为lijun的e元素
$(‘e[href^=’http’]’):匹配含有属性href 且值的开头是http的e元素
$(‘e[href$=’.com’]’):匹配含有属性href 且值的结尾是.com的e元素
$(‘e[href!=’http’]’):匹配含有属性href 且值等于http的e元素
$(‘e[href*=’jquery]’):匹配含有属性href 且值含有jquery的e元素
位置选择：
a:fisrt页面上的第一链接的元素
a:last页面上最后一个链接元素
ul li:first-child/last-child 页面上所有的ul 的第一个li元素
:gt(n) 第n个元素后的元素
:lt(n) 第n个元素前的元素
$(‘div’).next() div元素的后的第一个的同级元素
$(‘div’).nextAll() div元素后的所有的同级元素
table#mytb td:first-child id为mytb表的所有的第一个单元格元素，即每行的第一个单元格的元素
状态过滤器：
:animated 处于动画状态的元素
:checked 处于选中状态的元素
:enabled 处于启用的元素
:selected 处于选中的列表元素
:odd位置下标处于奇数的元素
:even位置下标处于偶数的元素
$(“ul”).filter(:even).css().end() 使用过滤器选择列表下标位置index为偶数的选项li元素集合设置其样式 之后便是使用end()结束该元素集合 并设置当前选中的元素集合为ui元素集合
内容过滤：
:empty 选择不包含任何元素或文本的元素
:not(选择器) 选择除了指定外的元素
$(‘img:not([src*=’dog’])’) 选择src不包含dog的img图片元素
:has(选择器)选择包含指定元素的元素
$(‘div.has(a)’) 选择包含有链接的div元素
:contains(t)选择包含文本t的元素
:parent 选择包含子元素或文本的元素
数组遍历函数比较
var a=[1,2,3]
each(a,function(index,value){
//适用于为数组元素的添加删除事件函数/样式
})
a=map(a,function(index,value){
//适用于对数组元素值的修改
return 修改过的数组元素值至数组
})
var son=grep(a,function(index,value ){
//适用于返回数组元素中符合某些条件的子集
return 符合条件的数组元素至调用grep()变量
})
表单选择：
:button 选择按钮(普通、提交、重置等)元素
:input
:sumbit
:reset
创建html
$(‘<img>’,{src:’’,’’,}).css({border:’’,padding:’’}).appedTo(‘body’);
3 DOM (dom-core 、html-dom 、css-dom)对象操纵
$(‘p’).append(‘<a/>’) 追加到元素中
<p>123<a/></p>
$(‘<a/>’)appendTo(‘p’) 元素追加到指定元素中
<p>123<a/></p>
$(‘p’).prepend(‘<a/>’) 追加到元素内部内容的前面
<p><a/>123</p>
$(‘<a/>’).prependTo(‘p’) 追加到指定元素内部内容的前面
<p><a/>123</p>
$(‘div’).after(‘new’) 追加到元素外的后面
<div></div><new></new>
$(‘new’).insertAfter(‘p’)
$(‘div’).before(‘new’) 追加元素外的前面 <new></new><div></div>
insertBefore()
reomove()删除标签元素相关的事件数据全部
detach() 置标签元素为托管态 其事件数据不删除
empty()清空标签元素的内容
next() 匹配此后同级别的元素 一个
prev() 匹配此前的同级别的元素 一个
siblings() 匹配此前后的所有同级别的元素
children() 匹配元素的直接子元素
attr() 设置单个多个属性
$(‘img’).attr(‘src’:’photos/1.jpg’,’width’:’10’,’height’:’10’)
removeAttr()移除指定的属性
html() 读取(无参数)或设置(有参数)元素的html
text() 读取(无参数)或设置(有参数)元素的文本内容
$(‘div’).replaceWith(‘<p>’)
$(‘div’).replaceAll(‘p’)
$(‘a’).wrap(‘div’) 对匹配的每个元素独立包裹 <div><a1></div> <div><a2></div>
$(‘a’).wrapAll(‘div’) 对匹配的所有的元素统一包裹 <div><a1><a2></div>
$(‘div’).wrapInner(‘li’) <div><li>123</li></div>
css() 获取设置元素的样式
width() 获取宽px
height() 获取高px
offset() 获元素所在视窗的偏移量 返回一个包含left top的对象
position()获取相对最近的父元素(relative absolute)的偏移量 返回一个包含left top的对象
srollTop() 获取设置具备滚动条的元素的滚动条的距高
srollLeft(）获取设置具备滚动条的元素的滚动条的距左
4 事件处理
Jquery的使用需要对未定义事件进行定义：
function(event){
if(!event) event=window.event;//
}
DOM第0级事件模型：事件处理器是通过将一个 函数的引用的赋值给DOM元素的属性来声明。onclick=function(){//dosomething}
缺陷：太依赖浏览器的特 所实现的事件处理函数违背了不唐突性；
DOM第2级事件模型：可以实现一个多事件处理的DOM属性:addEvnetListener(type,listener,usecapture)。
//使用事件捕获 禁止事件冒泡
$(function(){
var element=$(‘img’);
element.addEvnetListener(‘onclick’,function(event){alert(“listener1”)},ture);
element.addEvnetListener(‘mousehover’,function(event){alert(“listener2”)},ture);
element.addEvnetListener(‘mouseout’,function(event){alert(“listener3”)},ture);
});
Jquery事件模型：
提供统一的事件处理器创建的方法
提供统一的事件取消、阻止默认行为的方法
实现单个元素关联多个事件处理器
使用标准的事件类型
规范化Event且可作为参数
bind(eventtype,listener)//永久性的事件触发器函数 将事件绑定至指定的元素
one(eventtype,data)//一次性的事件处理器函数
//绑定多个事件处理器
$(function(){
$(‘div’).bind(‘click’,function(event){alert(‘onclick’);},)
.bind(‘mousehover’,function(event){alter(‘mousehover’);})
.bind(‘mouseout’,funcion(event){alter(‘mouseout’);});
});
Unbind(eventtype,listener);
//解绑事件处理器
$(‘div’).unbind(‘onclick’,事件处理函数名);
//事件命名空间AB
bind(‘click.A’,function(){}) //接触解除命名空间事件 unbi nd(‘.A’)
bind(‘click.B’,function(){})//接触解除命名空间事件 unbind(‘.B’)
trigger(‘click!')//触发不在任何命名空间的click事件 可用于模拟用户操作
预事件管理函数live()即:可在元素未被创建出来时预先定义其事件管理函数：
live(evnettype,listener)将事件绑定至文档的根元素 利用事件冒泡机制匹配元素及其事件处理
die(eventype,listener)
委托事件函数
//指定容器范围的添加事件处理函数、实现共享事件处理函数 不会创建过多的钩子(代码：通过拦截函数调用、消息以及事件而改变软件的行为)
$(“#nav”).delegate(“#nav-item”,”lclick”,function(){thid})//#nav的对象委托#nav-item对昂进行额比事件函数处理 函数内部的this映射的是被委托的对象
触发器事件：
Trigger(eventtype,data)//关联的live函数也会触发 自动运行eventtype的操作
TriggerHandler(evnettype,data)//相关联live函数或默认的行为不会被触发 触发设定的event
hover(enter(),leave()) 鼠标悬于元素上和离开元素时的事件处理器
切换事件处理器函数：
toggle(lstener1,listener2,listener3,n); 鼠标连续单击事件的响应函数/样式的切换
|
方法 |
描述 |
|
向匹配元素附加一个或更多事件处理器 |
|
|
触发、或将函数绑定到指定元素的 blur 事件 |
|
|
触发、或将函数绑定到指定元素的 change 事件 |
|
|
触发、或将函数绑定到指定元素的 click 事件 |
|
|
触发、或将函数绑定到指定元素的 double click 事件 |
|
|
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
|
|
移除所有通过 live() 函数添加的事件处理程序。 |
|
|
触发、或将函数绑定到指定元素的 error 事件 |
|
|
返回 event 对象上是否调用了 event.preventDefault()。 |
|
|
相对于文档左边缘的鼠标位置。 |
|
|
相对于文档上边缘的鼠标位置。 |
|
|
阻止事件的默认动作。 |
|
|
包含由被指定事件触发的事件处理器返回的最后一个值。 |
|
|
触发该事件的 DOM 元素。 |
|
|
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
|
|
描述事件的类型。 |
|
|
指示按了哪个键或按钮。 |
|
|
触发、或将函数绑定到指定元素的 focus 事件 |
|
|
触发、或将函数绑定到指定元素的 key down 事件 |
|
|
触发、或将函数绑定到指定元素的 key press 事件 |
|
|
触发、或将函数绑定到指定元素的 key up 事件 |
|
|
为当前或未来的匹配元素添加一个或多个事件处理器 |
|
|
触发、或将函数绑定到指定元素的 load 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse down 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse enter 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse leave 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse move 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse out 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse over 事件 |
|
|
触发、或将函数绑定到指定元素的 mouse up 事件 |
|
|
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
|
|
文档就绪事件（当 HTML 文档就绪可用时） |
|
|
触发、或将函数绑定到指定元素的 resize 事件 |
|
|
触发、或将函数绑定到指定元素的 scroll 事件 |
|
|
触发、或将函数绑定到指定元素的 select 事件 |
|
|
触发、或将函数绑定到指定元素的 submit 事件 |
|
|
绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
|
|
所有匹配元素的指定事件 |
|
|
第一个被匹配元素的指定事件 |
|
|
从匹配元素移除一个被添加的事件处理器 |
|
|
从匹配元素移除一个被添加的事件处理器，现在或将来 |
|
|
触发、或将函数绑定到指定元素的 unload 事件 |
5 jquery 动画特效
animate(parmas ,speed,callback())
params:{属性1:值，属性2:值} 动画操作的属性
speed：速度 单位是毫秒
callback:动画完成后的执行的和回调函数
stop(bool1,bool2) bool1&bool2=true 停止所有动画但完成最终结果
bool1=true& bool2无 停止所有动画
bool1&bool2无 停止当前正在执行的动画 其它在队列里未执行的动画不受影响
动画交互函数
toggle() 无参数时等价于hide() show() 隐藏显示函数
fadeTo() 透明度
SlideToggle() 无参数时等价于 sildeup() slidedwon() 高度silde动画
fadeToggle()无参数时等价于fadein() fadeout() 淡入淡出动画函数
animate函数可通过设置属性参数实现以上动画交互函数
6 jquery插件
引入插件js，选择标签元素并应用插件函数 jquery().函数();
7 jquery ajax与服务器的交互
1.创建XHR
2.open(method,url,true/false)
3.send(params)
4.onreadystatechange 设置回调函数
function(){·
if(xhr.readystate==4)
if(xhr.status==200){
//通过response获取服务器返回的数据
}
}
Jquery 获取并加载服务器返回数据方法：
$.ajax()是实现下列全局函数的基本函数，它也是实现jquery实现ajax的底层基本函数
$.ajax(
{
type:
url:”jsp/a.jsp”,
async:true, //fasle
datatype:,
其它键值对参数
}
);
$(‘div’).load(url,params,callbackfunction()) //url 参数 回调函数
$.get(url,callback) 获取静态资源
$.get(“jsp/a.jsp”,callback(){});
$.post(url,data,callback) 发送数据至服务器及获取动态资源
$.post(“jsp/a.jsp”,{param_name:param_vlaue},callback);
$.getJSON() 获取静态JSON的全局函数
data.jsp:
<.......>
{name:”jimmy”,class:”3”}//内容为json数据
$.getJSON(“data.jsp”)
$.getScript() 获取脚本文件的全局函数
Cookie
<script src=’js/jquery.cookie.js’ type =’text/javascript ’></script>
var cookie=$.cookie(‘cookiename’);//读取cookie
$.cookie(‘cookiename’,’value’,{path:’/’,expires:10});//保存cookie
Jquery 广告横幅图片自动切换案例
<html>
<head></head>
<body>
.....
<div id =”imgrolls ”>
<a href =”###” id=”imgdiv” >
<img src=”01”>
<img src=”02”>
<img src=”03”>
</a>
<div>
<a href=/>
<a href=/>
<a href=/>
</div >
......
</body>
</html>
$(function(){
var $imgrolls=$(#imgrolls div a); // get the dom -elements in the div of element-id:#imgroll
$imgrolls.css(“opacity”,0.7); //set the transparent opacity of the a elements
var length=$imgrolls.length; //get nums of the imgrolls
var index=0,timer=null;
//show the img of the current element pointed
$imgrolls.mouseove(function(){
index=$imgrolls .index(this); //get the index of the current element a
showImg(index); //call the function to show the img=current a index
});
//after the mouse leave the ad img div trigger the img to auto-switch-show
$(“imgrolls”).hover(function(){
if(timer)clearInterval(timer); //clear the timer
},function(){
timer=setInterval(function(){ //auto switch the img to show
showImg(index);
index++;
if(index==length)index=0;
},3000);
}).trigger(“mouseleave”);
})
function showImg(){
var $rollobj= $(#imgrolls);// get the div
var $list=$rollobj.find(“div a”); //get the inner div’s a
var newurl=$list.eq(indx).attr(“href ”); // get the url of the current element
$(“imgdiv ”).attr(“href”,newurl).find(“img”).eq(index).stop(true,true).fadeIn().siblings.fadeOut();//更新广告img的href超链接地址 遍历找到指定图元素 停止当前动画但完成最后结果
//移除之前的样式效果 在当前指定的元素添加样式效果
$list.removeClass(“chos”).css(“opacity”,”0.7”).eq(index).addClass(“chos”).css(“opacity”,”1”)；
}
Jquery 闭包
内部函数以及匿名函数皆可以产生闭包，闭包是内存中保存前两类函数及其的变量引用。
内部函数产生闭包：
Function A(){
Function B(){
}
}
A()
以上代码运行之后，就会产生对应B函数的闭包。
在父亲函数外部使用内部函数的方法：
第一：全局变量对内部函数的引用
Var globalvar;
Function A(){
globalvar=Function B(){
}
glolbalvra();//外部使用内部函数的全局变量方法
第二：
Function A(){
Var innerofA;
Function B(){
Var innerBvar=0;
innerBvar++;
}
return B;
}
var fnB=A();
fnB();//返回内部函数至父函数外部的函数引用变量
内部函数的局部变量在外部引用第调用其执行完成之后就会内存释放(innerBvar)。
同一个内部函数的引用变量对于父函数的局部变量innerofA是共享的，以及同级内部函数在外执行的对于父函数的局部变量是共享的。
匿名函数：(函数作为函数的参数)
$(document).ready(function(){
For(var i=0;i<5;i++){
$(‘<div>’+i+’</div>’).click(function(){
$.print(i);
}).appendTo(“#last”);
}
});
代码的作用是将产生的每一个div添加点击事件处理函数，因为闭包，结果点击每一个div都只是print 5，分析：每一个点击处理函数是共享封闭环的，对于定义匿名的父作用域的局部变量是共享的，即所有的点击处理函数都print同一个i的值 5.
解决问题的办法：
第一：使用each遍历
$(document).ready(function(){
$.each([0,1,2,3,4],function(index,value ){
$(‘<div>’+value+’</div>’).click(function(){
$.print(value);
}).appendTo(“#last”);
});
});
第二：使用立即函数调用方法 IIF
$(document).ready(
for(var i=0;i<5;i++){
(function(value ){
$(‘<div>’+value+’</div>’).click(function(){
$.print(value);
}).appendTo(“#last”)
})(i);/使用变量i的值给value 立即函数调用方法
}
);
命名函数与匿名函数：
匿名函数形式：
$(document).ready(function(){
$.each(function(){
$(this).click(function(){
$.print(‘’);
});
});
});
命名函数形式：
$(document).ready(function(){
$.each(function(){
function handler(){
//do something
}
$(this).click(handler);
});
});
循环引用导致的内存泄露：
Function A(){
Var fn=0;
function B(){
fn++;
}
Fn=B;
即使去除函数对变量fn的操作引用，由于函函数隐藏性对父函数的引用，所以导致引用循环是很容易产生。
不过还好，jquery具备垃圾回收的机制可以一定程度解决引用循环，以避免内存的泄露。
Sizzle 选择器引擎
Sizzle是一自右向左查找的选择器引擎，提供了核心接口：
v chunker 负责对选择器表达式进行提取 块表达式 +块间关系符
v Sizzle.find(ex,c,isxml)查找块表达式中匹配的元素集合
Sizzle.filter(ex,set,inplace,not)用ex过滤set集合
v Sizzle.selectors.relative块间关系过滤函数使用关系符过滤元素集合
选择器表达式
- 块表达式
① 简单表达式：id class tag
② 属性：attr
③ 伪类表达式：位置pos 子元素child 内容 可见 表单
- 块间关系符
① “ ” 祖先后代关系
② “+”后紧接着的兄弟元素
③ “~”后所有兄弟元素
④ “>”直接子元素
Sizzle方法功能调用关系
n 公开函数
① Sizzle(s,c,r,seed)查找与选择器表达式匹配的元素集合、选择器引擎的入口
② Sizzle.matches(ex,set)使用选择器表达式s对ex元素集合进行过滤
③ Sizzle.meatchesselectors(node,ex)检查node元素是否匹配选择器表达式
n 内部函数
① Sizzle.find(ex,c,isxml)查找与块表达式匹配的元素集合
② Sizzle.filter(ex,set,inplace,not)使用块表达过滤元素集合
n 工具函数
① Sizzle.uniqueSort(result)排序 去重
② Sizzle..contains(a,b)检查a 是否包含b
③ Sizzle.error(msg)抛出含有表达式语法 错误的异常
④ Sizzle.getText(elem)获取元素集合中所有元素合并后的文本
n 拓展函数及属性
u 正则表达式：Sizzle.selectors.match/leftMatch 确定表达式类型及其中参数
u 查找：Sizzle.selectors.find/order块表达式查找函数集/顺序
u 过滤：Sizzle.selectors.filter/preFilter块表达式过滤/预过滤函数集
u 块间关系过滤：Sizzle.selectors.relative块间关系过滤函数集
u 属性：Sizzle.selectors.attrMap/attrHandler属性名/值 修正/读取函数集
u 伪类：Sizzle.selectors.filters/setFilters 伪类/ 位置伪类过滤函数集
Jquery 队列
动画 以及ajax队列，主要队列函数如下：
Jquery.queue(elem,type, data)返回第一个匹配元素关联的队列函数
Jquery.dequeue(elem,type,data)出队并执行匹配元素关联的队列函数中的下一个
.queue(type,data)返回第一个匹配元素的队列函数，或者修改匹配元素关联的队列函数
.dequeue(type,data)出队并执行匹配元素关联的队列函数
.clearqueue(type)移除匹配元素关联队列函数中尚未执行的函数队列
.delay(time,type) 设置定时器 使匹配元素关联的队列函数的出队和执行都延迟一定的时间
.promise()返回一个异步的函数队列的副本，观察匹配元素关联的函数队列对应的某个类型的函数队列和计数器 是否已经完成，即监听匹配元素关联的函数队列以及计数器的状态
队列函数方法功能调用关系的图
Jquery.extend
① Jquery._mark(elem,type)计数器加一
② Jquery._unmark(force,elem,type)计数器减一
③ jquery.queue(type,data)函数入队,返回队列
④ jquery.dequeue(type)函数队列出队
Jquery.fn,eextend
① queue(type,data)返回函数队列或者函数入队
② dequeue(type)队列函数出队
③ clearQueue(type)移除匹配元素的函数队列
④ promis(type,data)监听匹配元素关联的函数队列及其计数器的状态
⑤ delay(time,type)匹配元素关联的函数队列中未执行的函数进行时间延迟
⑥
jqerury._data(elem.data,name)设置或者读取内部数据