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

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

  1. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

  2. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  3. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  4. 基础DOM和CSS操作(三)

    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...

  5. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  6. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  7. HTMLCollection 对象详解,以及为什么循环获取的dom合集操作可能会出现下标不正确的情况?

    有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了 比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassNam ...

  8. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  9. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

随机推荐

  1. Vue框架之组件系统

    1,Vue组件系统之全局组件 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称 <!DOCTYPE html> <html lang="zh-cn" ...

  2. YTU 2440: C++习题 复数类--重载运算符+,-,*,/

    2440: C++习题 复数类--重载运算符+,-,*,/ 时间限制: 1 Sec  内存限制: 128 MB 提交: 1189  解决: 774 题目描述 定义一个复数类Complex,重载运算符& ...

  3. Python之xlsx文件与csv文件相互转换

    1 xlsx文件转csv文件 import xlrd import csv def xlsx_to_csv(): workbook = xlrd.open_workbook('1.xlsx') tab ...

  4. BZOJ_2081_[Poi2010]Beads_哈希

    BZOJ_2081_[Poi2010]Beads_哈希 Description Zxl有一次决定制造一条项链,她以非常便宜的价格买了一长条鲜艳的珊瑚珠子,她现在也有一个机器,能把这条珠子切成很多块(子 ...

  5. bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+位运算

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4811 因为位运算的结果有可合并性,所以可以树链剖分,线段树维护: 细节很多,特别要注意从左往 ...

  6. hdu5396(区间DP)

    题目意思: 给定一个表达式,运算符没有优先级,求不同顺序计算,所有可能的得到的结果之和. 由于运算符没有优先级,所以有多种顺序去计算,设d[i][j]表示[i,j]区间表达式通过不同顺序计算,所以可能 ...

  7. 洛谷 P1083 借教室【二分+差分/线段树】

    二分mid,然后用1~mid的操作在差分序列上加减,最后把差分序列前缀和起来,看是否有有超过初始r值的 #include<iostream> #include<cstdio> ...

  8. bzoj 2157: 旅游【树链剖分+线段树】

    裸的树链剖分+线段树 但是要注意一个地方--我WA了好几次才发现取完相反数之后max值和min值是要交换的-- #include<iostream> #include<cstdio& ...

  9. 如何快捷安装并配置MySQL 下载破解Navicat for mysql

    首先,要先下载MySQL,进官网下载相应的mysql版本,这个不收费,实在不知道的可以参考一下这篇:https://blog.csdn.net/qq_37172528/article/details/ ...

  10. linux 磁盘 分区、格式化、挂载

    将容量结果易读的容量格式显示出来df -h 分区 初次接触仅分成两个分区(“/与Swap”)预留一个备用的剩余磁盘容量 磁盘分区 fdisk #df /找出磁盘文件名#fdisk /dev/hdc#m ...