zoukankan      html  css  js  c++  java
  • DOM对象与JQUERY对象的相互转化

    普通处理,通过标准JavaScript处理:

     1 var p = document.getElementById('imooc')

    2 p.innerHTML = '您好!学习jQuery才是最佳的途径';

    3  p.style.color = 'red'; 

    通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色。

    jQuery的处理:

    1 var $p = $('#imooc');
    3 $p.html('您好!通过学习jQuery才是最佳的途径').css('color','red');

    通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息

    然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。

    通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现:

    通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。

    通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题

    我们通过jQuery提供的API进行开发,代码也会更加精短。

    jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

    如何把jQuery对象转成DOM对象?

    利用数组下标的方式读取到jQuery中的DOM对象

    HTML代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div>元素一</div>
     
    <div>元素二</div>
     
    <div>元素三</div>
     
    JavaScript代码
     
    var $div = $('div') //jQuery对象
     
    var div = $div[0] //转化成DOM对象
     
    div.style.color = 'red' //操作dom对象的属性

    用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0

    通过jQuery自带的get()方法

    jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

    1
    2
    3
    4
    5
    var $div = $('div') //jQuery对象
     
    var div = $div.get(0) //通过get方法,转化成DOM对象
     
    div.style.color = 'red' //操作dom对象的属性

      

    其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

    DOM对象转化成jQuery对象

    相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。

    如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

    通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

    HTML代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div>元素一</div>
     
    <div>元素二</div>
     
    <div>元素三</div>
     
    JavaScript代码
     
    var div = document.getElementsByTagName('div'); //dom对象
     
    var $div = $(div); //jQuery对象
     
    var $first = $div.first(); //找到第一个div元素
     
    $first.css('color', 'red'); //给第一个元素设置颜色

    通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。

    通过$(div)方法转化成jQuery对象,通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

    -转载

  • 相关阅读:
    27 Spring Cloud Feign整合Hystrix实现容错处理
    26 Spring Cloud使用Hystrix实现容错处理
    25 Spring Cloud Hystrix缓存与合并请求
    24 Spring Cloud Hystrix资源隔离策略(线程、信号量)
    23 Spring Cloud Hystrix(熔断器)介绍及使用
    22 Spring Cloud Feign的自定义配置及使用
    21 Spring Cloud使用Feign调用服务接口
    20 Spring Cloud Ribbon配置详解
    19 Spring Cloud Ribbon自定义负载均衡策略
    18 Spring Cloud Ribbon负载均衡策略介绍
  • 原文地址:https://www.cnblogs.com/wenJiaQi/p/6175610.html
Copyright © 2011-2022 走看看