七个不允许错过的jQuery小技巧


Posted in Javascript onDecember 21, 2015

jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术。

七个不允许错过的jQuery小技巧

本文我们将为大家分享一些jQuery小技巧:

一、在新窗口打开链接

用下面的代码,你点击链接即可在新窗口打开:

$(document).ready(function() {
  //select all anchor tags that have http in the href
  //and apply the target=_blank
  $("a[href^='http']").attr('target','_blank');
});

二、设置等高的列

应用下面的代码,可以使得你的WEB应用每一列高度都想等:

<div class="equalHeight" style="border:1px solid">
  <p>First Line</p>
  <p>Second Line</p>
  <p>Third Line</p>
</div>
<div class="equalHeight" style="border:1px solid">
  <p>Column Two</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  equalHeight('.equalHeight');
});
//global variable, this will store the highest height value
var maxHeight = 0;

function equalHeight(col) {
  //Get all the element with class = col
  col = $(col);
  //Loop all the col
  col.each(function() {
    //Store the highest value
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  //Set the height
  col.height(maxHeight);
}
</script>

三、jQuery预加载图像

这个小技巧可以提升页面加载图片的速度:

jQuery.preloadImagesInWebPage = function() {
  for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
    jQuery("").attr("src", arguments[ctr]);
  }
}

// 使用方法:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");

// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
  alert('The image has been loaded…');
});

四、禁用鼠标右键

$(document).ready(function() {
  //catch the right-click context menu
  $(document).bind("contextmenu", function(e) {
    //warning prompt - optional
    alert("No right-clicking!");

    //delete the default context menu
    return false;
  });
});

五、设定计时器

$(document).ready(function() {
  window.setTimeout(function() {
    // some code
  }, 500);
});

六、计算子元素的个数

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
    <span><span></span></span>
  </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  //jQuery code to count child elements $("#foo > div").size()
alert($("#foo > div").size())
</script>

七、把元素定位到页面中间

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
}
//Use the above function as:
$('#foo').center();
</script>

读到这里的朋友就知道你没有错过学习的机会,把这些小技巧积累起来,一定会帮助大家设计出有创意和精美的Web页面。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
jQuery焦点图插件SaySlide
Dec 21 #Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 #Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 #Javascript
浅析JavaScript声明变量
Dec 21 #Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 #Javascript
深入浅析Node.js 事件循环
Dec 20 #Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
golang/python实现归并排序实例代码
2020/08/30 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
投资建议书模板
2014/05/12 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书