jQuery插件开源软件

知识博客专集

使用JQuery删除Table中的合并行


    sap bps  web interface中的layout控件,不知道如何去改变同列值相同合并的功能,因为要用以前使用的js来做save to excel功能,而我又恰恰不需要开始的两列,所以特定写了一段代码进行列删除。 列删除唯一要考虑的是对应存在行合并的列,需要跳过一些行。

  &(\”#layout_download-table\”).find(\”tr\”).each(function(i){
   if(i == 0){ // 第一行是标题,直接删除就好了
      &(this).find(\”td\”).eq(0).remove();
       &(this).find(\”td\”).eq(0).remove(); 
    }else if(i == 1 ){ //从第二行开始可能存在行合并的情况
    c1_rows= &(this).find(\”td\”).eq(0).attr(\”rowspan\”);
    c2_rows= &(this).find(\”td\”).eq(1).attr(\”rowspan\”);
    &(this).find(\”td\”).eq(0).remove();
      &(this).find(\”td\”).eq(0).remove();
      c1_rows = c1_rows – 1;
      c2_rows = c2_rows – 1;
    }else if( i > 1){
     if( c1_rows > 0){ //还有合并行,所以要在考虑
      c1_rows = c1_rows – 1;
      if(c2_rows > 0){
       //什么也不用做
       c2_rows = c2_rows – 1;
      }else{
       c2_rows= &(this).find(\”td\”).eq(0).attr(\”rowspan\”);
       &(this).find(\”td\”).eq(0).remove();
       c2_rows = c2_rows – 1;
       }    
     }else{ //重新开始获取合并行数
      c1_rows= &(this).find(\”td\”).eq(0).attr(\”rowspan\”);
      c2_rows= &(this).find(\”td\”).eq(1).attr(\”rowspan\”);
      &(this).find(\”td\”).eq(1).remove();
        &(this).find(\”td\”).eq(1).remove();
        c1_rows = c1_rows – 1;
        c2_rows = c2_rows – 1;      
      
     }
    }

  });

又老了半岁,不过还好,理清楚了。

JQuery:将文本转化成JSON对象应注意的问题


在jquery的许多方法中,很多方法的参数可以传入一个json对象,比如ajax方法的第二个参数。怎么将文本转化成json对象,需要注意以下问题:

1)&.parsejson方法返回的是一个字符串,而不是json对象。

2)要将字符串转化成对象,很容易想起js中的eval方法。事实上是可以的,不过需要加上括号。如var js="{\\"pageindex\\":\\"1\\"}";var obj=eval("(" js ")");。不过使用eval,是不安全的,因为其可以编译任何js代码。

3)下载一个json解析器,因为其只认可json文本。这样就比较安全了。json官方网站提供了这么一个脚本。地址:http://www.json.org/json2.js。使用起来比较简单,引入该文件后,如:json.parse(&("#ctl00_contentplaceholder1_hfsearch").val().tostring())。

4)使用json.parse方法或者是&.parsejson方法时,注意json数据的name和value用双引号括起来,对于&.parsejson方法,还要将json字符串用单引号括起来再转换,对于json.parse方法,就不必了。真tmd的浪费时间。

注意这几个技巧,在操作json数据时,可以少走不少弯路。

JQuery常用方法基础教程1


jquery selectors 方法说明

