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 相关文章推荐
js 验证身份证信息有效性
Mar 28 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
vue多次循环操作示例
Feb 08 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 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
短波收音机简介
2021/03/01 无线电
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php生成无限栏目树
2017/03/16 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
domReady的实现案例
2016/11/23 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python命名空间详解
2014/08/18 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python关于变量名的基础知识点
2020/03/03 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
会计专业应届生自荐信
2014/06/28 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript