jQuery的选择器...
层次选择器
<!-- 当点击h2元素时，为#menu下的<span>元素添加色为#09F的颜色背景 -->
<!-- <script type="text/javascript">
$(function () {
$(‘h2‘).click(function () {
$(‘#menu span‘).css(‘background-color‘,‘#09F‘);
});
});
</script>-->
基本选择器
<!-- 为标签选择器添加样式 -->
<script type="text/javascript">
$(function () {
$(‘h2‘).click(function () {
$(‘h3‘).css(‘background-color‘, ‘#09F‘);
});
});
</script>
基本过滤选择器
<script type="text/javascript">
$(function () {
$(‘h2‘).click(function () {
//$(‘li:first‘).css(‘background-color‘, ‘#09F‘);//第一个
//$(‘li:last‘).css(‘background-color‘, ‘#09F‘);//最后一个
//$(‘li:not(.three)‘).css(‘background-color‘, ‘#09F‘);//class不为three的元素
// $(‘li:even‘).css(‘background-color‘, ‘#09F‘);//索引值为偶数的元素
// $(‘li:eq(1)‘).css(‘background-color‘, ‘#09F‘);//索引值为1的元素
//$(‘li:gt(1)‘).css(‘background-color‘, ‘#09F‘);//索引值大于1的元素
//$(‘li:lt(1)‘).css(‘background-color‘, ‘#09F‘);//索引值小于1的元素
//$(‘:header‘).css(‘background-color‘, ‘#09F‘);//所有标题的元素
$(‘:focus‘).css(‘background-color‘, ‘#09F‘);//获取焦点的元素
});
});
</script>
可见性过滤选择器
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
// $(‘p:hidden‘).show();//显示文字
$(‘p:visible‘).hide();//隐藏文字
});
</script>
<style type="text/css">
#txt_show
{
display:none;color:#00C;
}
#txt_hide
{
display:block;color:#F30;
}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿~</p>
<input type="button" name="show" value="点击显示文字 " />
<input type="button" name="hide" value="点击隐藏文字 " />
</body>
属性选择器
<!--改变class属性的值为odds的元素的背景颜色 -->
<script type="text/javascript">
$(function () {
$("h2").click(function () {
$("[class=odds]").css("background-color", "#FFFFFF");
})
});
</script>
时间： 2024-10-17 21:27:51