读Hean first jQuery笔记2(常用方法)

ready  是加载DOM时要做的事情

hide    是隐藏

show   是显示

slideUp向上滑动并消失

slideDown向上滑动并显示

unbind 解除绑定的事件,无参是解除所有事件,有参是解除参数对应的事件

bind 为一个元素添加一个事件监听


//为id为myElement的元素添加一个focus事件监听着。
$("#myElement").bind('focus',function(){
   alert("i've got focus");
})

hover 有两个处理函数作为参数


$(".guess_box").hover(
//this is the mouseenter event handler
//用户停在方框上时
function () {
$(this).addClass("my_hover");
},
//this is the mouseleave event handler
function () {
 //删除css类
 $(this).removeClass("my_hover");
});  // End hover



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src=scripts/jquery-1.5.2.min.js></script>
<script>
	//html和css是控制web页面如果构建和显示的,无法为web页面增加行为
	//js和jq是对浏览器下达命令,让浏览器干事的,操作的是DOM
	//$()是jQuery函数的简写名,利用这个快捷方式就不用每次调用jQuery函数时写上jQuery()
	
	//Document Object Model 是DOM(文档对象模型) 
	//ready是加载DOM时要做的事情
	$(document).ready(function(){
		alert(12);
		$("#button").click(function(){
			alert(1);
			//缓慢隐藏
			$("h1").hide("slow");
			//快速显示
			$("h2").show("fast");
			//元素向上滑动并消失     向下并到达css设定的高度是slideDown
			$("h3").slideUp();
		});
	});
</script>
<title>Insert title here</title>
</head>
<body>
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<input type="button" value="button" id="button">
</body>

</html>


animate    设置动画

css            设置css

toggle        切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素


<!DOCTYPE html>
<html><head> <title>jQuery Meets the DOM</title> 
<style> 
#change_me {position: absolute; top: 100px; left: 400px; font: 24px arial;}
#move_up #move_down #color #disappear {padding: 5px;}
</style> 
 <script src=scripts/jquery-1.5.2.min.js></script>
</head> 
<body>  
	<button id="move_up">Move Up</button>
	<button id="move_down">Move Down</button>
	<button id="color">Add Color</button>
	<button id="disappear">Disappear/Re-appear</button>     
	
	<div id="change_me">Make Me Do Stuff!</div> 
<script> 
	$(document).ready(function() {
		$("#move_up").click( function() {
				$("#change_me").animate({top:30},200); 
		});//end move_up
		$("#move_down").click( function() {	
				$("#change_me").animate({top:500},2000);  
		});//end move_down
		$("#color").click( function() {
				$("#change_me").css("color", "purple");	
		});//end color
		$("#disappear").click( function() {
				$("#change_me").toggle('slow'); 
		});//end disappear
	});//end doc ready
</script> 
</body> 
</html>

fadeIn        淡入淡出

slideToggle    相反动作,原来朝上就变成朝下,原来朝下的变成朝上


<!DOCTYPE html>
<html>
	<head>
		<title>Furry Friends Campaign</title>
		<link rel="stylesheet" type="text/css" href="styles/my_style.css">
	</head>
	<body>
		<div id="clickMe">Show me the the Furry Friend of the Day</div>
		<div id="picframe">
			<img src="images/furry_friend.jpg">
		</div>
		<script src="scripts/jquery-1.6.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#clickMe").click(function() {
					//FadeIn   FadeOut  FadeTo  FadeToggle
					$("img").fadeIn(1000);
					//slideToggle是相反动作,原来朝上就变成朝下,原来朝下的变成朝上
					$("#picframe").slideToggle("slow");
				});
			});
		</script>
	</body>
</html>


往上是parent
往下是children
左右是 prev next
遍历所选元素同一层上的所有元素  siblings
删除一个元素中的内容而不是元素本身 $("p").empty();
遍历一个元素的所有父元素 parents
想找到所选元素最近的父元素 closest   类似于parents,会上行查找父元素,匹配到第一个就会停止


window常用方法

读Hean first jQuery笔记2(常用方法)_第1张图片


定时器方法告诉函数何时运行

读Hean first jQuery笔记2(常用方法)_第2张图片



你可能感兴趣的:(读Hean first jQuery笔记2(常用方法))