锋利的jQuery笔记

首先分清jQuery对象和DOM对象，这两者可相互转化，如：

var $cr=$("#cr");          //jquery对象
var cr=$cr[0] ;             //DOM对象

var cr=$cr.get(0);         //DOM对象

var cr=document.getElementById("cr");     //DOM对象
var $cr=$(cr);                                      //jquery对象

jquery选择器：

1.无论元素是否存在，$("xx")都都是一个对象，因此判断语句应这样写：

if ($("xx").length>0) {

}

2.

基本选择器：

$("#id")    $(".class")     $("*")      $("div,span,p.myclass")

层次选择器：

$("div span")                    后代元素范围大，只要是后代都满足

$("div>span")                   子元素范围小，只能是一级子元素才被选中

过滤选择器：

$("div:first")     格式以：开头

内容过滤选择器：

$("div:contains(text)")   同样以：开头，但以内容作为过滤依据

可见性过滤选择器：

属性过滤选择器：

子元素过滤选择器：

表单属性过滤选择器：

exa

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>example for html5</title>
   <script src="jquery.js" type="text/javascript"></script>
   
</head>

<body>
<div class="subcategorybox">
   <ul>
     <li><a href=#>佳能</a></li>
     <li><a href=#>索尼</a></li>
     <li><a href=#>三星</a></li>
     <li><a href=#>尼康</a></li>
     <li><a href=#>松下</a></li>
     <li><a href=#>卡西欧</a></li>
     <li><a href=#>富士</a></li>
     <li><a href=#>柯达</a></li>
     <li><a href=#>宾得</a></li>
     <li><a href=#>理光</a></li>
     <li><a href=#>奥林巴斯</a></li>
     <li><a href=#>明基</a></li>
     <li><a href=#>爱国者</a></li>
     <li><a href=#>其他</a></li>
   </ul>
</div>
<div class="showmore">
   <a href=# onclick="return false"><span>显示其他品牌</span></a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("div li:gt(6):not(last)").hide();

$(".showmore>a").click(

function(){
     if ($("li:hidden").length>0) 
         {
            $(".showmore>a").html("精简显示品牌");
            $("li:hidden").show();}
     else 
         {
            $(".showmore>a").html("显示其他品牌");
            $("div li:gt(6):not(:last)").hide();
     
         }
});        

});
</script>


</body>
</html>

 

posted @ 2017-07-10 15:32  kkdf  阅读(149)  评论(0)  编辑  收藏  举报