一、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>

 

posted @ 2017-04-25 23:30  《》  阅读(229)  评论(0)  编辑  收藏  举报