JavaScript操作DOM与jQuyer操作DOM的对比

1.通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。

2.通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。

3.jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

4.数组的索引是从0开始的,也就是第一个元素下标是0

例子:

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

var $div = $(‘div‘) //jQuery对象

var div = $div.get(0) //通过get方法,转化成DOM对象

5.通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

jQuery选择器:元素选择器   id选择器    类选择器    *选择器  层级选择器  属性选择器(子元素 后代元素 兄弟元素 相邻元素

注意:

  1. IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的
  2. getElementById的参数在IE8及较低的版本不区分大小写
  3. IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A
  4. IE8及较低的版本,浏览器不支持getElementsByClassName

原生获取:

//获取页面中所有的元素
var elements1 = document.getElementsByTagName(‘*‘);

jq获取:

//获取页面中所有的元素
var elements2 = $("*")? ;
//===表示数据和类型都相等
if(elements2.length === elements1.length){
  elements2.css("border","1px solid red");
}

子选择器
$(‘div > p‘) 选择所有div元素里面的子元素P

后代选择器
$(‘div p‘) 选择所有div元素里面的p元素

相邻兄弟选择器
$(".prev + div")选取prev后面的第一个的div兄弟节点

一般相邻选择器
$(".prev ~ div")选取prev后面的所有的div兄弟节点

几种方式可以隐藏一个元素:

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
  1. :nth-child(index)从1开始的,而eq(index)是从0开始的
  2. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

操作特性的DOM方法主要有3个,getAttribute方法、setAttribute方法和removeAttribute方法

attr()有4个表达式

  1. attr(传入属性名):获取属性的值
  2. attr(属性名, 属性值):设置属性的值
  3. attr(属性名,函数值):设置属性的函数值
  4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)

优点:

attr、removeAttr都是jQuery为了属性操作封装的,直接在一个 jQuery 对象上调用该方法,很容易对属性进行操作,也不需要去特意的理解浏览器的属性名不同的问题

注意的问题:

dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性

获取Attribute就需要用attr,获取Property就需要用prop
时间: 2024-10-13 10:42:59

JavaScript操作DOM与jQuyer操作DOM的对比的相关文章

JavaScript中的DOM及相关操作

一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,而树形结构就是我们常说的DOM树. 维基百科中介绍DOM更为准确:DOM是一种跨平台和语言非依赖性的应用程序编程接口,即处理现在的HTML,XHTML或XML文档作为树结构,其中每个节点是一个对象,每个节点表示

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作

使用js的三种方式 1.直接在HTML标签中,使用事件属性,调用js代码: <button onclick="alert('点我呀')">点我啊!<tton> 2.在页面的任意位置,使用script标签 <script type="text/javascript"> alert('哈哈哈') </script> 3.外部:使用script标签 src属性选择外部地址, type属性选择"text/javasc

基础DOM和CSS操作

DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery中,已经将最常用的DOM操作方法进行了有效封装,并且不需要考虑浏览器的兼容性. D表示的是页面文档Document.O表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. DOM有三种形式,标准DOM.HTML DOM.CSS DOM(难道不是XML DOM吗?),大部

ExtJs4学习(二):Dom文档操作

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库.在企业级B/S解决方案应用上独占优势.就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery.下面我就通过对比API,体现两种框架的异曲同工之处.我们已JQuery API为主线,来看看ExtJs是否有替代的方案. 注意一点:ExtJs4.0相对上

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(

基础DOM和CSS操作(三)

CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 width() 获取某个元素的长度 width(value) 设置某个元素的长度 width(function(index,width) {}) 通过匿名函数设置某个元素的长度 html代码(部分)如下: <div style="background: #eee; width: 800px;&quo

DOM 手势和操作 (HTML)

通过基本文档对象模型 (DOM) 手势事件处理,你可以自定义使用 Windows 触摸语言(如滑动.旋转和调整大小)描述的某些基本手势的用户体验. 针对 Windows 8.1 进行的更新:  Windows 8.1 针对指针输入 API 引入了多个更新和改善措施.请参阅 Windows 8.1 的 API 更改获取详细信息. 如果你不熟悉使用 JavaScript 开发应用:  阅读这些主题来熟悉此处讨论的技术. 采用 JavaScript 创建你的第一个应用 采用 JavaScript 的应

10-JavaScript之DOM的事件操作

JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 2.事件 JS是以事件驱动为核心的一门语言 2.1事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了.这件

关于DOM的事件操作/DOM介绍/关于DOM操作的相关案例

一.关于DOM的事件操作 1.JavaScript基础分为三个部分: ECMAScript: JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句 DOM: 文档对象模型, 操作网页上的元素的API, 比如让盒子移动, 变色,  轮播图等.. BOM: 浏览器对象模型, 操作浏览器部分功能的API, 比如让浏览器自动滚动 2.事件 JS是以事件驱动为核心的一门语言 3.事件的三要素 (1).事件的三要素: 事件源, 事件, 事件驱动程序 (2).总结: 事件源: