一.jquery选择器
基本选择器
层次选择器
过滤选择器
基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
first : 获取单个元素 $("div:first").css("background","red");
first-child ：获取集合 获取每一个父元素的第一个元素 $("div:first-child").css("background","red");
以下类似
last 与last-child nth-child 与 eq
==============================================
：parent 选取含有子元素或者文本元素 $("div:parent").css("background","aquamarine");
：parents
表单属性过滤
：checked 单选框 复选框
：selected 下拉框
表单选择器
不一一举例。之讲解一些自己经常误解的
<script type="text/javascript">
$(function(){
//注意区分类似这样的选择器
//虽然一个空格，却截然不同的效果.
var $t_a = $('.test :hidden'); //后代选择器
var $t_b = $('.test:hidden'); //过滤选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
$("<p>$('.test :hidden')的长度为"+len_a+"</p>").appendTo("body");
$("<p>$('.test:hidden')的长度为"+len_b+"</p>").appendTo("body");
})
</script>
二. 模板文件
<body> <button id="reset">手动重置页面元素</button>
<input id="isreset" type="checkbox" checked="checked"><label for="isreset">点击下列按钮时先自动重置页面</label><br><br>
<h3>基本选择器.</h3> <!-- 控制按钮 -->
<input id="btn1" type="button" value="选择 id为 one 的元素.">
<input id="btn2" type="button" value="选择 class 为 mini 的所有元素.">
<input id="btn3" type="button" value="选择 元素名是 div 的所有元素.">
<input id="btn4" type="button" value="选择 所有的元素.">
<input id="btn5" type="button" value="选择 所有的span元素和id为two的元素."> <br><br> <!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div> </div> <div title="test" class="one" id="two">
id为two,class为one,title为test的div.
<div title="other" class="mini">class为mini,title为other</div>
<div title="test" class="mini">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 title="tesst" class="mini">class为mini,title为tesst</div>
</div> <div class="none" style="display: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" style="height: 70.5px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; margin-top: 2.5px; margin-bottom: 2.5px; display: block;">正在执行动画的span元素.</span> </body>
三
四. 举个栗子
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$(this).find('span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$(this).find('span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>