码迷,mamicode.com
首页 > Web开发 > 详细

jQuery5 选择器深入学习

时间:2015-08-19 10:40:36      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

技术分享

下面有一个详细的小例子

<!DOCTYPE html>
<html>
<head>
<title>Accordion Menus</title>
<style type="text/css">
    body{font-size:12px;text-align:center}
    .clsFrame{width:300px;height:100px}
    .clsFrame div,span{display:none;float:left;
    width:65px;height:65px;border:solid 1px #ccc;margin:8px}
    .clsOne{background-color:#eee}
</style>
 <script language="javascript" src="jquery-2.1.1.js"> </script>
 <script language="javascript"  type="text/javascript" >
     $(function(){
         //ID匹配元素
         $("#divOne").css("dispaly","block");
     });
     $(function(){//元素名匹配元素
         $("div span").css("dispaly","block");});
     $(function(){//类匹配元素
         $(".clsFrame").css("dispaly","block");});
     $(function(){//匹配所有元素
         $("*").css("dispaly","block");});
     $(function(){//合并配合元素
         $("#divOne,span").css("dispaly","block");});
 
 </script>
</head>
<body>
    <div class="clsFrame">
        <div id="divOne">id</div>
        <div class="clsOne">class</div>
        <span>span</span>
    </div>
</body>

</html>

技术分享

 

技术分享

技术分享

技术分享技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享技术分享技术分享

技术分享

技术分享技术分享技术分享技术分享技术分享

一个综合案例:

技术分享技术分享

 

技术分享技术分享技术分享

jQuery5 选择器深入学习

标签:

原文地址:http://www.cnblogs.com/CooderIsCool/p/4741331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!