• 选择器——2——基本选择器


    根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器层次选择器过滤选择器表单选择器四大类。

    其中,在过滤选择器中又可分为:简单过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器表单对象属性过滤选择器6种。其分类结构如图所示:

    基本选择器是jQuery中使用最频繁的选择器,它由元素IdClass元素名多个选择组成,

    通过基本选择器可以实现大多数页面元素的查找,其详细说明如下表所示。

    选择器 功能 返回值
    #id 根据给定的ID匹配一个元素 单个元素
    element 根据给定的元素名匹配所有元素 元素集合
    .class 根据给定的类匹配元素 元素集合
    * 匹配所有元素 元素集合
    selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合

     Demo如下:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
     2 Transitional//EN"
     3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head>
     6 <title>使用jQuery基本选择器</title>
     7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script>
     8 <style type="text/css">
     9     body{font-size:12px;text-align:center}
    10     .clsFrame{300px;height:100px}
    11     .clsFrame div,span{display:none;float:left;
    12                        65px;height:65px;border:solid 1px #ccc;
    13                        margin:8px}
    14     .clsOne{background-color:#eee}
    15 </style>
    16 <script type="text/javascript">
    17     $(function(){    // ID 匹配元素
    18         //$("#divOne").css("display","block");
    19     });
    20     $(function(){    // 元素名匹配
    21         //$("div span").css("display","block");
    22     });
    23     $(function(){    // 类匹配元素
    24         //$(".clsFrame .clsOne").css("display","block");
    25     });
    26     $(function(){    // 匹配所有元素
    27         //$("*").css("display","block");
    28     });
    29     $(function(){    // 合并匹配元素
    30         $("#divOne,span").css("display","block");
    31     });     
    32 </script>
    33 </head>
    34 <body>
    35 <div class="clsFrame">
    36     <div id="divOne">ID</div>
    37     <div class="clsOne">CLASS</div>
    38     <span>SPAN</span>
    39 </div>
    40 </body>
    41 </html>
    Demo
  • 相关阅读:
    JS解析json数据(如何将json字符串转化为数组)
    c/c++学习笔记(11)
    c/c++学习笔记(14)
    c/c++学习笔记(9)
    c/c++概念整理1
    c/c++学习笔记(10)
    c/c++学习笔记(2)
    《c和指针》笔记3
    c/c++学习笔记(3)
    c/c++学习笔记(13)
  • 原文地址:https://www.cnblogs.com/duffy/p/4016034.html
Copyright © 2020-2023  润新知