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

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代码片段,有需要的朋友可以直接拿去使用了。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了JS实现在状态栏显示打字效果。分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: htmlheadscript language="JavaScript"//以下几条可以根据需要改变var
前言 上一篇 介绍了在webform平台实现ajax的一些方式,并且实现一个基类。这一篇我们来看一个开源的组件:ajaxpro。虽然这是一个比较老的组件,不过实现思想和源码还是值得我们学习的。通过上一篇的介绍,我们知道要调用页面对象的方法,就是靠反射来实现的,关键是整个处理过程,包括反射调用方法、参数映射等。ajaxpro不仅在后台帮我们实现了这个过程,在前台也封装了请求调用的方法,例如ajax的相关方法,用ajaxpro的方法就可以发送异步请求了,不需要自己封装js或者使用js库。接下来就对这个组件进行
本文实例讲述了js实现动态加载脚本的方法。分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验。 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接。哎!关键是最后一种方法还有点错误。经过两天的研究查阅资料,在这里和大家分享一下。 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个
文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。 效果图: 页面结构: div class="uploader white"input type="text" class="filename" readonly="readonly"/input type="button" name="file" class="button" value="Browse..."/input type="file" size="30"//div css文件样式: .uploader{position:r

JavaScript Length 属性的总结 - 2015-11-03 18:11:09

关于javascript length属性的总结请看以下内容详解。 一、StringObject中的length length属性是返回字符串的字符数目。 例如: // 普通字符串var str = "abcdef";console.log(str.length); // 6// 数组var str1 = new Array(1,2,3,4);console.log(str1.length); // 4// 数组与字符串var str2 = str1 + str; // "abcdef1,2,3,4"co
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程。 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的input type="file"元素,然后使用一个label元素来制作美化效果。 HTML结构 该文件上传域美化效果最基本的HTML结构如下: input type="file" name="file" id="file" class="inputfile" /label for="file"Choose a file/label CSS样式 首先需要隐藏in
本文实例讲述了JS实现点击按钮获取页面高度的方法。分享给大家供大家参考,具体如下: 这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/ 具体代码如下: !DOCTYPE html PUBLIC
先给大家展示效果图: 点击查看效果图 源码下载 jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer。 文件引用: script src="js/jquery.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptscript type="text/javascript" src="js/ZoomVisualizer.js"/scriptscript type="text/javascript"jQuery(document).re
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的。去看了几个常用的网站,都是用的透明flash遮挡“复制到剪贴板”按钮,所以当你点击“复制到剪贴板”的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板。 加载 JQuery库和zclip插件 script type="text/javascrip
在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护。 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证。(ID一个页面只可以使用一次;class可以多次引用) 1:为input添加class,名字可以随意设置,但每个input需要保持一致,本章案例calss设置为noNull。(若input已有class属性,可直接加到其后) 2:为input添加一个属性,用来后期通过jquery获取该字段,用作提示语。本章案例提示