zoukankan      html  css  js  c++  java
  • [ jquery 选择器 :first :first-child ] 实例分析: :first :first-child 之间在元素选取方面的区别

    实例分析:  :first  :first-child  之间在元素选取方面的区别

    实例:

    <!DOCTYPE html>
    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta http-equiv='description' content='this is my page'>
    <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    <style type='text/css' >
        *{margin:0;padding:0;}
        html{font:400 15px/1.2em 'Courier New';color:#666;}
        div > *{margin:10px 0;cursor:pointer;}
        #demo{750px;margin:75px auto;}
        button{padding:5px 15px;border:0;outline:none;margin-top:-5px;border-radius:2px;font:400 12px/1.2em 'Courier New';}
        .active{background-color:yellow;transition: .3s;}
        .hover{background-color:red;transition: .3s}
        p{text-indent:8px;}
    </style>
    <script type='text/javascript'>
        $(function(){
          $('#first').click(function(){
            $('p:first').toggleClass('hover');
          });
          $('#firstChild').click(function(){
            $('p:first-child').toggleClass('active');
          });
        });
    </script>
    </head>
    <body>
        <div id='demo'>
            <div style='border:1px solid #3695BC'>
                <p>The first paragraph in div.</p>
                <p>The last paragraph in the div.</p>
            </div>
            <div style='border:1px solid #3695BC'>
                <p>The first paragraph in another div.</p>
                <p>The last paragraph in another div.</p>
            </div>
            <button id='first'>:first</button>
            <button id='firstChild'>:first-child</button>
        </div>
    </body>
    </html>
  • 相关阅读:
    树莓派开机启动
    树莓派连接18b20测温度
    树莓派VNC
    树莓派python 控制GPIO
    树莓派笔记
    用nohup执行python程序时,print无法输出
    mysql 函数应用
    mysql 正则表达式判断是否数字
    mysql select into 不支持
    tushare
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5613559.html
Copyright © 2011-2022 走看看