做表单涉及到地址地区时，经常需要做地区联动，比如省市二级联动、省市县三级联动以及更深层次的省市县镇街道联运等，下面的代码是最常用到的省市二级联动，附带了完整的json数据，其实做地区联动不难，麻烦的是弄对应的地区数据。 引入省市数据文件 把json数据保存为area.js文件后，引入文件（json数据太长，放在文章末尾了，请在文章末复制） <script src="area.js"></script> HTML代码： <form> <select name="province" onchange...

$.browser 属性用于返回用户当前使用的浏览器的相关信息，但该属性在 jQuery 1.9 版本已经被移除，所以在使用高版本 jQuery 时，浏览器就会报出 $.browser 未定义的错误提示 “$.browser is undefined”，解决该问题方法是给 $.browser 重新定义，或者在高版本 jQuery 中补充 $.browser 属性。 方法一：重定义 $.browser 因为 $.browser 是根据 navigator.userAgent 属性来确定浏览器信息的，所以在使用 $.browse 属性前添加 $.browse...

非响应式web网页，在小于web网页设置的宽度的分辨率电脑下显示，会出现滚动条滚动显示超出分辨率的内容，如：网页主体宽度为设置为width:1400px，那么在1280分辨率电脑的浏览器上访问，就会出现横向滚动条。 如果想完整显示，又不做成响应式结构，可以通过等比例缩放的形式让网页完整显示在1280分辨率电脑的浏览器上，等同于浏览器“Ctrl+鼠标滚动”的缩放效果。 代码也很简单，通过jquery的resize()方法和css的zoom属性即中。 实现代码 $(window).resize(function () { var win = ...

使用$(document).on绑定click事件，在电脑端执行正常，但在苹果手机各种浏览器上都不能生效，把click更换成touch事件也没有效果，查询后发现，需要给绑定点击事件的元素添加css声明cursor:pointer;。 示例 HTML代码 <div class="nav"> <ul> <li>测试</li> </ul> </div> JS代码 $(document).on('click', '.nav li', function(){ al...

jquery代码显示当前月份的日历，设置可预约、约满、闭馆三种状态样式，可预约状态的日期可以点击并获取日期。 效果参考下图： HTML代码： <div class="order"> <div class="canlendar"> <div id="tile"></div> <div id="calendar"> </div> <div class="btn"> <a href="javascript:void(0...

引用一些js脚本文件时，火狐浏览器Firefox出现了源映射错误提示，比如jquery.min.js，提示内容如下： 源映射错误：Error: NetworkError when attempting to fetch resource. 源 URL：https://www.tddx.net/jquery.min.js 源映射 URL：jquery.min.js.map 原因： 这是由于缺少对应的映射文件（sourcemap file）导致的。 解决方法： 方法一：删除调用代码 ...

通过:contains匹配select下拉选项的option文本值，把和指定文本相同的option设置为选中状态。 html代码 <div class="setSelect"> <select> <option value="1">阿里云</option> <option value="2">腾讯</option> <option value="3">网易</option> <option value="4">百度</option...

chrome浏览器下，使用jquery click()点击事件，被点击的元素会出现黄色边框： 解决方法： 给被点击的元素添加:focus的css代码：（如被点击的元素是element，代码如下 element:focus { outline:none; } 或 element:focus { outline:0; }

以下代码用于JQuery判断访问的浏览器的类型 $(function(){ var mobile_flag = isMobile(); // true为PC端，false为手机端 if(mobile_flag){ alert('PC端'); }else{ alert('手机端'); } }); function isMobile() { var userAgentInfo = navigator.userAgent; var mobileAgents = [ 'Android', 'iPhone', 'SymbianOS', 'W...

代码实现的效果点击增加、减少按钮实现购买数量的变动，只允许输入数字，禁止中文、英文或其它符号的输入。 HTML代码： <div class="book"> <button class="sub">-</button> <input type="text" class="num text" value="100"/> <button class="add">+</button> </div> CSS代码： .book{overflow:hidden;...

同一个页面，相同的div元素，要获取这些元素高度最大的值，然后设置指定元素的高度，代码如下： <script> $(function() { var h_max = 0; //定义一个默认变量，并赋值为0，用于比较 $('.ClassName').each(function() { //遍历相同样式名的元素 var h = $(this).height(); //获取每个元素的高度，（可根据需要使用outerHeight、innerHeight） h_max = h > h_max ? h : h_max; //比较获取的元素高度值和默认变...

Slidebars是一款能快速又简单的实现移动端应用风格菜单显示和侧边栏的jQuery插件，插件非常小巧，压缩后仅有1.69kb大小，提供完整的API、回调功能等，需要jquery 1.8以上版本的库才可以使用。 官方网站：https://www.adchsm.com/slidebars/ Github：https://github.com/adchsm/Slidebars