<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jquery9.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.high{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
//样式
/*$("input:first").click(function(){
//$("p:first").attr("class","high");
//$("p:first").attr("class","high");//增加样式
//$("p:first").removeClass("high");//删除样式//移除class的某个值
//$("p:first").removeClass();//移除多有的class的值
//切换
//$("p:first").toggleClass("high");
//alert($("p:first").hasClass("asd"));//判断是否有该样式
//alert($("p:first").is(".high"));//判断是否有该样式
//attr()和addClass的区别
//$("p:first").attr("class","aaa");//把原来的class的值清空，再将aaa赋给它
//$("p:first").addClass("asdas");//是再原来的class的基础上加上asdas
//text和html的区别
//$("p:first").html("<a href='#'>asd</a>");
//$("p:first").text("<a href='#'>asd</a>");//显示的结果是一段文字<a href='#'>asd</a>
//$("input:first").val("asdsa");
});*/
$("input:first").focus(function(){
$(this).val(' ');
});
$("input:first").blur(function(){
var val = $(this).val();
if(val == ' ')
{
$(this).val('caohuan')
}
});
$("input:eq(2)").click(function(){
alert($("input:first").get(0).defaultValue);//defaultValue表示得到文本框内默认的值。
});
var s = $("body").children();
var s1 = $("ul").children();
for(var i = 0; i < s1.length; i++)
{
//alert(s1[i].innerHTML);
}
$("p").click(function(){
//alert($('p').prev().children()[0].innerHTML);//取得紧依着的前面的第一个元素
//alert($("$('p').next().children()[0]").attr("title"));//取得紧依着的后面第一个元素
//alert($('p').next().children()[0].innerText);//
//$("p:first").siblings().each(function(i,n){//取得它的上下的兄弟元素
//alert($(this).val());
//alert($("p").parent().css("background","red"));//得到它的父辈，只有唯一值
alert($("ul li:first").parents().length);
// });
});
});
</script>
</head>
<body>
<!-- <input type="button" value="点击">
<p title="test">曹欢</p>
<p title="test" class="high asd">曹欢</p>--><!-- 注意：class可以有多个值，用空格隔开 -->
<input type="text" value="caohuan"><br>
<input type="password"><br>
<input type="button" value="click me" >
<ul>
<li>赵胜龙</li>
<li>黄文涛</li>
<li>刘志发</li>
<li>曹欢</li>
</ul>
<p title="我爱你">惦记我？</p>
<ul>
<li title="asd">赵胜龙</li>
<li>黄文涛</li>
<li>刘志发</li>
<li>曹欢</li>
</ul>
<ul>
<li>赵胜龙</li>
<li>黄文涛</li>
<li>刘志发</li>
<li>曹欢</li>
</ul>
</body>
</html>