jQuery基础案例1

最新推荐文章于 2025-08-12 06:02:38 发布

原创最新推荐文章于 2025-08-12 06:02:38 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #css #ViewUI

jQuery1.7.2 专栏收录该内容

2 篇文章

订阅专栏

效果图：
[img]http://dl.iteye.com/upload/picture/pic/120840/39c98efe-ca17-3590-a221-70a4cfe066cc.png[/img]
页面代码，包含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>