jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
1. jQuery平滑回到顶端效果
- $(document).ready(function() {
- $("a.topLink").click(function() {
- $("html, body").animate({
- scrollTop: $($(this).attr("href")).offset().top + "px"
- }, {
- duration: 500,
- easing: "swing"
- });
- return false;
- });
- });
在线调试
2. 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;
- }
- });
- });
在线调试
3. 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);
- });
4. 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;
- });
在线调试
5. jQuery实现的DIv高度保持一致
- var maxHeight = 0;
- $("div").each(function(){
- if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
- });
- $("div").height(maxHeight);
在线调试
6. 简单处理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添加到需要处理的对象即可。
7. 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();
- });
8. jQuery实现让整个div可以被点击
- $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
在线调试
9. 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);
- });
- [url=http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm]在线调试[/url]
希望大家喜欢这些实用的jQuery代码,如果你也有更多的jQuery代码片段,请与我们分享,谢谢!
相关推荐
60个实用的jQuery代码片段.pdf
45个jquery代码片段,希望这些代码能够给你的javascript项目提供帮助。。
10个超实用的jQuery代码片段 jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
1.JQuery得到用户的IP: $.getJSON("http://jsonip.appspot.com?callback=?",function(data){ alert("Your ip:"+data.ip); }); 2.JQuery查看图片的宽度和高度 var theImage = new Image(); theImage.src =...
主要介绍了12个超实用的JQuery代码片段,代码简洁,具有实用价值,感兴趣的小伙伴们可以参考一下
可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望...
可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,这里收集了一些超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!
主要介绍了12个实用的jQuery代码片段,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下
本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。 1. 导航菜单背景切换效果 在项目的前端页面里,相...
本文实例总结了jQuery实用代码片段。分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this...
下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享。下边就让我们看看这些有代码片段。 1.jQuery得到用户IP: 代码如下: $.getJSON(...
本文推荐10个应该收藏的、实现功能很棒的jQuery代码片段,需要的朋友可以参考下
主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下
主要为大家详细介绍了高效Web开发的10个jQuery代码片段,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率。
开发人员利用jQuery代码不仅能给网站带来各种动画、特效,还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段,大家可以直接拿来用。