jQuery对象与DOM对象关系（jquery对象与dom对象之间的转换方法）

jQuery对象与DOM对象关系

jQuery对象：$('li') $('.apple')等选择器使用返回的信息就是jquery对象

DOM对象： document.getElementById()

document.getElementsByTagName();

docuemnt.getElementsByName()

就是通过getElementById()、getElementsByTagName()、getElementsByName()这些方法获取到的对象它们就是DOM对象。

DOM对象它是jQuery对象数组元素, jQuery对象中包含了DOM对象, DOM对象它是以数组元素的方式添加在jQuery对象中。

1 互调对方的成员

HTML代码:

<div>jQuery对象和DOM对象调用对方成员</div>
<input type="button" value="设置1" onclick="f1()" />
<input type="button" value="设置2" onclick="f2()" />

jQuery写法：

$('div').css('background-color','lightgreen');

DOM对象调用jQuery的成员方法：

document.getElementsByTagName('div')[0].css('background-color','lightblue');

DOM对象调用jQuery对象成员方法失败: TypeError: document.getElementsByTagName(...)[0].css is not a function

javascript写法：

document.getElementsByTagName('div')[0].style.color = "red";

jQuery调用DOM的成员属性

$('div').style.color = "gold";

jQuery对象调用DOM对象成员失败: TypeError: $(...).style is undefined

jQuery代码:

function f1(){
    //DOM对象调用jQuery对象成员方法成功
    //把DOM对象变为jQuery对象: $(DOM对象)
    var dv = document.getElementsByTagName('div')[0];
    $(dv).css('background-color','brown');
}
function f2(){
    //jQuery对象调用DOM对象成员属性成功
    //jQuery对象调用数组部分变为"DOM对象", 才可以调用DOM的成员
    $('div')[0].style.color = "yellow";
}

2 jQuery对象和DOM对象的转化

jQuery对象=>DOM对象 $()[index] 或 $().get(index) index:下标

<ul>
<li>刘</li>
<li>关</li>
<li>张</li>
</ul>

$('li')[1].style.backgroundColor = "blue";
$('li').get(1).style.backgroundColor = "blue";

小结：DOM对象就是jQuery对象的数组组成部分。

DOM对象=>jQuery对象 $(DOM对象)

<div id="apple">jquery对象如何封装dom对象</div>
var dv = document.getElementsByTagName('div')[0];
$(dv).css('background-color','brown');

3 jQuery框架对象分析

jQuery框架对象类型：jquery对象和$对象

jquery对象(普通对象)就是各种选择器创建出来的对象, 如：$(div) $(.class) $(#id)

$对象就是"函数对象", 如：$.get() $.each()

function Animal(){
this.leg = 4;
}
//给"函数对象"声明成员
Animal.color = "gray";
Animal.fun = function(){
alert("running");
}
var cat = new Animal();

jquery对象和$对象之间的关系:

jQuery.extend = jQuery.fn.extend = function(){}

jquery对象或$函数对象的可以调用成员, 90%以上都来之extend复制继承。

jQuery可以出让$符号使用权

var jq = $.noConflict();
jq(function(){
    jq('[name=username]').attr('value','123');
});

4 each()遍历方法：

$.each(数组/对象,function处理); //$对象 调用的

$(选择器).each(function处理); //jquery对象 调用的

HTML代码：

<div id="apple">each遍历方法</div>
<ul>
<li>刘</li>
<li>关</li>
<li>张</li>
</ul>
<input type="button" value="触发" onclick="f1()" />

jQuery代码：

each()遍历数组

$.each(数组,function(i下标变量,v值变量){});

var color = ['red','blue','green'];
    $.each(color,function(i,v){
    document.write(i+"--"+v);
});

each()遍历对象

$.each(对象,function(i成员名称变量,v成员值变量){});

var cat = {name:'kitty',age:3,climb:function(){document.write('zai pashu')}};
$.each(cat,function(m,n){
    document.write(m+"--"+n);
});

each()遍历jquery对象

function f1(){
    $('li').each(function(i dom对象下标变量,v 代表每个li的dom对象){});
    var clr = ['red','blue','gold','yellow','pink','gray','purple']
    $('li').each(function(k,w){
        //this代表遍历出来的每个"DOM对象"
        //在jquery框架内部该this关键字一般都代表DOM对象
        //document.write(k+"--"+w);
        this.style.backgroundColor = clr[Math.floor(Math.random()*7)];
        $(this).css('color','green');//this变为jQuery对象
    });
}

this在each()中的含义

var name = "liulanqi";
function say(){
    //this代表调用该方法的当前对象
    document.write(this.name);
}
window.say();
say();
function each(){
    //this代表调用该方法的当前对象
}
$().each(function(){
    // this代表$()选择器中的DOM对象
})