jQuery源码:从原理到实战

jQuery源码:从原理到实战

jQuery选择器对象

$(".my-class");

document.querySelectorAll*".my-class")

document.querySelector(".my-class")

原生JS的jQuery选择器实现方法querySelector

jQuery的查找和链式写法实现原理

从DOM库到jQuery的DOM方法

从tween算法到jQuery动画

从设计模式到jQuery的事件模型

从封装自己的Ajax库到jQuery的ajax方法原理和使用

jQuery实战

 JQuery官方网站

http://jquery.com/

1、JQuery概念

A、Jquery是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。

C、JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目录下，VS2008中才会有自动提示和自动完成功能。

E、JQuery文件说明:

jquery-1.4.2.js是JQuery主文件。

jquery-1.4.2.min.js是压缩板JQuery主文件。

jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

2、JQuery之Ready

A、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready则是Dom元素创建完就触发，这样可以提高网页的响应速度。

3、JQuery内置函数

A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function函数处理返回一个新的数组。如:

var array = [3, 6, 9];

var arrary2 = $.map(array, function(item) { return item * 2 });

for (var i = 0; i < arrary2.length; i++) {

alert(arrary2[i]);

};

或: alert(arrary2);

注: $.map函数不能处理dictionary风格的数组。

B、$.each(array, function)对array每个元素进行处理，但没有返回值。

var array = ["TOM", "汤姆", "Jerry", "杰瑞"];

$.each(array, function() { alert(this); });

或:

var dict = { "TOM": 20, "Jerry": 50 };

$.each(dict, function(key, value) { alert(key + "=" + value); });

4、JQuery对象与Dom对象

A、JQuery对象是通过对Dom对象的封装产生的对象。

B、Dom对象要想通过JQuery进行操作，需要先转换成JQuery对象。

