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. 【转】MVC中的扩展点

    原文地址:http://www.cnblogs.com/xfrog/tag/MVC/      MVC中的扩展点(十)辅助方法   MVC中的扩展点(九)验证   MVC中的扩展点(八)模型绑定   ...

  2. UVA 12304 - 2D Geometry 110 in 1! - [平面几何基础题大集合][计算几何模板]

    题目链接:https://cn.vjudge.net/problem/UVA-12304 题意: 作为题目大合集,有以下一些要求: ①给出三角形三个点,求三角形外接圆,求外接圆的圆心和半径. ②给出三 ...

  3. JSP学习_01

    JSP cookie是存储在客户机的文本文件,保存了大量的轨迹信息.通常有三个步骤可以识别回头客:1)服务器脚本发送一系列cookie到浏览器,如姓名.年龄.ID等2)浏览器在本地存储这些信息以备不时 ...

  4. Python面向对象：继承和多态

    继承与多态简介: 继承可以把父类的所有功能都直接拿过来,这样就不必重零做起,子类只需要新增自己特有的方法,也可以把父类不适合的方法覆盖重写. 动态语言的鸭子类型特点决定了继承不像静态语言那样是必须的. ...

  5. Drip is a launcher for the Java Virtual Machine that provides much faster startup times than the java command. The drip script is intended to be a drop-in replacement for the java command, only faster

    小结: 1.初始化jvm: 2.第一次唤醒java命令不快,后续快: https://github.com/elastic/logstash Advanced: Drip Launcher Drip  ...

  6. 设置elasticsearch一次最大数量查询

    PUT my_index/_settings?preserve_existing=true{ "max_result_window": "2000000000" ...

  7. Python描述器引导(转)

    原文:http://pyzh.readthedocs.io/en/latest/Descriptor-HOW-TO-Guide.html 1. Python描述器引导(翻译) 作者: Raymond ...

  8. Hadoop的那些事儿（转）

    原文:http://www.searchtb.com/tag/mapreduce       在说Hadoop之前,作为一个铁杆粉丝先粉一下Google.Google的伟大之处不仅在于它建立了一个强悍 ...

  9. Linux和Windows下查看环境变量方法(转)

    add by zhj: 本文中的Linux是指Ubuntu14.04 以前我对环境变量有误解,以为环境变量就是PATH这个变量.其实环境变量其实有很多,PATH仅仅是其中一个而已,比如在Windows ...

  10. css实现固定行

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...