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 07 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
javascript正则表达式总结
Feb 29 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS实现复制功能
2017/03/01 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
原生JS实现萤火虫效果
2020/03/07 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python线程的两种编程方式
2015/04/14 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
暑假实习求职信范文
2013/09/22 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
化学教育专业自荐信
2014/07/04 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
技术入股合作协议书
2014/10/07 职场文书
秋季运动会加油词
2015/07/18 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记