zoukankan      html  css  js  c++  java
  • 选择器——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
  • 相关阅读:
    头像切换封装
    JSON数据的序列化方法
    HTML5 LocalStorage 本地存储
    onhashchange实现下一页与上一页功能,并且实现当前页面刷新时停留在当前页面
    提交页面可输入的数据-----XSS漏洞
    js冒泡排序
    html实现将网页页面分享到微信朋友圈添加缩略图图片的方法
    js常用正则表达式
    C 传递指针给函数
    C 指向指针的指针
  • 原文地址:https://www.cnblogs.com/duffy/p/4016034.html
Copyright © 2011-2022 走看看