jQuery自适应容器焦点图，兼容移动端

　　jQuery自适应容器焦点图，兼容移动端浏览器，支持移动端的touch触碰事件滑动切换图片。效果如下　　兼容移动端的焦点图，只要放到指定的容器中，焦点图会自动水平填满容器宽度，移动端显示只需要控制指定容器的宽度，不需要关心焦点图显示，会自动填满此容器宽度，高度等比计算得出，图片不会变形。　　jQuery自适应容器焦点图，兼容移动端浏览器源代码和使用说明如下PC端浏览器可以更改窗体大小查看自适应效果，移动端开启自动转屏，然后切换屏幕横竖方向测试。!doctype htmlmeta name=viewport content=width=device-width,initial-scale=1
http://www.w3dev.cn/article/20160308/jQuery-self-adaption-image-slider-mobile-friendly.aspx

jquery水平方向平铺焦点图

　　jquery实现的水平方向平铺占满显示视窗效果。当视窗大小改变时，自动变换焦点图显示的区域。目前焦点图支持2个方向的滚动，水平和垂直滚动。　　jquery水平方向平铺焦点图插件测试代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlejquery水平方向平铺焦点图插件/titlescript type=text/javascript src=http://ajax.aspnetcdn.com/aj
http://www.w3dev.cn/article/20141127/jquery-horizontal-photo-gallery.aspx

jquery焦点图代码，幻灯过渡特效，仿IE特效滤镜

