7个有用的jQuery代码片段分享


Posted in Javascript onMay 19, 2015

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

今天我们为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>
Javascript 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
vue购物车插件编写代码
Nov 27 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 #Javascript
javascript检测两个数组是否相似
May 19 #Javascript
10条建议帮助你创建更好的jQuery插件
May 18 #Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 #Javascript
JQuery中层次选择器用法实例详解
May 18 #Javascript
Jquery中基本选择器用法实例详解
May 18 #Javascript
Jquery注册事件实现方法
May 18 #Javascript
You might like
PHP json_decode函数详细解析
2014/02/17 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP中的事务使用实例
2015/05/26 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
高中军训第一天感言
2014/03/06 职场文书
活动总结书
2014/05/08 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
大学班干部竞选稿
2015/11/20 职场文书
教师外出学习心得体会
2016/01/18 职场文书