jQuery 对象

　　版权声明：未经博主授权，严禁转载分享　　

什么是 jQuery 对象

　　jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。

　　jQuery 对象是一个类数组对象。

　　jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，就可以使用 jQuery 的方法。

　　在 jQuery 对象中无法使用 DOM 对象的任何方法，反正在 DOM 对象也无法使用任何 jQuery 的方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery对象</title>

</head>

<body>

<p id="p1">我是p1元素</p>

<p id="p2">我是p2元素</p>

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

<script>

    /*修改p元素的文本*/

    // 使用核心DOM的方法,

    // 使用核心dom获取的元素是dom对象

    //之能使用核心dom的API

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

    p1.innerHTML = "我是核心DOM的方法";

    // 使用 jquery 函数库的API，只能使用jquery对象的api

    var p2 = document.getElementById("p2"); // dom对象

    p2.html("我是jquery函数库中的方法！") // 不能使用 错的

</script>

</body>

</html>

如何创建 jQuery 对象

使用 jQuery() 构造函数创建 jQuery 类型的对象。

1.将已经获得的 DOM 对象使用 jQuery 函数封装为 jQuery 对象。

　　- jQuery( domObj )

<p id="p1">我是p1元素</p>

<p id="p2">我是p2元素</p>

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

<script>

    /*修改p元素的文本*/

    // 使用核心DOM的方法,

    // 使用核心dom获取的元素是dom对象

    //之能使用核心dom的API

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

    p1.innerHTML = "我是核心DOM的方法";

    // 使用 jquery 函数库的API，只能使用jquery对象的api

    var p2 = document.getElementById("p2"); // dom对象

    p2 = jQuery(p2); // 将dom对象封装为jquery对象

    p2.html("我是jquery函数库中的方法！") // 可以使用

</script>

　

　　

　　- $( domObj )

<p id="p1">我是p1元素</p>

<p id="p2">我是p2元素</p>

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

<script>

    /*修改p元素的文本*/

    // 使用核心DOM的方法,

    // 使用核心dom获取的元素是dom对象

    //之能使用核心dom的API

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

    p1.innerHTML = "我是核心DOM的方法";

    // 使用 jquery 函数库的API，只能使用jquery对象的api

    var p2 = document.getElementById("p2"); // dom对象

    // p2 = jQuery(p2); // 将dom对象封装为jquery对象

    p2 = $(p2); // 将dom对象封装为jquery对象

    p2.html("我是jquery函数库中的方法！") // 可以使用

</script>

　　

2.使用选择器查找 DOM 元素，并封装 DOM 元素。

　　-  jQuery( "selecter" )

　　-  $( "select" ) 

<p id="p1">我是p1元素</p>

<p id="p2">我是p2元素</p>

<p id="p3">我是p3元素</p>

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

<script>

    /*修改p元素的文本*/

    // 使用核心DOM的方法,

    // 使用核心dom获取的元素是dom对象

    //之能使用核心dom的API

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

    p1.innerHTML = "我是核心DOM的方法";

    // 使用 jquery 函数库的API，只能使用jquery对象的api

    var p2 = document.getElementById("p2"); // dom对象

    // p2 = jQuery(p2); // 将dom对象封装为jquery对象

    p2 = $(p2); // 将dom对象封装为jquery对象

    p2.html("我是jquery函数库中的方法！") // 可以使用

    // 直接获取 jquery对象

    // var p3 = jQuery("#p3");

    var p3 = $("#p3");

    p3.html("我是jquery函数库中的方法")

</script>

　　

课堂练习

　　分别使用核心dom 和 jquery 方法修改div中文本的颜色

<div id="d1">我是d1标记</div>

<div id="d2">我是d2标记</div>

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

<script>

    // 分别使用核心dom 和 jquery 方法修改div中文本的颜色

    // ：css（‘样式名’，‘值’）

    // 核心 dom 方法

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

    d1.style.color = "#f00";

    // jquery 方法

    // var $d2 = $("#d2");

    // $d2.css("color","#f00");

    $("#d2").css("color","#f00");

</script>

jQuery 对象 和 DOM 对象之间的相互转换

 DOM 对象封装为 jQuery 对象 （DOM => jQuery ）

　　- jQuery（domObj）

　　- $（domObj）

　　- 如：$( this )、   $( document )、   $( window )

<button type="button" id="btn1">我是btn1</button>

<button type="button" id="btn2">我是btn2</button>

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

