jquery分析,jquery源代码分析

有什么办法分析jQuery的执行过程？

一些浏览器有javascript调试功能（有的范围比较宽，只要是网页脚本都行，不限于javascript），可以象调试一般应用程序一样（例如设置断点，步进执行）调试脚本程序的执行。有些浏览器是靠插件来实现这种功能的。当然有些浏览器可能直接就有针对jquery的查看插件。

创新互联建站专业为企业提供前锋网站建设、前锋做网站、前锋网站设计、前锋网站制作等企业网站建设、网页设计与制作、前锋企业网站模板建站服务，10年前锋做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

下面的方法具体一些，可能有帮助:(jquery 查看事件信息的方法)

深入分析JQuery和JavaScript的异同

JQuery是一种JavaScript框架

Javascript 是一种脚本语言

JQuery只是一个人用javascript把JS里面的常用函数及自定义函数打包到一个文件而异，方便大家调用，只是这个人做的比较牛，这个函数包用着很方便，所以很多人都用，就记住了这个名字JQuery，相比大家做网站时都会专门有一个js文件，存放这个网站所调用的JS函数，那这个JQuery只是做的更专业，更牛B，更强大，更方便而异，你原来可能要几行代码来实现的功能，用JQuery可能只用一行就搞定了。

相关资料：

js，即JavaScript

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型

jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)

其实只要学好了javascript，使用jquery将不会有什么问题

新手程序员必须花时间重点学习一下javascript；

至于jQuery可以直接在使用时参考jQuery参考文档，不需花太多时间在上面，当然如果读者时间充裕，也可以学习下jQuery源码，一边更好的了解jquery实现原理

jQuery选择器的工作原理和优化分析

每次申明一个jQuery对象的时候，返回的是jQuery.prototype.init

对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可

以实现继承，加上js的对象只是引用不会是拷贝，new

jQuery,new

jQuery.fn和new

jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。

当我们使用选择器的时候$(selector,content)，就会执行

init(selectot,content)，我们看看inti中是怎样执行的：

复制代码

代码如下:

if

(

typeof

selector

==

"string"

)

{

//正则匹配，看是不是HTML代码或者是#id

var

match

=

quickExpr.exec(

selector

);

//没有作为待查找的

DOM

元素集、文档或

jQuery

对象。

//selector是#id的形式

if

(

match

(match[1]

||

!context)

)

{

//

HANDLE:

$(html)

-

$(array)

//HTML代码,调用clean补全HTML代码

if

(

match[1]

){

selector

=

jQuery.clean(

[

match[1]

],

context

);

}

//

是:

$("#id")

else

{

//判断id的Dom是不是加载完成

var

elem

=

document.getElementById(

match[3]

);

if

(

elem

){

if

(

elem.id

!=

match[3]

)

return

jQuery().find(

selector

);

return

jQuery(

elem

);//执行完毕return

}

selector

=

[];

}

//非id的形式.在context中或者是全文查找

}

else{

return

jQuery(

context

).find(

selector

);

}

}

