<%@ 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 'jquery3.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">
*{
font:4;
color:RosyBrown;
}
div{
border:1px solid red;
width:210px;
height:210px;
margin:10px;
float:left;
background:SeaShell;
}
div.mini{
width:80px;
height:80px;
margin:10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//基本选择器
//1、ID选择器
$(document).ready(function()
{
/*alert($("#test1")[0].href);
alert($("#test1").length);//只返回一个元素
alert($("#test1").html());//返回的是<h1>goole</h1>
alert($("#test1").text());//返回的是goole
alert($("#test1")[0].innerHTML);*/
//alert($("#test1")[0].innerHTML);
//alert($("#test1")[0].innerText);//在IE中显示google，在火狐中显示undefined
});
//2、类选择器
$(document).ready(function(){
//$(".test").css("fontSize","80px");
//$("h1.test").css("color","red");
//3、标签选择器
//$("p").css("color","green");
//群选择器
//$("p,h1.test").css("color","brown");
$("*").css("fontSize","20px");
});
$(document).ready(function()
{
$("#test1").click(function(){
$("#one").css("background","red");}
);
$("#test2").click(function()
{
$(".mini").css("backgroundColor","blue");;
});
$("#test3").click(function()
{
$("div").css("background","orange");
}
);
$("#test4").click(function()
{
$("*").css("background","blue");
}
);
$("#test5").click(function()
{
$("span,div.mini").css("background","pink");
});
//层级选择器
$("#test6").click(function()
{
$("body div").css("background","red");//选择body内的所有的div元素，然后给它赋值。(不管是直接的后代，还是间接的，只要是再body中的div都要
设置。)
}
);
$("#test7").click(
function()
{
$("body > div").css("background","orange");//选择的是body内的子标签(div)，它只会选择子标签。如果是子标签嵌套的子标签不会起作用
}
);
$("#test8").click(function()
{
$(".one + div").css("background","red");//选择的是class = one的最近的那个标签的。
}
);
$("#test9").click(function()
{
$(".two~div").css("background","red");//选择的是class = two 的后面的兄弟标签(就是属于同一级别的)
});
});
</script>
</head>
<body>
<div id="asd">asdasd</div>
<input type="button" value="button1" id="test1"><br>
<input type="button" value="button2" id="test2"><br>
<input type="button" value="button3" id="test3"><br>
<input type="button" value="button4" id="test4"><br>
<input type="button" value="button5" id="test5"><br>
<input type="button" value="button6" id="test6"><br>
<input type="button" value="button7" id="test7"><br>
<input type="button" value="button8" id="test8"><br>
<input type="button" value="button9" id="test9"><br>
<div id="one" class="one">
id为one，class为one的div
<div class="mini">
class为mini
</div>
</div>
<div id="one" class="two" title="test">
id为one，class为two,title为test的div
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
</div>
<div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div>
<input type="hidden">
包含input的type为"hide"的div
</div>
</body>
</html>
<%@ 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 'jquery4.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">
*{
font:16px;
color:RosyBrown;
}
div{
border:1px solid red;
width:210px;
height:210px;
margin:10px;
float:left;
background:SeaShell;
}
div.mini{
width:80px;
height:80px;
margin:10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//以下三种形式都可以
/*$(document).ready(
function(){
$("#button1").click(function(){
alert("asd");
$("div:contains('caohuan')").css("background","red");
});
});*/
//$().ready(function(){});
/*$(function(){
//内容选择器
$("#button1").click(function(){
$("div:contains('caohuan')").css("background","red");//返回的是包含'caohuan'的div,包含它的外套div
});
$("#button2").click(function(){
$("div:empty").css("background","red");//返回的是不包含任何子标签，或热河文本元素的div
});
$("#button3").click(function(){
$("div:has(p)").css("background","red");//返回包含有所匹配的元素的div
});
$("#button4").click(function()
{
$("div:parent").css("background","green");匹配含有子元素或者文本的元素
});
//可见性的选择器和效果的基本效果
$("#button5").click(function(){
$("div:hidden").show(10000).css("background","blue");//只能对display=none的起作用，对visibility=hidden的不起作用
});
$("#button6").click(function(){
$("div:visible").hide("slow",function(){alert("隐藏起来")});
});
$("#button7").click(function(){
$("div").toggle();
});
});*/
//属性选择器
/*$(function(){
$("#button1").click(function(){
//$("div[title]").css("background","orange");//含有title的div
//$("div[title=test]").css("background","red");//含有title的div并且title=test
//$("div[title!=test]").css("background","red");;//不含有（title的div并且title=test）,而且包含不包含title的div
//$("div[title^='te']").css("background","red");//包含title以te开头的div
//$("div[title$='asd']").hide(1000);////包含title以asd结束的div
//$("div[title*='o']").css('background','red');//包含title中包含o的div
$("div[id='one'][class^='tw']").css("background","red");//包含id=one并且class以tw开头的div
});
});*/
/*$(function(){
//子元素选择器
$("#button1").click(function(){
//$("div:nth-child(2)").css("background","red");//取得每个div下的第二个元素
//$("ul:nth-child(2)").css("background","red");
//$("div div:nth-child(3)").css("background","red");
//$("ul :first-child").css("background","red");
//$("div div:first-child").css("background","red");//选择的是div的第一个子元素
//$("div div:last-child").css("background","pink");
//$("div div:only-child").css("background","orange");//选择父元素中只含有一个元素的那个元素
});
});*/
//表单对象的属性的选择器
$(function(){
$("#button1").click(function(){
//$("input:enabled").css("background","red");//表单中可以使用的元素
//$("input:disabled").css("background","red");
//alert($("input:checked").length);
/*$.each($("input:checked"),function(i,n)//表单中选中后的radio或checkbox
{
alert("asd");
alert(n.checked);
n.checked = "false";
alert(n.checked);
});*/
$("select option:selected").css("fontSize","20px");
});
});
</script>
</head>
<body>
<input type="button" value="button1" id="button1">
<!--
<input type="text" readonly="readonly">
<input type="text" disabled="disabled">两者的区别在于，第一种只是文本不能读，但是可以使用；第二种是文本完全不能使用。
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<input type="button" value="button2" id="button2">
<input type="button" value="button3" id="button3">
<input type="button" value="button4" id="button4">
<input type="button" value="button5" id="button5">
<input type="button" value="button6" id="button6">
<input type="button" value="button7" id="button7">
<div id="one" class="one">
id为one，class为one的div
<div class="mini">
class为mini
</div>
</div>
<div id="one" class="two" title="testasd">
id为one，class为two,title为test的div<p>caohuan</p>
<div class="mini" title="other" title="asd">
class为mini,title为other,
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
</div>
<div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div style="display: none">我爱你</div>
<div style="display: none;">我的妈啊</div>
<div>
包含input的type为"hide"的div
<div style="width: 20px;height: 20px"></div>
</div>
-->
<form>
<input type="text" disabled="disabled"><br>
<input type="button"><br>
<input type="checkbox" checked="checked"><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image"><br>
<input type="radio" checked="checked"><br>
<select multiple="multiple">
<option selected="selected">a</option>
<option>b</option>
<option selected="selected">c</option>
<option>d</option>
</select><br>
</form>
</body>
</html>