jQuery对象与BOM对象互转

时间:2020-05-01

bom对象转jQuery对象

直接将对象放入$()中,$(document.getElementById("test"))

jQuery对象转bom对象

1,通过get方法获取,$('#test').get(0)

2,通过数组下标获取,$('#test')[0]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #test {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="test"></div>
<script src="jquery-1.12.5.min.js"></script>
<script>
    // bom对象
    var testBomObj = document.getElementById("test");
    // testBomObj.style.backgroundColor = 'red';
    // 将bom对象转为jQuery对象
    // $(testBomObj).css("backgroundColor", "blue");

    //jQuery
    $(function () {
        // 将jQuery对象转为bom对象
        // $('#test').css("backgroundColor", "blue");
        // $('#test').get(0).style.backgroundColor = "red";
        $('#test')[0].style.backgroundColor = "red";
    });
</script>
</body>
</html>