• 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>

    显示的效果:

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

  • 相关阅读:
    setTimeout和setInterval的使用
    (7)javascript的程序控制结构及语句------(2)循环控制语句、跳转语句、对话框
    (6)javascript的程序控制结构及语句-----(1)条件判断
    (5)Javascript的表达式
    (4)javascript的运算符以及运算符的优先级
    (3)javascript的数据类型
    (2)javascript的基本语法、数据结构、变量
    (1)认识javascript
    (14)网页布局剖析与制作(下)
    (13)网页布局剖析与制作(上)
  • 原文地址:https://www.cnblogs.com/shenliang123/p/2550082.html
Copyright © 2020-2023  润新知