jQuery基础案例1 -

qiyang318

浏览: 7165 次
性别:

最近访客更多访客>>

abwaker

风之谷少年

whrjsyzby

mideatt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-11 ( 5)
更多存档...

jQuery基础案例1

博客分类：

jQuery1.7.2

jquery html css

效果图：

页面代码，包含css 和 js代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
	$(function(){
		//alert('hello jquery');
		//样式
		$('#mydiv').css({
			'background-color':'#ccc',
			'width':'600px',
			'height':'40px'
		});
		
		//alert($('li').length);
		$('li').css({
			'float':'left',
			'font-size':'20px',
			'width':'100px',
			'line-height':'40px',
			'cursor':'pointer',
			'text-align':'center'
		});
		
		//事件 eq gt lt
		var dong = $('.mystyle');
		$('li').on({
			'mouseover':function(){
				$(this).css({
					'background-color':'red',
					'color':'white'
				});
			},'mouseout':function(){
				$(this).css({
					'background-color':'#ccc',
					'color':'black'
				});
			},'click':function(){
				//$('#dong').show(1000);
				//slideUp //动画
				dong.html("<h1>"+$(this).text()+"</h1>");
				
				if(dong.is(':visible')){
					dong.fadeOut(1000);
				}else{
					dong.fadeIn(1000);
				}
			}
		});
		//DOM操作
		//val();html();,text();
		dong.css({
			'background-color':'green',
			'width':'600px',
			'height':'400px',
			'display':'none'
		});
		
	});

	
</script>
<style type="text/css">
	.mystyle{
		
	}
</style>
</head>
<body>
	<div id="mydiv">
		<ul>
			<li>aaaaaaaa1</li>
			<li>aaaaaaaa2</li>
			<li>aaaaaaaa3</li>
			<li>aaaaaaaa4</li>
			<li>aaaaaaaa5</li>
			<li>aaaaaaaa6</li>
		</ul>
	</div>
	<div></div>
	<div class='mystyle'>
	
	</div>
</body>
</html>

分享到：