自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 JavaScript 对象01

文章目录1.JavaScript对象定义2.JavaScript原始值2.1什么是原始值3.对象是包含变量的变量4.对象属性5.对象方法6.创建JavaScript对象6.1使用对象字面量6.2使用JavaScript关键词new7.对象是易变的1.JavaScript对象定义在JavaScript中,对象特别的重要,理解了对象,就理解了JavaScript在JavaScript 中几乎所有的事物都是对象- 布尔是对象(如果用new 关键词定义 虽然不推荐)- 数字是对象 (同上)- 字符串

2021-03-07 16:52:45 126

原创 JavaScript 表单:验证输入,自动HTML表单验证,数据验证,约束验证

-1.JavaScript表单验证<!DOCTYPE html><html><head><script>function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("必须填写姓名!"); return false; }}</script></head><b

2021-03-07 15:29:20 1928

原创 JavaScript 性能

-1减少循环中的活动循环每迭代一次,循环中的每条语句包括for语句,都会执行;能够放在循环之外的语句或赋值会使循环运行的更快。例子:var i;for(i = 0; i < arr.length;i++){}优化后:var i; var l=arr.length;for(i = 0;i < l;i++){}-2减少DOM访问如果需要访问某个DOM元素若干次,那么访问一次并把它作为本地变量来使用例子:var obj;obj = document.getElem

2021-03-07 15:16:23 110

原创 javascript 样式指南和代码约定

该文档包含了很全面的JavaScript 代码编写规范:javascript 样式指南和代码约定

2021-03-07 14:43:54 86

原创 JavaScript关键词 之let

ES2015引入了两个重要的JavaScript新关键词:let 和 const这两个关键词在JavaScript 中提供了块作用域(Block Scoped)变量 和常量ES2015之前只有两种类型的作用域:JavaScript作用域详解-1JavaScript块作用域通过var 关键词声明的变量没有块作用域;在块{}内声明的变量可以从块之外进行访问。例如:{var x = 10;}//此处可以使用 x 使用 let 关键词声明拥有块作用域的变量,在{}内声明的变量无法从块.

2021-03-07 14:23:01 496

原创 JavaScript this关键词详解

JavaScript this 关键词首先展示一个实例让我们了解一下 this:var person = { firstName:"bill"; lastName:"Gates"; id:"422"; fullName:function(){ return this.firstName + "" + this.lastName; }};-1.this 是什么?JavaScript this关键词指的是它所属的对象。它的取值不是固定的,具体取决于它所使用的位置在方法中,t

2021-03-07 13:32:48 125

原创 javascript提升(Hoisting)详解

JavaScript(Hoisting)提升:是JavaScript将声明移动至端部的默认行为。1.JavaScript声明会被提升在JavaScript中,可以在使用变量之后对其进行声明,也就是说可以在声明变量之前使用它但是这并不是说明可以不声明变量而去使用它,因为在严格模式下这样是不合法的。例子1和例子2的结果相同:例子1:x =5;dmeo = document.getElementById("demo");demo.innerHTML = x;var x; //声明x例.

2021-03-07 00:03:26 286

原创 JavaScript作用域详解;严格模式概念

首先我们要了解什么是作用域?作用域值得是我们有权访问的变量集合。-1.JavaScript 函数作用域JavaScript中有两种作用域类型:- 局部作用域- 全局作用域所谓函数作用于就是:每个函数创建一个新的作用域;作用域决定了这些变量的可访问性;函数内部定义的变量在函数外部是不可访问的。-1.1局部JavaScript 变量在JavaScript 函数中声明的变量,会成为函数的局部变量局部变量的作用域是局部的:只能在函数内部访问它们。例如: 例子中 a 只能在函数

2021-03-06 21:52:57 189

原创 JavaScript 错误 ( 内涵案例 ) - Throw和Try to Catch

