【锋利的Jquery】读书笔记二
一.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>
