常用的几个JQuery代码片段


Posted in Javascript onMarch 13, 2017

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

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

//注意:代码需要修饰完善
$('#nav').click(function(e) {
 // 要知道siblings的使用
$(e.target).addClass('on').siblings('.on').removeClass('on');
 });

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(){


var $this = $(this);


($this.val() === '请搜索...')? $this.val('') : null;

})

.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 = $('');
$($('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. 测试密码的强度

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

//下面的正则表达式建议各位收藏哦,项目上有可能会用得着
$('#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);
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
js数组操作常用方法
May 08 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 #Javascript
You might like
PHP中其实也可以用方法链
2011/11/10 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python函数嵌套实例
2014/09/23 Python
python写入xml文件的方法
2015/05/08 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python实现滑雪游戏
2020/02/22 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
公司人事专员岗位职责
2014/08/11 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
保洁员岗位职责
2015/02/04 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
幽灵公主观后感
2015/06/09 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技