JavaScript try 和 catchtry 语句允许定义一个代码块,以便在执行时检测错误catch 语句允许定义一个要执行的代码块,如果try 代码块中发生错误JavaScript 语句中try 和 catch 成对出现try{ //供测试的代码块} catch(err){ //处理错误的代码块}JavaScript抛出错误当发生错误时,JavaScript通常会停止并产生错误信息实际上会创建带有两个属性的error对象 :name和messagethrow 语句

2021-03-06 20:49:21 82

原创 JavaScript类型转换最全攻略以及属性

JavaScript类型转换-1.1数值 === > 字符串全局方法 String()能够把数字转换为字符串,它可以用于任何类型的数字,文字,变量或者表达式String(x) //数值变量x 返回字符串String(234) String(100+12)数字方法toString() 同理x.toString() -1.2字符串 === > 数值全局方法Number()可把字符串转为数字Number("3.13") //返回3.13Number("8

2021-03-06 20:25:01 106

原创 javascript循环之for / in循环

不同类型的循环for - 多次遍历代码块for/in - 遍历对象属性while - 当指定条件为 true 时循环一段代码块do/while - 当指定条件为 true 时循环一段代码块着重了解一下 for / in 语句 遍历对象属性实例:var person = { fname:" bill", lname: " Gatas",age:12}var txt = "";var x;for(x in person){ text + =person[x];}...

2021-03-05 21:06:28 363

原创 JavaScript 比较与逻辑运算符

1.比较运算符运算符描述==等于===值相等且类型相同!=不相等!==值不相等或者类型不相等2. 逻辑运算符&& 或 ; || 与;! 非-三元运算符表达式 ? value1 : value23.比较不同的类型不同的类型的数进行比较会出现很多不可预料的结果如果将字符串和数字进行比较,那么在作比较的时候JavaScript会把字符串转换为数值,空字符串将被转换为0,非数值字符串将被转换为false或者NaN。例如

2021-03-05 20:15:51 66

原创 JavaScript之Boolean()函数用来干嘛?

JavaScript 布尔逻辑代表两个值之一:true或者false1. Blooean()函数可以用该函数来确定表达式(或者变量)是否为真。例如:Boolean(10 > 9) // 返回 true(10 > 9) //返回 true2. 什么样的值在布尔函数中为true or false?凡是具有真实值的即为true例如:整数:100;小数:4.12;负数:-25;字符串:“hello” ,字符串false : “false” ,

2021-03-05 20:00:27 1321

原创 JavaScript随机 产生随机数的随机函数

JavaScript随机1.我们可以通过Math.random()返回 0(包括)至1(不包括)之间的随机数 Math.random();但是它返回的数总是小于1。2.我们可以借助Math.random() 和Math.floor()一起使用用于返回随机整数。例如:Math.floor(Math.random() * 10); //返回 0 - 9 之间的数 因为floor是向下舍入的。Math.floor(Math.random() * 10) + 1 ; //返回 1 -10 之

2021-03-05 19:00:11 1772

原创 JavaScript 之 Math对象(全面)

JavaScript Math 对象W3Cschool Math对象参考手册1.Math.round(x)返回值是 x四舍五入为最接近的整数Math.round(9.6); //返回102.Math.pow(x,y)返回值是x的y次幂Math.pow(3,2) ; //返回93.Math.sqrt(x)返回值为x的平方根Math.sqrt(64); //返回84.Math.abs(x)返回x的绝对值Math.abs(-4.3); // 返回4.35.Ma

2021-03-05 18:48:10 129

原创 JavaScript数组迭代方法:forEach(),map(),filter(),reduce(),every(),some(),indexOf(),lastIndexOf(),find()

JavaScript数组迭代方法1.Array.forEach()forEach()方法为每个数组元素调用一次函数(回调函数)该函数接收三个参数:项目值,项目索引,数组本身。<!DOCTYPE html><html lang="en"><head></head><body> <p id="demo"></p></body><script> var number

2021-03-05 14:23:17 181

原创 javascript数组之数组排序:数组按照字符顺序排序,反转数组,数字排序,比值函数,随机排序,查找最大最小数组值,自制找数组最高最低值办法,排序对象数组

1.数组排序 sort()sort() 方法以字母顺序对数组进行排序 var fruits = ["Banana", "Orange", "Apple", "Mango"]; console.log(fruits.sort());2.反转数组 reverse()reverse() 方法反转数组中的元素 var array = ["apple", "banana", "orange"]; console.log(array.reverse());3.数字排序 sort(

2021-03-04 22:42:43 639 1

原创 JavaScript数组之数组方法:toString()、pop()、push()、shift()、unshift()、更改元素、删除元素、splice()、concat()、slice()、

数组方法1.把数组转换为字符串 toString()**JS方法toString() 把数组转换为数组值(逗号分隔开)的字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

2021-03-04 21:18:06 587 1

原创 JavaScript之数组:数组的属性:

数组W3Cschool关于数组的文档数组是一种特殊变量,它一次可以存放一个以上的值,例如:var array_name = [ "tom","jack","Alice"];同时,也可以用JS关键词new创建数组 var name = new Array("tom","jack","jane");两者完全一致,建议第一种。1.访问数组元素我们可以通过索引号来引用某个数组元素[0]是数组中的第一个元素。var array_name = [ "tom","jack","Alice"];doc

2021-03-04 18:59:58 684 1

原创 JavaScript数值方法:把变量转换为数值的方法:

JavaScript数值方法W3Cschool关于数值方法的文档1.Number方法和属性toString() 方法:以字符串返回数组,所有数字方法可用于任意类型的数字。var x = 11;x.toString(); // 从变量 x 返回 11(11).toString(); // 从文本 11 返回 11(10 + 1).toString(); // 从表达式 10 + 1 返回 11toExponential() 方法:返回字符串值,它包

2021-03-04 18:07:06 1278 2

原创 JavaScript之事件 ,字符串方法:查找、检索、提取、替换、转换大小写、连接多个字符串、删除字符串两端空白、提取字符串字符、字符串转数组、

W3Cschool JS事件完整文档1.事件事件描述onchangeHTML元素已经发生改变onclick用户点击了HTML元素onmouseover用户将鼠标移动到html元素上onmouseout用户将鼠标移开HTML元素onkeydown用户按下键盘按键onload浏览器已经完成页面加载例子<!DOCTYPE html><html lang="en"><head> <m.

2021-03-04 16:01:56 237 1

原创 JavaScript之算数,数据类型

JS算数 :包括ES7的幂运算数据类型类型例子数字var length = 7;字符串var name = ‘tom’数组var name = [“tom”,“lily”,“jack”]对象var x = { name:“tom”,age:12}数据类型的概念当数值与字符串相加时,JavaScript 将把数值视作字符串JS从左向右计算表达式,不同的次序会产生不同的结果var x = 12 + 1 + "tom";var y = "to.

2021-03-04 13:53:24 63 1

原创 JavaScript 之语句

在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。W3Cschool 关于该知识点的文档:JS语句语句实例var a,b,c;a=12;b=13;c=a+bJS语法规范分号:分号分隔JavaScript 语句 ,每条可执行语句之后需要添加分号如果有分号,允许在同一行写多条语句JavaScript 会忽略多个空格var person = 'tom'; 等同于var person ='tom';运算符旁边加空格是好的var x =.

2021-03-04 13:50:44 45 1

原创 JavaScript 之输出

W3school文档地址:https://www.w3school.com.cn/js/js_output.aspJavaScript输出window.alert() 警告框document.write() 写html 输出innerHTML 写入HTML元素console.log() 写入浏览器控制台使用innerHTML如果要访问html 元素,js可以使用document.getElementById(id) 等方法。<!DOCTYPE html><h.

2021-03-04 13:17:11 49 1

原创 DOM--操作元素案例:分时显示不同的图片以及问候语;仿淘宝关闭标签案例;隐藏显示文本框内容;仿新浪注册页面中密码长度的判定

DOM–操作元素案例:分时显示不同的图片以及问候语分析:根据不同的时间来判断,所以需要获取到系统的时间。利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src需要一个div来显示不同问候语,修改元素内容就可以代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content

2020-07-25 14:15:16 1035

原创 DOM--操作元素--innerText和innerHTML及其区别;常用元素的属性操作;表单元素的属性操作;样式属性操作;通过className更改元素样式

操作元素:JavaScript的DOM操作可以改变网页内容,样式和结构,我们可以利用DOM 操作元素来改变元素里面的内容属性等。改变元素的内容element.innerText从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。element.innterHTML起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换行案例:innerText<!DOCTYPE html><html lang="en"><head&g

2020-07-25 14:14:46 437

原创 DOM--事件基础(事件三要素)

什么是事件?JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。简单理解:触发–>响应机制案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .

2020-07-25 12:06:59 1418

原创 DOM--获取body和HTML元素

获取特殊元素–body,html获取body元素获取HTML元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></h

2020-07-24 15:01:25 2667

原创 DOM--获取元素:如何获取页面元素?

一、关于DOM什么是DOM?文件对象模型(Document Object Model),是w3c组织推荐的处理可扩展语言(HTML/XML)的标准编程接口。DOM树1.文档:一个页面就是一个文档,DOM中使用Document表示。2.元素:页面里面所有的标签都是元素,使用element表示3.节点:网页中所有内容都是节点(标签,属性,文本,注释等),使用node表示。DOM把以上内容都看做是对象3.获取元素–如何获取页面元素? 根据ID获取:使用getElementBy

2020-07-24 05:18:16 675

原创 Web APIs和JS基础关联性 + API和Web API

一、Web APIs和JS基础关联性JS的组成:JavaScript=ECMAScript +DOM+BOM (JavaScript语法+页面文档对象模型+浏览器对象模型)。注:其中Web APIs中为:BOM + DOM 。JS基础阶段:学习JavaScript标准规定的基本语法,为以后的课程打基础,无法实现网页交互效果。Web APIs阶段:w3c组织的标准;主要学习BOM和DOM。总结:JS学习基础语法是为后面做铺垫,Web APIs是JS的应用,大量使用JS基础语法做交互效果。二、A

2020-07-24 05:07:34 327

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除