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. C++基础知识之动态库静态库

    一. 静态库与动态库 库(library),一般是一种可执行的二进制格式,被操作系统载入内存执行. 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库 静态库和动态库区别: ...

  2. Java编程思想中关于闭包的一个例子

    Java编程思想中的一个例子,不是很理解使用闭包的必要性,如果不使用闭包,是不是有些任务就不能完成?继续探索. package InnerClass; interface Incrementable ...

  3. HDU 4514 - 湫湫系列故事——设计风景线 - [并查集判无向图环][树形DP求树的直径]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4514 Time Limit: 6000/3000 MS (Java/Others) Memory Li ...

  4. HDU 1045 - Fire Net - [DFS][二分图最大匹配][匈牙利算法模板][最大流求二分图最大匹配]

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1045 Time Limit: 2000/1000 MS (Java/Others) Mem ...

  5. 多态设计 zen of python poem 显式而非隐式 延迟赋值

    总结 1.python支持延迟赋值,但是给调用者带来了困惑: 2.显式而非隐式,应当显式地指定要初始化的变量 class Card: def __init__(self, rank, suit): s ...

  6. thread safe

    computer science J. Glenn Brookshear with contributions from David T. SmithIndiana University of Pen ...

  7. SVN里直接把本地目录纳入管理

    如果本地有个已有的目录,要直接纳入SVN管理,怎么办呢?直接在Repository Browser里面 Add folder,但这样虽然把目录加到SVN,但本地目录没有纳入管理,你还要重新又下到本地才 ...

  8. 【spring mvc】springmvc在tomcat中的执行过程

    一.WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象(每个web应用程序唯一),它代表当前web应用web容器提供其一个全局的上下文环境,其为后面的spri ...

  9. vue中两种路由跳转拼接参数

    this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...

  10. python的时间差计算

    import time start = time.clock() #当中是你的程序 elapsed = (time.clock() - start) print("Time used:&qu ...