zoukankan      html  css  js  c++  java
  • JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口:

      

    <html>
          <head>
               <title></title>
              <script type="text/javascript“ src="JQuery.js"></script>
              <script type="text/javascript">
                      $(document).ready(function(){  //这里就是JQuery程序入口了;                  
                          alert("HELLO JQUERY");    //测试一下喵一下看看Jquery库引用成功了吗!
                      });
              </script>
          </head>
       
          <body>
          </body>
    </html>

    Jquery CSS 选择符:         

     Jquery基本的选择符
     标签名: $('p')  取得文档中的所有段落 
     ID     #some-id  $('#some-id')  取得文档中ID为Some-id的一个元素
     Class           .some-class $('.some-class')  取得文档中类为som-class的所有元素

     

        


    还有一点CSS当中的选择符在Jquery中同样是可以使用的,不仅如此Jquery还有一套自己的自定义的选择符让我们使用;

    CSS当中的选择符:

        

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS 选择符</title>
    </head>
    <style type="text/css">
        .p{background:#ccc; color:#FFF; font-weight:bold;}
        .test1{font-size:20px; color:#666;}
        .test2{font-size:30px; color:blue;}
    </style>
    <script type="text/javascript" src="../Jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                    $('p').addClass('p');
                    $('#test1').addClass('test1');
                    $('.test2').addClass('test2');
            });
    </script>
    <body>
        <p>Hello Jquery!!!!<p>
        <div id="test1">ID-Test1</div>
        <div class="test2">Class-Test3</div>
    </body>
    </html>

    效果:

      


    其他的一些CSS的选择器也是可以使用的如:

          通配选择符 * { sRules }

          类型选择符  E { sRules }

          属性选择符:

                  (1)E [ attr ] { sRules }
                (2)E [ attr = value ] { sRules }
                (3)E [ attr ~= value ] { sRules }
                (4)E [ attr |= value ] { sRules }

           包含选择符  E1 E2 { sRules }

                    子对象选择符 E1 > E2 { sRules }

            类选择符      E.className { sRules }

          选择符分组   E1 , E2 , E3 { sRules }

         伪类及伪对象选择符:

                (1)E : Pseudo-Classes { sRules }
                (2)E : Pseudo-Elements { sRules } 

  • 相关阅读:
    Iphone开发-NSdata 与 NSString,Byte数组,UIImage 的相互转换
    Iphone访问WCF服务 之 ASIHTTPRequest
    TP6 实现上传文件
    页面自适应纯CSS,使用rem单位
    jQuery解决高度统一问题
    dedecms Ajax异步获取文章列表
    手机端页面自适应解决方案—rem布局
    mysql中bigint、int、mediumint、smallint 和 tinyint的取值范围
    修改PHP 上传文件大小限制
    WampServer下修改和重置MySQL密码
  • 原文地址:https://www.cnblogs.com/flay/p/3513313.html
Copyright © 2011-2022 走看看