jQuery——Js与jQuery的相互转换

时间：2023-12-15 17:56:26

$()与jQuery()

jQuery中$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象

jQuery这个js库，除了$之外，还提供了另外一个函数：jQuery

jQuery函数跟$函数的关系：jQuery ===$;

jQuery与js区别

jquery有一层功能皮肤，其内核还是js

JS与jQuery对象之间的转换

1、js对象转换成jquery对象。 $(js对象);

2、jquery对象转换成js对象。 (1)jquery对象[索引值] (2)jquery对象.get(索引值)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    //入口函数

    jQuery(document).ready(function () {

        //js方式获取元素

        var box = document.getElementById("box");

        var cbox = document.getElementsByClassName("box");

        var div = document.getElementsByTagName("div");

        //jquery方式获取元素

        var jqbox = $("#box");

        var jqCbox = $(".box");

        var jqdiv = $("div");

        //js转换成juery转换。

        box = $(box);

        cbox = $(cbox);

        div = $(div);

        //js转换成了jquery对象，皮上面有功能可以直接调用。

        div.css({"width": 100, "height": 100, "border": "1px solid red"});

        box.css("background", "red");

        cbox.css("background", "yellow");

        //jquery对象转换成js对象

        jqdiv[0].style.backgroundColor = "black";

        jqdiv.get(4).style.backgroundColor = "pink";

    });

</script>

<div></div>

<div class="box"></div>

<div id="box"></div>

<div class="box"></div>

<div></div>

</body>

</html>

注意事项

1、jQuery对象是一个数组。数组中包含着原生JS中的DOM对象，还有其他特有的属性

2、jQuery对象数组中包含的东西很多，但是jQuery对象.length依然是计算原生js中的DOM对象

相关文章