9 个超实用的 jQuery 代码片段

资讯频道 → Web前端

14顶
1踩

2013-07-11 10:31 by 见习编辑 tyygming 评论(14) 有15547人浏览

代码片段 jquery javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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代码片段，请与我们分享，谢谢！

Via 极客社区来源：分享10个超实用的jQuery代码片段

来自: www.gbin1.com

分享到：

14
顶

1
踩

评论共 14 条请登录后发表评论

14 楼 903293718 2013-09-22 17:35

13 楼 903293718 2013-09-22 17:33

12 楼中国凉茶 2013-07-15 17:51

11 楼 wafech 2013-07-15 14:45

超实用貌似都是比较容易实现的吧，反正我平时代码里常用，都是自己写

10 楼高霸天 2013-07-15 14:40

9 楼 pdj408 2013-07-15 10:54

8 楼 It_lvshun 2013-07-15 07:28

正是我需要的谢谢分享

7 楼 SeanWei 2013-07-13 21:40

好的东西就应该分享

6 楼 SeanWei 2013-07-13 21:31

为学术风奉献的人值得尊敬！

5 楼燕踏飞马 2013-07-13 14:46

每一个分享的人都是值得尊敬的！共同进步！

4 楼 Clazz 2013-07-13 13:24

谢谢分享!

3 楼 xisuchi 2013-07-12 17:12

2 楼 wwq100 2013-07-11 18:37

1 楼 xftingzhang 2013-07-11 17:28

[align=center][size=xx-small][u]

[url][flash=200,200][/flash][/url]

[/u][/size][/align]

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

JAVA操作系统实验进程调度图形化模拟程序

是一个模拟进程调度过程的操作系统程序，采用JAVA16编写，有图形化界面GUI。该程序包含先进先出算法、短进程优先算法和响应比高者优先算法，需要其他算法可以下载我的另一个作业调度资源

进程调度算法的模拟

编写程序，采用动态优先级调度算法实现进程调度。要求由用户输入进程PCB信息，优先级大的进程优先分配CPU，且优先级每运行一个CPU时间单位就降低一级。进程状态分为W（就绪）、R（运行）、F（完成）。就绪进程在获得CPU后只能运行一个时间单位。运行后，将进行PCB中已占用CPU的时间加1。如果运行一个CPU时间单位后，进程的已占用时间达到了所需要的运行时间，则撤销该进程。如果运行一个CPU时间单位后，进程的已占用CPU时间尚未达到所需要的运行时间，即进程还需要继续运行，则此时将进程的优先数减1。

操作系统实验——进程调度算法的模拟

本程序是实现操作系统中进程调度的模拟实验，使用两种调度方法：先来先服务方法和短作业优先方法。

模拟进程调度程序

