<!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></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//pre元素下的所有子孫元素。
//$("form input")選 中[ <input name="name" />, <input name="newsletter" /> ]
/*
$("form input").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//pre元素下的子元素。
//[ <input name="name" /> ]
/*
$("form>input").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//pre元素后的next元素。pre 與next平級
//[ <input name="name" />, <input name="newsletter" /> ]
/*$("label+input").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//[ <input name="none" /> ]
//prev元素之后所有sibings元素
//siblings和next不同，siblings返回的是，所有同輩元素的集合。next，僅是一個。
/*
$("form ~ input").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//這就是next方式，選 中的只有一個。
$("form +input").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
</script>
</head>
<body>
<form>
<label>Name:</label> <input name="name" />
<fieldset>
<label>Newsletter:</label> <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<input name="second" />
</body>
</html>
<!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></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//匹配找到的第一個元素
//[ <tr><td>Header 1</td></tr> ]
/*
$("tr:first").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//匹配找到的最后一個元素
//[ <tr><td>Value 2</td></tr> ]
/*
$("tr:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//能夠 checked的input才有:checked
/*
$("input:not(:checked)").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//偶數元素，從0開始計數
/*
$("tr:even").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});*/
//奇數元素，從0開始計數。
/*
$("tr:odd").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//匹配給定的索引的元素。
/*
$("tr:eq(1)").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});*/
//大于給定索引的元素。
/*
$("tr:gt(1)").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//小于給定索引元素的。此時只匹配index=0
/*
$("tr:lt(1)").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//匹配H1,H2,H3之類的標題元素。
// $(":header").css("background"."#EEE");
//:animated 所有正在執行動畫的元素
$("#run").click(function() {
$("div:not(:animated)").animate({
height : 'toggle',
opacity : 'toggle'
}, "slow");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
<input type="checkbox" name="apple" />
<input type="checkbox" name="flower" checked="checked" />
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<button id="run">Run</button>
<div>love you</div>
</body>
</html>
<!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 Content</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//所有包含給定的文本的元素
/*
$("div:contains('John')").hover(function() {
$(this).addClass("red");
}, function() {
$(this).removeClass("red");
});
*/
//不包含子元素或文本的元素。
/*
$("td:empty").hover(function() {
$(this).text("afaf");
}, function() {
$(this).addClass("red");
});
*/
//has(selector)
//匹配含有選擇器的元素的元素。
/*
$("div:has(p)").hover(function() {
$(this).addClass("red");
}, function() {
$(this).removeClass("red");
});
*/
//跟empty正好相反，含有子元素或文本的。
$("td:parent").hover(function() {
$(this).addClass("red");
}, function() {
$(this).removeClass("red");
});
});
</script>
</head>
<body>
<div id="one">
<p></p>
John Resig
</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>
J. Ohn
<table>
<tr>
<td>Value 1</td>
<td></td>
</tr>
<tr>
<td>Value 2</td>
<td></td>
</tr>
</table>
</body>
</html>
<!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>可見性</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
$("tr:visible").hover(function() {
$(this).css("display", "none");
$("tr:hidden").show();
});
});
</script>
</head>
<body>
<table>
<tr style="display: none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
</html>
<!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>可見性</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//包含給定屬性的元素。
/*
$("div[id]").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
*/
//指定屬性=value的元素。
//$("input[name='newsletter']").attr("checked", true);
//指定屬性!=value的元素。
//$("input[name!='newsletter']").attr("checked", true);
//指定元素屬性以xx開始的
//$("input[name^='accept']").attr("checked", true);
//指定元素屬性以xx結束的
//$("input[name$='r']").attr("checked", true);
//指定元素屬性以包含xx
//$("input[name*='let']").attr("checked", true);
//復合選擇器
$("input[id][name='newsletter']").attr("checked", true);
});
</script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2">has a id property</div>
<input id="test3" type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<input type="checkbox" name="acceptor" value="Sam Wang" />
</body>
</html>