编程记录，亲测有效

jQuery是一个JavaScript 库，也就是对JavaScript的扩展，用来满足各种日益增加的不同特效需求。其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ。一、基本目标网页中有如下三个按钮，一个只能隐藏文本，一个只能显示文本，一个同时能隐藏与显示文本，点击一下显示，再点击一下隐藏，无限循环。二、制作过程1.首先你要到JQ

这适用于在当前页表格搜索的情况。思想来自于《【JavaScript】利用sort()函数与文件碎片实现表格的前端排序，兼容IE6原生态》（点击打开链接），本来打算使用纯JavaScript无任何插件写的，但是无奈JavaScript无法独立操作tbody节点，清空tbody节点内的数据，只能拉上jQuery帮忙了。所以下面的代码是JavaScript与Jquery混写的方式。打算做到如下效果：

本文与《【JavaScript】网页节点的增删改查》（点击打开链接）为姊妹篇，其实JavaScript对DOM的操作已经总结了很久的，而对于jQuery对网页节点的操作，虽然一直在用，但一直没有好好总结一下，实在是不应该。下面举同样的例子来说明这个问题：如上图，提供3个按钮，1个下拉列表，1个输入框，提供增删改查的操作。网页中最多10个节点，最少0个节点，多了不让加，少了不让减

下面将用以下的一个布局，说明jQueryUI中accordion、tabs的应用，如何用.ui-widget-content与.ui-widget-header两个元素搞出面板。以下是在IE8的测试效果，上面的5个按钮用于导航，标签页的话，鼠标悬停就可以切换。两个面板不是jQueryUI自带的，是用.ui-widget-content与.ui-widget-header搞出来的。以

其实这东西本打算用原生的javascript来写，但是原生的javascript取class与监听滚动条的滚动过于麻烦，因此上了jQuery，没关系，反正兼容IE6就行。将实现如下的效果：也就是在网页中有点常见的滚动监听。相应的标题，滚到哪里，则左边的滚动条当前标题前的。。。就变成》》》，，当然了，左边的标题同样是可以点击，马上滚到该滚的地方。首先是网页布局部分，代码如下，请忽

这与《【HTML】根据不同的浏览器类型写不同的HTML代码》（点击打开链接）一文是姊妹篇，IE注释能够帮你在网页的HTML根据不同的版本，渲染不同的代码。此文是在脚本部分利用jQuery判断浏览器类型和版本而执行不同的Javascript脚本。由于直接利用Javascript实现判断浏览器的版本的代码比较复杂，Javascript没有封装接口，Jquery有封装接口，不用写这么多代码，所以

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面，让用户浏览网页，相当于在使用布局好的app一样。首先要在jQueryMobile（点击打开链接）下载一个压缩包，然后把这个压缩包的所有内容拉到

滑动手势在移动设备是很流行的，在移动设备中滑动翻页中很常见虽然这个功能可以在jQueryMobile中实现，但是个人与之前写的《【jQuery】论手机浏览器中拖拽动作的艰难性》（点击打开链接）中的观点一直，由于这是在手机浏览器中浏览，而不是安卓的一个独立APP，所以不要经常除点击以外的移动设备手势，以免跟手机浏览器与手机系统本身的手势发生冲突。那么，使用jQueryMobile实现滑动翻页

上次笔者写的文章《【jQueryMobile】Helloworld与页面切换》（点击打开链接）没有考虑到窗体中放置长内容的状况一旦窗体中出现长内容，使用笔者那种固定header与footer的全屏布局是存在缺陷的，如图所示，长内容最后的内容，直到滚动条拉到最底部也无法穷尽，而且很有可能的是，虽然现在这个地方的内容是显示为半透明，但往往这个位置是一些提交按钮什么的，用户根本就

jQueryUI与ExtJs是非常出名的UI，这两个UI还有更大的一个好处就是兼容IE6。虽然jQueryUI一直被人说丑，但是，一直是最受欢迎的前端框架之一。虽然一个网站全部都用jQueryUI布局很少，但是或多或少会用到里面一些实用的组件的。jQueryUI的下载，先到其官网http://jqueryui.com/（点击打开链接），选择Download，下载最经典的jquery-ui-

