文档章节

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

ForingY
 ForingY
发布于 2016/11/28 13:35
字数 1357
阅读 1699
收藏 197
点赞 3
评论 8

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个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){
     .... ...
 });
  1. 管理搜索框的值

现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。而一旦输入框失去焦点,而输入框里又没有输入新的值,输入框里的值又会恢复成默认值,如果往输入框里输入了新值,则输入框的值为新输入的值。这种特效用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');
  1. 根据视窗(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);
});

© 著作权归作者所有

共有 人打赏支持
ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
加载中

评论(8)

话梅大人ME
话梅大人ME
转注址
gentlelions
gentlelions
very good
苏幕灬物语
苏幕灬物语
good
10086客服
10086客服
nice
郑小静
郑小静
good
WesleyWu
WesleyWu
mark
IT小香猪
IT小香猪
nice
tyrantkemp
tyrantkemp
nice

暂无文章

iOS安全应该做哪些事情

1. 尽量使用HTTPS协议。 2. 密码提交的时候,密码使用SHA256加密后传输,MD5等经过哈希碰撞已经可以推算出原文。 3. 密码提交的时候,可以加盐。 4. 密码保存在本地的时候,尽量使用钥匙串保...

HOrange
10分钟前
0
0
react native 注意事项

1. 环境参考官网 android studio 必装 java jdk安装 1.8版本(环境建议自己一步一步配置,切记不要 apt ) 2.有改变编译内容发现 会白屏,然后APP消失,请卸载原来的测试 appinfo (连续两次...

304158
16分钟前
0
0
FOMO游戏代码解析

源代码在此处

怎当她临去时秋波那一转
21分钟前
1
0
EOS智能合约与DApp开发入门

EOS的是Block.One主导研发的一个区块链底层公链系统,它专门为支撑商业去中心化 应用(Decentralized Application)而设计,其代码开源。 比特币被称为区块链1.0,因为它开辟了数字加密货币的...

笔阁
34分钟前
1
0
编译cjson到dll

https://blog.csdn.net/mengzhisuoliu/article/details/52203724 编译完成后 是纯lua实现的json decode 的10倍以上...

梦想游戏人
43分钟前
0
0
JS基础- Date 对象

Date 对象 Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() 注释:Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返...

ZHAO_JH
46分钟前
0
0
Python数据分析numpy(1)

Python开源的科学计算基础库 1.表示N维数组对象ndarray 2.线性代数、傅里叶变换、随机数生成 3.广播函数,整合c++、c 一.数据的维度 1.数据 2.数据维度 3.一维数据 (1)特点 (2)Python中的...

十年磨一剑3344
48分钟前
1
0
csv导入Hive脚本

from pyspark.sql import HiveContexthivec = HiveContext(sc) # 创建一个hivecontext对象用于写执行SQL,sc为sparkcontext# 拼接一个字段类型字符串str_s = 'label String,'...

gulf
51分钟前
0
0
TensorFlow 隐含层 拟合 异或运算

a⊕b = (¬a ∧ b) ∨ (a ∧¬b) 数据 X = [[0, 0], [0, 1], [1, 0], [1, 1]]Y = [[0], [1], [1], [0]] 单层网络只能拟合线性问题,由于异或是非线性问题,需要使用多层网络 输入和输出 [[...

阿豪boy
今天
0
0
SVN 教程

http://www.runoob.com/svn/svn-tutorial.html 记一次 svn 管理的项目迁移工作 之前A服务器上的项目版本管理工具是用的SVN,后来,之前管理linux服务器的员工离职了,这管理服务器的工作也就...

yeahlife
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部