12个超实用的JQuery代码片段


Posted in Javascript onNovember 02, 2015

本文收集了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);
});

本文收集的这15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。

Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 #Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 #Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 #Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 #Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
smarty实例教程
2006/11/19 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jquery实现数字输入框
2017/02/22 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
管道维修工岗位职责
2013/12/27 职场文书
建筑工地宣传标语
2014/06/18 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
python实现A*寻路算法
2021/06/13 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技