natalie86的专栏

看了《锋利的jquery》一书，练习了下期中的一个用jquery写表单验证的例子。      效果如图：     总结：       这是个比较简单的表单验证，主要验证了表单中的用户名和邮箱两个必填选项。表单验证其实质是个不断往下过滤的过程。主要思路：       （1）判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理。       （2）如果是“用

首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播)当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。代码如下:$('a').bind('click',function(){aler

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果     先看下最后的效果图           其实轮播图的原理都差不多，一个搞明白后其他也都能搞明白了。先来分析下html的结构。其实结构还是比较简单清晰的。轮播图最外层有个div，里面又分成标题点击按钮一排的title为一个div，下部内容展示又是一个div。      上面的ti

今天要给大家带来一款基于jquery带百分比的响应式进度加载条。这款加载条非常漂亮，而且带有进度的百度比，且在不同的百分比用的是不同的颜色。而且这款加载条采用了响应式设计，在不同的分辨率的显示器下完美支持。一起看下效果图吧。在线预览   源码下载实现的代码。html代码：

最近写了很多的js，虽然效果都实现了，但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。谨以此文来提醒自己。 其次在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实

这是一款非常实用的jQuery和CSS3网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素，在页面滚动的时候可以修改这些元素的视觉效果，从而制作出一种滚动视觉差的特效。该固定背景视觉差特效的效果都是使用CSS3来完成的，jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment属性来实现。在例子中，使用一幅手机的图片作为

今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单，菜单是垂直的，每一个菜单项带有一个小图标，看起来非常专业。并且菜单支持无限极下拉，所以对各位Web开发者来说非常实用。菜单时基于jQuery的，所以基本可以支持所有的浏览器。在线演示     源码下载

这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载，带有前后导航按钮，可以使用鼠标前后旋转，并可以设置3D透视的位置。查看演示   在线下载  201504091855.zip该旋转木马依赖于以下外部插件：Three.js：https://github.com/mrdoob/three.js/S

Only Bolivian Here: 问我的网页里面有几个链接。单击后可以跳转到相应的内容以帮助用户阅读。有没有一种方法，使滚动效果更顺畅一点？比如实现这样的效果:http://www.position-relative.net/creation/anchor/但是他用了一个自定义的JavaScript库。jQuery能否提供类似这样的效果？

jQuery是一款非常流行的Javascript框架，如果你想要从事Web前端开发这个岗位，那么jQuery是你必须掌握而且能够熟练应用的一门技术。本文整理了一些关于jQuery的经典面试题及答案，分享给正要面试Web开发岗位的同学。问题：jQuery的美元符号$有什么作用？回答：其实美元符号$只是”jQuery”的别名，它是jQ

tablesaw是一款响应式的表格插件，非常实用、方便。当浏览器窗口尺寸发生变化时，Tablesaw可以自动的变换表格排列方式，同时，它还支持手势滑动操作、可设置列的显示和隐藏，支持迷你地图等。非常适合用在响应式网页中。https://github.com/filamentgroup/tablesaw?from=timeline&isappinstalled=0&nsukey=2ForA0XJ

Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：　　

jQuery是一款非常强大的Javascript脚本库，我们开发者喜欢jQuery的原因除了它代码简洁外，更多的是因为jQuery插件非常丰富。今天我们用一个示例来解说jQuery是如何实现拖拽的。利用jQuery实现拖拽非常简单，我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素。今天我们就利用jQuery的这一特性来实现一个拖拽删除桌面小图标的功能，就像操作

对于设计师，开发者，摄影师或任何创造性的个人和企业，他们自己的网站是展示他们的技能和服务的最佳场所。你可能打算设计一个新的个人作品网站，不管你是从头开始或使用模板，都会需要使用 jQuery 幻灯片插件，以美丽夺目的方式显示的作品。　　网络上有很多的 jQuery 幻灯片插件，很难决定哪一个更好。因此，我们编辑了15款目前比较优秀的 jQuery 幻灯片插件，帮助你用一个美丽的和创新的

jquery源码地址:http://genius.it/ejohn.org/files/jquery-original.html?from=timeline&isappinstalled=0

这是一款基于jQuery的图片动画插件，这款jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素，包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置，同时你也可以自己定义这些图片上方的元素出现时的动画特效。在线演示      源码下载

这是一款外观很不错，而且功能也比较强大的jQuery注册表单，这款jQuery表单的特点是带有严格的表单字段格式验证功能，比如电子邮箱的格式、用户名格式以及密码复杂度和长度等。另外，当格式验证无法通过时，不仅会在表单附近显示错误信息，而且按钮也是不可用状态，鼠标样式也会改变。在线演示    源码下载

1.Flat Surface Shader – 超炫的 3D 模拟照明效果       Flat Surface Shader 是一个超炫的 3D 模拟照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采用原生的 Float32Arrays 存储数字数据，进行高度优化的计算。可以调整颜色参数预览效果，而且可以导出图像。

之前我们分享过很多漂亮的Tooltip提示框插件，比如这款带Tooltip表单验证的注册表单。今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件。在线演示jQuery消息提示框插件Tipso.rar

Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果，按大类别来分可以分为：淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对应一种遮罩模式。浏览器兼容Animsition需要支持CSS3的浏览器才能正常工作。IE10+ChromeSafariFir

1、 禁用Jquery（动画）效果jQuery.fx.off = true;2、使用自己的 Bullets（这个有一丁点儿的小技巧）//这里是js代码 也就是给每个ul添加一个类名 然后给ul的子li前面添加html 你想要使用的Bullets$("ul").addClass("Replaced");$("ul > li").prepend("‒ ");

图片查看器，github地址：https://github.com/VaJoy/imgViewer效果如下： 这款当初大概写了2小时，有点匆忙地赶出来的，使用的接口很简单：$.bindViewer(".viewer-item");复制代码它的实现其实也没啥复杂的原理，唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过

我们先来看看回弹滚动在手机浏览器发展的历史：    - 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;    - Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；    - Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除

看了《锋利的jquery》做了一个网页换肤的练习。效果如图：       点选上面的色卡选项，下面相应的标签就会随之变色。        html的结构仍然是用ul和li包裹色卡

一、jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。　　特别提醒，今日发现一个特别的错误，google浏览器提示：has no method $.cookie。火狐浏览器提示:$.cookie is not a function;调试了半天，终于找到原因，如果同一个页面两次或者多次引入jQuery插件就会报此错误。　　使用方法：　　1、引入jQuer

之前做了《锋利的jquery》里的一个选项卡练习，现在来做一下回顾和总结。            页面效果比较简单，要做的炫那是CSS的事，这里主要是学习用JQ实现选项卡的原理和思路。 时事 体育 娱乐 时事 体育 娱乐         以上是html的结构，比较

描述: 从匹配的元素中搜索给定元素的索引值，从0开始计数。添加的版本: 1.4.index()这个方法不接受任何参数。添加的版本: 1.4.index( selector )selector类型: Selector一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。添加的版本: 1.0.

今天做了《锋利的Jquery》的表格变色的例子。作为一个这一行业的green-hander，我决定一步一个脚印从简单的做起，把基础打扎实，看书要和写代码结合起来。我决定把书中的每个例子看一遍再做一遍再总结一下，加深理解和印象。       表格变色一共做了2个案例，一个是点击表格的单选按钮，并让选中的高亮，其余的去除高亮；另外一个是表格多选案例，选中的都给予高亮显示。不限制个数。

新的一周开始了，今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用，这些jQuery插件不仅非常炫酷，而且还挺实用，这次的分享包含jQuery菜单、CSS3按钮已经多种图片特效，一起来看看吧。1、CSS3书本翻页动画 书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果，它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时，书本即可向前翻一页

表单元素无处不在，已然成了Web应用不可或缺的一个部分。对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值。那在JQuery和JavaScript中怎么操作表单元素的值？JQuery操作表单总结：1、文本框、密码框、隐藏域、文本域（id换成对应的,value属性存在，才能利用attr(‘value’) 获取值，否则返回undefined）：1.1 获取—>$

《锋利的jquery》一书中有讲一个用jquery实现下拉框左右选择的效果，先看下效果图如下：       类似于后多系统后台会用到的一个多项筛选的功能。        其实主要是有6个功能：      （1）点击右边的某一项，点选下面的选中添加到右边，实现添加单个的功能      （2）点击全部添加到右边按钮，实现全部项添加的功能      （3）点击左边的某一项，点选下面的

做了锋利的jquery里复选框的两个小练习。效果图一：           通过4个按钮实现复选框的全选、全不选、反选及提交选中选项并在页面中打印出来的功能      先来看看html，表单元素中的name值的设定非常重要，复选框的name值是相同的      足球 篮球 羽毛球 乒乓球     再来看下jquery，点击全选后，所有的选项都会被勾上，这个效果是全选按钮

看了锋利的jquery，做了3个用jquery实现多行文本框高度变化的效果的小练习。这3个练习是层层完善提高效果的过程。先来看下练习一的效果图：                实现的功能是通过点击文本框上的放大，缩小按钮来控制文本框高度的增加和减小。         代码的思路是点击放大按钮后进行判断，如果文本框的高度小于500，那么重新设置高度，在原有的基础上加50。同理，点击缩小的

《锋利的jquery一书》中的用jquery实现文本框得到失去焦点的效果，效果如图：               结构是一个简单的表单，html里用到了fieldset及legend这两个表现来实现半外边框的效果。fieldset里分别放了三个div来放三个表单，名称用了label属性，后面用了input及textarea，代码如下：         个人基本信息

jQuery近些年来仍旧是web开发中最受欢迎的类库，虽然大家褒贬不一，但是仍旧不失为一款最流行的Javascript，在今天这篇文章中，我们将介绍几个jQuery的相关方法，无论你是入门级极客或者骨灰级极客，可能都会忽略这些方法的使用。希望大家会觉得有帮助！在事件中return false可能大家在编写事件相关代码的时候，有时候会使用return false语句，代码如下

注*　这是一个两年多的“老”项目，可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:  Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的cheerio快速，灵活，在服务器端使用的jQuery。简介

看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下queryRotate 这个插件就可以实现这个功能jqueryRotate：支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现google code地址