JavaScript
weixin_46370867
这个作者很懒,什么都没留下…
展开
-
DOM留言板案例
下面是小编写的一个DOM留言板案例,先来看一下效果:思路:先做静态页面<body><h2>简单留言板</h2><div id="box"></div><!-- 写留言的留言板 --><textarea name="" id="text" cols="30" rows="10"></textarea><!-- 留言的按钮 --><input type="button" id=原创 2020-12-08 22:29:40 · 356 阅读 · 0 评论 -
报错:Uncaught TypeError: 获取的元素节点.setAttribute is not a function
我们在写代码的时候可能会遇到类似的报错:Uncaught TypeError: div1.setAttribute is not a function源代码是这样的:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-12-07 23:39:29 · 8237 阅读 · 2 评论 -
节点操作大全(二)~操作节点的属性
下面是对节点属性操作的整理,希望可以帮助到有需要的小伙伴~跟小编来康康吧文章目录获取节点的属性值设置节点的属性值删除节点的属性获取节点的属性值方式1:元素节点.属性;元素节点[属性]; // 注意:中括号里面的属性名要加引号实例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2020-12-07 23:14:05 · 349 阅读 · 0 评论 -
DOM节点操作大全(一)
文章目录创建节点插入节点删除节点创建节点利用JS重新创建一个节点创建元素节点document.createElement(节点名);创建文本节点document.createTextNode(节点名);创建属性节点document.createAttribute(节点名);补充:创建元素节点的内容的另一种方式:获取的元素节点.innerHTML = "元素节点的内容";实例:<!DOCTYPE html><html lang="en">原创 2020-12-06 20:26:38 · 162 阅读 · 0 评论 -
DOM获取节点大全
获取节点是操作节点的前提,获取节点是很重要的,希望这篇文章可以帮助到有需要的小伙伴,跟小编一起来看看吧~文章目录直接获取DOM节点通过DOM节点之间的关系获取指定节点定位页面元素属性判断元素的节点类型nodeType属性获取节点的节点名称nodeName属性设置或返回指定节点的节点值nodeValue属性直接获取DOM节点方式1:通过id获取单个标签var box1 = document.getElementById("box1");方式2:通过标签名获取变迁数组,所以有svar arr1 =原创 2020-12-05 22:46:10 · 382 阅读 · 0 评论 -
DOM介绍~超好理解的哦
下面是对DOM的介绍,希望可以帮助到有需要的小伙伴,跟小编来看看吧~文章目录什么是DOMDOM的组成DOM解析过程:DOM树(一切都是节点)DOM的用处什么是DOMDOM是文档对象模型,DOM把html文档结构化,定义了一个规范用来通过JS来操作html元素。DOM的组成DOM是由节点组成的。DOM解析过程:html加载完毕后,浏览器会把html文档结构化生成一个DOM树获取DOM的元素节点操作该元素(改变该元素的属性或给该元素添加事件)DOM树(一切都是节点)在HTML中,一切原创 2020-12-04 22:43:16 · 1543 阅读 · 9 评论 -
前端JavaScript之DOM事件操作~都是干货
DOM事件操作原创 2020-12-03 23:53:31 · 208 阅读 · 0 评论 -
DOM事件对象
当事件被触发的时候会创建Event事件对象并依次传递给事件监听器。event就是事件对象Event事件对象是事件处理函数的参数,而参数是允许自定义的,所以Event事件对象是的名称是可以自定义的。Event事件对象中包含了该事件的信息以及该事件绑定在哪个元素上。Event事件对象是所有事件对象的父级MouseEvent事件对象 - 鼠标事件KeyboardEvent事件对象 - 键盘事件TouchEvent事件对象 - 触摸事件语法格式:element.addEventListener(原创 2020-12-01 23:06:10 · 40 阅读 · 0 评论 -
DOM注册事件的三种方式~满满的干货哦
Hello ~下面是对DOM注册事件的三种方式,希望可以帮助到有需要的小伙伴注册事件就是将JavaScript函数与指定的事件相关联。当该事件被触发时,绑定的函数会被调用。HTML页面元素提供的事件属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-11-30 16:14:47 · 882 阅读 · 0 评论 -
DOM之innerHTML属性
今天学习了innerHTML属性,希望可以帮助到有需要的小伙伴innerHTML属性用法:可以用来设置或返回表格行的开始标签和结束标签之间的HTML缺点:innerHTML属性存在安全问题(innerHTML属性的值不能由用户写)下面我们向列表中加一个li实例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view原创 2020-11-30 10:18:06 · 168 阅读 · 0 评论 -
JavaScript隐藏元素的5种方法~纯干货分享
Hello ~ 可爱的小伙伴我们又见面啦。下面是我和大家分享的JS隐藏元素的5种方法,希望可以帮助到有需要的小伙伴。让我们一起来看看吧 GO!第一种<!DOCTYPE html><html lang="en"><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><head> <meta charset="UTF-8">原创 2020-11-29 22:33:48 · 12037 阅读 · 3 评论 -
DOM判断节点类型分分钟搞定
小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! !Node对象中的nodeName获取指定节点的节点名称Node对象中的nodeType获取指定节点的节点类型nodeType 属性返回以数字值返回指定节点的节点类型如果节点是元素节点,则 nodeType 属性将返回 1如果节点是属性节点,则 nodeType 属性将返回 2如果节点是文本节点,则 nodeType 属性将返回 3Node对象中的nodeValue获取指定节点的值在DOM树结构中,文本节点是元原创 2020-11-29 17:11:19 · 1470 阅读 · 0 评论 -
JavaScript定位页面元素属性(满满的干货)
Document对象提供了用来定位HTML页面中特殊元素的方法。跟小编一起来看看吧,保证让你稳赚。documentElement: 获取HTML页面中的<html>元素head: 获取HTML页面中的<head>元素title: 获取HTML页面中的<title>元素body: 获取HTML页面中的<body>元素links: 获取HTML页面中的所有<a>元素images: 获取HTML页面中的所有<img>元素实例:原创 2020-11-28 23:32:45 · 1096 阅读 · 0 评论 -
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本切换效果</title></head>原创 2020-11-25 14:17:56 · 1645 阅读 · 1 评论 -
JavaScript创建页面节点
如果你看到前面的阴影,别怕,那是因为你背后有阳光下面是对JavaScript中创建页面节点的整理,希望可以帮助到有需要的小伙伴创建页面节点1、创建元素节点Document对象提供了createElement()方法创建节点语法格式:var element = document.createElement(tagName);tagName是参数,表示创建元素的元素名称。element是放回值,表示创建的元素。<!DOCTYPE html><html lang="e原创 2020-11-25 14:07:21 · 306 阅读 · 0 评论 -
JavaScript基础简单入门
不管脚步有多慢都不要紧,只要你在走,总会看到进步下面是对JavaScript语法的简单总结,希望可以帮帮助到有需要的小伙伴一、空格和换行不是JavaScript的语法内容,可有可无(建议使用)空格和换行可以将代码书写的更有可读性二、可选的分号分号是可选的,不是JavaScript语法强制要求的作用:表示一句话的结束当多行语句在一行编写的时候,分号必须存在var a="启嘉";console.log(a);/* 中间的分号是必须存在的 */三、区分大小写JavaScript是一种给原创 2020-11-23 20:12:01 · 134 阅读 · 0 评论 -
别踩白块
人生的胜者决不会在挫折面前失去勇气下面是对别踩白块小游戏的案例,希望可以帮助到有需要的小伙伴。当然,我的代码还有很多不足,希望大佬指点。别踩白块静态界面一个表格,用来表示游戏的白块和黑块一个用来表示分数的div一个用来表示时间的div代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2020-11-20 00:14:14 · 321 阅读 · 0 评论 -
window.onload()方法和window.onscroll()方法
也许你想成为太阳,可你却只是一颗星辰;也许你想成为大树,可你却是一棵小草。于是,你有些自卑。其实,你和别人一样,也是一片风景:做不了太阳,就做星辰,在自己的星座发光发热;做不了大树,就做小草,以自己的绿色装点希望……下面是对window对象中 window.onload()方法和window.onscroll()方法的整理,希望可以帮助到有需要的小伙伴JavaScript window对象BOM中最核心的对象就是Window对象window对象是浏览器窗口中的顶级(全局)对象window对象的属性原创 2020-11-17 23:06:31 · 6514 阅读 · 0 评论 -
JavaScript的重载和递归
下面是JavaScript的重载和递归没有重载在其他开发语言中,函数具有一种特性,叫做重载。所谓重载,就是定义多个同名的函数,但每一个函数接收的参数的个数不同,程序会根据调用时传递的实参个数进行判断,具体调用的是哪个函数。如下示例:function add( a, b ){ return a + b;}function add( a, b, c ){ return a + b+ c;}add( 1,2);//结果为3add( 1,2,3 );//结果为6递归在一个原创 2020-10-31 23:16:13 · 724 阅读 · 0 评论 -
JavaScript面向对象 - 严格模式
下面是对JavaScript中严格模式的整理,严格模式会对代码会有更高的要求,希望可以帮助到有需要的小伙伴。一、严格模式概述1、严格模式是什么严格模式是JavaScript中的一种限制性更强的变种方式。严格模式不是一个子集:它在语义上与正常代码有着明显的差异。不支持严格模式的刘览器与支持严格模式的刘览器行为上是不一样的,所以不能在未经严格模式特性测试情况下使用严格模式。严格模式可以与非严格模式共存,所以脚本可以逐渐的选择性加人严格模式。2、严格模式的目的严格模式会将JavaScript陷阱原创 2020-10-30 23:14:11 · 60 阅读 · 0 评论 -
JavaScript中this指针的绑定规则
this指针的绑定规则下面是对this指针绑定规则的整理,希望可以帮助到有需要的小伙伴。(1)默认绑定this被定义在某个函数体中该函数被独立调用,没有作为任何一个对象的方法时这个this就默认是指向全局对象的如果这个全局对象存在,就去找全局对象的同名属性,返回该属性的值如果没有可用的全局对象,还是会返回undefined// 把this定义在某个函数体中function fn(){ console.log(this.z);}// 独立调用该函数fn(); // unde原创 2020-10-29 22:55:28 · 132 阅读 · 1 评论 -
JavaScript错误与异常
JavaScript错误与异常下面是对JavaScript错误与异常的整理,希望可以帮助到有需要的小伙伴。1、错误与异常是什么错误,指程序中的非正常运行状态,在其它编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。通过使用JavaScript提供的异常处理语句,可以用结构化的方式来捕捉发生的错误,让异常处理代码与核心业务代码实现分离。错误与异常处理在应用中的重要性是毋庸置疑的。任何有影响力的Web应用都需要一套完善的错误处理机制。2、t原创 2020-10-28 21:11:23 · 645 阅读 · 1 评论 -
JavaScript自有属性与原型属性
自有属性与原有属性下面是对JavaScript面向对象中自有属性与原型属性的整理,希望可以帮助到有需要的小伙伴。1、自有属性与原型属性自有属性:构造函数本身的属性。 通过对象的引用添加的属性。其他对象可能无此属性;即使有,也是彼此独立的属性原型属性:通过原型所定义的属性。用于共享属性和方法。从原型对象中继承来的属性,一旦原型对象中属性值改变,所有继承自该原型的对象属性均改变。// 定义构造函数function Hero(name){ // 构造函数本身的属性 -- 自有属性原创 2020-10-27 22:39:28 · 386 阅读 · 1 评论 -
Function的常用属性和方法
下面是Function的一些常用的属性和方法,希望可以帮助到一些小伙伴。1、Function的length属性**全局的Function对象没有自己的属性和方法。**但是,因为它本身也是函数,所以他会通过原型链从Function.prototype上继承部分属性和方法。Function.length获取函数的形参的个数// Function类型的length属性 - 获取函数的参数(形参)的个数function fn1(){ console.log('this is function1'原创 2020-10-26 21:29:25 · 1221 阅读 · 1 评论 -
JavaScript面向对象之Function类型
JavaScript面向对象之Function类型下面是我对Function类型的总结,希望对您有帮助。“函数式编程"是一种"编程范式”(programming paradigm),也就是如何编写程序的方法论。1、Function与函数函数是这样的一段JavaScript代码,它只定义一次,但可能被执行或调用多次。Function类型是JavaScript提供的引用类型之一,JS可以通过Function类型创建Function对象。在JavaScript中,每一个函数都可以以对象的形式存在(无论原创 2020-11-10 00:21:46 · 134 阅读 · 0 评论 -
JavaScript面向对象之Object类型
JavaScript面向对象之Object类型大家都直到对象都是属于Object类型的。下面是一些详细总结,希望对可爱的小伙伴有帮助。在JS中所有的对象都拥有同一个父级,就是Object.Object提供了属性和方法,在JS的所有对象里面都是可以被直接使用的。因为Js中所有对象都是继承于Object的。Object创建对象的两个方式:new Objectcreate ObjectObject 构造函数创建一个对象包装器。语法:// 对象初始化器(Object initialise原创 2020-11-10 22:42:36 · 289 阅读 · 0 评论 -
JavaScript面向对象之构造函数
JavaScript面向对象之构造函数构造函数可以帮你构造出你喜欢的任何一个对象,给构造函数属性和方法,构造函数都能帮你办到。快来看看吧!构造函数又称为构造器或模板,是对象中的一个方法,在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用,因此不需要特别定义一个构造器方法。function Person() { console.log('Person instanitated');}var person = new Person();这里的Person()并不原创 2020-10-25 23:35:04 · 187 阅读 · 1 评论 -
面向对象简述
面向对象的简述今天我开始学习JavaScript面向对象了,下面是我对面向对象的理解,也希望可以帮助到您。面向对象的全称为 Object Oriented Programming,简称为OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。面向对象编程可以看作是使用一系列对象相互协作的软件设计。面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。凭其对模块化的重视,面向对象的代码开发更简单,更容易理解。面向对象的三个主要特征:封装、继承、多态。所有的程序是由一定的属性和行为原创 2020-11-11 20:42:40 · 129 阅读 · 0 评论 -
JavaScript -- DOM树
JavaScript – DOM树想要了解DOM树,先要了解几个JavaScript中的几个概念:文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点每一个属性是一个属性节点每一个注释是一个注释节点DOM的结构就是由各种子节点组成的,以HTML Document为根结点,其余节点为子节点,就组成了一棵DOM树。下面是一棵基本的DOM树JavaScript里面的DOM操作:首先要选中树上的某一个元素,然后对选中的元素进行操作举例:...原创 2020-10-24 20:14:23 · 102 阅读 · 1 评论 -
JavaScript 之 DOM中的三大对象
JavaScript 之 DOM中的三大对象一、Document对象1、Document对象是什么Document对象是DOM的标准规范中比较重要的对象之-。该对象提供了访问和更新HTML页面内容的属性和方法可以把Document对象理解为在DOM的标准规范中代表HTML页面Document对象提供的属性和方法,可以实现定位HTML页面中的元素,或者创建新的元素等功能2、测试Document对象document对象DOM预定义:已经创建完毕了,允许直接使用得到的是HTML页面的源代码原创 2020-10-23 22:08:41 · 823 阅读 · 1 评论 -
JavaScript DOM简单总结
JavaScript DOM简单的总结一、JavaScript的组成JavaScript由三个主要部分组成:ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型)1、ECMAscriptECMAScript语言是一门由ECMA组织的根据ECMA-262标准定制的脚本程序设计语言,改语言的内容包括了语法、类型、语句、关键字和操作符等内容。2015年之前的ECMAScript简称为ES5.2015年及之后的ECMAScript俗称为ES6. (从2015年开始,ECMASc原创 2020-10-22 22:01:01 · 139 阅读 · 1 评论 -
JavaScript对象简介
对象在深入学习JavaScript之前,先来了解一下对象、方法、属性的概念。1、对象是什么对象是指“事物”(包括人和物)在程序设计语言中额表现形式。这里的“事物”可以是任何东西(如某个客观存在的事物,或者某些较为抽象的概念)。2、对象的属性和方法对象的特征称为属性。对象的动作称为方法这里有一个口语方面的类比:对象往往是用名词来表示的(如book书、person人)方法一般都是动词(如read读、run跑)属性值则往往是一些形容词举例:对于猫这个对象来说:猫的特征包括颜色、名字、原创 2020-11-08 21:54:44 · 232 阅读 · 1 评论