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 相关文章推荐
Javascript中Array.prototype.map()详解
Oct 22 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
浅谈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测试硬盘写入速度示例
2014/01/27 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python实现反转部分单向链表
2018/09/27 Python
python生成九宫格图片
2018/11/19 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
社区党支部承诺书
2015/04/29 职场文书
思品教学工作总结
2015/08/10 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS