偶看新闻环境工程专题讲座心得:jquery学习笔记(好)
来源：百度文库 编辑：偶看新闻 时间：2024/05/01 17:11:24
JQUERY THICKBOX弹出层插件
JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度，根据其官方站点介绍
THICKBOX支持一下浏览器:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用:
1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少!
//path-to-file 就是你放这三个文件的路径
2.弹出单张图片的方法:
3.多张图片实现分页也很简单:
4.弹出网页inLINECONTENT
//重要的是 #TB_inline?
5.iFRAME形式的
所有调用的样式都得加上class=”thickbox”.这是控制弹出的效果,具体可以参照JQUERY的官方站点对THICKBOX的介绍,里面有具体效果:http://jquery.com/demo/thickbox/
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
ajaxValidator函数在提交后发生错误，停留在本页面后,再次触发校验会让提示内容一直处于onload状态。
2008-07-22 14:47
bug描述:ajaxValidator函数在提交后发生错误，停留在本页面后,再次触发校验会让提示内容一直处于onload状态。
这个bug已经修复，请重新下载。
2008/7/17 14:12:00 jQuery formValidator 3.1ver
1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。
该属性是个对象，默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror：出现该错误的时候的提示，如果为null，则利用onerror属性来提示错误。
注：只能在type:"size"的时候使用，即比较长度的时候。
2、修改自动构建提示层的语法。为formValidator函数增加relativeid属性。
relativeid：表示提示层相对定位的控件ID，如果为空，则用当前校验控件的ID。
tipid：表示自动创建的提示层的ID，如果为空，则用当前校验控件的ID+"Tip"来命名。
3、修正ajaxValidator函数里beforesend属性的bug。代码忘记传递它的唯一参数。
4、修正ajaxValidator函数在后台无法获取中文的bug。
5、更新了升级记录、用户手册、增加了2个提问。
1、现场演示
http://img.jb51.net/online/formValidator3.1/demo.html
2、jQuery pageValidator插件主要功能
支持所有类型客户端控件的校验
支持jQuery所有的选择器语法，只要控件有唯一ID和type属性
支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。
支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)
支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。
支持4种状态的信息提示功能，可以灵活的控制4种状态是否显示。第一种：刚打开网页的时候进行提示；第二种：获得焦点的时候进行提示；第三种：失去焦点时，校验成功时候的提示；第四种：失去焦点时，校验失败的错误提示。
支持自动构建提示层。可以进行精确的定位。
支持自定义错误提示信息。
支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件
支持2个控件值的比较。目前可以比较字符串和数值型。
支持服务器端校验。
支持输入格式的校验。
3、jQuery formValidator插件 API帮助文档
帮助文档请点击这里
4、下载API帮助、源码、示例
http://sh.jb51.net/jslib/formValidator2.4.rar
http://sh.jb51.net/jslib/formValidator3.1.rar
校验代码升级器
5、示例代码
6、特别说明
如果你在使用过程中碰到什么问题请给我留言，发现bug请不要自行修改，也请留言，达到完善插件的目的，真正服务每个程序开发人员 .
请保留插件的版权申明，谢谢
jquery之Document元素选择器篇
jquery 元素选择器使用方法技巧
1.从$开始
对于熟悉prototype的朋友，$符号应该很熟悉,
prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
$('#j1′).html()
2.通过xpath+css来获取你想要的…
1).
在这段例子中我们需要用到的HTML代码
警告!警告!警告!警告!
我是第一段
第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 姚麦身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因
jquery代码:
//获取div.contentToChange下p标记数组长度
alert($('div.contentToChange p').size())
//通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$('div.contentToChange p.firstParagraph').slideToggle('slow');
//找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$('div.contentToChange p:not(.alert)').append('这是新加的文字‘);
//找到所有为strong元素且css为addText的元素,然后删除
$('strong.addText').remove();
//找到P标记下css为secondParagraph的元素,然后渐隐
$('div.contentToChange p.secondParagraph').hide('slow');
//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$('div.contentToChange em').css({color:“#993300“,fontWeight:“bold“});
//添加css样式
$('div.contentToChange p.secondParagraph').addClass('new‘)
//删除css样式
$('div.contentToChange p.secondParagraph').removeClass('new‘);
2).
在这段例子中我们需要用到的HTML代码:
这个 段落 包括了一些css属性为”groof”的 文本, 它还具有一个 外部连接, 一些 $(代码), 和一个超连接属性是以 #打头的超连接.
- list item 1 with dummy link to silly.pdf
- list item 2 with class=”groof“
- list item 3 SURPRISE!
- list item 4 with silly link to silly.pdf silly.pdf
- 支持火箭,支持MM!
jquery代码
//获取第一个list item
$('#jqdt ol li:eq(0)')
//等价于
$('#jqdt').find('li:eq(0)') //以下同
//获取所有偶数行的list item
$('#jqdt ol li:even')
//获取索引小于3的list item
$('#jqdt ol li:lt(3)')
//获取所有li中css不为groof的list item
$('#jqdt ol li:not(.groof)')
//获取P标记下所有超连接属性值以'#'打头的元素
$('p a[@href*=#]')
//获取所有code元素和css为groof的li元素的集合
$('#jqdt code, li.groof')
//先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$('#jqdt ol .groof > strong')
//首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为'pdf'结尾的一级子节点
$('#jqdt ol li + li > a[@href$=pdf]')
//找到所有已隐藏的span元素
$('span:visible')
//找到超连接中包含火箭字样的元素
$('li a:contains(“火箭“)')
注：
$('#jqdt ol.groof > strong') 其中的>代表只访问下一级子节点中包含strong的元素，
如果改为 $('#jqdt ol.groof strong') 则访问所有下级子节点中的strong元素，包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0) 选择索引等于0也就是第一个元素
:gt(4) 选择所有索引大于4的元素
:lt(4) 选择所有索引小于4的元素
:first 等价于 :eq(0)
:last 选择最后一个元素
:parent 选择所有含有子节点的元素 (including text).
:contains('test') 选择含有指定文本的元素
:visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)
:hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)
例：
$('p:first').css('fontWeight','bold')
$('div:hidden').show();
$(“div:contains('test')“).hide();
$('input[@name=bar]').val() //获取名字为bar的input表单的值
$('select[@name=slt]').val() //获取名为slt的下拉菜单的选择中值
$('input[@type=radio][@checked]') //获取所有被选中的radio表单
表单选择器
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type=”text”).
:password Selects all password fields (type=”password”).
:radio Selects all radio fields (type=”radio”).
:checkbox Selects all checkbox fields (type=”checkbox”).
:submit Selects all submit buttons (type=”submit”).
:image Selects all form images (type=”image”).
:reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).
例：
$('myForm:input')
$('input:radio',myForm)
//:radio等价于[@type=radio]
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选
jQuery的表格悬停变色 恢复,表格点击变色/恢复,点击行选Checkbox
版本: 1.0
// 日期: 2007/08/01
// 备注: 需要jQuery库
// 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables)
function Kin_Tables(
Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数
Kin_Table_Header_Offset, //从前起忽略多少行 可选参数
Kin_Table_Footer_Offset, //从后起忽略多少行 可选参数
Kin_Table_Odd_Style, //奇数行样式 可选参数
Kin_Table_Even_Style, //偶数行样式 可选参数
Kin_Table_Hover_Style, //鼠标悬停样式 可选参数
Kin_Table_Click_Style //鼠标点击样式 可选参数
){
$(function(){
var Kin_Table_Config = [];
Kin_Table_Config.GetTableMethod=(Kin_Table_GetTableMethod?Kin_Table_GetTableMethod:".Kin_Table");
Kin_Table_Config.Header_Offset=(!isNaN(Kin_Table_Header_Offset)?Kin_Table_Header_Offset:0);
Kin_Table_Config.Footer_Offset=(!isNaN(Kin_Table_Footer_Offset)?Kin_Table_Footer_Offset:0);
Kin_Table_Config.Odd_Style=(Kin_Table_Odd_Style?Kin_Table_Odd_Style:"odd");
Kin_Table_Config.Even_Style=(Kin_Table_Even_Style?Kin_Table_Even_Style:"even");
Kin_Table_Config.Hover_Style=(Kin_Table_Hover_Style?Kin_Table_Hover_Style:"over");
Kin_Table_Config.Click_Style=(Kin_Table_Click_Style?Kin_Table_Click_Style:"clicked");
var Kin_Table = $(Kin_Table_Config.GetTableMethod+" tr:nth-child(n+"+eval(Kin_Table_Config.Header_Offset+1)+")");
Kin_Table.each(function(i,row){
if (i>=Kin_Table.length-Kin_Table_Config.Footer_Offset) return false;
var Kin_Table_Row_Checkbox = $(row).find(":checkbox");
bChecked = false;
$(row).addClass(i%2==0?Kin_Table_Config.Odd_Style:Kin_Table_Config.Even_Style)
$(row).hover(
function(){$(this).addClass(Kin_Table_Config.Hover_Style);},
function(){$(this).removeClass(Kin_Table_Config.Hover_Style);
});
$(row).click(function(){
$(this).toggleClass(Kin_Table_Config.Click_Style);
Kin_Table_Row_Checkbox.each(function(){
this.checked=$(row).hasClass(Kin_Table_Config.Click_Style);
});
});
Kin_Table_Row_Checkbox.each(function(){
if(this.checked){
bChecked = true;
return false;
}
});
if (bChecked) {
$(row).addClass(Kin_Table_Config.Click_Style);
Kin_Table_Row_Checkbox.each(function(){
this.checked = true;
});
}else{
$(row).removeClass(Kin_Table_Config.Click_Style);
}
});
});
}
javascript jQuery $.post $.ajax用法
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
Ajax.aspx：
Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");jQuery 代码：
$.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this alert(data.result); }, "json");点击提交：
这里设置了请求的格式为"json"：
$.ajax()这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。
$.ajax({url: 'stat.php',
type: 'POST',
data:{Name:"keyun"},
dataType: 'html',
timeout: 1000,
error: function(){alert('Error loading PHP document');},
success: function(result){alert(result);}
});
jQuery基础教程笔记适合js新手第1/2页
看完jquery基础教程做的笔记，笔记并不适合所有人，觉得好，可以看，觉得不好，可以不看。
1, ：eq()和nth-child()
看下面代码：
2，:odd 和 :even
:odd : 奇数行
:even : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq() 选择器一样， 下标都是从 0开始的，
也就是 表格的第一行 编号是 0 （偶数）；
第二行 编号是 1 （奇数）；以此类推。。。
3, $("tr:odd").addClass()
可以写成 $("tr").filter(":odd").addClass()
4，$('td:contains("cssrain")') //取得 包含 字符串 cssrain 的所有td
5，jquery 转 dom ：
$("td").get(0).tagName 或 $("td")[0].tagName
6，load():
jquery中的load（）有2层意思，
第一层 意思 可以等价于 dom中 window.onload
第二层 意思 可以load（url ）。
7：ready简写：
1;
$(document).ready(function(){
//do something
})
2;
$().ready(function(){
//do something
})
3;
$(function(){
//do something
})
8，事件冒泡：
正常的来说：点击B 会触发a的click。
如果我们不想触发A，可以用stopPropagation() 阻止冒泡.
具体例子：
aaaaaa
9, hide()show()会记住上一次的dipslay状态
10, hide() show()加时间参数
11，效果：
show(), hide()会同时修改多个样式属性 : 高度，宽度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo() : 不透明度
slideDown() , slideUp() :高度
如果都不能满意，只能用animate（）了
animate()提供了更为强大的，复杂的效果。
12，animate() :
之前 .show('slow'); // slow代表的是0.6秒内同时改变高度，宽度和透明度 。 如果用时间表示是 600 ；=== .show(600);
那么我们再来看看 animate()
animate({heigth : 'slow' ,width : 'slow' } , 'slow' )
这里之所以可以 height : 'slow' 其实就跟 .show('slow') 类似，当然他前面规定了height 。。
13,做动画之前 先确定位置。
14，width()和css('width')
15：animate()做动画效果时，动画执行的顺序。
//发生上面是按照顺序来执行的。先改变left，然后再改变top
对比:
//发生上面是一起执行的，也就是 left和top 一起改变。
区别知道了吧。
16,同理，我们再看一个例子：
//当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。
对比：css()
解决：
总结：
当在animate 中以多个属性的方式应用时， 效果是同时发生的。
当以 连续方式 应用时， 是按顺序来的。
非效果方法，比如.css()方式不是按照顺序来的，解决方法是 放在回调函数里。
17, 做一个实例 ： 段落
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Demo
段落1段落1段落1段落1
段落2段落2段落2段落2
段落3段落3段落3段落3
段落4段落4段落4段落4
段落5段落5段落5段落5
段落6段落6段落6段落6
段落7段落7段落7段落7
改进：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Demo
段落1段落1段落1段落1
段落2段落2段落2段落2
段落3段落3段落3段落3
段落4段落4段落4段落4
段落5段落5段落5段落5
段落6段落6段落6段落6
段落7段落7段落7段落7
18，包装元素 : wrap():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
段落1段落1段落1段落1
段落2段落2段落2段落2
19, 关于clone：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
段落1段落1段落1段落1
20, DOM操作总结：
创建节点：
直接 $("
cssrain
")复制节点:
.clone()
插入节点：
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
删除节点：
.remove()
清空节点:
.empty()
包装节点：
.wrap()
设置属性
.attr()
删除属性
.removeAttr()
基本跟javascript中的DOM操作一样，clone()稍微不一样，前面例子说过区别了。。
前6章的笔记，差不多就这些了。
豆瓣网的jquery代码实例
豆瓣网的jquery实例代码，效果不错，方便大家学习
在文档加载完毕后将执行的方法(参见jquery文档)
一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.
比如 通过Ajax方法取回来的内容里面还含有动作按钮的，这时需要针对这部分功能执行绑定.
//需要手动调用 load_event_monitor(element); 方法.
$(function() {
load_event_monitor(document);
});
//注意这里的o对象是一个html 元素而非是一个jquery对象，所以在调用它的方法时应该使用$(o)函数
//把它转化为jquery对象.
Bowtech.init_forder = function(o) {
var eid = $(o).attr(“id“).split(“-“)[1];
var fo = $(“#f-“+eid);
var unfo = $(“#unf-“+eid);
fo.click(function() {
$(o).hide();
unfo.show();
fo.hide();
});
unfo.click(function() {
$(o).show();
fo.show();
unfo.hide();
});
}
jQuery.fn.extend({
set_caret: function(){
if(!$.browser.msie) return;
var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()};
this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
},
insert_caret:function(textFeildValue){
var textObj = this[0];
if(document.all && textObj.createTextRange && textObj.caretPos){
var caretPos=textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == ” ? textFeildValue+” : textFeildValue;
} else if(textObj.setSelectionRange){
var rangeStart=textObj.selectionStart;
var rangeEnd=textObj.selectionEnd;
var tempStr1=textObj.value.substring(0,rangeStart);
var tempStr2=textObj.value.substring(rangeEnd);
textObj.value=tempStr1+textFeildValue+tempStr2;
textObj.focus();
var len=textFeildValue.length;
textObj.setSelectionRange(rangeStart+len,rangeStart+len);
textObj.blur();
} else {
textObj.value+=textFeildValue;
}
}
})
前台要用就比较简单了, 只需要这样写:
这里可以放标题
这里是一些主要的内容
- Hello world
-
hahaha
这个实验在沙加的神舟本上完成
强烈推荐240多个jQuery插件提供下载
jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，特推荐如下。
文件上传(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.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
时间、日期和颜色选取(Time, Date and Color Picker)
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
投票插件(Rating Plugins)
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
搜索插件(Search Plugins)
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.
编辑器(Inline Edit & Editors)
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable - edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin - Another In-Place Editor.
TableEditor.
tEditable - in place table editing for jQuery.
多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)
jMedia - accessible multi-media embedding.
JBEdit - Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
图片(Photos/Images/Galleries)
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery - jqGalViewII.
jQuery - jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs - easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi - Zoomable Thumbnails.
jQuery Crop - crop any image on the fly.
Image Reflection.
Google地图（Google Map）
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps - by Tane Piper.
游戏(Games)
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
表格等(Tables, Grids etc.)
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter - awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable - in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
统计图(Charts, Presentation etc.)
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
边框、圆角、背景(Border, Corners, Background)
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
文字和超链接(Text and Links)
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad - a text gradient plugin.
LinkLook - a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
鼠标提示（Tooltips）
jQuery Plugin - Tooltip.
jTip - The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
菜单和导航(Menus, Navigations)
jQuery Tabs Plugin - awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu - Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
http://stilbuero.de/jquery/tabs_3/
幻灯、翻转等(Accordions, Slide and Toggle stuff)
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion - a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo - Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
accessible_news_slider/">Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
拖放插件(Drag and Drop)
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR - drag, drop resize.
Drag Demos.
XML XSL JSON Feeds
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier - Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite - multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
浏览器(Browserstuff)
Wresize - IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber - removes the dotted line onfocus from links.
jQuery Perciformes - the entire suckerfish familly under one roof.
Background Iframe.
QinIE - for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.
对话框、确认窗口(Alert, Prompt, Confirm Windows)
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.
CSS
jQuery Style Switcher.
JSS - Javascript StyleSheets.
jQuery Rule - creation/manipulation of CSS Rules.
jPrintArea.
DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata - extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat - periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it - display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy - awesome plugin.
Effect Delay Trick.
jQuick - a quick tag creator for jQuery.
Metaobjects.
elementReady.
JQuery实现自定义对话框的代码
JavaScript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。
为了得到更丰富的自定义对话框功能，于是用JQuery编写了一个对话框插件；只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。
插件功能特点:
允许通过CSS进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
引用JQuery和对话框插件文件：
定义相关按钮为行：
定义相关对话框显示的内容:
[复制此代码]CODE:
/* JQuery 模式对话框插件
* writer: FanJianHan (henryfan@msn.com)
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化过对话框
var MessageOninit = false;
//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//对话框对象，对话框宽度，对话框高度
var MessageBox_win,MessageBox_width,MessageBox_height;
//对话框是否处于移动状态
var MessageBox_Moving = false;
//显示模式提示框
function ShowMessageBox(option)
{
var container,iframe,enabled,enabledframe;
var height=400;
var width =400;
MessageBox_scrolltop =0;
MessageBox_scrollleft =0;
if(!MessageOninit)
{
CreateContainer(option);
MessageOninit = true;
$('#messagebox_close').click(function(){
CloseMessageBox();
});
$(window).resize(function(){
SetStyle(option);
SetEnabledStyle();
});
$(window).scroll(function(e){
MessageBox_scrolltop =document.documentElement.scrollTop;
MessageBox_scrollleft = document.documentElement.scrollLeft;
SetEnabledStyle();
});
MessageBox_win = $(”#messagebox_win”);
$('#messagebox_title').mousedown(handleMouseDown);
$('#messagebox_title').mouseup(handleMouseUp);
$('#messagebox_title').mousemove(handleMouseMove);
document.onmouseup = handleMouseUp;
}
if(option.height)
height = parseInt(option.height);
if(option.width)
width = parseInt(option.width);
MessageBox_height = height;
MessageBox_width = width;
Messagebox_AC = $('#'+option.control);
MessageBox_PC = Messagebox_AC.parent();
Messagebox_AC.css('display',”);
enabled='
enabledframe='';
$('#messagebox_enabledframe').remove()_
$('#messagebox_enabled').remove();
$('#messagebox_title').html(option.title);
$('#messagebox_from').append(Messagebox_AC);
SetStyle(option);
$(document.body).append(enabledframe);
$(document.body).append(enabled);
SetEnabledStyle();
$('#messagebox_win').fadeIn(”slow”);
//创建对话框容器
function CreateContainer(option)
{
var html;
html='
if(option.parent)
{
$('#' + option.parent).append(html);
}
else
{
$(document.body).append(html);
}
}
//设置显示时背景式样
function SetEnabledStyle()
{
var de,w,h,css,region;
region = GetDocumentRegion();
css ={width:region.width+”px”,height:region.height+”px”,
left: MessageBox_scrollleft+'px',top: MessageBox_scrolltop +'px'}
GetOpacity(css);
$(”#messagebox_enabled”).css(css);
$(”#messagebox_enabledframe”).css(css);
}
//设置透明式样
function GetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter= ‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
}
else
{
css.opacity= ‘0.3′;
}
}
//设置对话框试样
function SetStyle(option)
{
var region,css;
region = GetDocumentRegion();
css ={width:MessageBox_width+'px',height:MessageBox_height+'px',
left: ((region.width - MessageBox_width)/2)+'px',top: ((region.height - MessageBox_height)/2)+'px'}
if(region.height < MessageBox_height )//如果body显示的高度小于对话框高度
{
css.top=10+'px';
}
else
{
css.top=((region.height - MessageBox_height)/2)+'px'
}
$('#messagebox_win').css(css);
css.top='0px';
css.left='0px';
$('#messagebox_table').css(css);
css.width='100%';
css.height='16px';
$('#messagebox_title_td').css(css);
css.height= height-46 +'px';
$('#messagebox_body_td').css(css);
}
var down_x,down_y,cx,cy;
function handleMouseDown(e)
{
var evt = e || event;
down_x=evt.clientX;
down_y = evt.clientY;
cx =(parseInt(MessageBox_win.css('left'))|0);
cy = (parseInt(MessageBox_win.css('top'))|0)
MessageBox_Moving= true;³
document.documentElement.onselectstart = function(){return false};
document.documentElement.ondrag = function(){return false};
document.onmousemove = handleMouseMove;
$(document.body).append('');
$('#messagebox_move').css('width',MessageBox_win.css('width'));
$('#messagebox_move').css('height',MessageBox_win_u99 ?ss('height'));
$('#messagebox_move').css('left',MessageBox_win.css('left'));
$('#messagebox_move').css('top',MessageBox_win.css('top'));
}
function GetDocumentRegion()
{
var w,h,de;
de = document.documentElement;
w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;
return {height:h,width:w};
}
function handleMouseMove(e)
{
var left,top,region;
if (MessageBox_Moving)
{
var evt = e || event;
left =evt.clientX+cx-down_x;
top = evt.clientY+cy-down_y;
region = GetDocumentRegion();
if(left+ MessageBox_width > region.width)
{
left = region.width - 10- MessageBox_width;
}
if(top + MessageBox_height >region.height)³
{
top = region.height-10 - MessageBox_height;
}
if(left <10)
left =10;
if(top <10)
top =10;
var css ={left:left+'px',top:top+'px'}
$('#messagebox_move').css(css);
}
}
function handleMouseUp()
{
if(MessageBox_Moving)
{
MessageBox_win.css('width',$('#messagebox_move').css(”width”));
MessageBox_win.css('height',$('#messagebox_move').css(”height”));
MessageBox_win.css('left',$('#messagebox_move').css(”left”));
MessageBox_win.css('top',$('#messagebox_move').css(”top”));
}
MessageBox_Moving _u61 ? false;
document.onmousemove = null;
$('#messagebox_move').remove();
}
}
//关闭模式对话框
function CloseMessageBox()
{
if(MessageOninit)
{
$('#messagebox_win').hide();
$('#messagebox_enabled').remove();
$('#messagebox_enabledframe').remove();
Messagebox_AC.css('display','none');
MessageBox_PC.append(Messagebox_AC);
}
document.documentElement.onselectstart = null;
document.documentElement.ondrag = null;
}
$(document).ready(function(){
$(document).find('[@showoption]‘).each(function(){
var namevalue;
//虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id
var option={control:”,width:'400′,height:'400′,title:”,parent:null};
var properties = $(this).attr('showoption').split(';');
for(i=0;i
namevalue = properties[i].split(':');
if(namevalue.length >1)
{
execute =”option.” + namevalue[0] +'=\”+ namevalue[1]+'\';';
eval(execute);
}
}
$(this).click(function(){
ShowMessageBox(option);
document.body.focus();
});
});
});
messageboxscript.rar
jQuery实用技巧第1/2页
使用jquery最重要的就是熟悉它的属性，方法等，下面总结的真不错，经常用的都总结出来了
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(”msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(”#msg”).html();
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。有如下两种方法：
$(”div”).eq(2).html(); //调用jquery对象的方法
$(”div”).get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$(”#msg”).html(); //返回id为msg的元素节点的html内容。
$(”#msg”).html(”new content“);
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$(”#msg”).text(); //返回id为msg的元素节点的文本内容。
$(”#msg”).text(”new content“);
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
$(”#msg”).height(); //返回id为msg的元素的高度
$(”#msg”).height(”300″); //将id为msg的元素的高度设为300
$(”#msg”).width(); //返回id为msg的元素的宽度
$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300
$(”input”).val(”); //返回表单输入框的value值
$(”input”).val(”test”); //将表单输入框的value值设为test
$(”#msg”).click(); //触发id为msg的元素的单击事件
$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$(”p”).each(function(i){this.style.color=['#f00′,'#0f0′,'#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$(”p”).click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$(”p”).click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00′,'#0f0′,'#00f'][ i ]});
8、操作元素的样式
主要包括以下几种方式：
$(”#msg”).css(”background”); //返回元素的背景颜色
$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(”#msg”).addClass(”select”); //为元素增加名称为select的class
$(”#msg”).removeClass(”select”); //删除元素名称为select的class
$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件
$(”p”).click(function(i){this.style.color=['#f00′,'#0f0′,'#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(”Load Success”)})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$(”p”).trigger(”click”); //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件
$(”p”).unbind(); //删除所有p元素上的所有事件
$(”p”).unbind(”click”) //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i
alert(”Item #”+i+”: “+tempArr[ i ]);
}
也可以处理json数据，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(” hello, how are you? “); //返回”hello,how are you? “
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery(”div p”).hide();
// 使用其他库的 $()
$(”content”).style.display = ‘none';
使用jquery给input和textarea设定ie中的focus
在浏览网站的过程中，我们经常可以看见当鼠标点击后样式改变的文本框和文本域,那么这种效果是如何实现的呢?
今天在做我们的表单提交部分的时候,遇到了这个问题,于是,用传说中的jquery就可以解决了.
这里主要说的是在IE下的focus的问题,因为在firefox中是支持
input:focus
textarea:focus
在IE下:focus是无效的,所以，我们要在点击以后给input和textarea加上新的样式以配合实现:focus效果.
我们首先来看下效果:
来看下这个效果中的JS: 
CSS这里这样定义:
input,textarea{border: 1px solid #CCC;}
input:focus,textarea:focus{background:#FFFFF7;}
这是jquery的一个很简单的应用,我也是初学,多多交流...
Javascript jquery css 写的简单进度条控件
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。
通过我们伟大的 CSS，可以实现非常漂亮的进度条样式。加上 Javascript 的效果，就可以完全“欺骗”我们的用户，让他们有耐心等待浏览器处理完成。上述的原理已经知道了，那么就可以直接看代码了。本人使用的还是 jQuery 框架，因为这样简短的代码可能会更容易理解。
当然这个控件还有很多需要完成的地方，我仅仅是提供了一种遵循 Web 标准的实现思路。废话不多说.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Javascript 进度条 Demo
原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），详细信息可以参见链接：
用jQuery实现检测浏览器及版本的脚本代码
如何用 Javascript 检测浏览器似乎是老生常谈的问题。根据本人的经验，使用 Javascript 检测浏览器无非使用两大类的方法。
其一，是使用使用浏览器的功能属性。比如检测浏览器是否支持 getElementById 方法就可以使用
if (document.getElementById) {
// the method exists, so use it here
} else {
// do something else
}
虽然这样的检测无法得知用户具体使用哪一种浏览器，不过开发者根据浏览器的功能判断是否兼容自己的代码是经得起考验的。如果关注浏览器的实际功能而不在乎它的实际身份，就可以使用这种方法。
其二，就是使用传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。虽然从技术角度上说，用户可以更改自己的 user-agent，但是使用它的确能获得一些有用的信息。
话说到此可能有些偏题。使用过 jQuery 的朋友都知道，使用 jQuery 本身的 brower 方法就可以准确的判断用户在使用那种浏览器甚至是版本。好的开发库使用者都想了解其中的一些其实现机制，那么，jQuery 是如何做到这些的？
查看 jQuery 最新的源代码（版本 1.2.2），在第 1195 行至 1205 行，是它的判断浏览器的函数。正如你所看见的，jQuery 使用的是上述第二种方法，即使用 user-agent 判断用户的浏览器和版本。
坦白说，起先我对短短的五行代码就可以判断浏览器的种类和版本感到非常的惊奇。在《Javascript 高级程序设计》一书中，作者甚至使用单独的章节描述的如何使用 Javascript 判断浏览器和操作系统。但通过阅读其代码（其实并不难），我顿时有中恍然大悟的感觉。废话不多说，贴上代码。
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test(userAgent)&&!/(compatible|webkit)/.test(userAgent)
};
说到这里，其实有经验的 Javascript 开发人员已经知道了其中的奥秘。是的，jQuery 使用的是正则判断浏览器的种类和版本。做得相当的漂亮！
首先它将 user-agent 统一成小写，然后使用正则逐步的匹配是哪种浏览器。有关正则方面相关的信息，可以参考这里。不过，有人肯定会怀疑这样的判断是否正确。那么我们先来看下下面四个主流浏览器的 user-agent：
Safari(Windows edition)
... AppleWebKit/523.12.9 (KHTML, like Gecko) Version/3.0 Safari/523.12.9
Opera(Opera 9.2 on Windows XP)
Opera/9.24 (Windows NT 5.1; U; zh-cn)
Mozilla(Firefox 2.0.11 on Windows XP)
... Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Internet Explorer (7.0 on Windows XP)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
jQuery 非常巧妙的使用各浏览器各自不同的 user-agent 特性作为判断。比如 Safari 中 “/webkit/” 是专有的、“/opera/” 也是只有 Opera 浏览器特有等等。这种验证方法可以在目前主流的浏览器上面，基本都可以准确判断。
就在这里打住了，jQuery 的确是非常优秀的 Javascript 开发框架之一。掌握它的确可以为自己的开发添加不少的乐趣。我会陆续将自己阅读 jQuery 框架的心得逐一的发上来，请大家关注。
jquery 插件 人性化的消息显示
本插件基于JQ,在IE6,7,FF1.5和Opera9下测试通过
特点:
1.兼容性非常好
2.可以覆盖select
3.使用非常的方便,你如果要在里面显示一些html,以前的做法是把html拼接为一个string(js),可现在你可以可视化的编辑它了
4.涵盖了基本上很常用的功能
5.做的仓促,有问题欢迎提出来
列举一些简单的使用:
$('#msg').showMsg({autoMiddle:true})
//居中显示ID为msg的元素，而且过2秒后自动消失
$('#msg').showMsg({autoMiddle:true,time:5000})
//居中显示ID为msg的元素，而且过5秒后自动消失
$('#msg').showMsg({msg:'哈哈，好了',left:0,top:0,time:5000,callback:_alert})
//左上角的地方显示ID为msg的元素，而且过5秒后自动消失,消失后触发回调函数
$("#domMessage").showMsg({autoMiddle:true,coverBody:true,autoClose:false,left:200,top:300});
//居中显示ID为domMessage的元素，覆盖屏幕（不自动关闭）
有关的参数说明如下图:
在线演示http://img.jb51.net/online/jq_msg/index.html
js jquery做的图片连续滚动代码
核心代码如下，大家可以参考
[复制此代码]CODE:
可以显示单图片，多图片ajax请求的ThickBox3.1类下载