$(‘#div1’).html等价于:document.getElementByid(‘div1’).innerHTML;

$(‘#div1’)得到的是JQuery对象，JQuery对象可以调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法。

C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。当调用JQuery没有封装的方法时必须用Dom对象，转换方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。

D、样式的修改：

JQuery修改样式方法:$(“#div1”).css(“background”, “red”);

JQuery获得样式的方法:$(“#div1”).css(“background”);

修改value值方法:

JQuery修改value方法: $(“#div1”).val(“Dragon”);

JQuery获得value方法: $(“#div1”).val();

5、JQuery选择器

A、JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于getElementByid。

B、$(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。

C、CSS选择器，同时选择拥有某个样式的多个元素:

$(“.text”).click(function(){alert($(this).text();)});

D、多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。

E、层次选择器:

1、$(“div li”)获取div下的所有li标签(后代，子、子的子标签…)。

2、$(“div > li”)获取div下的直接li子标签。

3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。

4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。

6、JQuery隐式迭代

A、注:如果用隐式迭代就会不容易发现错误。

$(function(){

var elements = $(“#btn1”);

If (elements.length <= 0){

alert(“没有找到提定对象”);

return;

}

elements.mouseover(function(){ alert(“找到了”)});

7、节点遍历

A、next()方法用于获取节点之后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)、nextAll()方法用于获取节点之后的所有同辈标签。

B、siblings()方法用于获取所有同级标签。

8、链式编程

A、JQuery可以实现链式编程

9、JQuery过滤选择器

A、:first选择第一个标签。$(“div:first”)选取第一个<div>。

B、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。

C、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的<input>标签。

D、:even、:odd，选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的<input>。

E、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签，比如$(“input:lt(1)”)选取索引小于1的<input>。

F、$(“:header”)选取所有的h1…h6标签。

G、$(“div:animated”)选取正在执行动画的<div>标签。

10、属性过滤选择器

A、$(“div[id]”)选取有id属性的<div>。

B、$(“div[title=test]”)选取title属性为“text”的<div>。

C、$(“div[title!=test]”)选取title属性不为“text”的<div>。

11、表单对象选择器

A、$(“#form1:enabled”)选取id为form1的表单内所有启用的标签。

B、$(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。

C、$(“#form1:checked”)选取所有选中的标签。(checkBox)。

D、$(“#form1:selected”)选取所有选中的选项标签。(下拉列表)。

12、JQuery的Dom操作

A、使用html()方法读取或设置标签的innerHTML:

alert($“a:first”).html());

$(“a:first”).html(“hello”);

B、使用text()方法读取或设置标签的innerText:

alert($(“a:first”).text());

$(“a:first”).text(“hello”);

C、使用att()方法读取或设置标签的属性:

alert($(“a:first”).attr(href”));

$(“a:first”).attr(“href”, http://www.rupeng.com);

D、使用removeAttr删除属性。

13、动态创建Dom节点

A、使用$(html字符串)来创建Dom节点，返回一个JQuery对象，然后调用append方法将新创建的节点添加到Dom中

var link = $(“<a href=’http://www.baidu.com’>百度</a>”);

$(“div:first”).append(link);

Append方法用来在标签的末尾追加标签。

prepend在标签的开始添加标签。

after在标签之后添加标签。

before在标签之前添加标签。

14、删除节点

A、remove()删除选择的节点。

如:清空ul中的项。$(“ul li.testitem”).remove();删除ul下的li id=testitem的标答。

B、remove()方法返回值是被删除的节点对象，还可以继续使用删除的节点。

var lis = $(“#ulsite li”).remove();

$(“#ulsite2”).append(lis);

C、empty()是将节点清空。

15、设定按钮的启用时间

<script type=“text/javescript”>

var leftseconds = 10

var intervalid;

$(function(){

$(“#btnReg”).attr(“disabled”,true);

Intervalid = setInterval(“countDown()”,1000);

}

Function CountDown(){

if(leftseconds <= 0){

$(“#btnReg”).val(“同意”);

$(“#btnReg”).attr(“disabled”,false);

clearIntervalid(Intervalid);

return;

}

Leftseconds--;

$(“#btnReg”).val(“请仔细阅读”+ Leftseconds + “”);

}

</script>

16、样式操作

A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。

B、追加样式addclass(“myclass”)。

C、移除样式removeclass(“myclass”)。

D、切换样式togleclass(“myclass”)。如果存在则去掉样式，如果不存在则添加。

E、判断样式是否存在:hasclass(“myclass”)。

17、RadioButton操作

A、取RadioButton选中值:

$(“input[name=gender]:checked”).val()

<input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男

<input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女

<input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知

B、设置RadioButton选中值:

$(“input[name=gender]”).val([“女”]);

18、事件

A、JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。

JQuery用$(“#btn”).click(function(){})来简化。

B、调用事件对象的stopPropagation()方法终止事件冒泡。

C、阻止默认行为: 比如超链接点击后会转向新的链接。如果想阻止默认行为只要调用事件对象的preventDefault()方法。

D、属性:pageX、pageY、target获得触发事件的元素（冒泡的起始,和this不一样）。

which如果是鼠标事件获得按键(1左键，2中键，3右键)。

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。

keyCole、charCode属性发生事件时的keyCode、charCode。

E、移除事件绑定:unbind()方法即可移除元素上绑定的事件，如果bind(“click”)则移除click事件的绑定。

F、一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行绑定。

19、动画

A、show、hide()方法用于显示、隐藏标签。用toggle()方法在显示、隐藏之间切换。

$(“:button[value=show]”).click(function(){$(“div”).show();});

$(“:button[value=hide]”).click(function(){$(“div”).hide();});

B、show、hide可以带参数使用。fast(200毫秒)、normal(400毫秒)、slow(600毫秒)。

20、JQuery cookie

A、使用方法:

1、添加对jquery.cookie.js引用。

2、设置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。

3、读取,var v = $.cookie(‘名字’)

B、$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});

expires 保存的天数。

path 设置网站那些目录下的文件可以读取。

domain 保存的是哪个域名的。

21、JQueryUI

22、JQuery辅助工具

A、DebugBar

B、IE开发人员工具