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对象;
 
posted @ 2018-07-02 14:52  HlRock  阅读(95)  评论(0编辑  收藏  举报