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