有时候不可避免地在某一页面摆上大量图片，众所周知，一张网页如果上面的元素超过100KB，那么，你的网页会加载得很慢，纵使现在的网络已经不是当年的猫，然而，你也应该尽可能地提高你的网页加载速度。对于多图杀猫的单一页面可以利用到lazyload.js延迟加载技术，也可以直译为懒加载。如下图，比如我这个页面是一个以图片为主的网站，就是要在上面同时摆上下面的15张大图。即使你摆个缩略图上去

有时候，利用树形组件做导航也不失为一种好的想法，但树形组件，如果真要自己从0开始写，有点蛋疼。然而，jQuery中是直接有树形组件可以使用的。以下是该组件在IE6的树形组件的测试效果，毫无障碍地兼容，而且美观：要使用这个树形组件jquery-treeview-master，首先到它的官网（点击打开链接）上下载：下载之后，解压，取走其中的jquery.treeview.j

这个问题不止存在于jQuery的Ajax当中，还存在其余版本的javascript库或者原生的javascript中。关于OnSubmit在《【JavaScript】在前台验证表单，必须使用onsubmit="return xx()"的形式》（点击打开链接）已经详细说明了，但是在OnSubmit中如果带上Ajax判断，比较判断这个用户名是否存在等，你需要考虑Ajax函数与OnSubmit不同步的问

这个弹窗是如下图的效果：打开网页的时候，这个弹窗会淡入，之后点击右上角的关闭按钮，其实就是一个& times;会淡出。采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事。如果采用窗口自下而上地移动，还要考虑div的position设置问题，这个问题还涉及一系列兼容性问题，很严重。之所以称之为纯js的右下角弹窗，是因为，在任意页面，只需要如下引入Jquery之

本文与《【JavaScript】复选框的全选、反选，判断哪些复选框被选中》（点击打开链接）为姊妹篇，把里面内容再与jQuery框架中实现一次，同样做到如下的效果：布局还是同样的布局，只是由于在jQuery框架中，无须再为按钮，指定特定的onclick事件处理函数，直接使用jQuery指定即可： 全选、反选 哪

这个是在jQuery1.6版本之后出现的鬼东西。受影响的主要有下拉列表select与复选框checkbox。众所周知，在jQuery中可以用attr()取出节点的属性，然而对于checkbox却不是这样了，比如我要取出其是否被选中的属性checked，attr("checked")去取没有选中的复选框是undefinded的，只能取出被选中复选框的属性。这个问题，导致我在一个条件判断中忙活了比较久

在网页中有时候需要画出统计图，尤其是一些OA系统中，这样能够给各位看官一个直观的数据显示。图表用很多东西都能画出来，比如JSP可以利用JAVA本身就有的绘图函数，php有jpgraph插件，具体请看《【php】使用jpgraph完成投票系统的普通用户部分》（点击打开链接），等等，但毕竟属于现实层的内容，还是用前端插件更好一点。网上的JavaScript/jQuery图标插件到处东西，但是试过JS

本文与上一篇的《【jQuery】使用JQ来编写最基本的淡入淡出效果》（点击打开链接）为姊妹篇，但上一篇只是对文本的基本控制，本篇则是对面板元素进行控制。虽然功能上非常类似，但是所用到的控制函数是不同的，因此有必要进行说明。实现了点击一个面板来控制另一个面板，并且对显示与隐藏速度进行了控制。一、基本目标网页中有两个面板一个按钮，点击上面板，则可以使下面在显示/隐藏之间

这样也是HTML DOM那部分的内容，javascript与jquery等前端脚本语言的核心就是要控制每一个节点，对每一个节点进行增删改查，这样才能够真正地活用javascript与jquery等前端脚本写出一个又一个华丽丽的东西。javascript控制节点，笔者已经在之前的《【JavaScript】网页节点的增删改查》（点击打开链接）写过，现在是通过jquery这一java

一、基本目标写一个跟随鼠标运动的图层，图层中显示当前鼠标的位置，如下图，此图层之所以使用jQuery，而不是因为javascript，是因为jQuery的代码其便于兼容当前的所有主流的浏览器，至少IE8是没有任何问题的，不用像javascript大段大段的代码都用到兼容性上面了……二、制作过程本次实验的核心是jquery里面的mousemove事件，鼠标

现在手机端的快速发展，使许多手机手势需要制作到手机版的网页过程中网上有许多长按按钮的插件，甚至仅仅是jQuery Mobile都有长按事件但是基于种种的兼容性问题，只使用jquery去实现长按动作，可以在手机端与电脑端保持极强的兼容性一、基本目标制作一个按钮，实质上一个100x100px的灰色背景的图层，长按达2s则图层里的文字从in变成out。二、

