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. ionic 下拉选择框中默认显示传入的参数

    开发过程当中遇到一个有趣的问题,如果我在第一个页面需要把 item { "ownerId" : 1 } 传递给第二个页面,并挂在$scope下 $scope.item = $sta ...

  2. 【linux & &&命令】&后台(并行)命令 &&串行命令

    & 放在一个命令末尾,可以将这个命令放到后台执行.放到后台后主进程将继续向下执行,后台命令将与主进程并行执行. &&  放在一个命令末尾,与什么都没有单纯换行实际效果相同,等待 ...

  3. 【Pyton】【小甲鱼】文件

    1.打开文件的集中模式: 2.文件对象方法: 对于文件对象方法的练习代码: 读取F:\\script\\script.txt位置文件中内容 >>> f=open('F:\\scrip ...

  4. hibernate中cascade和inverse

    原文:http://blog.sina.com.cn/s/blog_7b9edd020100racc.html 这两个属性都用于一多对或者多对多的关系中. 而inverse特别是用于双向关系,在单向关 ...

  5. android返回到第一个activity

    问题:Android顺序打开多个Activity,如何返回到第一个Activity(一般为首页)? 情形:如 A 打开 B, B 打开 C, C 打开 D, 然后如果从 D 一步返回到 A,并清楚掉 ...

  6. 深度学习之TensorFlow（一）——基本使用

    一.目前主流的深度学习框架Caffe, TensorFlow, MXNet, Torch, Theano比较 库名称 开发语言 速度 灵活性 文档 适合模型 平台 上手难易 Caffe c++/cud ...

  7. Cobbler 自动化部署系统

    yum安装 yum install -y epel-release yum install -y httpd dhcp tftp cobbler cobbler-web pykickstart xin ...

  8. MVC备忘笔记

    1.增加样式 @Html.EditorFor(model => model.AssociationName, new { @class="inputtext input-220&quo ...

  9. Summary: Prime

    最近遇到很多问题都跟Prime有关,于是总结一下: Prime definition:A prime number (or a prime) is a natural number greater t ...

  10. keras中TimeDistributed

    TimeDistributed这个层还是比较难理解的.事实上通过这个层我们可以实现从二维像三维的过渡,甚至通过这个层的包装,我们可以实现图像分类视频分类的转化. 考虑一批32个样本,其中每个样本是一个 ...