分享10个超实用的jQuery代码片段
来源:GBin1.com
jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
jQuery平滑回到顶端效果
$(document).ready(function() { $("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
}); });
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm
jQuery处理图片尺寸
$(window).bind("load", function() {
// 图片修改大小
$('#imglist 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;
} if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
}); });
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm
jQuery实现的滚动自动加载代码
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);
});
jQuery测试密码强度
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "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;
});
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/5ae6bca8-b12b-48b8-861a-8d9ab09e6641.htm
jQuery实现的DIv高度保持一致
var maxHeight = 0; $("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
}); $("div").height(maxHeight);
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/ac7c5175-9282-41c0-a766-c56707946c7b.htm
简单处理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")');
});
将class=pngfix添加到需要处理的对象即可。
jQuery处理JSON
function parseJson(){
//Start by calling the json object, I will be using a
//file from my own site for the tutorial
//Then we declare a callback function to process the data
$.getJSON('hcj.json',getPosts); //The process function, I am going to get the title,
//url and excerpt for 5 latest posts
function getPosts(data){ //Start a for loop with a limit of 5
for(var i = 0; i < 5; i++){
//Build a template string of
//the post title, url and excerpt
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>'; //Append the body with the string
$('body').append(strPost); }
} } //Fire off the function in your document ready
$(document).ready(function(){
parseJson();
});
jQuery实现让整个div可以被点击
$(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/4bfb3dce-1681-470c-b47a-7490df12f3b0.htm
jQuery实现的Facebook风格的图片预加载效果
var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
$('div').append(img);
});
}, 100);
});
运行代码:
GBdebug在线调试地址:http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm
希望大家喜欢这些实用的jQuery代码,如果你也有更多的jQuery代码片段,请与我们分享,谢谢!
via 极客社区
分享10个超实用的jQuery代码片段的更多相关文章
- 超实用的jQuery代码片段
1.jQuery回到顶部效果 HTML代码:<a href="javascript:;" id="btn" title="回到顶部"& ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 高效Web开发的10个jQuery代码片段(10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT)
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- 10个可以直接拿来用的JQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
- Web开发者必须知道的10个jQuery代码片段
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- Jquery学习总结(4)——高效Web开发的10个jQuery代码片段
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- 最实用、最常用的jQuery代码片段
// chinacoder.cn JavaScript Document $(document).ready(function() { //.filter(":not(:has(.selec ...
- 50个jquery代码片段(转)
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
随机推荐
- vue验证码组件
1.效果图 2.全部代码: <template> <div class="join_formitem"> <label class="enq ...
- 跨域请求httpclient
httpclient:是Apache工具包,util,它可以作为一个爬虫,直接爬取某个互联网上的页面.获取到时页面最终的源文件html.直接可以获取页面返回json.就可以直接在代码内部模拟发起htt ...
- web.config 数据库连接
方法一:connectionsStrings 首先配置web.config文件 <configurations> <connectionStrings> <add nam ...
- 捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接
<html> <head> <meta http-equiv="content-type" content="text/html;chars ...
- apache 占用内存总量与每个apache进程的平均内存占用量计算
方法1: ps aux | grep httpd | grep -v pts | awk '{ tot += $6; procs += 1; print $2,$6,$11 } END { print ...
- HDU 6280 From Tree to Graph(2018 湘潭邀请 E题,树的返祖边)
其实打返祖边就相当于$x$到祖先这一段点(不包括两端)答案都要减$1$. 然后每个点最多减$1$次$1$. #include <bits/stdc++.h> using namespace ...
- linux文件简单操作
1.vim常用快捷键 dd/ndd 删除1行/删除n行 yy/nyy 复制1行/复制n行 p 粘贴 u 撤销 dw/ndw 删除一个单词/删除n个单词 G /nG 到一行尾/第n行尾 :!+命令 ...
- CentOS7系统防火墙开关、状态与自启
首先需要说明的是CentOS7使用的是firewalld.service,而不是iptables.service [xf@xuexi ~]$ systemctl status firewalld.se ...
- 解决CDH的web界面使用nginx代理一些静态文件无法加载
vim /opt/cm-/share/cmf/webapp/WEB-INF/spring/mvc-config.xml .... 注释此行 <bean class="com.cloud ...
- WebDAV服务漏洞利用工具DAVTest
WebDAV服务漏洞利用工具DAVTest WebDAV是基于Web服务的扩展服务.它允许用户像操作本地文件一样,操作服务器上的文件.借助该功能,用户很方便的在网络上存储自己的文件.为了方便用户使 ...