这里就说明只有选择器写成$(‘#id')的时候最快，相当于执行了一次

getElementById，后边的程序就不用再执行了。当然往往我们需要的选择器并不是这么简单，比如我们需要id下的CSS为className，

有这样的写法$(‘#id.className')和$(‘#id').find(‘.className');这两种写法的执行结果都是一样的，比

如div

id=”id”span

class=”className”/span/div，返回的肯定都是span

class=”className”/span，但是执行的效率是完全不一样的。

在分析一下上边的代码，如果不是$(‘#id')这样的简单选择器的话，都会执行find函

数，那我们再看看find到底是做用的：

复制代码

代码如下:

find:

function(

selector

)

{

//在当前的对象中查找

var

elems

=

jQuery.map(this,

function(elem){

return

jQuery.find(

selector,

elem

);

});

//下边的代码可以忽略，只是做一些处理

//这里应用了js的正则对象的静态方法test

//indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法

//本意就是过滤数组的重复元素

return

this.pushStack(

/[^+]

[^+]/.test(

selector

)

||

selector.indexOf("..")

-1

?

jQuery.unique(

elems

)

:

elems

);

}

如果这样写$(‘#id

.className')，就会执行到扩展的find(‘#id

.className',document)，因为当前的this是document的jQuery数组，那我们在看看扩展的find他的实现，代码比较

多，就不列出来，总之就是从第二个参数传递进行的dom第一个子节点开始找，遇见#比对id，遇见.比对ClassName，还有：+-等处理。

那我们要优化，是不是就要想办法让第二个参数context的范围最小，那样遍历是不是就很少了？

如果我们这样写$(‘#id').find(‘.className')，那程序只这样执行

的，第一次init的时候执行一步getElementById，就return了，接着执行

find(‘.className',divDocument)，divDocument就是我们第一次选择的是div标签，如果document下有很

多dom对象的时候，这次只遍历divDocument是不是少了很多次，而且在第一次选择id的速度也要比遍历快的多。

现在大家应该是明白了吧。就是说第一层选择最好是ID，而是简单选择器，目的就是定义范围，

提高速度，这次就说这些，选择写法的优化，其他的优化，下次再说。

jquery中append()与appendto()用法分析

本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下：

在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。

1、append()方法：在被选元素的结尾（但仍在元素内部）插入指定的内容。

a、语法：复制代码

代码如下:$(selector).append(content);其中，参数content是必需的，指定要附加的内容。

b、append能够使用函数给被选元素附加内容，语法为：复制代码

代码如下:$(selector).append(function(index,html));其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。

例子：

复制代码

代码如下:html

head

script

type="text/javascript"

src="/jquery/jquery.js"/script

script

type="text/javascript"

$(document).ready(function(){

$("button").click(function(){

$("p").append("

bHello

jQuery!/b");

});

});

/script

/head

body

pThis

is

a

paragraph./p

pThis

is

another

paragraph./p

button在每个

p

元素的结尾添加内容/button

/body

/html

运行结果如下：

This

is

a

paragraph.

Hello

jQuery!

This

is

another

paragraph.

Hello

jQuery!

2、appendto()方法：在被选元素的结尾（但仍在元素的内部）插入指定的内容。但不能使用函数来附加内容。

语法：复制代码

代码如下:$(content).appendto(selector);

例子：

复制代码

代码如下:html

head

script

type="text/javascript"

src="/jquery/jquery.js"/script

script

type="text/javascript"

$(document).ready(function(){

$("button").click(function(){

$("b

Hello

jQuery!/b").appendTo("p");

});

});

/script

/head

body

pThis

is

a

paragraph./p

pThis

is

another

paragraph./p

button在每个

p

元素的结尾添加内容/button

/body

/html

运行结果如下：

This

is

a

paragraph.

Hello

jQuery!

This

is

another

paragraph.

Hello

jQuery!

希望本文所述对大家的jQuery程序设计有所帮助。

JQuery中基础过滤选择器用法实例分析

本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title基础过滤选择器/title

style

type="text/css"

#main{

width:600px;

border:1px

solid

green;

margin:auto;

padding:10px;

}

#tbl{

border-collapse:collapse;

border-top:1px

solid

red;

border-left:1px

solid

red;

margin:auto;

}

#tbl

td{

width:60px;

height:60px;

border-collapse:collapse;

border-bottom:1px

solid

red;

border-right:1px

solid

red;

}

/style

script

src="jquery-1.6.2.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function

()

{

//=============举例1========================

//:first

说明:

匹配找到的第一个元素

//....1修改第一个单元格的背景色

//var

$tds

=

$("#tbl

td:first");

//$tds.css("backgroundColor",

"blue");

//....2修改第一行的背景色

//var

$trs

=

$("#tbl

tr:first");

//$trs.css("backgroundColor",

"blue");

//=============举例2========================

//:last

说明:

匹配找到的最后一个元素.与

:first

相对应.

//...1修改随后一个单元格的背景色

//var

$tds

=

$("#tbl

td:last");

//$tds.css("backgroundColor",

"blue");

//=============举例3========================

//:not(selector)

去除所有与给定选择器匹配的元素.有点类似于”非”

//...1把所有class不为tdClass的列的文本进行修改

//var

$tds

=

$("#tbl

td:not(.tdClass)");

//$tds.text("Not

tdClass");

//=============举例4========================

//:even

说明:

匹配所有索引值为偶数的元素，从

开始计数.js的数组都是从0开始计数的.

//例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

//...1把索引值为偶数的行变成黄色

//var

$trs

=

$("#tbl

tr:even");

//$trs.css("backgroundColor",

"yellow");

//=============举例5========================

//:

odd

说明:

匹配所有索引值为奇数的元素,和:even对应,从

开始计数.

//var

$trs

=

$("#tbl

tr:odd");

//$trs.css("backgroundColor",

"yellow");

//=============举例6========================

//:eq(index)

说明:

匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

//...1设置第二个单元格的背景色

//var

$tds

=

$("#tbl

td:eq(1)");

//$tds.css("backgroundColor",

"gray");

//=============举例6========================

//:gt(index)

说明:

匹配所有大于给定索引值的元素.

//...1把下标索引大于1的所有单元格背景色设置为灰色

//var

$tds

=

$("#tbl

td:gt(1)");

//$tds.css("backgroundColor",

"gray");

//=============举例7========================

//:lt(index)

说明:

匹配所有小于给定索引值的元素.

//...1把下标索引小于3的所有单元格背景色设置为灰色

var

$tds

=

$("#tbl

td:lt(3)");

$tds.css("backgroundColor",

"gray");

//=============举例8========================

//:header(固定写法)

说明:

匹配如

h1,

h2,

h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

//...1把所有的h标签背景色进行修改

var

$hs

=

$(":header");

$hs.css("backgroundColor",

"gold");

//=============举例8========================

//slice

获取下标范围内元素

var

$trs

=

$("#tbl

tr").slice(1,

3);

$trs.css("backgroundColor",

"gold");

});

/script

/head

body

div

id="main"

h1我是h1/h1

h2我是h2/h2

h3我是h3/h3

table

id="tbl"

tr

td1/tdtd1/tdtd1/td

/tr

tr

td

class="tdClass"2/tdtd2/tdtd2/td

/tr

tr

td3/tdtd3/tdtd3/td

/tr

tr

td4/tdtd4/tdtd

class="tdClass"4/td

/tr

tr

td5/tdtd5/tdtd5/td

/tr

tr

td6/tdtd6/tdtd

class="tdClass"6/td

/tr

/table

/div

/body

/html

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery实现模糊查询的方法分析

本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考，具体如下：

需求：list列表内容很多，用户需要找出列表内容中的某些条目，只有当与用户输入值匹配的条目才显示出来。（后台无分页，直接异步接口返回数据添加形成的内容列表）

虽然可以通过传参再调用查询出来，但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。

html部分：

div

class="search-form"

input

type="text"

placeholder="请输入关键词"

span

class="icon-clear"/span

/div

div

class="content"

div

class="title

row

no-gutter"

div

class="col-20"列表一/div

div

class="col-20"列表二/div

div

class="col-20"列表三/div

div

class="col-20"列表四/div

div

class="col-20"列表五/div

/div

div

class="list-content"

ul

li

div

class="code"00001/div

div

class="name"内容1/div

div内容2/div

div内容3/div

div内容4/div

/li

li……/li

/ul

/div

/div

js部分：

queryList:

function(){

$(".search-input").on("input

propertychange",

function()

{

var

queryStr

=

$.trim($(".search-input").val());

if(queryStr

===

''){

$(".list-content

li").show();

}else{

//

以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可

$(".list-content

li").hide().find(".code,

.name").filter(":contains('"+queryStr+"')").parent("li").show();

//$(".list-content").refresh();

//重新刷新列表把隐藏的dom结构去掉。

}

});

}

分析：以上即实现了前端js的模糊查询功能啦，哈哈。代码中监听事件中多加了input，据说是为兼容iOS的，具体没测试，有哪位大神测试了可以告知一声哈，谢谢了。

还有个问题就是，以上实现方法，当列表内容多大几千条数目或者更多时，表单输入时会出现卡顿的情况，因为要通过js操作大量的DOM结构啊（隐藏或显示），PC上或许情况还没有那么严重，在手机上测试时那真的是“怎一个卡字了得”，如果哪位大神有更好的法子，还望加以完善！

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:jQuery实现select模糊查询（反射机制）jQuery基于xml格式数据实现模糊查询及分页功能的方法jQuery实现id模糊查询的小例子jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例jquery

zTree异步加载、模糊搜索简单实例分享jquery

ztree实现模糊搜索功能jquery

easyui

combobox模糊过滤(示例代码)jQuery实现多级联动下拉列表查询框JQuery+Ajax实现数据查询、排序和分页功能jquery处理页面弹出层查询数据等待操作实例