分享12个实用的jQuery代码片段


Posted in Javascript onMarch 09, 2016

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

本文主要分享了12个有用的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');
});

二、设定计时器

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

 

三、设置等高的列

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

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

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

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

六、禁用鼠标右键

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

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, 10);

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(0,500);
 }
 });

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

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象编程 function也是类
Sep 17 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
试用期转正鉴定评语
2014/01/27 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
大学生求职意向书
2015/05/11 职场文书
自荐信大全
2019/03/21 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python