12、节点的复制使用 cloneNode() 方法对节点进行复制时,它会复制节点的所有特点包括各种属性这个方法默认只会复制当前节点,而不会复制节点的子节点可以传递一个true作为参数,这样该方法也会将元素的子节点一起复制在本案例中,像li是一个节点,里面的“孙悟空”是一个子节点,需要使用true来一块复制上<body> <button id="btn01">点我一下
10、DOM的修改appendChild()用于给一个节点添加子节点list.appendChild(li)insertAdjacentElement()可以向元素的任意位置添加元素两个参数:1.要添加的位置 2.要添加的元素beforeend 标签的最后 afterbegin 标签的开始beforebegin 在元素的前边插入元素(兄弟元素) afterend 在元素的后边插入元素(兄弟元素)l
7、事件事件(event)事件就是用户和页面之间发生的交互行为比如:点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键...可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互绑定响应函数的方式:1.可以直接在元素的属性中设置2.可以通过为元素的指定属性设置回调函数的形式来绑定事件(一个事件只能绑定一个响应函数)3.可以通过元素addEventListener()方法来绑定事件<bo
6、属性节点属性节点(Attr)在DOM也是一个对象,通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点 ?方式一:读取:元素.属性名(注意,class属性需要使用className来读取)读取一个布尔值时,会返回true或false修改:元素.属性名 = 属性值方式二:读取:元素.getAttribute(属性名)修改:元素.setAttribute(属性名, 属性值)删除
5、文本节点在DOM中,网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象,但是我们通常不会这么做我们可以直接通过元素去修改其中的文本 修改文本的三个属性element.textContent获取或修改元素中的文本内容- 获取的是标签中的内容,不会考虑css样式element.innerText获取或修改元素中的文本内容innerText获取内容时,会考虑css样式通过i
4、div元素的原型链HTMLDivElement -> HTMLElement -> Element -> Node -> ...通过元素节点对象获取其他节点的方法element.childNodes 获取当前元素的子节点(会包含空白的子节点)element.children 获取当前元素的子元素element.firstElementChild 获取当前元素的第一个子元
1、初识要使用DOM来操作网页,我们需要浏览器至少得先给我一个对象才能去完成各种操作所以浏览器已经为我们提供了一个document对象,它是一个全局变量可以直接使用document代表的是整个的网页<body> <button id="btn">点我一下</button> <script> console.log(do
字符串split()可以根据正则表达式来对一个字符串进行拆分search()可以去搜索符合正则表达式的内容第一次在字符串中出现的位置replace()根据正则表达式替换字符串中的指定内容match()根据正则表达式去匹配字符串中符合要求的内容matchAll()根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)它返回的是一个迭代器<script> let
正则表达式正则表达式正则表达式用来定义一个规则通过这个规则计算机可以检查一个字符串是否符合规则或者将字符串中符合规则的内容提取出来正则表达式也是JS中的一个对象,所以要使用正则表达式,需要先创建正则表达式的对象new RegExp() 可以接收两个参数(字符串) 1.正则表达式 2.匹配模式<script> let reg = new RegExp('a','i')//
10、包装类在JS中,除了直接创建原始值外,也可以创建原始值的对象通过 new String() 可以创建String类型的对象通过 new Number() 可以创建Number类型的对象通过 new Boolean() 可以创建Boolean类型的对象但是千万不要这么做包装类:JS中一共有5个包装类String --> 字符串包装为String对象Number --> 数值包装为N
9、日期的格式化toLocaleString()可以将一个日期转换为本地时间格式的字符串参数:描述语言和国家信息的字符串 zh-CN 中文中国 zh-HK 中文香港 en-US 英文美国需要一个对象作为参数,在对象中可以通过对象的属性来对日期的格式进行配置 dateStyle 日期的风格 timeStyle 时间的风格 full long medium short hour12 是否采用12小时值
8、DateDate在JS中所有的和时间相关的数据都由Date对象来表示对象的方法:getFullYear() 获取4位年份getMonth() 返当前日期的月份(0-11)getDate() 返回当前是几日getDay() 返回当前日期是周几(0-6) 0表示周日......getTime() 返回当前日期对象的时间戳时间戳:自1970年1月1日0时0分0秒到当前时间所经历的毫秒数计算机底层存储
3、对象的序列化对象的序列化JS中的对象使用时都是存在于计算机的内存中的 序列化指将对象转换为一个可以存储的格式 在JS中对象的序列化通常是一个对象转换为字符串(JSON字符串)序列化的用途(对象转换为字符串有什么用):对象转换为字符串后,可以将字符串在不同的语言之间进行传递 甚至人可以直接对字符串进行读写操作,使得JS对象可以不同的语言之间传递用途: 1. 作为数据交换的格式 2. 用来编写配置
1、解构对象数组中可以存储任意类型的数据,也可以存数组,如果一个数组中的元素还是数组,则这个数组我们就称为是二维数组解构对象,方便两数交换数值;可以反向赋值对象,数组可以在解构的同时,进行声明<script> const arr = ["孙悟空", "猪八戒", "沙和尚"] let a, b, c // a = a
19、可变参数argumentsarguments是函数中又一个隐含参数arguments是一个类数组对象(伪数组)和数组相似,可以通过索引来读取元素,也可以通过for循环变量,但是它不是一个数组对象,不能调用数组的方法arguments用来存储函数的实参,无论用户是否定义形参,实参都会存储到arguments对象中可以通过该对象直接访问实参<script> functi
18、数组的方法sort()sort用来对数组进行排序(会对改变原数组)sort默认会将数组升序排列 注意:sort默认会按照Unicode编码进行排序,所以如果直接通过sort对数字进行排序 可能会得到一个不正确的结果参数:可以传递一个回调函数作为参数,通过回调函数来指定排序规则 (a, b) => a - b 升序排列 (a, b) => b - a 降序排列forEach()用来
17、递归递归调用自身的函数称为递归函数递归的作用和循环是基本一直递归的核心思想就是将一个大的问题拆分为一个一个小的问题,小的问题解决了,大的问题也就解决了编写递归函数,一定要包含两个要件:1.基线条件 —— 递归的终止条件2.递归条件 —— 如何对问题进行拆分递归的作用和循环是一致的,不同点在于,递归思路的比较清晰简洁,循环的执行性能比较好在开发中,一般的问题都可以通过循环解决,也是尽量去使
15、函数创建一个函数,第一次调用时打印1,第二次调用打印2,以此类推可以利用函数,来隐藏不希望被外部访问到的变量闭包:闭包就是能访问到外部函数作用域中变量的函数什么时候使用:当我们需要隐藏一些不希望被别人访问的内容时就可以使用闭包构成闭包的要件:函数的嵌套内部函数要引用外部函数中的变量内部函数要作为返回值返回<script> // let num = 0
目前我们的函数只能过滤出数组中age属性小于18的对象,我们希望过滤更加灵活:比如:过滤数组中age大于18的对象age大于60的对象age大于n的对象过滤数组中name为xxx的对象过滤数组中的偶数...一个函数的参数也可以是函数,如果将函数作为参数传递,那么我们就称这个函数为回调函数(callback)<script> class Person {
11、排序思路一:冒泡排序9, 1, 3, 2, 8, 0, 5, 7, 6, 4比较相邻的两个元素,然后根据大小来决定是否交换它们的位置例子: 第一次排序:1, 3, 2, 8, 0, 5, 7, 6, 4, 9 第二次排序:1, 2, 3, 0, 5, 7, 6, 4, 8, 9 第三次排序:1, 2, 0, 3, 5, 6, 4, 7, 8, 9 ... 倒数第二次 0, 1, 2, 3,
9、数组的方法push()向数组的末尾添加一个或多个元素,并返回新的长度 pop()删除并返回数组的最后一个元素unshift()向数组的开头添加一个或多个元素,并返回新的长度shift()删除并返回数组的第一个元素splice()可以删除、插入、替换数组中的元素参数:删除的起始位置删除的数量要插入的元素返回值:返回被删除的元素reverse()反转数组<script>
7、浅拷贝和深拷贝浅拷贝(shallow copy)通常对对象的拷贝都是浅拷贝浅拷贝顾名思义,只对对象的浅层进行复制(只复制一层)如果对象中存储的数据是原始值,那么拷贝的深浅是不重要浅拷贝只会对对象本身进行复制,不会复制对象中的属性(或元素)深拷贝(deep copy)深拷贝指不仅复制对象本身,还复制对象中的属性和元素因为性能问题,通常情况不太使用深拷贝<script>
1、简介数组(Array)数组也是一种复合数据类型,在数组可以存储多个不同类型的数据数组中存储的是有序的数据,数组中的每个数据都有一个唯一的索引 可以通过索引来操作获取数据数组中存储的数据叫做元素索引(index)是一组大于0的整数创建数组 通过Array()来创建数组,也可以通过[]来创建数组向数组中添加元素 语法: 数组[索引] = 元素读取数组中的元素 语法: 数组[索引] - 如果读取了一
14、旧类早期JS中,直接通过函数来定义类一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数一个函数如果通过new调用 new xxx() 那么这个函数就是一个够早函数 等价于: class Person{ }<script> var Person = (function () {
13、instanceof和hasOwninstanceof 用来检查一个对象是否是一个类的实例instanceof检查的是对象的原型链上是否有该类实例 只要原型链上有该类实例,就会返回truedog -> Animal的实例 -> Object实例 -> Object原型Object是所有对象的原型,所以任何和对象和Object进行instanceof运算都会返回tr
11、原型对象访问一个对象的原型对象 对象.proto Object.getPrototypeOf(对象)原型对象中的数据:对象中的数据(属性、方法等)constructor (对象的构造函数)注意: 原型对象也有原型,这样就构成了一条原型链,根据对象的复杂程度不同,原型链的长度也不同 p对象的原型链:p对象 --> 原型 --> 原型 --> null obj对象的原型链:ob
9、对象的结构对象中存储属性的区域实际有两个:对象自身直接通过对象所添加的属性,位于对象自身中在类中通过 x = y 的形式添加的属性,位于对象自身中原型对象(prototype)对象中还有一些内容,会存储到其他的对象里(原型对象)在对象中会有一个属性用来存储原型对象,这个属性叫做__proto__原型对象也负责为对象存储属性, 当我们访问对象中的属性时,会优先访问对象自身的属性, 对象自身不包含
6、封装面向对象的特点: 封装、继承和多态1.封装对象就是一个用来存储不同属性的容器对象不仅存储属性,还要负责数据的安全直接添加到对象中的属性,并不安全,因为它们可以被任意的修改如何确保数据的安全: 1.私有化数据将需要保护的数据设置为私有,只能在类内部使用 2.提供setter和getter方法来开放对数据的操作属性设置私有,通过getter setter方法操作属性带来的好处 可以控制属性的读
4、方法<script> class Person{ name = "孙悟空" // sayHello = function(){ // } // 添加方法的一种方式 sayHello(){ console.log('大家好,我是' + this.
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号