基本选择器
&(”#mydiv”) 匹配唯一的具有此id值的元素
&(”div”) 匹配指定名称的所有元素
&(”.myclass”) 匹配具有此class样式值的所有元素
&(”*”) 匹配所有元素
&(”div,span,p.myclass”) 联合所有匹配的选择器
层叠选择器
&(”form input”) 后代选择器,选择ancestor的所有子孙节点
&(”#main > *”) 子选择器,选择parent的所有子节点
&(”label input”) 临选择器,选择prev的下一个临节点
&(”#prev ~ div”) 同胞选择器,选择prev的所有同胞节点
基本过滤选择器
&(”tr:first”) 匹配第一个选择的元素
&(”tr:last”) 匹配最后一个选择的元素
&(”input:not(:checked) span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
&(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
&(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
&(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)
&(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)
&(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始)
&(”:header”) 匹配所有标题
&(”div:animated”) 匹配所有正在运行动画的所有元素
内容过滤选择器
&(”div:contains(’john’)”) 匹配含有指定文本的所有元素
&(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
&(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
&(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
&(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域
&(”div:visible”) 匹配所有可见的元素
属性过滤选择器
&(”div[id]”) 匹配所有具有指定属性的元素
&(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素
&(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素
&(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素
&(”input[name&=’letter’]”) 匹配所有指定属性值以value结尾的元素
&(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素
&(”input[id][name&=’man’]”) 匹配同时符合多个选择器的所有元素
子元素过滤选择器
&(”ul li:nth-child(2)”),
&(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素
&(”ul li:nth-child(3n 1)”)

&(”div span:first-child”) 匹配父元素的第1个子元素
&(”div span:last-child”) 匹配父元素的最后1个子元素
&(”div button:only-child”) 匹配父元素的唯一1个子元素
表单元素选择器
&(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
&(”:text”) 匹配所有类型为text的input元素
&(”:password”) 匹配所有类型为password的input元素
&(”:radio”) 匹配所有类型为radio的input元素
&(”:checkbox”) 匹配所有类型为checkbox的input元素
&(”:submit”) 匹配所有类型为submit的input元素
&(”:image”) 匹配所有类型为image的input元素
&(”:reset”) 匹配所有类型为reset的input元素
&(”:button”) 匹配所有类型为button的input元素
&(”:file”) 匹配所有类型为file的input元素

&(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
&(”:enabled”) 匹配所有可操作的表单元素
&(”:disabled”) 匹配所有不可操作的表单元素
&(”:checked”) 匹配所有已点选的元素
&(”select option:selected”) 匹配所有已选择的元素

jquery css 方法说明

css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。
&(”p”).hover(function () {
&(this).css({ backgroundcolor:”yellow”, fontweight:”bolder” });
}, function () {
var cssobj = {
backgroundcolor: “#ddd”,
fontweight: “”,
color: “rgb(0,40,244)”
}
&(this).css(cssobj);
});
css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
top和left,属性值为整数。这个函数只能用于可见元素。
var p = &(”p:last”);
var offset = p.offset();
p.html( “left: ” offset.left “, top: ” offset.top );
width( ) 取得当前第一匹配的元素的宽度值,
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值,
height( val ) 为每个匹配的元素设置指定的高度值。

jquery utilities 方法说明
jquery.browser
.msie 表示ie
jquery.browser.version 读取用户浏览器的版本信息
jquery.boxmodel 检测用户浏览器针对当前页的显示是否基于w3c css的盒模型
jquery.isfunction( obj ) 检测传递的参数是否为function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jquery.each(objs, function (i) {
var isfunc = jquery.isfunction(objs[i]);
&(”span:eq( ” i “)”).text(isfunc);
});
jquery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
jquery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
jquery.extend( target, object1, [objectn] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
工具,这种继承是采用传值的方法来实现的,而不是javascript中的
原型链方式。
合并settings和options对象,返回修改后的settings对象
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jquery.extend(settings, options);

合并defaults和options对象,defaults对象并没有被修改。options对象中的值
代替了defaults对象的值传递给了empty。

var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = &.extend(empty, defaults, options);
jquery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
&.grep( [0,1,2], function(n,i){
return n > 0;
});
jquery.makearray( obj ) 将一个类似数组的对象转化为一个真正的数组
将选取的div元素集合转化为一个数组
var arr = jquery.makearray(document.getelementsbytagname(”div”));
arr.reverse(); // use an array method on list of dom elements
&(arr).appendto(document.body);
jquery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
jquery.inarray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1
jquery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组

jQuery Ajax之$.get()方法和$.post()方法


注意:&.get()和&.post()方法是jquery中的全局函数。前面讲到的load()方式是对jquery对象进行操作的。

1、 &.get()方法

  &.get()方法使用get方式来进行异步请求。

  它的语法结构为:

  &.get( url [, data] [, callback] [, type] )

  &.get()方法参数解释如下表:

参数名称 类 型 说  明
url string 请求的html页的url地址
data(可选) object 发送至服务器的key/value数据会作为querystring附加到请求url中
callback(可选) function 载入成功时的回调函数(只有当response的返回状态时success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) string 服务器端返回内容的格式,包括xml、html、script、json、text和_default

jQuery的系统性能指标和调优方法


  度量 javascript 性能要考虑的最重要问题是执行 javascript 的环境。因为代码是运行在客户端上的,所以它的执行依赖于客户端计算机,这使得客户端机器成为影响性能的最重要因素。很明显,运行4 核 cpu 的新服务器执行代码的速度肯定要比 400 mhz 老式处理器快。这是毫无疑问的。不过,由于您不能控制 web 应用程序用户用于访问您的站点的机器,所以在度量性能时要考虑关于硬件的许多因素。

  javascript 性能的另一个重要方面是用于运行 javascript 的浏览器,javascript 新手可能不容易发觉这个影响因素。每个浏览器内部都包含一个javascript 引擎,即用于解析和执行 javascript 代码并处理 web 应用程序页面的本机代码。因此,javascript 的性能严重依赖于客户端使用的浏览器,并且在某些情况下,您可以控制用户使用的浏览器。本文提供一些关于 javascript 性能的指导原则,并解释不同浏览器对性能的影响。

  最后,在总结 javascript,尤其是 jquery 的性能之后,我将确定一些能够改进 jquery 代码性能的最佳实践,充分利用运行得最快的代码部分,而尽量避免运行得最慢的代码部分。在您阅读完本文之后,“jquery的性能好吗” 这个问题将得到解答,并且给我发送那封电子邮件的人也将知道他的断言是否正确。

  创建性能测试

  关于性能测试的第一步是创建一个合适的性能测试。jquery 以及其他 javascript 库在代码中扮演的最重要角色就是使用选择查找特定页面元素。我在最初的性能测试中就以这方面为重点。一个良好的性能测试应该真正地发挥javascript 库的全部力量,用包含数千个页面元素的页面测试它。应该运行所有选择方法,让我看到哪个选择方法最快,哪个最慢。测试应该事先知道正确的答案,从而确定javascript 库是否正确地执行选择方法。最后,应该显示所有结果,并附带所用的运行时间,让我能够在所有库之间进行比较。

  我差点忽略了性能测试的最重要方面:它应该是免费的。毕竟这个系列文章的不成文规则就是相互利用彼此的成果,因此我继续发扬这种精神,在此使用一个现成的 javascript库性能测试。这个测试称为 slickspeed selectors test(见 参考资料),它非常适合我的需求。它将 jquery 1.2.6(撰写本文时的最新版本)与其他4 个流行的 javascript 库(mootools、prototype、yui 和 dojo)进行比较。然后,它使用带有数千个页面元素的页面运行40个选择测试。换句话说,这是我所希望的最佳性能测试。我将在第一个性能测试分析中使用该测试。

  对比javascript 库的性能

  对于第一个性能测试,我使用的运行环境是 2.2 ghz 处理器、2 gb ram 和 firefox 3.0.3(非常重要)。我在该配置下运行 5次测试,图 1 显示了 5 次运行的平均结果。

  图 1. 性能测试 1 的结果

  从第一次测试能够得出什么结论?现在我们仅关注总体结果,而不是每次测试。在获得一些总体结论之后,我将稍后在本文中关注每个测试。

  ◆ 结论 1:yui 慢到了极点!

  对,与其他库相比,yui 真的很慢。仔细查看每个测试,找出为什么这个库在选择元素组(例如 “p, a”)时非常慢。对于要求具有很好性能的页面而言,这个库是最差的选择。

  ◆ 结论 2:mootools、jquery 和 dojo 的运行时间几乎一样。

  与其他两个库相比,这 3 个库是非常快的,并且 dojo 是它们当中最快的,而 jquery 是最慢的。但是从全局考虑,它们之间的速度是很接近的。

  ◆ 结论 3:这些库之间的相对差别还是比较明显的。

  度量最快时间/最慢时间以确定速度的相对差别,您可以看到相对差别为 332%。这个差别是比较大的,这表明使用 firefox 时选择不同的 javascript库会对性能有影响。

  但是要记住,这些结论仅基于一个浏览器的结果。这是基于 firefox 3.0.3 得出的结论。现在我们进入下一小节,我将在不同的浏览器上运行该测试。

  在不同浏览器上的javascript 性能

  面对不同浏览器运行 javascript 会得出的不同结果(性能和时间都不同),许多初级 web 程序员觉得不可思议。尽管这对初级 web 程序员而言是个挫折(他们担心要编写额外的代码来处理不同的浏览器),但是有经验的web 程序员在 netscape 和 internet explorer 的早期就知道如何处理该问题。这也是使用 javascript 库的一个亮点,因为它们都谨慎处理许多或大部分浏览器差异。

  javascript 速度差异的主要原因是每个浏览器都使用自己的 javascript 引擎。javascript 引擎是用于解析 javascript并根据 web 应用程序执行它的本机代码。因此,javascript 的执行速度与底层引擎直接相关。在最近几个月,许多浏览器公司越来越关注他们的浏览器的性能,这是有原因的。随着某些页面的javascript 变得日益复杂,javascript 引擎的快慢能够影响 web 应用程序的响应速度。因此,当 google 和 firefox 等公司谈论它们的javascript 引擎时,它们就会谈及下一代引擎的速度要快 10 倍。这对 web 应用程序而言是很重要的,因为底层 javascript 引擎的速度直接导致更复杂的web 应用程序的出现。

  现在,您知道 javascript 引擎是 javascript 执行速度的一个因素,那么让我们在不同的浏览器上运行刚才在 firefox 上运行的测试,并尝试找出不同的引擎对javascript 性能的影响。记住,这个测试与我前面在 firefox 上运行的测试是一样的,因此除了 javascript 引擎以外,其他所有东西都是相同的。图2 显示了测试结果。

  图 2. 性能测试 2 的结果

  看完这些测试结果之后,您首先注意到的是在这些浏览器中运行得到的时间差很大。在 chrome 1.0 上运行 jquery 需要 168 毫秒,而在ie6 上运行需要 1728 秒。这是难以置信的时间差!jquery 选择方法在 ie6 上运行比在 chrome 上运行慢 10 倍!现在,您知道为什么 google喜欢夸耀它的 javascript 引擎,以及为什么某些浏览器很少介绍自己的 javascript 引擎。这些差别还是比较大的。

青花瓷mv的拍摄..

ishow新进成员-..

请来“小天使”..

一个自考生的部..

五一节 婺源游

日常生活指导–..

4月30日愉悦教…

地震来了,怎么..

穿上旗袍,才叫..

蛋糕之战(2)

jQuery从零学习系列第二篇如何管理jQuery包装集


本站整理收集一系列jquery从零学习系列文章,非常不错的哦,希望对你有帮助。

回顾:

jquery从零学习系列第一篇你必须知道的javascript
在使用jquery选择器获取到jquery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jquery包装集, 比如添加,删除,切片等.

本章内容很少, 主要讲解动态创建元素和操作jquery包装集的各个函数.

一.动态创建元素

1.错误的编程方法

我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的html内容.比如:

上面的示例中我通过修改testdiv的内容,在页面上动态的添加了一个div元素. 但是请牢记,这是错误的做法!

错误的原因:

(1) 在页面加载时改变了页面的结构. 在ie6中如果网络变慢或者页面内容太大就会出现\”终止操作\”的错误. 也就是说\”永远不要在页面加载时改变页面的dom模型\”.

(2) 使用修改html内容添加元素, 不符合dom标准. 在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用dom的createelement创建对象, 在所有的浏览器中几乎都可以. 但是在jquery中如果传入的而是一个完整的html字符串, 内部也是使用innerhtml. 所以也不是完全否定innerhtml函数的使用.

所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.

2.创建新的元素

下面介绍两种正确的创建元素的方式.

(1)使用html dom创建元素

什么是 dom?

通过 javascript,您可以重构整个 html 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,javascript 就需要对 html 文档中所有元素进行访问的入口。这个入口,连同对 html 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(dom)。

在 1998 年,w3c 发布了第一级的 dom 规范。这个规范允许访问和操作 html 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准,因此,dom 的兼容性问题也几乎难觅踪影了。

dom 可被 javascript 用来读取、改变 html、xhtml 以及 xml 文档。

dom 被分为不同的部分(核心、xml及html)和级别(dom level 1/2/3):

core dom

定义了一套标准的针对任何结构化文档的对象

xml dom

定义了一套标准的针对 xml 文档的对象

html dom

定义了一套标准的针对 html 文档的对象。

关于使用html dom创建元素本文不做详细介绍, 下面举一个简单的例子:

通过使用 document.createelement 方法我们可以创建dom元素, 然后通过appendchild方法为添加到指定对象上.

(2) 使用jquery函数创建元素

在jquery中创建对象更加简单, 比如创建一个div元素:

我们主要使用jquery核心类库中的一个方法:

jquery( html, ownerdocument )

returns: jquery

根据html原始字符串动态创建dom元素.

其中html参数是一个html字符串, 在jquery1.3.2中对此函数做了改进:

当html字符串是没有属性的元素是, 内部使用document.createelement创建元素, 比如:

否则使用innerhtml方法创建元素:

3.将元素添加到对象上

我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的dom结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.

传统上, 使用window.onload完成上述目的:

虽然能够在dom完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完dom树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

解决办法就是等dom被解析后, 在图像和外部资源加载之前执行我们的函数.在jquery中让这一实现变得可行:

使用&()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改dom的函数使用此方法调用. 另外还要注意document.createelement和innerhtml的区别. 如果可以请尽量使用document.createelement和&(\”\”<div/>\”\”)的形式创建对象.

jquery插件大全


jquery是javascript语言的一个新的资源库(框架)

jquery能快速,简洁的使用html documents, handle events, perform animations,并且能把ajax交互应用到网页,jquery能够改变你书写javascript的方式.

使用下面这些插件,可以实现很多、新、酷的效果!

file upload-文件上传

ajax file upload
jquploader
multiple file upload plugin
jquery file style
styling an input type file
progress bar plugin

 

form validation-表单验证

jquery validation
auto help
simple jquery form validation
jquery xav – form validations
jquery alphanumeric
masked input
typewatch plugin
text limiter for form fields
ajax username check with jquery

 

form – select box stuff-表单、选择框

jquery combobox
jquery controlled dependent (or cascadign) select list
multiple selects
select box manipulation
select combo plugin
jquery – linkedselect
auto-populate multiple select boxes
choose plugin (select replacement)

 

form basics, input fields, checkboxes etc.-表单,输入栏,复选框等

jquery form plugin
jquery-form
jlook nice forms
jnice
ping plugin
toggle form text
toggleval
jquery field plugin
jquery form’n field plugin
jquery checkbox manipulation
jtagging
jquery labelcheck
overlabel
3 state radio buttons
shiftcheckbox jquery plugin

js与jquery获得页面大小、滚动条位置、元素位置


//页面位置及窗口大小

function getpagesize() {
var scrw, scrh;
if(window.innerheight && window.scrollmaxy)
{    // mozilla   
scrw = window.innerwidth window.scrollmaxx;   
scrh = window.innerheight window.scrollmaxy;
}
else if(document.body.scrollheight > document.body.offsetheight)
{    // all but ie mac   
scrw = document.body.scrollwidth;   
scrh = document.body.scrollheight;
} else if(document.body)
{ // ie mac   
scrw = document.body.offsetwidth;   
scrh = document.body.offsetheight;
}
var winw, winh;
if(window.innerheight)
{ // all except ie   
winw = window.innerwidth;
winh = window.innerheight;
} else if (document.documentelement && document.documentelement.clientheight)
{    // ie 6 strict mode   
winw = document.documentelement.clientwidth;    
winh = document.documentelement.clientheight;
} else if (document.body) { // other   
winw = document.body.clientwidth;   
winh = document.body.clientheight;
}    // for small pages with total size less then the viewport
var pagew = (scrw<winw) ? winw : scrw;
var pageh = (scrh<winh) ? winh : scrh;   
return {pagew:pagew, pageh:pageh, winw:winw, winh:winh};

};

//滚动条位置
function getpagescroll()
{
var x, y; if(window.pageyoffset)
{    // all except ie   
y = window.pageyoffset;   
x = window.pagexoffset;
} else if(document.documentelement && document.documentelement.scrolltop)
{    // ie 6 strict   
y = document.documentelement.scrolltop;   
x = document.documentelement.scrollleft;
} else if(document.body) {    // all other ie   
y = document.body.scrolltop;   
x = document.body.scrollleft;  
}
return {x:x, y:y};

}

jQuery 对动态创建元素的事件绑定支持 live


jquery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>  <div class=\"clickme\">click here</div></body>

可以给这个元素绑定一个简单的click事件:

&('.clickme').bind('click', function() {  alert(\"bound handler called.\");});

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

&('body').append('<div class=\"clickme\">another target</div>');

尽管这个新的元素也能够匹配选择器 \”.clickme\” ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

&('.clickme').live('click', function() {  alert(\"live handler called.\"); });

然后再添加一个新元素:

&('body').append('<div class=\"clickme\">another target</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。

事件委托

.live() 方法能对一个还没有添加进dom的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 dom 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

  1. 生成一个click事件传递给 <div> 来处理
  2. 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到dom树上
  3. 事件不断冒泡一直到dom树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
  4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
  5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 &(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
  6. 如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。

附加说明

.live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

  • 在jquery 1.4中,.live()方法支持自定义事件,也支持所有的 javascript 事件。在jquery 1.4.1中,甚至也支持 focus 和 blue 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jquery 1.4.1中,也能支持hover(映射到\”mouseenter mouseleave\”)。然而在jquery 1.3.x中,只支持支持的javascript事件和自定义事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  • .live() 并不完全支持通过dom遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
  • 当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stoppropagation() 无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jquery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟 .bind() 提供的功能类似。

在jquery 1.4 中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind() 的讨论来获得更多信息。

正确区分DOM对象与JQuery对象


由于在jquery中可以使用js语法,因此容易混淆don与jquery对象,一旦对象理解出错,那么,与对象相关的操作也就不会正确。

dom对象与jquery对象的定义

所谓dom对象,指的是通过传统的js方法获取的dom元素对象,如:

var objdom = document.getelementbyid(\’text\’);

var domvalue = objdom.value;

其中,变量objdom保存的就是表彰中的某个指定文本框对象,即dom元素对象;变量domvalue获取了id号为\”txt\”的dom对象的值。

所谓jquery对象,指的是通过jquery语法包装原始的dom对象后生成的新对象。jquery对象在jquery库中是特有的,只要是jquery对象,就可以使用jquery库中的所有方法与事件,如:

var &obj = &(\’#text\’);

var domvalue = &obj.val();

其中,变量&obj保存的就是表单中指定的文本框对象,由于被&()方法所包装,所以,该对象变成了jquery对象;donmvalue变量保存通过jquery中的val()方法获取的jquery对象的值。

需要注意

(1)不能使用dom对象调用jquery对象的方法,下列代码是错误的:

var objdom = document.getelementbyid(\’text\’);

var domvalue = objdom.val();

(2)不能使用jquery对象调用dom对象的方法,下列代码也是错误的:

var &obj = &(\’#text\’);

var domvalue = &obj.value;

如果需要dom对象与jquery对象之间的方法可以互相调用,必须先实现dom对象与jquery对象之间的类型转换。

1、在jquery中,可以很方便地完成dom对象与jquery对象之间的转换。只需要用jquery中提供的[index]与get(index)方法即可将jquery对象转换成dom对象。如:

var objdom = document.getelementbyid(\’text\’);     //dom对象

var &objdom = &(objdom);     //转换成jquery对象

2、dom对象只要通过jquery方法&()进行包装,就可以转换成jquery对象。如:

var &obj = &(\’#text\’);     //jquery对象

var objdom1 = &obj[0]     //转换成dom对象

var objdom1 = &obj.get(0)     //转换成dom对象

 

dom基础

与 dom模型密不可分的是javascript脚本技术,dom在客户端的应用也是基本该技术,通过该技术我们可以很方便地访问、检索、操作文档中的任何一个元素。因此,学好javascript脚本技术,是掌握dom对象的一个重要条件。

单词document文档,当我们创建一个页面并加载到web浏览器时,dom模型则根据该页面的内容创建一个文档文件;单词object即对象,是指其具有独立特性的一组数据集合,例如,我们把新建的页面文档称之为文档对象,与对象相关联的特征称之为对象属性,访问对象的函数称之为方法;单词“model”即模型,在页面文档中,通过树状模型展示页面的元素和内容,其展示的方式则是通过节点(node)来实现 的。

 

 

 



Powered By wordpress Copyright jQuery插件开源软件 © 2009-2012 版权所有