首页

关于

GBin1在线实例帮助你更好的了解jQuery功能特性(三)

GBin1在线实例帮助你更好的了解jQuery功能特性

今天我们继续介绍第三部分,如果你没有阅读前面文章,请点击如下地址查看:

jQuery DOM操作,循环和过滤

使用jQuery最大的好处在于帮助你迅速找到页面中的任何元素,并且可以循环或者过滤结果。下面我们介绍jQuery开发中大家经常使用的一些方法:

使用$.each()和.each() 方法

$.each()方法是jQuery的一般性方法用来处理javascript对象或者数组。而.each()方法用来处理jQuery的自有对象。

使用$.each()方法: 

使用.each()方法

使用$.data(),.data(),$.hasData()和 $.removeData()方法

我们可以使用data方法来绑定数据到DOM元素,也可以删除,判断是否存在:

HTMl5中我们大量使用data-tag标签,帮助我们快速的将数据绑定到标签上,在jQuery中,也提供了对应的方法data()来帮助我们快速实现类似功能: 

标签: jQuery代码大全, jQuery在线实例, jQuery在线演示, jQuery功能演示

阅读更多

GBin1在线实例帮助你更好的了解jQuery功能特性(二)

GBin1在线实例帮助你更好的了解jQuery功能特性 

今天我们继续介绍jQuery的功能特性,如果你错过了第一篇,请这里阅读

jQuery DOM操作 

jQuery的一个特长之一是帮助你有效果的进行DOM(Document object model)操作。DOM是你能看到的web应用中的所有元素,包括图片,容器元素,链接,视频等等。

通常我们在DOM加载完毕后来处理各种事件和元素,用来生成独特的效果。以下我们介绍几个非常有用的方法:

使用.clone()方法

jQuery的clone()方法可以快速的帮助我们根据一个元素快速生成另外一个元素的拷贝,相信大家在我们的ajax方法介绍中看到过我们如何使用clone方法来生成一个新的元素,以便使用.live()方法来绑定动态元素。

注意,你同样可以使用clone()方法来拷贝绑定在元素上的事件,非常实用的方法。

使用.html(),.Text()和.empty()方法

.html()方法恐怕是大家最熟悉的方法了,它能够帮助你设置或者取得特定标签中的内容。如果你只需要设置或者取得文本而非标签的,你可以考虑使用.text方法。这个方法将会返回一个字符串。

需要注意的是,这些方法都是浏览器相关的,所以得到的结果将取决于你使用的浏览器。…

标签: jQuery代码大全, jQuery在线实例, jQuery在线演示, jQuery功能演示

阅读更多

GBin1在线实例帮助你更好的了解jQuery功能特性(一)

GBin1在线实例帮助你更好的了解jQuery功能特性

最受欢迎的javascript框架 - jQuery 

你不得不承认,最近几年jQuery在前台开发类库中脱颖而出,越来越流行,只要你做web相关应用或者网站开发,肯定或多或少的使用过相关的功能。在最近的Google趋势中,我们可以看到自从2008年开始,jQuery类库的使用呈现几何级别的增长,远远的将其它JS类库甩在后面,有图为证:

js类库的google趋势 

事实上,jQuery已经成了最流行的桌面javascript类库。而且随着jQuery Mobile的发布,在移动端也必将展现强大的开发实力。

使得jQuery如此流行的一个重要的原因在于开发社区的推广,数以千记的开发人员都参与jQuery的创新开发,使得jQuery的功能越来越强大,实现的特效也越来越炫,插件的开发更使得jQuery开发展现出百家争鸣的气势,很多jQuery的顶级开发者使得jQuery成就了今天的巨大成功。

在今天的这篇文章中,我们将实例介绍jQuery的主要功能,同时提供演示,代码和在线调试,希望能够帮助大家实际理解和学习jQuery的功能。

 

这里使用jsfiddle来运行演示,你可以方便的查看,javascript,CSS,HTML代码,并且可以在线调试

 

jQuery处理CSS

使用.css()方法 

使用jQuery处理CSS非常方便,能够帮助你动态的实现界面的设计,比如,实现斑马线效果,在jQuery中我们使用.css方法来处理CSS相关的操作,例如,字体,颜色,位置等等。

标签: jQuery代码大全, jQuery在线实例, jQuery在线演示, jQuery功能演示

阅读更多

[jQuery代码]如何动态加载jQuery类库即如何在需要的时候再加载jQuery类库?

日期:2011/12/18  来源:GBin1.com

jQuery类库说实话并不是很臃肿,压缩版本的jQuery类库可以帮助你有效地减少页面大小。不过并不是所有页面你都需要用到jQuery类库,或者你希望能够更好的优化你的页面使之加载的更快。不管怎样,我们希望能够自己来管理类库的加载。

在线演示

如何实现jQuery类库的动态加载呢?

第一步:调用一段代码来调用jQuery

第二步:持续调用直到jQuery类库能够加载

第三步:运行需要基于jQuery类库的代码

以下是具体代码。

代码1 (第一步)

<body>
     <h3 id='status'>jQuery is not loaded yet.</h3>
     <input type='button' value='Loading jQuery now...' onclick='load()' />
</body>

代码2 (第二步)

load…

标签: jQuery代码, jQuery代码大全, jQuery动态加载, 动态加载jQuery类库, lazy loading jquery, 懒惰加载jQuery

阅读更多

jQuery中如何使用mouseout和mouseleave?

日期:2011/11/28  来源:GBin1.com

jQuery中的鼠标事件中有mouseout和mouseleave俩个看起来类似的事件。

这俩个事件的使用有些区别,如下是jQuery文档中的官方解析:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it…

标签: jQuery代码, jQuery代码大全, mouseout, mouseleave

阅读更多

[jQuery代码]jQuery中如何使用document ready?

日期:2011/11/28  来源:GBin1.com

很多人都使用jQuery的document ready方法,但是不是所有人都理解如何使用jQuery。

使用方式1

$(document).ready(function() {
    //当DOM完成后执行代码
});

使用方式2

$(function(){
    //jQuery 相关代码
});

和第一个种方式一样,语法上和第一钟方式没有区别

使用方式3

jQuery(document).ready(function($) {
    //当DOM完成后执行代码
});

$符合和以上代码中的jQuery意义一样,这样使用可以避免不同类库的冲突。

因为目前的各种流行的类库中都使用$来作为缩略符号,这样造成浏览器无法解析。

我们可以使用完整的jQuery来避免混淆,然后调用$.noConflict()方法

jQuery.noConflict();…

标签: jQuery代码, jQuery代码大全, noConflict, document.ready(), jQuery ready(), GBin1

阅读更多

jQuery/javascript代码大全

这里我们收集了大量的jQuery和javascript代码片断和代码库,帮助大家快速编程。

标签: jQuery代码大全, javascript代码大全

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.