zoukankan      html  css  js  c++  java
  • 一、jQuery选择器之基本选择器

    获得页面各种元素节点

    1.$(#id属性值)

    $('#useremail').css('color','red');

    2. $(tag标签名称)

    $('h2').css('backgroundColor','pink');
    $('input').css('backgroundColor','lightblue');

    3.$(.class属性值)

    $('.pear').css('fontSize','30px');

    4.$(*) 通配符(获得页面"全部"元素节点对象)
             

    $('*').css('backgroundColor','gray');

    5.$(s1,s2,s3) 联合选择器,节点满足s1/s2/s3之一条件即可 (s的意思selector)
              

    $('h2,#userqq').css('color','green');

    下面是完整例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="description" content="" />
            <meta name="keywords" content="" />
    
            <script type="text/javascript" src="./jquery-1.4.4.js"></script>
            <script type="text/javascript">
            function f1(){
                //获得页面各种元素节点
                //① $(#id属性值)
                $('#useremail').css('color','red');
    
                //② $(tag标签名称)
                $('h2').css('backgroundColor','pink');
                $('input').css('backgroundColor','lightblue');
    
                //③ $(.class属性值)
                $('.pear').css('fontSize','30px');
    
                //④ $(*) 通配符(获得页面"全部"元素节点对象)
                //$('*').css('backgroundColor','gray');
    
                //⑤ $(s1,s2,s3) 联合选择器,节点满足s1/s2/s3之一条件即可
                //    (s的意思selector)
                $('h2,#userqq').css('color','green');
            }
            </script>
            <style type="text/css">
            /*
            #username{}
            #useremail{}
            .pear{}
            input{}
            *{样式初始化}
            #username,.apple,input{}
            */
            </style>
        </head>
        <body>
            <h2>jquery基本选择器(思想来之css样式选择器)</h2>
            <p><input type="text" id="username" value="linken" /></p>
            <p><input type="text" id="useremail" class="apple" value="linken@163.com" /></p>
            <p><input type="text" id="userqq" class="pear" value="28323782943" /></p>
            <p><input type="button" value="触发" onclick="f1()" /></p>
        </body>
    </html>
  • 相关阅读:
    4-11
    4-10
    4-9
    4-7
    4-8
    4-6
    4-4
    4-5
    4-3
    4-2
  • 原文地址:https://www.cnblogs.com/zhizhu1120418975/p/6765285.html
Copyright © 2011-2022 走看看