<script>

    /*实现单击按钮式修改按钮背景颜色*/

    // DOM

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

    btn1.onclick = function () {

        this.style.backgroundColor="#0ff";

    }

    //jquery

    $("#btn2").click(function () {

        // this是一个DOM对象，所以必须封装为一个 jquery对象

        $(this).css("background-color","#0ff");

    });

</script>

　　

 jQuery 对象拆解为 DOM 对象 （jQuery => DOM）

　　- $( ".mybox" )[0]

 　　- $( "input" ).get(1)

<button type="button" id="btn1">我是btn1</button>

<button type="button" id="btn2">我是btn2</button>

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

<script>

    /*实现单击按钮式修改按钮背景颜色*/

    // DOM

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

    btn1.onclick = function () {

        this.style.backgroundColor="#0ff";

    }

    //jquery

    $("#btn2").click(function () {

        // this是一个DOM对象，所以必须封装为一个 jquery对象

        $(this).css("background-color","#0ff");

    });

    // jQuery对象拆解为DOM对象

    var $btns = $("button");

    console.log($btns);

    var domObj1 = $btns[0]; // 拆解为DOM对象

    domObj1.innerHTML="[]使用DOM对象的API修改内容";

    var domObj2 = $btns.get(1); // 拆解为DOM对象

    domObj2.innerHTML="()使用DOM对象的API修改内容";

</script>

　　

完成！

jQuery 对象的更多相关文章

  1. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  2. jQuery对象和DOM对象的区别

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

  3. DOM对象与jQuery对象的相互转换

    DOM  对象可以使用 js       中的方法,  不能使用jQuery中的方法:jQuery对象只能使用jQuery中的方法, 不能使用js中的方法:jQuery对象是通过jQuery包装DOM ...

  4. 理解jQuery对象$.html

    前面的话 如果要比喻jQuery和原生javascript的关系,我个人认为是自动档和手动档汽车的区别.使用原生javascript,可以知道离合器以及档位的作用:而使用jQuery,则把离合器和手动 ...

  5. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

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

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

  7. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  8. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  9. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

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

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

随机推荐

  1. Python开发【Tornado】：搭建文件下载服务、音频文件播放

    Tornado 如何做文件下载 要求:浏览器输入url地址,直接弹窗提示下载 Tornado服务端,搭建文件下载服务 #!/usr/bin/env python # -*- coding:utf-8 ...

  2. 洛谷P4436 游戏 [HNOI/AHOI2018]

    正解:拓扑排序 解题报告: 传送门! 首先不难想到可以把麻油锁的一段先直接缩成一个点,然后预处理每个点能到达的最左和最右节点,然后就能O(1)地查询辣 所以难点在于预处理 可以想到,对于它给定的关于锁 ...

  3. Centos7网桥配置

    CentOS 的网桥虽然配置了很多次,不过总是记不住那几条,还是简单记录下,增加网桥可以通过brctl命令,但是为了简便快捷,直接生成配置文件即可 1.在/etc/sysconfig/network- ...

  4. 帝国cms底部代码哪里改?要修改版权和统计代码

    最近接手的几个站是用帝国cms做的,底部代码那边都有一个**设计的链接,还有一些不相关的东西,第一眼看到就想把那些帝国cms底部代码清理掉,这就是让别人建站的烦恼,让他们删除说要收费,坑就一个字,自己 ...

  5. 004-redis-命令-哈希操作，列表操作

    Redis hash 命令 下表列出了 redis hash 基本的相关命令: 序号 命令及描述 1 HDEL key field1 [field2] 删除一个或多个哈希表字段 2 HEXISTS k ...

  6. 011-jdk1.8版本新特性三-Date API

    1.7.Date API Java 8 在包java.time下包含了一组全新的时间日期API.新的日期API和开源的Joda-Time库差不多,但又不完全一样,下面的例子展示了这组新API里最重要的 ...

  7. 002-nginx-在 nginx 反向代理中使用域名,配置动态域名解析

    一.概述 代理(proxy),即中间人,它代替客户端发送请求给服务器,收到响应后再转给客户端.通常意义上的代理是从用户的角度讲的,用户通过某个代理可以访问多个网站,这个代理是靠近用户的,比如某些公司可 ...

  8. Java-idea-设置类头注释和方法注释

    一.文件级别的注释         主要是通过File-->Setting-->Editor→File and Code Template中来设置 可以再右侧include中设置File ...

  9. 十天精通CSS3(3)

    颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba ...

  10. U盘安装win10操作系统

    https://www.zhihu.com/question/39207359   1:进入微软官方网站,点击立即下载工具,下载完成mediacreationtool,双击打开,接受协议  https ...