zoukankan      html  css  js  c++  java
  • 02、JQuery(DOM对象和JQuery对象)

    jQuery对象和DOM对象

      <p id=”imooc”></p>

    1、通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象,
      再通过innerHTML与style属性处理文本与颜色。 
       var p = document.getElementById('imooc');   
      //DOM对象  p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途  p.style.color = 'red';

    2、通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,
    然后封装了很多操作方法,
    调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。
        var $p = $('#imooc');  //JQuery对象
        $p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');

    jQuery对象转化成DOM对象

      1、HTML代码:

      <div>元素一</div>
      <div>元素二</div>
      <div>元素三</div>

     2、JavaScript代码
      var $div = $('div') //jQuery对象
      var div = $div[0] //转化成DOM对象
      div.style.color = 'red' //操作dom对象的属性

    3、JavaScript代码也可以写成
      var $div = $('div') //jQuery对象
      var div = $div.get(0) //通过get方法,转化成DOM对象
      div.style.color = 'red' //操作dom对象的属性

    DOM对象转化成jQuery对象

      1、HTML代码

      <div>元素一</div>
      <div>元素二</div>
      <div>元素三</div>

     2、JavaScript代码
      var div = document.getElementsByTagName('div'); //dom对象
      var $div = $(div); //jQuery对象 
      var $first = $div.first(); //找到第一个div元素   $first.css('color', 'red'); //给第一个元素设置颜色

     注意:
        $(div)和$("div")的区别:
        1、$(div):是将DOM对象div转为Jquery对象。
        2、$("div"):是直接获取JQuery对象;
     
  • 相关阅读:
    构建之法读书笔记04
    团队冲刺06
    12.23——周总
    团队冲刺05
    团队冲刺04
    用户场景分析
    团队冲刺03
    返回一个二维数组中最大联通子数组的和
    团队冲刺02
    FFT/NTT基础题总结
  • 原文地址:https://www.cnblogs.com/helei747123/p/9253762.html
Copyright © 2011-2022 走看看