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对象;