非常实用的12个jquery代码片段


Posted in Javascript onNovember 02, 2015

jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画、特效,还会提高网站的用户体验。

本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1. 导航菜单背景切换效果

在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景。这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式:

<ul id='nav'>
  <li>导航一</li>
  <li>导航二</li>
  <li>导航三</li>
</ul>
//注意:代码需要修饰完善
$('#nav').click(function(e) {
 // 要知道siblings的使用
$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;
  });

2.反序访问JQuery对象里的元素

在某些场景下,我们可能需要反序访问通过JQuery选择器获取到的页面元素对象,这个怎么实现呢?看下面代码:

//要掌握JQuery对象的get方法 以及数组的reverse方法即可
var arr = $('#nav').find('li').get().reverse();
$.each(arr,function(index,ele){
   .... ...
 });

3.访问IFrame里的元素

在大多数情况下,IFrame并不是好的解决方案,但由于各种原因,项目中确实用到了IFrame,所以你需要知道怎么去访问IFrame里的元素

var iFrameDOM = $("iframe#someID").contents();
//然后,就可以通过find方法来遍历获取iFrame中的元素了
iFrameDOM.find(".message").slideUp();

4. 管理搜索框的值

现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。而一旦输入框失去焦点,而输入框里又没有输入新的值,输入框里的值又会恢复成默认值,如果往输入框里输入了新值,则输入框的值为新输入的值。这种特效用JQuery很容易实现:

$("#searchbox")
  .focus(function(){$(this).val('')})
  .blur(function(){
    var $this = $(this);
   // '请搜索...'为搜索框默认值
   ($this.val() === '')? $this.val('请搜索...') : null;
 });

5.部分页面加载更新

为了提高web性能,有更新时我们通常不会加载整个页面,而只是仅仅更新部分页面内容,如图片的延迟加载等。页面部分刷新的特效在JQuery中也很容易实现:

setInterval(function() {  //每隔5秒钟刷新页面内容
   //获取的内容将增加到 id为content的元素后
   $("#content").load(url);
 }, 5000);

6.采用data方法来缓存数据

在项目中,为了避免多次重复的向服务器请求数据,通常会将获取的数据缓存起来以便后续使用。通过JQuery可以很优雅的实现该功能:

var cache = {};
 $.data(cache,'key','value'); //缓存数据
 //获取数据
 $.data(cache,'key');

7.采配置JQuery与其它库的兼容性

如果在项目中使用JQuery,$ 是最常用的变量名,但JQuery并不是唯一一个使用$作为变量名的库,为了避免命名冲突,你可以按照下面方式来组织你的代码:

//方法一: 为JQuery重新命名为 $j

var $j = jQuery.noConflict();
$j('#id').... 
//方法二: 推荐使用的方式

(function($){
  $(document).ready(function(){
    //这儿,你可以正常的使用JQuery语法
  });
})(jQuery);

8.克隆table header到表格的最下面

为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现:

var $tfoot = $('<tfoot></tfoot>'); 
$($('thead').clone(true, true).children().get().reverse()).each(function(){
  $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

9. 根据视窗(viewport)创建一个全屏宽度和高度(width/height)的div

下面代码完全可以让你根据viewport创建一个全屏的div。这对在不同窗口大小下展示modal或对话框时非常有效:

$('#content').css({
  'width': $(window).width(),
  'height': $(window).height(),
});
// make sure div stays full width/height on resize
$(window).resize(function(){
  var $w = $(window);
  $('#content').css({
   'width': $w.width(),
   'height': $w.height(),
  });
});

10 测试密码的强度

在某些网站注册时常常会要求设置密码,网站也会根据输入密码的字符特点给出相应的提示,如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢?看下面代码:

<input type="password" name="pass" id="pass" /> 
<span id="passstrength"></span>
//下面的正则表达式建议各位收藏哦,项目上有可能会用得着
$('#pass').keyup(function(e) {
   //密码为八位及以上并且字母数字特殊字符三项都包括
   var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 
   var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
   var enoughRegex = new RegExp("(?=.{6,}).*", "g");
   if (false == enoughRegex.test($(this).val())) {
       $('#passstrength').html('More Characters');
   } else if (strongRegex.test($(this).val())) {
       $('#passstrength').className = 'ok';
       $('#passstrength').html('Strong!');
   } else if (mediumRegex.test($(this).val())) {
       $('#passstrength').className = 'alert';
       $('#passstrength').html('Medium!');
   } else {
       $('#passstrength').className = 'error';
       $('#passstrength').html('Weak!');
   }
   return true;
});

11.使用JQuery重绘图片的大小

关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。

$(window).bind("load", function() {
   // IMAGE RESIZE
   $('#product_cat_list img').each(function() {
     var maxWidth = 120;
     var maxHeight = 120;
     var ratio = 0;
     var width = $(this).width();
     var height = $(this).height();
     if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
     }
     var width = $(this).width();
     var height = $(this).height();
     if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
     }
   });
   //$("#contentpage img").show();
   // IMAGE RESIZE
});

12.滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:

var loading = false;
$(window).scroll(function(){
 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
   if(loading == false){
      loading = true;
      $('#loadingbar').css("display","block");
      $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
        $('body').append(loaded);
        $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
        $('#loadingbar').css("display","none");
        loading = false;
      });
   }
 }
});
$(document).ready(function() {
 $('#loaded_max').val(50);
});

以上内容是小编给大家分享的非常实用的12个jquery代码片段,有需要的朋友可以直接拿去使用了。

Javascript 相关文章推荐
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 #Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 #Javascript
纯javascript移动优先的幻灯片效果
Nov 02 #Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
You might like
php图片上传存储源码并且可以预览
2011/08/26 PHP
简单的自定义php模板引擎
2016/08/26 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
工作表现自我评价
2014/02/08 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
校园安全标语
2014/06/07 职场文书
2014年安全员工作总结
2014/11/13 职场文书
研究生导师评语
2014/12/31 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers