zoukankan      html  css  js  c++  java
  • jquery实战之jquery选择器

    这些虽然文档上已经写的很详细了,但自己感觉还是写一遍会更有印象

    jquery选择器可以分为四大类,分别为:1.基本选择器  2.层次选择器  3.过滤选择器  4.表单选择器,不过过滤选择器还可以细分为6小类:(1).简单过滤选择器  (2).内容过滤选择器(3).可见性过滤选择器  (4).属性过滤选择器  (5).子元素过滤选择器  (6).表单对象属性过滤选择器

    1.基本选择器:

    选择器                  功能

     #id                根据给定的id匹配一个元素

     element               根据给定的元素名匹配所有的元素

    .class                根据给定的类匹配元素

     *                   匹配所有的元素

     selector1,selector2..          将每一个选择器匹配到的元素合并后一起返回

    示例:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>BasicSelector.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src = "js/jquery-1.4.2.js"></script>
        <style type="text/css">
            body{font-size:12px;text-align:center}
            .clsFrame{width:300px;height:100px;border:solid 1px #ccc;}
            .clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc; margin:8px}
            .clsOne{background-color:#eee}
        </style>
        <script type="text/javascript">
            //ID匹配元素,显示为沈亮1
            $(function(){
                $("#divOne").css("display","block");
            })
            //元素名匹配元素,即div下的span,显示为沈亮3
            $(function(){
                $("div span").css("display","block");
            })
            //类匹配元素,即.clsFrame类下的.clsOne类,显示为沈亮2
            $(function(){
                $(".clsFrame .clsOne").css("display","block");
            })
            //匹配所有元素,全部显示
            $(function(){
                $("*").css("display","block");
            })
            //合并匹配元素,这里是使用,隔开,显示两个元素下内容为沈亮1,沈亮3
            $(function(){
                $("#divOne,span").css("display","block");
            })
        
        </script>
      </head>
      
      <body>
        <div class = "clsFrame">
            <div id = "divOne">沈亮1</div>
            <div class = "clsOne">沈亮2</div>
            <span>沈亮3</span>
        </div>
      </body>
    </html>

    显示的效果:

    最近考试没时间整理,尽快完成

  • 相关阅读:
    Cygwin下,不让VIM自动生成~备份文件
    Cygwin下,从windows复制粘贴到vim中
    nasm汇编指令, partcopy复制指令
    如何编写自己的操作系统(1)
    已超过传入消息(65536)的最大消息大小配额。若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性
    Jquery 仿手机滑屏效果 LyhucTouchSlider
    xp QQ2009无法卸载
    DataContract 添加到 DataContractSet,因为已经存在数据协定名称也为命名空间
    Jquery Slider 插件 lyhucSlider
    C# 年会抽奖程序
  • 原文地址:https://www.cnblogs.com/shenliang123/p/2550082.html
Copyright © 2011-2022 走看看