只是在一定程度上模拟实现了这四种调度策略 (/ω＼)()╰(°▽°。

【操作系统原理】进程调度模拟

进行了模拟进程调度的实验，通过Python编码实现了先来先服务调度算法和短进程优先调度算法的模拟程序，首先通过Python编码实现了进程控制块（PCB）的结构体。PCB用于保存和管理进程的相关信息，包括进程ID、进程状态和优先级等字段。模拟了先来先服务（FCFS）调度算法，简单地按照进程到达的顺序进行调度，另外，也模拟了短进程优先（SJF）调度算法的模拟程序。SJF调度算法根据进程的执行时间来进行调度，优先调度执行时间短的进程。

操作系统原理-模拟进程调度功能——沐雨先生

操作系统原理-模拟进程调度功能

Java开发的进程调度模拟器完整指南

本文还有配套的精品资源，点击获取简介：EscalonadorProcessosSimulador是一个用于模拟计算机操作系统中进程调度算法的Java应用程序。它旨在帮助用户理解不同调度策略如何影响系统性能。用户可以在模拟器中设置多种调度算法，并观察这些算法处理进程队列的效果。该模拟器包含了常见算法如FCFS、SPF/SJF、RR、优先级调度以及MLFQ，并设计有进程模型、...

操作系统模拟实验——进程调度实验（时间片轮转调度、短进程优先调度和多级反馈队列调度）

1. 理解在单处理器环境下的进程调度及状态转换的基本原理和关键点。 2. 编程实现时间片轮转调度、短进程优先调度和多级反馈队列调度算法。 3. 分析并比较不同调度算法的效率和公平性。模拟实验代码语言为c++。本实验设计思路参考王道考研操作系统，90%以上代码为本人原创。如果有什么错误，欢迎大伙儿在评论区指正ヾ(●´▽‘●)ノ。

模拟进程调度

通过C++编程来模拟三种进程调度方式：FCFS（先来先服务），Priority Scheduling（优先度调度）和Multilever feedback queue （多级反馈队列）现有5个进程同时一次进入进程调度器进程名时间花销优先度 P1 10 3 P2 1 1 P3 2 3 P4 1 4 P5

进程调度算法的模拟2

然后用“gcc -o schedule_f schedule_f.c”得到可执行文件。用“./schedule_f”执行schedule_f得到如下。深入理解系统如何组织进程，理解常用进程调度算法的具体实现。先写一个名为“schedule_f.c“的文件。

“进程调度模拟程序”实验报告

进程调度模拟程序的设计，包括以下2种调度算法：采用优先数调度算法的模拟进程调度程序、采用时间片轮转调度算法的模拟进程调度程序。

进程模拟调度实验

实验三进程模拟调度实验一、实验目的多道系统中，当就绪进程数大于处理机数时，须按照某种策略决定哪些进程优先占用处理机，本实验模拟实现处理机调度，以加深了解处理机调度的工作二、实验内容选择一个调度算法，实现处理机调度。三、实验要求 1、设计一个按下面三种调度算法实现处理机调度的程序。 1）先来先服务 2）短进程优先或优先权高优先 3）按时间片轮转 2、说明：PCB内容：进程名/PID 、要求运行时间（单位时间）、优先权、状态、到达时间、已用CPU时间等。 1）可随机输入.

进程调度程序模拟进程调度程序模拟进程调度程序模拟

进程调度程序模拟进程调度程序模拟进程调度程序模拟进程调度程序模拟进程调度程序模拟进程调度程序模拟

进程调度算法的模拟实现

操作系统进程调度课设，有先来先服务、短作业优先、最短剩余时间优先、时间片轮换、高优先权调度五种算法

Java 模拟进程调度算法

使用Java描述进程的调度。有图形界面显示。在这里只写了RR和SPF这两种算法，不过我看了下，除了反馈调度算法这个程序难以实现外，其他算法都可以轻易实现。

处理机调度模拟程序包括三种算法

进程调度算法包括：时间片轮转法，短作业优先算法，最高响应比优先算法。 2）可选择进程数量

操作系统：用C++模拟进程调度

操作系统：用C++模拟进程调度 1.内容与要求： 1）创建10个进程的PCB，每个PCB包括：进程名、进程状态、优先级（1~10）、需要在处理机上执行的时间（ms）、队列指针等； 2）初始化10个PCB（产生随机数0或1，分别表示进程处于就绪态或等待态）； 3）根据调度算法选择一个就绪进程在CPU上执行； 4）在进程执行过程中，产生随机数0或1，该随机数为1时，将等待队列中的第一个PCB加入就绪队列的对尾； 5）在进程执行过程中，产生一个随机数，表示执行进程能在处理机上执行的时间，如果随机时间大于总需要的时

基于JAVA的进程调度算法

一、需求分析在Java开发环境下，模拟进程调度算法，其中该算法所需要的具体功能为：采用最高优先数优先的调度算法（即把处理机分配给优先数最高的进程）和先来先服务算法（将用户作业和就绪进程按提交顺序或变为就绪状态的先后排成队列，并按照先来先服务的方式进行调度处理）。算法的具体描述为：每个进程有一个进程控制块（ PCB）表示。进程控制块可以包含如下信息：进程名、...

操作系统进程调度模拟程序

//time.h#ifndef TIME_H#define TIME_H/*一个模拟时间的类，被PCB和Pattemper使用 *作为数据成员，或者作为参数进行传递，类 *只定义了几个操作符重载的函数用来作为参数 *和成员在计算中的使用。类本身会保证构造的时间 *都是正确的格式，如果不争取会置为零值或者抛出异常 *默认的复制控制符合要求 */#include #include usin

2013-05-19《进程管理模拟的实现》

#include #include #include #include #define getpcb (type) (type*)malloc(sizeof(type)) #define getpcb(type) (type*)malloc(sizeof(type)) typedef struct pcb{ int id; //进程序号 int ra; //所需资源A的

14顶1踩