jQuery 五种基本选择器详解及案例

基本选择器的五种方法,分别是
一、$('#id属性值')
二、$('标签名称')
三、$('.class属性值')
四、$('*') 通配符选择器(获得页面全部节点)
五、$(s1,s2,s3) 联合选择器

设计灵感来自于css样式选择器,虽稍有不同,但这样一理解,立马更清晰了。
  • 下面源码中有相关详细注释
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script>
        function f1() {
            /*基本选择器的五种方法,分别是
            一、$('#id属性值')
            二、$('标签名称')
            三、$('.class属性值')
            四、$('*') 通配符选择器(获得页面全部节点)
            五、$(s1,s2,s3) 联合选择器*/
            
            //为测试第五个选择器,所以前面的注释掉了,实际使用时去掉注释即可

            //一、$('#id属性值')
            //jQuery方法:对象.css方法(样式名称,样式值)
            //括号内单、双引号都可以,必须有,不带则不起作用
            //$('#useremail').css('color','blue');

            //二、$('标签名称')
            //$('h2').css('color','pink');
            //会找到所有input元素
            //$('input').css('width','500px')

            //三、$('.class属性值')
            //将所有class属性为apple的背景设为浅绿
            //$('.apple').css('background','lightgreen');

            //四、$('*') 通配符选择器(获得页面全部节点)
            //将所有节点的背景都设为#F4F4F4,为不影响演示,下行暂注释掉
            //jQuery里面很少用到
            //$('*').css('background','#F4F4F4');

            //五、$(s1,s2,s3) 联合选择器
            //把符合s1、s2、s3条件的节点都找到,如果里面有不符合的,则忽略
            //如 h2222 不存在,则会忽略掉,执行存在的
            $('h2,#username,#usertel,.pear,h2222').css('color','red');
        }
    </script>
</head>
<body>
<h2>基本选择器</h2>
<h3>设计灵感来自于css样式选择器,虽稍有不同,但这样一理解,立马更清晰了</h3>
<input type="text" id="username" value="en"><br>
<input type="text" id="useremail" value="linken@163.com"><br>
<input type="text" class="apple" id="usertel" value="13111111111"><br>
<input type="text" class="pear" id="userqq" value="1001"><br>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND