初识jQuery 在笔记手打 可能有误

DOM (Domcument Object Model.   文档对象模型) ， 每一份DOM都可以表示为一棵树

jQuery 对象

jQuery 对象家就是通过jQuery包装DOM 对象后产生的对象

jQuery 对象是jQuery 独有的  如果一个对象是jQuery对象，，那么就可以使用jQuery方法 、、

例如 ： $('#foo').html();  // 获取 id 为 foo 的元素内的html 代码， html() 是jQuery里面的方法

这段代码等同于  document.getElementById("foo").innerHTML;

在jQuery 对象中无法使用DOM对象的任何方法  例如$("#ID").innerHTML 和 $("#ID").checked 之类的写法都是错误的  

可以使用$("#ID").html()  和 $("#ID").attr("checked")之类的jQuery方法来代替。。

同样的  DOM对象也不可以使用jQuery里面的方法  例如：  document.getElementById("id").html()也会报错          只能使用 document.getElementById("id").innerHTML 语句

jQuery 对象和DOM对象的相互转换

 

    1  jQuery 对象转换DOM 对象

        jQuery 提供了两种方法将一个jQuery对象转换成DOM对象  就是[index]  和 get(index)

        (1)jQuery对象是一个类似数组的对象  可以通过[index]的方法得到相应的                          DOM对象

                   jQuery代码如下  

                   var $cr = $("#cr")     // jQuery 对象

                   var cr = $cr[0]          // DOM 对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

(2) 另一种方法是jQuery本身提供的  通过get(index)方法得到相应的DOM 对象  

jQuery代码如下  

var $cr = $('#cr');  // jQuery 对象

var cr = $cr。get(0);      // DOM对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

   2  DOM 对象转换 jQuery 对象

        (2)   对于一个DOM对象，，只需要用$() 把DOM对象包装起来  就可以获得一个jQuery 对象了  方式为$(DOM对象)

                  DOM对象

jQuery代码如下  

var cr = document.getElementById("cr")  // DOM 对象

var $cr = $(cr);      // jquery对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

jQ拥有完善的处理机制 

使用jQ  选择器  不仅 比出传统的getElementById()  和  getELementByTagName()   

二而且还卡么一避免一些错误   看下嘛这个例子

document getElementById('tt').style.color = 'red;

运行上面的代码，，，浏览器就会报错    原因很简单   因为网页之中没有id为   "tt"

的元素

改进后的代码为   

if(document.getElementById("tt")){

      document.getElementById("tt").style.color = "red";

   }

这样就可以避免浏览器报错    但是假如操作的元素很多  就会一直重复这种工作  所以jQ 给我们提供了很大的便利

$('#tt').css("color", "red");  // 这里无需判断("#tt")是否存在

有了这个预防措施  即便是以后因为某种原因删除网页上的某个以前使用过的元素   也不用担心这个网页的JavaScript 代码会报错

    需要注意的是  $('#tt') 获取的永远是对象  即便是网页上面没有这个元素          因此当需要用jQ 检查某个元素在网页上面是否存在  不可以使用如下代码

if ( $("$tt") ) {

    // do something

}

需要这样才可以  

应该根据获取到的元素的长度来判断

if ( $("#tt").length > 0 ) {

    // do something 

}

或者是转化成DOM对象来判断  代码如下

if ( $("#tt")[0] ) {

    // do something

}

DOM (Domcument Object Model.   文档对象模型) ， 每一份DOM都可以表示为一棵树

jQuery 对象

jQuery 对象家就是通过jQuery包装DOM 对象后产生的对象

jQuery 对象是jQuery 独有的  如果一个对象是jQuery对象，，那么就可以使用jQuery方法 、、

例如 ： $('#foo').html();  // 获取 id 为 foo 的元素内的html 代码， html() 是jQuery里面的方法

这段代码等同于  document.getElementById("foo").innerHTML;

在jQuery 对象中无法使用DOM对象的任何方法  例如$("#ID").innerHTML 和 $("#ID").checked 之类的写法都是错误的  

可以使用$("#ID").html()  和 $("#ID").attr("checked")之类的jQuery方法来代替。。

同样的  DOM对象也不可以使用jQuery里面的方法  例如：  document.getElementById("id").html()也会报错          只能使用 document.getElementById("id").innerHTML 语句

jQuery 对象和DOM对象的相互转换

 

    1  jQuery 对象转换DOM 对象

        jQuery 提供了两种方法将一个jQuery对象转换成DOM对象  就是[index]  和 get(index)

        (1)jQuery对象是一个类似数组的对象  可以通过[index]的方法得到相应的                          DOM对象

                   jQuery代码如下  

                   var $cr = $("#cr")     // jQuery 对象

                   var cr = $cr[0]          // DOM 对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

(2) 另一种方法是jQuery本身提供的  通过get(index)方法得到相应的DOM 对象  

jQuery代码如下  

var $cr = $('#cr');  // jQuery 对象

var cr = $cr。get(0);      // DOM对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

   2  DOM 对象转换 jQuery 对象

        (2)   对于一个DOM对象，，只需要用$() 把DOM对象包装起来  就可以获得一个jQuery 对象了  方式为$(DOM对象)

                  DOM对象

jQuery代码如下  

var cr = document.getElementById("cr")  // DOM 对象

var $cr = $(cr);      // jquery对象

alert( cr.checked )    // 检测这个checkbox  是否被调用

jQ拥有完善的处理机制 

使用jQ  选择器  不仅 比出传统的getElementById()  和  getELementByTagName()   

二而且还卡么一避免一些错误   看下嘛这个例子

document getElementById('tt').style.color = 'red;

运行上面的代码，，，浏览器就会报错    原因很简单   因为网页之中没有id为   "tt"

的元素

改进后的代码为   

if(document.getElementById("tt")){

      document.getElementById("tt").style.color = "red";

   }

这样就可以避免浏览器报错    但是假如操作的元素很多  就会一直重复这种工作  所以jQ 给我们提供了很大的便利

$('#tt').css("color", "red");  // 这里无需判断("#tt")是否存在

有了这个预防措施  即便是以后因为某种原因删除网页上的某个以前使用过的元素   也不用担心这个网页的JavaScript 代码会报错

    需要注意的是  $('#tt') 获取的永远是对象  即便是网页上面没有这个元素          因此当需要用jQ 检查某个元素在网页上面是否存在  不可以使用如下代码

if ( $("$tt") ) {

    // do something

}

需要这样才可以  

应该根据获取到的元素的长度来判断

if ( $("#tt").length > 0 ) {

    // do something 

}

或者是转化成DOM对象来判断  代码如下

if ( $("#tt")[0] ) {

    // do something

}