七个不允许错过的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 类型判断代码分析
Mar 28 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
YUI模块开发原理详解
Nov 18 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
使用js和canvas实现时钟效果
Sep 08 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 中include()与require()的对比
2006/10/09 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python引用计数操作示例
2018/08/23 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
主题班会演讲稿
2014/05/22 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
运动会广播稿200字
2015/08/19 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Go timer如何调度
2021/06/09 Golang