JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 分享10个超实用的jQuery代码片段

分享10个超实用的jQuery代码片段


            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 

【分享10个超实用的jQuery代码片段】相关文章

1. 分享10个超实用的jQuery代码片段

2. 可以直接拿来用的15个jQuery代码片段

3. 20个超实用的JavaScript技巧及最佳实践

4. 绝对应当收藏的10个实用HTML5代码片段

5. 在网站制作中随时可用的10个 HTML5 代码片段

6. 实用的jQuery代码性能优化

7. 分享5个最棒的代码片段资源网站

8. 每位设计师都应该拥有的50个CSS代码片段

9. 15 个响应式的 jQuery UI 组件的代码片段和模块

10. 15个超级实用的jQuery插件

本文来源:https://www.51html5.com/a1220.html

点击展开全部

﹝分享10个超实用的jQuery代码片段﹞相关内容

其它栏目

也许您还喜欢