002,Jquery对象和Js对象的区别与转换

最新推荐文章于 2024-04-26 16:47:03 发布

V哥学It

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量107

点赞数

分类专栏： Jquery小白入门到精通文章标签： javascript jquery js java javaweb

本文链接：https://blog.csdn.net/weixin_39032063/article/details/116378522

版权

Jquery小白入门到精通专栏收录该内容

15 篇文章 4 订阅

订阅专栏

Jquery对象和js对象的区别与转换

V哥官网：http://www.vgxit.com

本博客对应视频教程：http://www.vgxit.com/course/19

1，什么是Jquery对象

我们上节课学习了可以通过Jquery的$方法来获取对象，和我们原生的js代码获取到的对象是有一定的区别的。当然，也有一些联系，可以相互转换。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jq对象和Js对象相互转换</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <p id="name1">李一桐</p>
        <p id="name2">鞠婧祎</p>
        <script type="text/javascript">
            //通过原生js代码获取所有的p
            var ps = document.getElementsByTagName("p");
            alert(ps);
            alert(ps.length);

            //通过jquery的方式获取所有的p标签
            var jps = $("p");
            alert(jps.length);
        </script>
    </body>
</html>

从上面代码，我们可以看到，我们的原生获取元素和jquery获取元素好像没有什么区别。但是老师告诉一下大家，他们有一个核心的区别。

比如我们上面的所有元素，我们要把对应的标签文本都修改为"Hello Vge"怎么做？

如果是用原生的，我们是如下代码：

var ps = document.getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
    ps[i].innerText = "Hello V Ge!";
}

如果我们采用jquery的方式获取元素，那么我们要实现修改标签文本的功能怎么做？

var jps = $("p");
jps.text("Hello V ge 1111");

我们可以看到我们使用Jquery的时候，Jquery对应的代码要方便很多。并且原生的方式获取到的元素在Jquery中不是通用的。

2，Jquery对象和Js对象之间的转换

1，Js对象转化为Jquery对象（重点）：

这个真的是太简单了，就是我们只需要加一个$符号就好了：

var obj = 原生js对象;
var jobj = $(obj);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jq对象和Js对象相互转换</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <p id="name1">李一桐</p>
        <p id="name2">鞠婧祎</p>
        <script type="text/javascript">
            var ps = document.getElementsByTagName("p");
            var jps = $(ps);
            jps.text("Hello Ju Jingyi");
        </script>
    </body>
</html>

2，Jquery对象转化为Js对象：

我们知道，我们通过$获取到了多个元素，封装成了一个对象。这个对象就是一个Jquery对象。但是这个对象可以当做数组来访问，而我们通过数组访问到的具体的每一个元素就是原生对象。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jq对象和Js对象相互转换</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <p id="name1">李一桐</p>
        <p id="name2">鞠婧祎</p>
        <script type="text/javascript">
            var ps = $("p");
            for (var i = 0; i < ps.length; i++) {
                ps[i].innerText = "Hello Jquery";
            }
        </script>
    </body>
</html>

我们除了用数组的方式来访问到这个原生对象之外，我们还可以使用.get(index)的方式来获取原生对象：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jq对象和Js对象相互转换</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <p id="name1">李一桐</p>
        <p id="name2">鞠婧祎</p>
        <script type="text/javascript">
            var ps = $("p");
            for (var i = 0; i < ps.length; i++) {
                ps.get(i).innerText = "Hello Jquery 11111";
            }
        </script>
    </body>
</html>

V哥学It

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
002,Jquery对象和Js对象的区别与转换

Jquery对象和js对象的区别与转换V哥教育QQ群：673215016官网：http://www.vgxit.com1，什么是Jquery我们通过jquery的$方法获取到的对象，和我们原生的js代码获取到的对象，是有一些区别的。当然，他们之前也有一些联系，可以相互转换。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