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装饰函数

    from time import ctime, sleep def tsfunc(func): def wrappedFunc(): print('[%s] %s() classed' % (ctim ...

  2. CodeForces 551C - GukiZ hates Boxes - [二分+贪心]

    题目链接:http://codeforces.com/problemset/problem/551/C time limit per test 2 seconds memory limit per t ...

  3. oracle11gR2 win7_32位客户端连接虚拟机中oracle11gR2 win7_32位服务器方法

    改写服务器中的监听文件(listener.ora和tnsnames.ora) “ora-12541:TNS:无监听程序”问题的解决 ora-12541:TNS:无监听程序,出现这种错误的时候,可以尝试 ...

  4. SQL Server查询时添加一列连续的自增列

    SQL Server查询时添加一列连续的自增列 在SQL Server数据库中表信息会用到Identity关键字来设置自增列.但是当有数据被删除的话,自增列就不连续了.如果想查询出这个表的信息,并添加 ...

  5. KVM--安装及初步使用

    KVM是Kernel-based Virtual Machine的简称,是一个开源的虚拟化模块,今天我将在CentOS7的操作系统上安装KVM,以下是我的安装步骤. 一.环境信息 系统: CentOS ...

  6. AspNetPager使用方法

    一.AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二.AspNetPager支持各种数据绑定控件GridView.DataG ...

  7. 【JMeter】如何录制创建及得到曲线图

    前段时间公司需要对服务器进行压力测试,包括登录前的页面和登录后的页面,主要目的是测试负载均衡的实现效果.不知道是不是因为Jmeter不如loadRunner火爆还是什么,网上关于Jmeter的资料有很 ...

  8. [py][mx]xadmin详细设置-将app注册到xadmin

    首先createsuperuser,创建用户, 然后登陆xadmin. 理解下models的各个字段 复数形式及返回 注册app users/adminx.py 显示字段 users/adminx.p ...

  9. kvm日常管理

    创建虚拟机 快速启动虚拟机 [root@localhost ~]# yum install kvm libvirt python-virtinst qemu-kvm virt-viewer bridg ...

  10. [LeetCode] 383. Ransom Note_Easy tag: Hash Table

    Given an arbitrary ransom note string and another string containing letters from all the magazines, ...