【java失业择业中】失业第四天：准备面试

1.jQuery基础

学好jquery的一个基础条件是学好css层叠样式，因为很多时候这2个是一块配合使用的。

页面中很多需要jquery实现的效果只是通过jquery的选择器，选中要操作的元素，添加一些css特效而已。当然jquery也有一些自己的特效，像fadeIn(),fadeOut()等。

1. 基础实例：

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

2. jQuery选择器：

2.1 jQuery元素选择器

使用css选择器来选取HTML元素

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2.2 jQuery属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

2.3 jQuery CSS选择器

$("p").css("background-color","red");

粘贴一段昨儿看书敲的网络相册的代码，实现相册翻页的功能

 

var currentSre;
		var bMargin;
		//单击”上一幅“链接
		$("#prev").click(function(){
			currentSre = $("#showPic").find("img").attr("src");//目前图片的地址
			//根据目前图片地址获取上一幅图片的地址
			var iNum = parseInt(currentSre.substring(currentSre.lastIndexOf("/") + 1 , currentSre.lastIndexOf(".jpg")))	;
			var iPre = (iNum == 1)?iPicNum:(iNum - 1);
			var preSrc = "photo/" + iPre.toString() + ".jpg";
			$("#showPic").find("img").attr("src",preSrc);
			
			bMargin = $("div:has(img[src$=/"+iPre.toString()+".jpg])").hasClass("ls");
			//根据缩略图的属性对应调整大图的位置
			if(bMargin)
				$("#showPic").find("img").css("margin-top","170px");
			else
				$("#showPic").find("img").css("margin-top","0px");
		});
		
		//单击"下一幅"链接
		$("#next").click(function(){
			currentSre = $("#showPic").find("img").attr("src");//目前图片的地址
			//根据目前图片地址获取上一幅图片的地址
			var iNum = parseInt(currentSre.substring(currentSre.lastIndexOf("/") + 1 , currentSre.lastIndexOf(".jpg")))	;
			var iPre = (iNum == iPicNum)?1:(iNum + 1);
			var preSrc = "photo/" + iPre.toString() + ".jpg";
			$("#showPic").find("img").attr("src",preSrc);
			
			bMargin = $("div:has(img[src$=/"+iPre.toString()+".jpg])").hasClass("ls");
			//根据缩略图的属性对应调整大图的位置
			if(bMargin)
				$("#showPic").find("img").css("margin-top","170px");
			else
				$("#showPic").find("img").css("margin-top","0px");
		});