JQuery中的元素选择器

最新推荐文章于 2022-07-20 17:12:55 发布

刘小筛

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量554

点赞数

分类专栏： Javascript JQuery 文章标签： jquery 元素选择器

本文链接：https://blog.csdn.net/LHJBK/article/details/51532194

版权

JQuery 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Javascript

19 篇文章 0 订阅

订阅专栏

元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素

表示方式为：$( “element” )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

下面编辑器代码使用两种方式获取并设置CSS属性：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
    //通过原生方法处理
    //获取到所有的节点标记名为div的元素
    //给每一个div加上蓝色的边框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //通过jQuery直接传入标签名p
    //标签是可以多个的，所以得到的同样也是一个集合
    $("div").css("border", "3px solid red");
    </script>
</body>

</html>

第一组：通过getElementsByTagName方法得到页面所有的

元素
var divs = document.getElementsByTagName(‘div’);

divs是dom合集对象，通过循环给每一个集合中的div元素赋予新的boder样式

第二组：同样的效果，$(“div”)选取所有的div元素，通过css方法直接赋予样式

刘小筛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的元素选择器

元素选择器元素选择器：根据给定（html）标记名称选择所有的元素表示方式为：$( “element” )搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持下面编辑器代码使用两种方式获取并设置CSS属性：<!DOCTYPE html><html><head> <meta http-equiv="Content-type"
复制链接

扫一扫

专栏目录