9 个超实用的 jQuery 代码片段

资讯频道 → Web前端

14顶
1踩

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

代码片段 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]

发表评论

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

相关推荐

进程调度算法模拟程序设计

通过对进程调度算法的模拟，进一步理解进程的基本概念，加深对进程运行状态和进程调度过程、调度算法的理解。

模拟进程调度功能（操作系统原理实验）

设计进程调度功能，至少模拟两种以上调度算法。如：优先级调度算法、时间片调度算法等。进程调度功能作为一个函数 scheduler,加入到实验题目一中。进程调度程序从就绪队列中挑选进程，若队列为空，应显示“无就绪进程无法调度”的提示信息。若选上一个进程，以显示：进程名、状态、时间片、优先级等信息表示一个进程被执行。若运行完，应删除相应 PCB。

操作系统课程设计——进程调度模拟程序（JAVA语言实现）

本次课程设计的题目是，时间片轮转调度算法的模拟实现。要求在充分理解时间片轮转调度算法原理的基础上，编写一个可视化的算法模拟程序。I，O，W三条指令实际上是不占有CPU的，执行这三条指令就应该将进程放入对应的等待队列（输入等待队列，输出等待队列，其他等待队列）。操作时间代表该操作命令要执行多长时间（时间片个数）。这里假设I/O设备的数量没有限制，I和O设备都只有一类。4. 进程的个数，进程的内容（即进程的功能序列）来源于一个进程序列描述文件。模拟指令的格式：操作命令+操作时间。● O ：表示输出。

进程调度算法的模拟

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

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

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

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

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

操作系统实验一进程管理与进程同步

实现银行家算法、进程调度过程的模拟、读者-写者问题的写者优先算法。

进程调度模拟

此项准备是必须的，假设当前一组正在运行或者等待或者就绪的进程存储在文件中。你需要先创建此文本文件，并放置在你硬盘的某个地方。下面是文件的内容：第 1-4 列分别为：进程名，进程状态，运行时间，优先权。列之间用（若干）空格隔开。二、pcb、时间片、进程数量的定义：schedule.h。四、优先级高优选调度算法模拟。三、先来先服务调度算法模拟。五、时间片轮转调度算法模拟。

进程模拟调度实验

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

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

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

模拟进程调度（GUI实现）

操作系统上机作业，模拟实现进程创建，进程调度，进程阻塞，进程唤醒和进程撤销，从文件读取初始化进程，将过程存入文件均已实现，用pyqt5实现GUI界面，有良好的用户交互性

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

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

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

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

进程调度 FIFO 先进先出

进程调度 FIFO 先进先出页面置换算法

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

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

进程调度算法模拟与实现

进程管理进程管理是操作系统中的重要功能，用来创建进程、撤消进程、实现进程状态转换，它提供了在可运行的进程之间复用CPU的方法。在进程管理中，进程调度是核心，因为在采用多道程序设计的系统中，往往有若干个进程同时处于就绪状态，当就绪进程个数大于处理器数目时，就必须依照某种策略决定哪些进程优先占用处理器。调度算法编写允许进程并行执行的进程调度程序，在常用的进程（作业）调度算法：先来先服务算法、时间...

操作系统实验——处理器调度

处理器调度实验——FCFS, RR, SPN, SRT, HRRN实验题目代码实验题目随机给出一个进程调度实例，如：进程到达时间服务时间 A 0 3 B 2 6 C 4 4 D 6 5 E 8 2 模拟进程调度，给出按照算法先来先服务FCFS、轮转RR（q=1）、最短进程优先SPN、最短剩余时间SRT、最高响应比优先HRRN进行调度各进程的完成时间、周转时间、响应比的值。代码 #include <iost

操作系统课程设计完成了

终于弄好了课程设计，不过不是自己做的二：进程调度模拟程序设计要求：编写一程序，可以创建若干个虚拟进程，并对若干个虚拟进程进行调度，调度策略为时间片轮转。虚拟程序的描述：虚拟指令的格式：操作命令操作时间其中，操作命令有以下几种： l C : 表示在CPU上计算 l I ：表示输入 l O：表示输出 l W：表示等

14顶1踩