分类目录 ‘JavaScript’

jQueryready方 法的是开发中经常用到的,作用相当于我们的body onload,是当页面DOM准备就绪的时候才运行的代码,最常用的就是在DOM渲染加载之前,先给document绑定ready事件,然后当页面 DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法


$(document).ready(){
});

(全文 …)

[document对象]

该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

属性

alinkColor 活动链接的颜色(ALINK)
anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
bgColor 文档的背景颜色(BGCOLOR)
cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
lastModified 文档最后的修改日期
linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
title 文档的标题((TITLE>)
vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
(全文 …)

互联网越来越重要,我们可以用它来工作、学习和娱乐,在娱乐方面,我们在互联网上玩游戏,搜索,收听和下载最喜欢的歌曲,视频和电影。互联网也 是个非常好的学习环境,有利于我们查找资料,帮助我们解决碰到的问题,还可以得到其他人的支持和帮助,这在计算机领域非常普遍,特别是程序开发,很多人认 为编程语言只是用于工作,没有什么乐趣,其实,只要我们发挥奇思妙想,再死板的东西也有有趣的一面。我写这篇文章的目的,就是想告诉所有人:使用 JavaScript,可以做很多很多有趣的事情。

1.让网页中的图片飞起来

分享9个非常有趣的JavaScript应用 | iwanna.cn 我想网
只要把下面的代码贴到浏览器的地址栏里然后按Enter键,当前网页的所有图片都将动起来。
(全文 …)

使用JavaScript清理Cookie首先要找到该Cookie对应的Name对应的值,然后设置其为过期:
找到Cookie有下面方法:

JavaScript代码

  1. function getCookie2(name){
  2. var arr = document.cookie.match(new RegExp(“(^| )”+name+”=([^;]*)(;|$)”));
  3. if(arr != null) return unescape(arr[2]); return null;
  4. }
	function getCookie2(name){
		var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
	}

找到后设置为过期,切记设置domain和path,只有这两个参数跟你要删除的参数完全一样才能把它删除掉。
(全文 …)

jQuery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效 果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程

插件

LavaLamp

10个jquery动画菜单:插件和教程 | iwanna.cn 我想网

相信很多人都见过这个很酷的菜单插件,也有很多网站成功的应用了这个插件。
(全文 …)

本文阐述如何开发一个运行在 Apple iPhone 以及基于 Android 的智能手机上的移动 Web 应用。 开发这些设备上的移动 Web 应用,我们不能使用平常的桌面浏览器,至少不能完全只使用桌面浏览器。 我们还需要模拟器或实际的设备。对于 iPhone 来说,我们需要使用 iPhone 模拟器。它是 iPhone SDK 的一部分。本文所使用的是 iPhone SDK 3.1。类似地,我们也需要使用 Android SDK。它包含了一个 Android Virtual Device 管理器,这个管理器可以用来创建运行各个 Android 版本的 Android 模拟器。 其中本文使用的是 Android SDK 2.1。本文所用到的大部分代码是 JavaScript 代码,以及一些 HTML 和 CSS。 此外,应用还有一个使用 Java™ 实现的服务器端。这并不是强制性要求的,和其它的 Web 应用一样, 我们可以自己选择使用任意的服务器端技术。我们需要使用 Java 1.6 来运行本文所开发的应用。 另外我们还需要使用 Jersey,它是 JAX-RS 的参考实现,以及所有相关的 Java Archive (JAR) 文件(见 参考资料)。
(全文 …)

这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成。在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原 理,以及末了以少许文字给你展示出如何借用Sizzle之手实现自定义选择器(也许更标准的叫法叫做过滤符)和它与YUI 选择器的大致比较。

前序

jQuery相比1.2的版本,在内部代码的构造上已经出现了巨大的变化,其之一便是模块的分发.我记得09年在jquery 9月开的一次大会上 john放出的一张ppt上 也指出了当前的jquery下一步目标,不仅仅是除了sizzle选择器的分离,届时core,attribute,css以及 manipulation,包括event也都会独立成单独的js文件.(1.4的文件结构,其实已经分成单独的16个模块的组成)

随着jQuery被用来构建web app的场合愈来愈多,它的性能自然受到了大部分开发者的高度关注,它的内部实现机理又是如何,比如选择器的实现。
(全文 …)

61个javascript图片相册脚本。涵盖Javascript幻灯片脚本、滑动门脚本、图片轮播循环展示、jquery相册展示插件以及各种漂亮的JS图片特效。

1. Imago (演示地址)

Imago - Javascript图片相册脚本

一个基于Mootools框架开发的AJAX Image Gallery 。

2. Dynamic Image Gallery and Slideshow (演示地址)

Dynamic Image Gallery and Slideshow - Javascript图片相册脚本

只有3kb大小的Ajax Image Gallery与Slideshow。

3. mooSlideBox (演示地址)

mooSlideBox - Javascript图片相册脚本

MooSlideBox是一款基于ajax的小巧幻灯片特效工具,不同于其它LightBox,mooSlideBox采用底部弹出 碰撞 拖拽的效果。

4. Easy Slide

Easy Slide - Javascript图片相册脚本

EasySlide是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动 将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。

5. ImageFlow

ImageFlow - Javascript图片相册脚本

非常cool类于Flash效果图片查看器。

6. Image Gallery using Spry

Image Gallery using Spry - Javascript图片相册脚本

一个使用spry框架开发,功能强大,易于集成到网站中使用的Web相册控件。

7. Image Link

Image Link - Javascript图片相册脚本

Image Link这个javascript能够为图片链接添加额外的样式,比如当鼠标移到某图片上时可以显示一张缩放小图标。

8. UvumiTools Gallery (演示地址)

UvumiTools Gallery - Javascript图片相册脚本

采用Mootools框架开发的相册图片展示插件。图片加载进度提醒,能够按图片大小自动调整展示窗口大小,搜索引擎优化,多浏览器支持( FireFox2

9. Hoverbox Image Gallery (演示地址)

Hoverbox Image Gallery - Javascript图片相册脚本

这是一个采用纯CSS实现的照片Gallery。当鼠标经过时图片会自动放大。

10. Galleriffic

Galleriffic - Javascript图片相册脚本

Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看。 Galleriffic还支持分页,从而使得它能够展示更多的图片。

11. BarackSlideshow (演 示地址)

BarackSlideshow - Javascript图片相册脚本

采用MooTools1.2开发,幻灯片效果展示图片的JScript程序。

12. 3D Flash gallery (演 示地址)

3D Flash gallery - Javascript图片相册脚本

这是一个能够以3D效果展示图片的Flash控件。基于Papervision 3D开发,使用XML作为数据库来存储图片信息。

13. prettyGallery (演 示地址)

prettyGallery - Javascript图片相册脚本

prettyGallery是一个图库导航控件Slider。基于jQuery开发,除了可以导航图片之外,还支持其它任何内容。可以配置导航滚动 速度和图片标题说明。

14. s3Slider (演示地址)

s3Slider - Javascript图片相册脚本

s3Slider是一个jQuery slideshow插件

15. Simple Controls Gallery

Simple Controls Gallery - Javascript图片相册脚本

这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。

16. Agile Carousel (演 示地址)

Agile Carousel - Javascript图片相册脚本

Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示,添加文本水印等功能。

17. imgPreview (演示地址)

imgPreview - Javascript图片相册脚本

图片预览jQuery插件。当鼠标移到图片链接上时,会在链接的旁边出现一个类似于tooltip效果的图片展示框。

18. flashgallery (演示地址)

flashgallery - Javascript图片相册脚本

Flash Gallery是一个采用Macromedia Flash 2004开发的简单相册控件。使用XML文件来存储图片展示信息。

19. imgAreaSelect

imgAreaSelect - Javascript图片相册脚本

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。

20. Jcrop (演示地址)

Jcrop - Javascript图片相册脚本

Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。

特点:

  • 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
  • 支持宽高比例锁定
  • 支持minSize / maxSize设置
  • 支持改变选区或移动选区时的回调(Callback)
  • 支持用键盘微调选区
  • 通过API创建互动,比如动画效果
  • 支持CSS样式

支持的浏览器:

  • Firefox 2
  • Safari 3
  • Opera 9.5
  • Google Chrome 0.2
  • Internet Explorer 6

21. Image Upload and Auto Crop (演示地址)

Image Upload and Auto Crop - Javascript图片相册脚本

采用PHP jQuery开发的图片上传和剪切(Crop)工具。

22. Yahoo! UI Library ImageCropper (演 示地址)

Yahoo! UI Library ImageCropper - Javascript图片相册脚本

这是Yahoo! UI Library中提供的一个图片剪裁工具。易于使用和定制,该ImageCropper自带一种默认的剪裁框外观,但可以使用CSS进行扩展和定制。

23. UvumiTools

UvumiTools - Javascript图片相册脚本

UvumiTools是一个功能强大的图片剪裁控件,基于Mootools框架开发。可以配置图片剪裁最小尺寸,保持剪裁区域长宽比例,实时预览剪 裁图片等功能。

24. MooCrop

MooCrop - Javascript图片相册脚本

MooCrop是一个基于Mootools框架开发的图片剪切工具。

25. Simple Toggle Effect (演示地址)

Simple Toggle Effect - Javascript图片相册脚本

Simple Toggle Effect提供一种利用CSS与jQuery实现展开与收缩效果的简便方式。

26. Flipping Image Gallery (演示地址)

Flipping Image Gallery - Javascript图片相册脚本

这个例子利用CSS

27. mooStack

mooStack - Javascript图片相册脚本

一个mootools插件,它提供一个容器,可以让图片层叠在一起。单击其中每一层的图片,可以让其在最前面展示。

28. Polaroid Photo Viewer (演示地址)

Polaroid Photo Viewer - Javascript图片相册脚本

这是一个基于CSS3与jQuery开发的照片查看工具。它可以让用户在页面上随着拖动照片,旋转照片等。

29. Sliding Boxes and Captions with jQuery (演示地址)

Sliding Boxes and Captions with jQuery - Javascript图片相册脚本

这是一个能够直接在图片表面添加标题说明的jQuery插件。当鼠标滑过图片时,标题备注能够以各种动画效果展现。

30. jQuery Fullsize

jQuery Fullsize - Javascript图片相册脚本

jQuery Fullsize这个插件允许在 61个Javascript图片相册脚本标签中加入一个longdesc属性来设置缩略图指向的具体图片。当鼠标移到缩略图表面时单击 放大按纽,就能够放大longdesc属性设置的图片。

31. jqueryBook (演 示地址)

jqueryBook - Javascript图片相册脚本

基于jQuery实现的产品展示控件。提供导航控制按纽,提示产品详细信息的气泡。

32. Flash Gallery (演示地址)

Flash Gallery - Javascript图片相册脚本

Flash Gallery这个Flash相册能够从指定的文件夹或Flickr读取图片,然后以Slideshow的方式播放展示。播放窗体能够能够根据图片尺寸自 动调整大小,支持全屏放大显示。

33. loopedSlider (演示地址)

loopedSlider - Javascript图片相册脚本

jQuery Content Slider插件,支持循环播放。

34. slideViewer

slideViewer - Javascript图片相册脚本

利用这个jQuery插件,只需几行代码就能够将一组无序的图片列表转换成可导航控制的相册。

35. Viewer (演示地址)

Viewer - Javascript图片相册脚本

Viewer是一个利用Mootools框架开发的图片和文本内容幻灯片放映控件(Slideshow)。支持手动与自动播放两种模式。

36. jSlickmenu (演示 地址)

jSlickmenu - Javascript图片相册脚本

jSlickmenu是一个利用CSS3的一些特性(如:旋转、阴影)与jQuery实现的Slick menu。jSlickmenu具有易于使用,外观cool,可定制等特性。

37. AD Gallery (演示地址)

AD Gallery是一个带缩略图导航浏览,可设置照片标题和备注说明信息的jQuery相册插件。可以定义照片切换效果(左右交替,落下,淡入淡出,放大/ 缩小交替等)。照片展示框会根据实际照片大小自动调整。

38. ImageCaption (演 示地址)

ImageCaption - Javascript图片相册脚本

ImageCaption是一个MooTools1.2 插件用于为页面中的image元素添加带边框的标题说明。边框样式可以自己定义。

39. Facebox

Facebox - Javascript图片相册脚本

Facebox是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。

40. EOGallery

基本EOGallery是一个基于jQuery的幻灯片插件 。它仅使用jQuery的基本功能和Cody Lindley’s Thickbox来显示较大的图片。而且, EOGallery遵循严格XHTML 1.0和CSS标准,它支持Firefox , Safari, Internet Explorer 6,甚至在不支持JavaScript/或不支持的CSS的浏览器有较好表现。

41. Jquery图片幻灯效果

Jquery图片幻灯效果 - Javascript图片相册脚本

基于Jquery的图片幻灯效果

42. GalleryView

jQuery的一个灵活美观的内容画廊插件,非常易于管理和定制

43. YUI Slideshow (演示地址)

YUI Slideshow - Javascript图片相册脚本

YUI Slideshow是YUI3的一个扩展模块,它能够将任意HTML元素的子元素转换一个可定制的Slideshow。该模块提供播放/暂停/向后/向前 等控制,能够很方便创建一个播放器界面。支持10几种切换效果。

44. A Simple jQuery Slideshow

A Simple jQuery Slideshow - Javascript图片相册脚本

A Simple jQuery Slideshow是一个利用jQuery 少量CSS实现的简单图片幻灯片播放插件。图片之间的切换采用淡入淡出的效果。

45. Picasa Web Album Integrator (演示地址)

Picasa Web Album Integrator - Javascript图片相册脚本

PWI这个jQuery插件让你可以将你的Picasa Web相册集成到你自己的的网站或博客中。让用户不会觉得你的相册是放在Google中。

46. AnythingSlider (演示地址)

AnythingSlider - Javascript图片相册脚本

AnythingSlider是一个jQuery Slider插件,可以展示任意HTML内容。提供向前/向后滑动操作,能够自动添加分页导航Tab,可以随意启动自动播放功能。

47. tabSwitch (演示地址)

tabSwitch - Javascript图片相册脚本

tabSwitch是一个能够帮助开发人员轻松创建Tabs与sliders的jQuery插件。有7种效果2种样式可供选择。tabSwitch 可以自动或手动播放每一个tab/slide。

48. XML Image Slideshow

XML Image Slideshow - Javascript图片相册脚本

采用flash xml构建的幻灯片插件,它的控制栏会根据图片的颜色而自动改变.

49. Simple Image Viewer

Simple Image Viewer - Javascript图片相册脚本

利用jQuery内置的slideUp与slideDown方法创建一个简单的图片查看器。

50. Making an infinite JQuery carousel (演示地址)

Making an infinite JQuery carousel - Javascript图片相册脚本

利用jQuery,以一种简单的方式实现一个类似于走马灯似的图片更迭jQuery插件。

51. Pikachoose (演示地址)

Pikachoose - Javascript图片相册脚本

Pikachoose是一个基于jquery的轻量 级相册插件,它允许用户自定义幻灯片,按钮,自动播放.

52. Crafting an Animated Postcard With jQuery (演示地址)

Crafting an Animated Postcard With jQuery - Javascript图片相册脚本

利用jQuery创建一张生动的贺卡。

53. jCaption (演 示地址)

jCaption - Javascript图片相册脚本

jCaption这个jQuery插件可以用于为图片添加透明的浮动框来标注标题信息。

54. Slide Thumbs (演示地址)

Slide Thumbs - Javascript图片相册脚本

这个示例介绍了如何利用jQuery实现一个漂亮的图片查看控件。

55. Making a Really Cool jQuery Gallery (演 示地址)

Making a Really Cool jQuery Gallery - Javascript图片相册脚本

Making a Really Cool jQuery Gallery利用PHP扫描某一目录下的所有图片,然后用CSS、jQueryjQuery Lightbox插件生成一个漂亮的相册。

56. Greyscale Hover Effect w/ CSS

Greyscale Hover Effect w/ CSS - Javascript图片相册脚本

利用CSS Sprites技术和少量jQuery代码实现鼠标移到图片上,能够让图片变成灰白色,移开后还原。

57. YUI Library: Carousel Control (演示地址)

YUI Library: Carousel Control - Javascript图片相册脚本

这个YUI Carousel Control控件可以用于在一个有限的页面区域中浏览一组以水平或垂直的方式放置图片。

58. Create a Resizable Image Grid with jQuery (演 示地址)

Create a Resizable Image Grid with jQuery - Javascript图片相册脚本

利用jQuery创建一个通过拖动滑块来放大或缩小一组图片的插件。

59. Prototype Carousel

Prototype Carousel - Javascript图片相册脚本

基于Prototype和Script.aculo.us框架开发的图片幻灯切换程序,带左右滑动,并有滑动特效。

60. Animated Navigation with CSS (演示 地址)

Animated Navigation with CSS - Javascript图片相册脚本

利用CSS jQuery实现一个具有动画效果的导航条。当鼠标移过某个菜单项时,会出现翻滚的效果。

61. Prototype UI Carousel

Prototype UI Carousel - Javascript图片相册脚本

Carousel非常适合于在博客或网站中展示相册中的照片,该控件当前支持静态或利用Ajax获取的内容,支持水平和垂直两种展示方式。

jQueryAJAX方面是非常强大和方便的,以下是jQuery进行AJAX请求时方法模板:

  1. $.ajax({
  2. type: “get”,
  3. url: “”,
  4. data : {},
  5. beforeSend : function(){
  6. },
  7. success : function(data){
  8. },
  9. complete : function(){
  10. }
  11. });

(全文 …)

公司网站越来越多的使用了wBox,比如最新的产品普加邻居,封装了wBox(jQuery的一款弹出框插件),房产展示页面的房贷计算器采用的就是wBox,搜索结果页面采用的也是wBox,但是相对于其他页 面,搜索结果页面每一个li下面会有三个不同的wBox样式,我不可能每个都是手写一段wBox代码吧~
鼠标划上去显示wBox的三个触发链接鼠标划上去显示wBox的三个触发链接
(全文 …)