⭐️重点jQuery第三天 ID选择器，标签选择器，类选择器

最新推荐文章于 2020-10-14 17:06:04 发布

BowenXu11

最新推荐文章于 2020-10-14 17:06:04 发布

阅读量136

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/BowenXu11/article/details/105559401

版权

Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

重点jQuery选择器
1.ID选择器
$(’#dv1’);
2.标签选择器
$(‘p’);
3.类选择器
$(’.cls’);

标签+类选择器（常用）
$(‘div .cls’)

层次选择器
后代选择器
$(‘div p’)

子元素选择器
$(‘div > p’)//必须是直接子元素

相邻元素选择器

$(‘#div1’).next() 下一个兄弟
$(’#div1 + p’)//下一个相邻元素（必须是p）
$(’#div1 + *’)//下一个相邻元素（无论是什么）

~ $(‘#div1’).nextAll() 后面所有兄弟元素
$(’#div1 ~ p’)//div1后面所有的p

$(‘#div1’).prev() 前一个兄弟
$(‘#div1’).prevAll() 前面所有的兄弟

$(‘#div1’).siblings() 所有的兄弟

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                alert(1);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="lllllll"  id="btn"/>


    
</body>
</html>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //获得按钮
            //注册事件
            $('#btn').click(function () {
                $('p').text('我们都是P').css({ 'background-color': 'yellow', 'color': 'red' });
                
               
            });
            
            //改变所有标签颜色
        });

    </script>


</head>
<body>
    <input type="button" name="name" value="页面中所有p标签都显示一句话" id="btn" />
    <p></p>

    <p style=""></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>