jQuery对象与Doem对象互相转换

最新推荐文章于 2019-11-13 09:00:43 发布

never疯

最新推荐文章于 2019-11-13 09:00:43 发布

阅读量422

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_40574571/article/details/81559957

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery对象转换为Doem对象

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
    <div>元素一</div>
    <div>元素二</div>
    <div>元素三</div>

    <script type="text/javascript">
        var $div = $('div'); //jQuery对象
        var div = $div[0] //转化成DOM对象
        div.style.color = 'red'; //操作dom对象的属性
    </script>
</body>
</html>

用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0

相同效果

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化成jQuery对象

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
    <script type="text/javascript">
            var div = document.getElementsByTagName('div'); //dom对象

            //将dom节点div转化为$div的jquery对象
            var $div = $(div); //jQuery对象
            var $first = $div.first(); //找到第一个div元素
            $first.css('color', 'red'); //给第一个元素设置颜色
    </script>
</body>
</html>