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函数
Dec 22 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Vue如何基于es6导入外部js文件
May 15 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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网上商城购物车设计代码分享
2012/02/15 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python批量下载抖音视频
2019/06/17 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
《广玉兰》教学反思
2014/04/14 职场文书
物理分数没达标检讨书
2014/09/13 职场文书