JQuery选择器

</head>

<body>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>


<div class="one" id="two" title="test">
id为two,class为one,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 class="one">

<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">

<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为none的div</div>

<div class="hide">class为hide的div</div>

<div>包含Input的type为hidden的div<input type="hidden" size="8" /></div>

<span id="mover">正在执行动画的span元素</span>
</body>


<script>
$(function(){
//$("#one").css("background","#bbffaa");
//$(".mini").css("background","#bbffaa");
//$("body div").css("background","#bbffaa"); //改变body内所有div的背景颜色
//$("body>div").css("background","#bbffaa"); //改变body内子div(不包括后代)的背景颜色
//$(".one+div").css("background","#bbffaa") //改变class为one的下一个div元素的背景颜色
//$("#two~div").css("background","#bbffaa") //改变Id为two的元素后面的所有div兄弟元素的背景颜色
//$("div:first").css("background","#bbffaa"); //改变第一个div元素的背景颜色
//$("div:last").css("background","#bbffaa"); //改变最后一个div元素的背景颜色
//$("div:not(.one)").css("background","#bbffaa"); //改变class不为oned的div元素的背景颜色
//$("div:even").css("background","#bbffaa"); //改变索引值为偶数的div元素的背景颜色
//$("div:odd").css("background","#bbffaa"); //改变索引值为奇数的div元素的背景颜色
//$("div:eq(3)").css("background","#bbffaa"); //改变索引值为3的div元素的背景颜色
//$("div:gt(3)").css("background","#bbffaa"); //改变索引值大于3的div元素的背景颜色
//$("div:lt(3)").css("background","#bbffaa"); //改变索引值小于3的div元素的背景颜色
//$(":header").css("background","#bbffaa"); //改变所有的标题元素,例如<h1><h2>的背景颜色
//$(":animated").css("background","#bbffaa"); //改变正在执行动画元素的背景颜色
//$("div:contains(di)").css("background","#bbffaa"); //改变含有文本di的div元素的背景颜色
//$("div:empty").css("background","#bbffaa"); //改变不含有子元素的div元素的背景颜色
//$("div:has(mini)").css("background","#bbffaa"); //改变含有class为mini的div元素的背景颜色
//$("div:parent").css("background","#bbffaa"); //改变含有子元素的div元素的背景颜色
//$("div:visible").css("background","#bbffaa"); //改变所有可见的div元素的背景颜色
//$("div:hidden").show(3000); //显示隐藏的div元素
//$("div[title]").css("background","#bbffaa"); //改变含有属性title的div元素的背景颜色
//$("div[title=test]").css("background","#bbffaa"); //改变含有属性title=test的div元素的背景颜色
//$("div[title!=test]").css("background","#bbffaa"); //改变含有属性title不等于test的div元素的背景颜色
//$("div[title^=te]").css("background","#bbffaa"); //改变含有属性title以te开头的div元素的背景颜色
//$("div[title$=est]").css("background","#bbffaa"); //改变含有属性title以est结尾的div元素的背景颜色
//$("div[title*=es]").css("background","#bbffaa"); //改变属性title含有es的div元素的背景颜色
//$("div.one:nth-child(2)").css("background","#bbffaa"); //改变class为One的div的父元素下第二个子元素的背景颜色{注意:nth-child(index)索引从1开始,:eq(index)索引从0开始}
//$("div.one:first-child").css("background","#bbffaa"); //改变class为One的div的父元素下第一个子元素的背景颜色
//$("div.one:last-child").css("background","#bbffaa"); //改变class为One的div的父元素下最后一个子元素的背景颜色


//下面是一些表单的选择器

//$(#form1 input:enabled).val("这里改变了"); //改变表单内可用的Input元素的值
//$(#form1 input:disabled).val("这里改变了"); //改变表单内不可用的Input元素的值
//$("input:checked").length; //获取多选框选中的个数
$(selected:selected).text(); //获取下拉框选中的内容

})
</script>

posted @ 2012-01-29 16:40  rason2008  阅读(231)  评论(0编辑  收藏  举报