分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery(0)——Dom对象和jQuery包装集

发布时间:2023-09-06 02:16责任编辑:白小东关键词:jQuery

Dom对象和jQuery包装集

开始学习jQuery,没想到还要知道这个概念。

Dom对象

DOM(Document Object Model)文档对象模型

在w3c中是这样说明它的:

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

jQuery包装集

jQuery包装集可以说是Dom对象的扩充.
在jQuery的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:

var jQueryObject = $("#testDiv");

jQuery包装集拥有丰富的属性和方法
并且,DOM对象和jQuery对象的的方法是不能互相调用的!

Dom对象与jQuery对象的转换

1. Dom转jQuery包装集:

使用jQuery选择器直接构造,如:

$('#testID');

或者我们已经获取了一个Dom元素,比如:

var dom = document.getElementById("testID");

直接使用选择器:

var domToJQueryObject = $(dom);

2. jQuery包装集转Dom对象

  • 通过索引 [index] 的方法,访问其中一个元素:
var domObject = $("#testID")[0]; ???????//dom对象
  • 通过jQuery的get(index)方法得到相对应的对象:
var jQueryObject = $('#testID'); ???//jQuery对象var domObject = jQueryObject.get(0); ???//dom对象

PS: jQuery中的某些遍历方法(如each)中的this也是dom对象。

jQuery(0)——Dom对象和jQuery包装集

原文地址:https://www.cnblogs.com/famine/p/9716210.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved