16个超实用的jQuery技巧攻略
本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。
1)禁用右键单击功能
如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。
$(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;
});
});
2)使用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);
});
});
3)在新窗口打开链接
使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。
$(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});
4)更改样式列表
使用这段代码帮助你更改样式列表。
$(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'));
});
});
5)返回到顶部链接
此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能。
$(document).ready(function() { //when the id="top" link is clicked
$('#top').click(function() { //scoll the page back to the top
$(document).scrollTo(0,500);
}
});
平滑滚动到锚点
// HTML:
//</pre> <h1 id="anchor">Lorem Ipsum</h1> <pre>
// <a class="topLink" href="#anchor">Back to Top</a>
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate(
{scrollTop: $($(this).attr("href")).offset().top + "px" },
{ duration: 500, easing: "swing" }
);
return false;
});
});
6)获取鼠标指针的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);
});
7)检测当前鼠标坐标
使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。
$(document).ready(function() {
$().mousemove(function(e) {
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
});
8)缩放图片
虽然图片应该在服务器端缩放,不过如果服务器端未做缩放,需要再客户端缩放的时候,可以使用下面这个方便的代码片段:
$(window).bind("load", function() { // IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
}); //$("#contentpage img").show(); // IMAGE RESIZE
});
9、滚动时自动加载内容
很多网站使用了流行的瀑布图布局,这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none"); loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
10、检测密码强度
在表单功能中,经常会有检测用户输入的密码强度的功能,下面这个代码片段使用正则表达式来检测密码是否足够安全,当然记得在服务端也进行表单验证。
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*[ ubbcodeplace_4 ]quot;, "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*[ ubbcodeplace_4 ]quot;, "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
11、均衡元素的高度
使用纯 CSS代码实现均衡元素的高度比较困难,而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$("div").height(maxHeight);
12、修复 IE6 PNG 问题
至今,IE6 在国内仍然占据了大量的份额,因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题,下面这段代码可以方便的修复。
$('.pngfix').each( function() {
$(this).attr('writing-mode', 'tb-rl');
$(this).css('background-image', 'none');
$(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});
13、解析 JSON 字符串
使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 JSON 数据并将其追加到您的网页的例子。
function parseJson(){
$.getJSON('hcj.json',getPosts);
function getPosts(data){
for(var i = 0; i < 5; i++){
var strPost = '<h2>' + data.posts[i].title + '</h2>' + '<p>' + data.posts[i].excerpt + '</p>' + '<a href="' + data.posts[i].url + '" title="Read ' + data.posts[i].title + '">Read ></a>';
$('body').append(strPost);
}
}
}
$(document).ready(function(){
parseJson();
});
14、隔行换色
这是一个很老的功能了,在大的列表或表格中,隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。
$('div:odd').css("background-color", "#F4F4F8"); $('div:even').css("background-color", "#EFF1F1");
15、预加载图片
你是否注意到 facebook 相册的图片加载速度特别快?那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例:
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
});
},
100);
});
16、让整个 Div 可点击
这是实现链接的父 Div 也能够点击的简单方法,HTML 示例代码如下:
<div class="myBox"> blah blah blah. <a href="http://google.com">link</a> </div>
下面的 jQuery 代码让整个 Div 可点击:
$(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
- 制作WordPress侧边栏“热门文章”小工具并集成在主题中的方法
- 好用的WCF Visualizers
- java 邮件发送
- 制作WordPress侧边栏“随机文章”小工具并集成在主题中的方法
- 使用熔断器设计模式保护软件
- H2 Database入门
- 浅谈UE4引擎
- 无插件仅代码实现 WordPress 分页导航
- 冗余代码检查工具Simian
- “瑞波币”全套三拼域名被同买家收入囊中
- 人们可能会犯的7个数据错误
- java:POI导出excel
- WordPress自定义栏目运用实例III:添加原创/转载文章不同版权声明
- 另一个强大的Visualizers :Mole For Visual Studio
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Deepin中安装与使用virtualenv的教程
- linux安装jdk并设置环境变量的方法教程(看这一篇够了)
- hadoop基于Linux7的安装配置图文详解
- Linux paste命令的使用方法
- ubuntu下迁移home目录至新的分区教程详解
- SVN服务备份操作步骤分享
- Linux磁盘挂载、分区、扩容操作的实现方法
- linux使用docker-compose部署软件配置详解
- 在Ubuntu中如何查看网络路由表详解
- linux中各种锁机制的使用与区别详解
- Linux环境下使用glog日志库的方法
- crontab执行时间与系统时间不一致问题解决
- Linux内核设备驱动之proc文件系统笔记整理
- CentOS7.6系统下使用yum配置lnmp环境的方法
- Linux内核设备驱动之高级字符设备驱动笔记整理