<!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>