jquery的基本选择器和层级选择器

<%@ 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>

你可能感兴趣的:(jquery)