　　一款居于jquery框架的焦点图插件，有幻灯片过渡效果，模拟IE滤镜，完全兼容firefox，chrome浏览器，不需要使用IE下的滤镜。原理依据spw/sph的配置，在容器上生成spw*sph个块（宽和高依据容器计算得出），这些块的背景设置为下一张要显示的图片，依靠background-position控制每个块显示下一张图片的某个区域，让这些块组合起来显示为下一张图片，然后设置这些块的透明度，按照随机到的效果控制这些块的显示。　　jquery焦点图配置如下 $.fn.coinslider.defaults = { width: 565,//焦点图默认宽度
http://www.w3dev.cn/article/20140211/jquery-images-gallery-Filter-Slide-Transition.aspx

jquery焦点图

　　jquery焦点图展示，效果如下源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlheadstyle.mt_right{ height: 280px; width: 634px; float: left;}.mtr_left{ height: 280px; width: 116px; margin-right: 5px; float: left;
http://www.w3dev.cn/download/20130409/jquery-focus-images.aspx

jquery切换焦点图

　　jquery切换焦点图，可以配置显示样式，是否显示简介等功能，具体看示例中的ｊｓ代码注释，效果如下，带简介和未带简介的不带简介增加简介显示　　源代码如下script type=text/javascript src=/js/jquery.js/scriptscript type=text/javascript $.Imgs = function (cfg) { //默认配置 var defaultConfig = { imgWidth: 275, //图片宽 imgHeight: 215, //图片高
http://www.w3dev.cn/download/20130409/jquery-focus-images-I.aspx

ASP.NET MVC客户端jQuery验证

在本篇中不可能展开进行系统地介绍。Unobtrusive JavaScript在jQuery的验证中得到了很好的体现，接下来我们就简单地介绍一下使用jQuery进行验证的编程方式。二、以内联的方式指定验证规则　　jQuery的验证实际上是对存在于表单的输入元素进行验证，它支持一种内联（Inline）的编程方式是我们可以直接将验证的规则直接编写在被验 证输入HTML元素的class（表示CSS类型）属性中。考虑到有一些读者对jQuery的验证框架可能不太熟悉，为此我们来做一个简单的实例验证。　　虽然演示jQuery验证使用一个单纯的HTML文件就可以了，但是在这里我们还是通过Visual St
http://www.w3dev.cn/article/20120622/ASP.NET-MVC-client-jQuery-validate.aspx

javascript水平方向手风琴焦点图

　　javascript水平方向手风琴焦点图，效果如下源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadtitlejavascript水平方向手风琴焦点图/titlemeta http-equiv=Content-Type content=text/html; charset=utf-8 /script type=text
http://www.w3dev.cn/article/20130808/javascript-horizontal-accordion.aspx

模仿淘宝，拍拍图片效果

me：自动滚动间隔,毫秒为单为,默认值3000 defindex：第一次显示焦点图的索引号,默认0 smallbtn：一个(元素)数组:[btn1,btn2,btn3],用来切换不同的页 cls：(string或function),如果是string,鼠标经过smallbtn中按钮时,会将该字符串做为样式名附加在(鼠标经过的)按钮上.如果是一个function,鼠标经过smallbtn中按钮时,会触发该函数.并且传入两个整型参数(lstIndex,curIndex),提供外围扩展. start：一个事件,当开始切换焦点时触发.有两个参数(lstIndex,curIndex) stop：一个事件
http://www.w3dev.cn/download/20120913/taobao-paipai-image-gallery.aspx

隐藏amcharts漏洞图中指定图形

　　隐藏amcharts漏洞图中指定图形　　下面示例通过查找漏斗图中图形对应文字的文字容器，然后通过文字容器定位图像执行隐藏，文字容器的前一个节点为图形。　　源代码如下，直接测试官网示例，https://www.amcharts.com/demos/3d-funnel-chart/，控制台输入下面的代码，效果如下function hideSVGByText(text) { var tspan = document.querySelectorAll('tspan'); for (var i = 0; i tspan.length; i++) if (tspan[i].in
http://www.w3dev.cn/article/20170811/hide-amcharts-3d-funnel-chart-special-piece.aspx

jquery模拟marquee滚动

　　jquery模拟marquee滚动效果，可以设置滚动完毕后间隔多少秒再重新滚动。如果是只需要兼容IE浏览器，marquee有个onfinish事件（需要指定loop或者behavior为behavior=slide才会触发onfinish事件），可以使用此事件结合setTimeout重启marquee。测试firefox不支持marquee的stop和start方法，所以要兼容firefox使用js控制效果最佳。　　jquery模拟marquee滚动源代码如下script type=text/javascript src=https://cdn.bootcss.com/jquery/1.7
http://www.w3dev.cn/article/20170614/jquery-marquee.aspx

文字查询焦点效果

　　文字查询效果，js自动设置查询条件焦点样式，如下图所示　　文字查询效果，js自动设置查询条件焦点样式源代码如下，需要导入jquery框架style a{text-decoration:none} a.cur{background:#00afc7;color:#fff;font-weight:bold;}/stylediv id=dvFilter!--查询条件，容器div增加rel属性存储次条件的查询键名称，连接只需要生成此查询的键名称和值即可，其他已选参数js代码会自动加上-- div rel=city 出发城市：a href= class=cur全部/a
http://www.w3dev.cn/article/20170504/word-select-search-focus.aspx

jquery控制表格跨列单元格显示隐藏

rel=stylesheet href=http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css script src=http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js/script script src=http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js/script script type=text/javascript
http://www.w3dev.cn/article/20170206/jquery-control-table-td-hide-show.aspx

jquery全年日期选择器日历插件

td.empty{text-decoration:none;cursor:default} .fullYearPicker br{clear:both}/stylescript type=text/javascript src=http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js/scriptdiv id=div1/divinput type=button value=获取日历当前选中值 /input type=button value=更新日历值 /input type=button value=设置为指定年份 /input type=b
http://www.w3dev.cn/article/20160826/jquery-fullYearPicker.aspx

jquery ui draggable限制拖动区域

;top: 0;width: 125px;height: 125px;background: #999;color: #fff;padding: 10px;}/stylescript src=http://code.jquery.com/jquery-1.10.2.js/scriptscript src=http://code.jquery.com/ui/1.11.4/jquery-ui.js/script/headbodydiv class=NotAllowDrop不允许拖放到此内容块上/divdiv class=NotAllowDrop style=top:200px;left:150px
http://www.w3dev.cn/article/20160818/jquery-ui-draggable-drag-range-control.aspx

多文件选择上传jquery插件

件选择上传jquery插件ＤＥＭＯscript type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js/scriptscript src=/demo/multiFiles/jquery.multiFiles.js/scriptdiv name=upfile ext=jpg,png,doc,docx max=30/divscript $('div[ext]').multiFiles()/script　　点击这里下载多文件选择上传jquery插件jquery.mult
http://www.w3dev.cn/article/20160608/jquery-multiple-file-select-upload-plugin.aspx

jQuery.tablesorter 2.0中文排序解决办法

　　jQuery.tablesorter 2.0中文排序解决办法，jQuery.tablesorter 2.0中文排序使用的sortText方法，使用js操作符号进行对比，操作符号对中文无效，导致排序出问题。需要更改为localeCompare。jQuery.tablesorter 2.0新增了textSorter配置，改写内部的文字排序，可以增加此配置而不需要更改jQuery.tablesorter 2.0源代码。jQuery.tablesorter未配置textSorter配置，使用jQuery.tablesorter默认方法中文排序错误jQuery.tablesorter配置textSo
http://www.w3dev.cn/article/20160424/jQuery.tablesorter-2.0-chinese-sort.aspx

jQuery点赞+1放大效果

align:center;button class=btn点击+1/button/p p style=text-align:center;button class=btn点击+1/button/p script src=http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js/script script ; (function ($) { $.extend({ tipsBox: function (options) {
http://www.w3dev.cn/article/20160306/jquery-click-add-one-zoomout-effect.aspx

jQuery仿excel表格单元格合并插件

2017-8-3更新：修复已经执行过合并操作的table，单元格选择及合并不正确。　　jQuery表格单元格合并插件，将合并后的所有单元格内容到第一个单元格中，支持已经被合并的多单元格的选择合并，功能和excel单元格合并功能一样。　　jQuery防excel表格单元格合并插件源代码如下script type=text/javascript src=http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js/scripttable border=1 trtd colspan=20-0/tdtd0-1/tdtd0-2/tdtd0-3/tdt
http://www.w3dev.cn/article/20160304/jquery-table-td-merge-plugin.aspx

jquery.DataTables自定义过滤查询

　　jquery.DataTables自定义过滤查询需要使用到自定义Plug-ins功能，下载的压缩包里面也有相关示例。示例为Custom filtering - range search，搜索介于2个数字间的记录。　　下面示例为jquery.DataTables自定义过滤查询介于２个日期间的记录，示例居于DataTables-1.10.7\examples\plug-ins\range_filtering.html修改。script type=text/javascript /* 自定义过滤函数，判断日期是否时间是否处于2个日期之间 */ $.fn.dataTable.ext.
http://www.w3dev.cn/article/20160105/jquery.DataTables-Custom-filter-search.aspx

jquery标签云选择效果

　　居于jquery框架的标签云选择效果。!doctype htmltitlejquery多彩标签云选择效果/titlescript type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js/scriptstyle ul,li{list-style:none;padding:0px;margin:0px} ul.cloud{zoom:1;overflow:hidden;width:300px} ul.cloud li{-moz-border-radius:6px;-we
http://www.w3dev.cn/article/20150728/jquery-cloud-tag.aspx

jquery通讯录选择效果

　　jquery实现通讯录勾选效果。script type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js/scripttable trtd valign=top收件人：input type=text id=txt style=width:500px /input type=hidden id=txtIds name=ids /br / 主题：..../tdtd id=tdContact通讯录br /input type=checkbox class=all /全部b
http://www.w3dev.cn/article/20150725/jquery-contact-select.aspx

jquery仿淘宝规格颜色选择效果

2016-8-9：新增剩余数量。　　jquery实现的仿淘宝规格颜色选择效果源代码如下script type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scriptstyledd,dl{zoom:1;overflow:hidden}dt,li{float:left;list-style:none;margin-left:10px;line-height:50px}dt a,li a{display:block;text-align:center;border:solid 1px
http://www.w3dev.cn/article/20150409/jquery-taobao-color-size-selected.aspx

js控制移动浏览器输入框获取焦点隐藏不弹出系统软键盘

　　使用移动端浏览器看网页时，输入对象获取焦掉后会自动弹出系统的软键盘，导致页面显示区域变小，如何禁止输入对象input获取焦点后的系统软键盘。　　js控制移动浏览器输入框获取焦点隐藏不弹出系统软键盘源代码如下input type=text id=phone-number onfocus=blur(); /　　意思就是获取焦点后马上取消焦点，这样软键盘就会自动隐藏了。下面是老外的说明Since the soft keyboard is part of the OS, more often than not, you won't be able to hide it - also, o
http://www.w3dev.cn/article/20150403/mobile-browser-input-focus-hide-soft-keyboard.aspx

jQuery软键盘插件

--密码：input type=text class=softkb /script src=http://libs.baidu.com/jquery/1.4.2/jquery.min.js/scriptscript window.onload = function () {//通过本网站运行功能运行示例时，IE下如果不放入window.onload事件中会找不到script导入的js，实际应用不需要。 /* * jQuery soft keyboard plugin * @requires jQuery1.4+ * @author
http://www.w3dev.cn/article/20150319/jQuery-soft-keyboard-plugin.aspx

全屏内容切换插件jQuery.fullPage.js

et href=css/jquery.fullPage.cssscript src=js/jquery.min.js/script!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --script src=js/jquery.easings.min.js/script!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --script src=js/jquery.slimscroll.
http://www.w3dev.cn/article/20150311/jQuery.fullPage.js.aspx

DOM对象旋转插件jquery.rotate.js

　　jQuery 插件jquery.rotate.js，可以实现DOM对象旋转效果。jquery.rotate.js支持所有主流浏览器，包括 IE6。如果你想在低版本的 IE 中实现旋转效果，那么jquery.rotate.js是一个很好的选择。jquery.rotate.js参数参数类型说明默认值angle数字旋转一个角度0animateTo数字从当前的角度旋转到多少度0step函数每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数无easing函数自定义旋转速度、旋转效果，需要使用 jQuery.easing.js无duration整数旋转持续时间，以毫秒为单位callback
http://www.w3dev.cn/article/20150311/jquery.rotate.js.aspx

瀑布流waterfall jquery插件动态读取数据示例

mn(); render($cells, false); //重排已有元素时强制不渐显 } })(jQuery);/scriptscript var totalpage = %#totalpage %;//服务器端计算出的总页数 function getResource(index, render) {//getResource参数，第一个为加载次数，第二个是绘制瀑布流回调函数，此函数参数为jQuery包装过的砖块元素 if (index + 1 totalpage || opt.loading) return false;
http://www.w3dev.cn/article/20150112/jquery-waterfall-asp.net-read-data-demo.aspx

jquery模拟android slidingmenu效果

　　jquery模拟android slidingmenu组件效果源代码如下，采用了CSS3动画，IE浏览器需要升级到IE9+以上。!doctype htmlscript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scripttitlejquery模拟android slidingmenu组件效果/titlestylehtml,body{margin:0px;padding:0px;height:100%;width:100%;overflow:hidden;}.abs{position:absolute;bac
http://www.w3dev.cn/article/20141201/jquery-android-slidingmenu.aspx

如何检查jQuery选出的对象是否还在DOM中

　　如何检查jquery选出的对象是否还在dom树中，而不是从DOM树中删除掉。script type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scriptpDOM1/ppDOM2/pscript var $cache1 = $(p); //jQuery选出所有p对象 $(p:eq(0)).remove(); //jQuery移除第一个p对象 alert($cache1.size())//输出2，而不是1 //由于$cache1只是选出对象的一个副本，上面
http://www.w3dev.cn/article/20141118/how-to-check-jquery-object-is-in-dom.aspx

jQuery Easy Accordion插件，兼容IE11

ts/jquery.easyAccordion.js/script script type=text/javascript src=scripts/utility.js/script　　jquery.easyAccordion.js也做了IE部分判断修改//fixed IE8-，第一部分if (jQuery.browser.msie jQuery.browser.version 9) { dtWidth = $(this).find('dt').outerWidth(); }//第二部分if (jQuery.browser.safari || (jQuery.br
http://www.w3dev.cn/download/20141112/jQuery-Easy-Accordion-plugin.aspx