JQuery学习笔记（二）

JQuery与DOM对象转换

最新推荐文章于 2025-02-25 09:51:17 发布

最新推荐文章于 2025-02-25 09:51:17 发布 · 120 阅读

文章标签：

#jQuery #Java #ViewUI

JQuery学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JQuery对象与DOM对象之间的转换方法，包括如何从JQuery对象获取DOM对象及反之的操作。通过具体实例展示了使用JQuery和原生JavaScript处理DOM的不同方式。

JQuery对象和DOM对象
其实他俩是一对密不可分的“对象”，
DOM（文档对象模型），每一个DOM都可以表示成一棵树。
JQuery对象就是通过Jquery包装DOM对象后产生的对象。

并且Jquery对象和DOM对象是可以相互转换的


var $variable = ..... // JQuery对象
var variable  = ......// DOM对象

Jquery可以有两种方式转成DOM对象：
(1)[index]
   例如：var $ch = $("#ch");
         var ch = $ch[0];
         alert(ch.checked);
(2)get(index)
   例如：var $ch = $("#ch");
         var ch = $ch.get(0);
         alert(ch.checked);

DOM对象也可以转换为JQuery对象
(1)只需要用$()把DOM对象包装起来就可以
   例如：var ch = document.getElementById("ch");
         var $ch = $(ch);

通过下面的例子可以更好的理解
有个checkbox的框

例如：<input type="checkbox" id="ch"/><label for="ch">我已经同意.</label>

通过JS和JQuery不同的实现来掌握最开始基本的用法

(1)js的实现
$(document).ready(function(){
  var $ch = $("#ch");
  var ch = $ch[0]; // 也可以用$ch.get(0)
  $ch.click(function(){  
    if(cr.checked){              // DOM方式
      alert("我已经同意.....");
    }
  })
});
(2)JQuery的实现
$(function(){
  var $ch = $("#ch");
  $ch.click(function(){
    if($ch.is(":checked")){      // JQuery方式
       alert("我已经同意.....");
    }
  })
});