<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM对象'&&'jQuery对象对比</title>

    <script src="../jQuery库/jquery-3.3.1.js"></script>

    <script>

        // DOM对象给元素div   ID="hello"加一段文字,再将字体改为红色

        window.onload = function(){

            //获取id为imooc1的元素div

            var a = document.getElementById("hello");

            //改变div元素中的值

            a.innerHTML="这是最佳途径";

            //改变样式

            a.style.color="red";

        }

        //用jQuery对象给元素div  ID="world"加一段文字,再将字体改为粉色

        $(document).ready(function(){

            //通过jQuery语法获取id为imooc2的元素获得一个jQuery对象

            var $a = $("#world");

            //调用该对象的html()方法进行更改内容,调用该对象的css()方法进行更改颜色,字体样式

            $a.html("这是好的开始!").css({

                color: "pink",

                fontSize: "50px"

            });

        });

    </script>

</head>

<body>

    <div id="hello"></div>

    <div id="world"></div>

</body>

</html>

这段代码会有助于区别两种对象,代码中有详细的解释!!!

JavaScript的DOM对象和jQuery对象的对比的更多相关文章

  1. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  2. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  4. 关于DOM对象与JQuery对象的那些事

    这个问题源自上一次的工作室讨论班,主题是"jQuery选择器的使用",在讨论班的结尾,我留了一个思考题:  jQuery获取到的对象和直接调用原生Javascript方法获得的对象 ...

  5. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  6. DOM对象与jquery对象有什么不同

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  7. DOM对象与JQUERY对象的相互转化

    普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...

  8. DOM对象与jquery对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue ...

  9. DOM对象和JQuery对象

    1.JS对象转化为Jquery对象 Var p=document.getElementById(“p”); Var $obj=$(p); 2.Jquery对象转换为JS对象 Var $bh=$(“#i ...

  10. DOM对象和JQuery对象的区别

    DOM对象和JQuery对象的区别 jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DO ...

随机推荐

  1. Charles破解安装及基本使用

    一.Charles简介 1.Charles是一款代理服务器,通过成为电脑或者浏览器的代理,而后截取请求和请求结果达到抓包目的. 2.Charles是用Java写的,能够在Windows,Mac,Lin ...

  2. 虚拟机操作系统内设置固定IP以及克隆虚拟机

    以下为我自己整理的克隆虚拟机和设置固定IP的方法,记录一下,以防忘记: 桥接模式网络配置 1.配置ip地址等信息在/etc/sysconfig/network-scripts/ifcfg-ens33文 ...

  3. .NET手撸绘制TypeScript类图——上篇

    .NET手撸绘制TypeScript类图--上篇 近年来随着交互界面的精细化,TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方式. ...

  4. linux No module named yum错误的解决办法

    linux No module named yum错误的解决办法 肯定是yum的版本与当前python的版本不一致造成的 <pre>所以修改yum的配置,修改文件: vim /usr/bi ...

  5. Non-local Neural Networks 原理详解及自注意力机制思考

    Paper:https://arxiv.org/abs/1711.07971v1 Author:Xiaolong Wang, Ross Girshick, Abhinav Gupta, Kaiming ...

  6. 在Debian/Ubuntu上面安装升级nginx到最新版

    在Debian下面通过 apt-get 可以自动安装 nginx,不过版本一般比较老,如果想要使用nginx的最新特性就需要升级版本.   一般安装可以通过编绎源文件安装,但可能需要安装很多编绎工具, ...

  7. [LC]83题 Remove Duplicates from Sorted List（删除排序链表中的重复元素）（链表）

    ①英文题目 Given a sorted linked list, delete all duplicates such that each element appear only once. Exa ...

  8. WordPress 添加title中的logo

    WordPress 添加title中的logo <!--网页标题左侧显示--> <link rel="icon" href="/favicon.png& ...

  9. nyoj 366-D的小L (next_permutation())

    366-D的小L 内存限制:64MB 时间限制:4000ms 特判: No 通过数:5 提交数:7 难度:2 题目描述:       一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡 ...

  10. 领扣（LeetCode）两个列表的最小索引总和 个人题解

    假设Andy和Doris想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一个,则输出所有答 ...