7个替开发者准备的有用的jQuery技巧
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
7个为开发者准备的有用的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>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
jQuery搜索框输入文字下拉提示菜单
jQuery搜索框输入文字下拉提示菜单
原文地址:
http://www.jq22.com/jquery-info6193
...
-
7个为开发者准备的有用的jQuery技巧
一、在新窗口打开链接
用下面的代码,你点击链接即可在新窗口打开:
$(document).ready(fu...
-
jQuery获取相应Input例子
页面上有许多input框,使用的是EasyUI样式,中间还参杂着各种其他无id的Input框,如下:
<input class=...
-
webpack 引入jquery和第三方jquery插件
1、引入jquery
jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。
index....
-
JQuery的开发与使用心得
关于jQuery的
入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和...
-
深入学习jQuery动画控制
×
目录
[1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制
前面的话
jQuery动画可以使用fade、...
-
jquery操作table表格
一、数据准备
<table id="table1">
<tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...
-
html + css + jquery实现简单的进度条实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-eq...
-
jquery中ajax方法的datatype的作用
今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...
-
jQuery菜单示例(全选,反选,取消)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <titl...