本来标题是《论手机浏览器中拖拽动作的不可能性》的，但是想了想还是改成艰难性，避免过于绝对本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的，但是最后发现竹篮打水一场空，虽然拖拽动作在手机浏览器中司空见惯，但是在手机浏览器中，要想实现可以被拖拽的组件，却是一件不可能的事情。先来看看在PC网页中，拖拽动作是怎么做的，首先，我们有一个按钮，点击有动作，一直按着不放，可以随意拖

如果在输入框加上placeholder="xx"属性，例如：则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能，也就是得到如下图所示的对话框：但是这个属性在WIN7默认的浏览器IE8中无法兼容，更不要说IE6了。也就是说IE里面不支持placeholder这个标签。不信的话，大可以把这段代码拉到IE8里面运行下试试，你只不过是得到一个空的对话框在IE里面要实现这

一、前言1、jQuery中的animate()方法允许您创建自定义的动画。animate() 方法几乎可以操作所有 CSS 属性，不过当使用 animate() 时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如

首先，先在github中找到jquery-qrcode，选择Download ZIP下载之（点击打开链接）下载之后得到一个压缩包jquery-qrcode-master.zip，解压，把里面的src文件夹取出来，放到站点目录，之后，从jquery的官网中下载最新版的jquery1.x，一般是1.11（点击打开链接），而不是2.X，为了兼容IE浏览器，放到src文件夹，站点文件夹

在前台做表单的验证的方式有很多种，具体思想是你先要把表单的要验证项里面的值取出来，然后再脚本处进行判断，最后根据判断结果告警，然后给onsubmit="return XX()"那个函数，返回true与false的布尔值。整个过程，把表单的要验证项取出来是关键。在《【JavaScript】表单即时验证，不成功不让提交》（点击打开链接）中利用了id取每一个表单项的属性，这是最基础的，但是如果需要以na

虽然看上去好像很爽的样子，尤其在一些具有超过单行文本框、多行文本框等页面，但是，遇到一些需要特定判断的页面，你还不如设置一个id，直接通过id来取，简单方便，不用考虑遍历问题这么艰难。这种方法只是尤其使用于那些超多文本框的页面，但你又不想连用服务器语言什么aspx,jsp,php设置N个id的情况。例如，利用这个方法能够改进《【JavaScript】表单提交之前的前台处理检查三部曲》（点击打开链接

其实我觉得告警提示的话，直接用一个Alert就最好的。开门见山，直接让用户明白你当前系统的意思，关键是Alert这东西就是再破的浏览器都必须兼容，不然你它丫的做毛浏览器啊？但是，在现在越来越觉得Alert不美观，而且开始有“弹窗挺吓人”的思潮，因此，告警提示你必须做得好看一点。在Javascript的透明度的操控比较艰难的前提下，jQuery的简单淡入淡出效果是你的选择。之所以选择jQuery，是

网页文本格式编辑器xheditor是一款优秀的、开源的JQuery插件。现在很多网站都涉及到用户的交互，很难想象一个没有输入框的网站是怎么样的，你总不能一个给一个空白的文本框给别人吧？如果让你自己用javascript或者jquery写一款文本格式编辑器，费时费力。jQuery插件xheditor是首选。这框插件非常出名、经典，甚至现在正在写csdn的博客编辑器，就是在它的基础上改进过来的，只是比

在《【jQuery】网页文本格式编辑器xheditor》（点击打开链接）中介绍了功能相当齐全的网页文本格式编辑器xheditor，但这款实用的xheditor，可能会有人觉得它的按钮什么的很丑，不符合现在网页的风格，其实个人认为这款编辑器的界面已经非常不错了。同时这款编辑器的很多功能，比如调颜色、加表情什么的，有时我们并不想给用户这么多功能，比如仅仅是一个评论框，但我们又不想给用户一个冰冷的多行文

本文和《【JavaScript】兼容IE6的JS模板化》（点击打开链接）是姊妹篇，鉴于现在javascript已经开始不受待见，甚至已经开始被当作后端语言，被事做extJS,NodeJs等，前端基本上都用jQuery实现的趋势，因此也就有了本文。毕竟javascript取个变量，document.getElementById实在是太长和被人诟病了！同样是现实前端模板化，告别用前端语言写Ajax