分享7个有用的jQuery代码

这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下

jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面。

下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性。

一、在新窗口打开链接

用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验:

$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});

二、设定计时器

$(document).ready(function() {
window.setTimeout(function() {
// some code
}, );
});

三、设置等高的列

使用下面的代码,可以使得你的网页应用每一列高度都一样:

<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 = ;
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 = ; 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…');
});

五、把元素定位到页面中间

<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()) / + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / + $(window).scrollLeft() + "px");
return this;
}
//Use the above function as:
$('#foo').center();
</script>

六、禁用鼠标右键

$(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;
});
});

七、计算子元素的个数

<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>

八、更改样式列表

这段代码将帮助你更改样式列表。

 $(document).ready(function() {
$("a.cssSwap").click(function() {
//swap the link rel attribute with the value in the rel
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

九、使用jQuery设定文本大小

加入这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。

 $(document).ready(function() {
//find the current font size
var originalFontSize = $('html').css('font-size'); //Increase the text size
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, ); var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
}); //Decrease the Text Size
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, ); var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
}); // Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});

十、检测当前鼠标坐标

使用这个JS代码,你可以在任何浏览器里获取鼠标坐标。

 $(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});

十一、获取鼠标指针的X / Y轴

 $().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

十二、返回到顶部链接

此代码对于比较长的页面非常实用,用户不必拉滚动条来返回顶部,直接点击“返回顶部”即可。

 $(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(,);
}
});

jQuery是JavaScript最好的库之一,支持Ajax及HTML 脚本客户端,主要用于事件处理及制作动画。另外,jQuery还拥有各种插件,可以让开发者在最快的时间内创建网页。

分享十二个有用的jQuery代码的更多相关文章

  1. 十五个常用的jquery代码段【转】

    好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...

  2. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  3. Python之路【第十二篇续】jQuery案例详解

    jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...

  4. 《汇编语言 基于x86处理器》第十二章浮点数部分的代码

    ▶ 书中第十二章的程序,主要讲了 FPU 的指令和浮点数计算的过程 ● 代码,简单的 32 为浮点数测试 INCLUDE Irvine32.inc INCLUDE macros.inc .data f ...

  5. Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  6. 几项有用的JQUERY代码

    检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测 ...

  7. php分享十二:分组取前N记录

    经常看到问题,如何取出每组的前N条记录 http://blog.csdn.net/acmain_chm/article/details/4126306 问题:有表 如下,要求取出各班前两名(允许并列第 ...

  8. 几个有用的jQuery代码片段

    1.检测Internet Explorer版本 $(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ ale ...

  9. 测开之路四十二:常用的jquery事件

    $(‘selector’).click() 触发点击事件$(‘selector’).click(function) 添加点击事件$(‘selector’).dbclick() 触发双击事件$(‘sel ...

随机推荐

  1. JAVA多用户商城系统源码

    最近公司要搞商城,让我多方咨询,最后看了很多,要不就是代码注释不全,要不就是bug多,要么就是文档缺少,最后决定自己开发一套商城. 下面是开发的一些心得体会,权且记录下来,给自己做个记录把.   网址 ...

  2. linux下导入、导出mysql数据库命令 下载文件到本地

    一.下载到本地 yum install lrzsz sz filename  下载 rz filename  上传   linux下导入.导出mysql数据库命令 一.导出数据库用mysqldump命 ...

  3. ExecutorService常用方法和newFixedThreadPool创建固定大小的线程池

    1.ExecutorService: 是一个接口,继承了Executor: public interface ExecutorService extends Executor { } 2.Execut ...

  4. oracle user account locked

    1.Question describe when you use account scott/tiger connect to oracle, you will see "the user ...

  5. php学习笔记:对文件的增删查改等操作

    文件的创建: 采用touch()函数,当文件不存在会被创建 例如: <?php header("Content-type: text/html; charset=utf-8" ...

  6. Hibernate框架的总结

    hibernate 简介:hibernate是一个开源框架,它是对象关联关系映射的框架,它对JDBC做了轻量级的封装,而我们java程序员可以使用面向对象的思想来操纵数据库.hibernate核心接口 ...

  7. ahjesus解决win下U盘无法写入的问题

    可能是由于不同品牌的U盘出厂时磁盘分区和格式化方式不同而引起的兼容性问题.解决方案如下 启动cmd.输入diskpart,启动DISKPART工具 在DISKPART窗口中输入以下命令: >li ...

  8. Play常用代码片段 http://www.anool.net/?p=625

    持续更新中: (1)按照降序查询: List<Entity> entities= Entity.find("order by id desc").fetch(2);   ...

  9. C语言指针的长度和类型

    本文地址:http://www.cnblogs.com/archimedes/p/point-length-type.html,转载请注明源地址. 如果考虑应用程序的兼容性和可移植性,指针的长度就是一 ...

  10. 【转】IOS开发资源汇总

    转自:http://blog.csdn.net/favormm/article/details/6664970 如何用Facebook graphic api上传视频: http://develope ...