002,Jquery对象和Js对象的区别与转换_jquery包装集对象和lavascript对象有什么不一样,它们二者怎么实现转换?-程序员宅基地

技术标签: java  Jquery小白入门到精通  javaweb  js  javascript  jquery  

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>

 

 

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39032063/article/details/116378522

智能推荐

安卓手机垃圾清理神器!彻底清理你的手机垃圾!手机瞬间飞起来!_安卓手机彻底清理垃圾-程序员宅基地

文章浏览阅读2.1w次,点赞5次,收藏8次。使用安卓手机的小伙伴经常会遇到一个令人头疼的问题“手机时间一久,各种缓存数据和垃圾文件会越来越多,不及时清理的话,不见占用储存空间,而且还会拖慢手机的运行速度”,大家可能使用过很多垃圾清理软件,清理以后感觉效果不明显(我其实是想说其实没卵用~)今天为大家带来一款手机垃圾清理神器!软件安装就是高级版,所有功能免费使用!亲测效果杠杠滴!与某管家、某卫士等软件相比,这款软件不仅干净无广告,没..._安卓手机彻底清理垃圾

基于卡尔曼滤波器融合的激光IMU激光里程计学习_ieskf-程序员宅基地

文章浏览阅读3.6k次,点赞3次,收藏53次。主要学习的是港科大今年开源的LINS算法.该算法是直接在lego上面改的,主要针对的还是16线激光.算法主要的核心是在激光里程计节点, 只需要重点学习这部分就可以了._ieskf

Android.mk_android cmake mk-程序员宅基地

文章浏览阅读247次。android ndk开发有一个重要的文件 Android.mk,他虽然重要,但是对它进行深入介绍的文档却比较的少,这里将对Android.mk中常用的宏和变量进行说明: 由于这一部分的内容多,资料零散,本文档会进行持续性的更新; 方便他人亦是方便自己,如果觉得还行就下右边的投票吧,这样可以帮助其他人更快的找到解决问题的方法;有疑问的也可留言哦, 谢谢!_android cmake mk

Activiti流程变量的设置和获取_activiti servicetask 执行参数-程序员宅基地

文章浏览阅读3.5k次。原文地址:https://blog.csdn.net/zjx86320/article/details/50345731流程变量在整个工作流中扮演很重要的作用。例如:请假流程中有请假天数、请假原因等一些参数都为流程变量的范围。流程变量的作用域范围是只对应一个流程实例。也就是说各个流程实例的流程变量是不相互影响的。这篇博文就简单的为大家介绍下流程变量的设置和获取。一、设置流程变量 流程变..._activiti servicetask 执行参数

position:fixed的解决办法!_js position:fixed-程序员宅基地

文章浏览阅读1.1k次。最近因为工作需要是在html中实现一个导航菜单,在滚动打的时候这个菜单是静止的,一时该怎么做,没有头绪,按照W3C position:fixed是可以的,可以IE不支持,陆续从网上搜了下,总结了几种方法 第一种方法,使用javascript实现 第二种方法: 使用所以用其他的属性来模拟_js position:fixed

html 页面自动滚动,打开网页后屏幕自动滚动代码-程序员宅基地

文章浏览阅读1.2k次。双击页面自动滚动代码一:以下代码直接放在你的网页中间就可以了//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){timer=setInterval ("scrollwindow ()",30);}function sc(){clearInterval(timer);}function scrollwindow(){currentpos=d..._浏览器 自动滚屏 html 代码

随便推点

【iOS】Xcode9 自动化脚本打包_xcode 打包的xcarchive文件-程序员宅基地

文章浏览阅读4.3k次。由于从Xcode8开始不再支持xcrun来导出ipa包(不是完全不可用,需要手动拷贝Xcode7.x版本中的PackageApplication文件到高版本Xcode中的对应的路径下,路径地址:/Applications/Xcode 7.3.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin)。所以本文主要介绍如何_xcode 打包的xcarchive文件

Mybatis之 SqlSession简介_mybatis sqlsession-程序员宅基地

文章浏览阅读6.1k次。SqlSession 的创建需要借助于 SqlSessionFactory。SqlSessionFactory 是 Mybatis 的关键对象。每个基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为核心的。SqlSessionFactory 的实例可以通过 SqlSessionFactoryBuilder 获得。如下图所示:SqlSessionFactory 可以理解为是创建 SqlSession 的工厂,SqlSessionFactory 是线程安全的,一旦被创建,应_mybatis sqlsession

解决Ubuntu 安装vim 的Package vim has no installation candidate问题,100%有效_ubuntu1804离线 安装vim软件包-程序员宅基地

文章浏览阅读2.9w次,点赞12次,收藏23次。当输入sudo apt-get install vim-gtk时出现了下面问题:nigel@yq-ubuntu:~/worksp$ sudo apt-get install vim-gtkReading package lists... DoneBuilding dependency tree Reading state information... DonePa_ubuntu1804离线 安装vim软件包

Android 安卓10.0无法保存图片,无法读取手机图片并显示解决方法!!!_安卓10.0调用相机无法保存图片-程序员宅基地

文章浏览阅读9.4k次,点赞13次,收藏14次。只需要在 AndroidManifest.xml (清单)文件中 application 标签中添加以下属性即可!android:requestLegacyExternalStorage="true"_安卓10.0调用相机无法保存图片

HDOJ 1312 Red and Black (深搜 DFS)_hdoj 1312 red and black 深搜-程序员宅基地

文章浏览阅读423次。HDOJ 1312 Red and Black (深搜 DFS) 思路:深搜 (DFS),通过四向搜索将 可走的点 变为 不可走的点 ,直到全部,不可再走,记录所有可走的点数。_hdoj 1312 red and black 深搜

Windows登录日志详解_microsoft windows security auditing.-程序员宅基地

文章浏览阅读10w+次,点赞8次,收藏44次。日志在很多时候是非常重要的,尤其是登录日志。从登录日志中可以发现很多有价值的信息,window2008及以后的日志基本一致,2003由于时间太长,微软都停止更新了,所以重点介绍2008的登录日志。_microsoft windows security auditing.

推荐文章

热门文章

相关标签