jQuery基本选择器

什么是选择器

在页面上获得各种元素节点对象而使用的条件就是选择器。

document.getElementById()

document.getElementsByTagName();

document.getElementsByName();

 基本选择器

  • $(‘#id属性值’)  ----------->document.getElementById()

  • $(‘tag标签名称’)----------->document.getElementsByTagName();

  • $(‘.class属性值’) class属性值选择器

  • $(‘*’)     通配符选择器

  • $(‘s1,s2,s3’)联合选择器

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

        <script>
        function f1(){
            //① $('#id属性值')
            $('#username').css('color','red');

            //② $('tag标签名称')tag标签选择器
            $('input').css('background-color','blue');

            //③ $('.class属性值') class类别选择器
            $('.apple').css('background-color','green');

            //④ $('*') 通配符选择器
            //$('*').css('background-color','gray');

            //⑤ $('s1,s2,s3...')联合选择器selector
            $('p,#username,.apple').css('font-size','25px');
        }
        </script>

        <style type="text/css">
        #username{}
        p{}
        .apple{}
        *{}
        .apple,span,input{} /*联合选择器*/
        </style>
    </head>
    <body>
        <h2>基本选择器(灵感来源于css样式选择器)</h2>
        <input type="text" name="username" value="php中文网" id="username" /><br />
        <p>大家好</p>
        <div class="apple">欢迎来到php中文网</div>
        <span>让我们一起开始学习jQuery吧</span><br />

        <input type="button" value="触发" onclick="f1()" />
    </body>
</html>
继续学习
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//① $('#id')
$('#username').css('color','red');
//② $('tag')tag
$('input').css('background-color','blue');
//③ $('.class') class
$('.apple').css('background-color','green');
//④ $('*')
//$('*').css('background-color','gray');
//⑤ $('s1,s2,s3...')selector
$('p,#username,.apple').css('font-size','25px');
}
</script>
<style type="text/css">
#username{}
p{}
.apple{}
*{}
.apple,span,input{} /**/
</style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交重置代码
图片放大关闭