jQuery实用技巧必备(上)


Posted in Javascript onNovember 02, 2015

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下:

1. 禁止右键点击

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
 return false;
 });
});

2. 隐藏搜索文本框文字
Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
 textFill($('input.text1'));
});
 
 function textFill(input){ //input focus text function
 var originalvalue = input.val();
 input.focus( function(){
  if( $.trim(input.val()) == originalvalue ){ input.val(''); }
 });
 input.blur( function(){
  if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
 });
}

3. 在新窗口中打开链接
XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
 //Example 1: Every link will open in a new window
 $('a[href^="http://"]').attr("target", "_blank");
 
 //Example 2: Links with the rel="external" attribute will only open in a new window
 $('a[@rel$='external']').click(function(){
 this.target = "_blank";
 });
});
// how to use
<a href="http://www.3water.com" rel=external>open link</a>

4. 检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
 // do something
}

// Target Safari
if( $.browser.safari ){
 // do something
}

// Target Chrome
if( $.browser.chrome){
 // do something
}

// Target Camino
if( $.browser.camino){
 // do something
}

// Target Opera
if( $.browser.opera){
 // do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
 // do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
 // do something
}
});

5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

6. 页面样式切换

$(document).ready(function() {
 $("a.Styleswitcher").click(function() {
 //swicth the LINK REL attribute with the value in A REL attribute
 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
 });
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A>
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A>
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>
});

7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。

$(document).ready(function() {
function equalHeight(group) {
 tallest = 0;
 group.each(function() {
 thisHeight = $(this).height();
 if(thisHeight > tallest) {
  tallest = thisHeight;
 }
 });
 group.height(tallest);
}
// how to use
$(document).ready(function() {
 equalHeight($(".left"));
 equalHeight($(".right"));
});
});

8. 动态控制页面字体大小
用户可以改变页面字体大小

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $('html').css('font-size');
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });
 // Decrease the font size(smaller font)
 $(".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;
 });
});

9. 返回页面顶部功能
For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
 var $target = $(this.hash);
 $target = $target.length && $target
 || $('[name=' + this.hash.slice(1) +']');
 if ($target.length) {
 var targetOffset = $target.offset().top;
 $('html,body')
 .animate({scrollTop: targetOffset}, 900);
 return false;
 }
 }
 });
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

10. 获得鼠标指针XY值
Want to know where your mouse cursor is?

$(document).ready(function() {
 $().mousemove(function(e){
 //display the x and y axis values inside the div with the id XY
 $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use
<DIV id=XY></DIV>

});

11.返回顶部按钮
你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。

// Back to top
$('a.top').click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

改变scrollTop 的值可以调整返回距离顶部的距离,而 animate 的第二个参数是执行返回动作需要的时间(单位:毫秒)。

今天为大家先介绍一部分jQuery技巧,后续文章会继续更新,希望大家持续关注。

Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
详解Angular2中Input和Output用法及示例
May 21 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 #Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 #Javascript
jquery实现简洁文件上传表单样式
Nov 02 #Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 #Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 #Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 #Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 #Javascript
You might like
解析PHP的session过期设置
2013/06/29 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php简单的上传类分享
2016/05/15 PHP
php实现留言板功能
2017/03/05 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python编程argparse入门浅析
2018/02/07 Python
对Python _取log的几种方式小结
2019/07/25 Python
python构造IP报文实例
2020/05/05 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
一些Solaris面试题
2013/03/22 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
中专生自荐信
2014/06/25 职场文书
教师个人事迹材料
2014/12/17 职场文书
地心历险记观后感
2015/06/15 职场文书
消防安全主题班会
2015/08/12 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书