JS学习
文章平均质量分 60
抱抱旋旋子
我很慢热,但很保温
在校大学生,日常更新学习笔记
展开
-
location对象,navigator对象,history对象学习
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。原创 2022-08-01 18:44:07 · 238 阅读 · 0 评论 -
JavaScript执行机制
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。先执行同步任务,打印出1,2,异步进程处理,三秒前进行点击事件,打印出click,三秒中到了打印出3,如图二。先执行同步任务,打印出1,2,异步进程处理,三秒过后打印出3,再进行点击事件,打印出click,如图一;中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。...原创 2022-07-30 22:51:39 · 346 阅读 · 0 评论 -
this指向问题
1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,在定时器方法的第一个参数的函数中,this指向的也是window对象。现阶段,我们先了解一下几个this指向。......原创 2022-07-30 20:54:25 · 103 阅读 · 0 评论 -
定时器学习
window对象给我们提供了2个非常好用的方法-定时器。setTimeout()setInterval()setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。注意∶1. window可以省略。⒉这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名0'三种形式。第三种不推荐3.延迟的亳秒数省略默认是0,如果写,必须是亳秒。4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。setTimeout)这个调用函数我们也称为回调函数callback普通函原创 2022-07-29 23:05:36 · 590 阅读 · 0 评论 -
window对象的常见事件
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适。window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。1.只要窗口大小发生像素变化,就会触发这个事件。...原创 2022-07-25 22:21:21 · 650 阅读 · 0 评论 -
BOM概述
BOM(BrowserObjectModel)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。...原创 2022-07-23 18:56:12 · 541 阅读 · 0 评论 -
常用的鼠标事件和键盘事件
常用鼠标事件。原创 2022-07-21 22:10:23 · 2435 阅读 · 0 评论 -
事件对象学习
官方解释event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解∶事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。事件对象兼容性方案事件对象本身的获取存在兼容问题1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。2.在IE6~8中,浏览器不会给方法传递参数,如果需要的话,需要到window.event中获取查找。解决。...原创 2022-07-19 22:17:49 · 174 阅读 · 0 评论 -
事件进阶学习
给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式︰传统方式和方法监听注册方式传统注册方式方法监听注册方式1.addEventListener事件监听方式 eventTarget.addEventListener() 方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函。该方法接收三个参数︰type:事件类型字符串,比如click、mouseover ,注意这里不要带onlistener :事件处理函数,事件发生时,会调用该监听函数useCa原创 2022-07-12 22:29:23 · 137 阅读 · 0 评论 -
DOM重点核心梳理(回顾)
1. document.write2. innerHTML3. createElement1.appendChild:在后面添加2. insertBefore:在前面添加1.removeChild主要修改dom的元素属性,dom元素的内容、属性,表单的值等1.修改元素属性: src、 href、title等2. 修改普通元素内容:innerHTML、innerText3.修改表单元素:value、type、disabled等4.修改元素样式: style、className主要获取查询dom的元素1转载 2022-07-11 19:00:24 · 539 阅读 · 0 评论 -
三种动态创建元素的区别
1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 2. innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘3. innerHTMr创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂innerHTML拼接效率测试innerHTML数组效率测试4. createElement()创建多个元素效率稍低一点点,但是结构更清晰createElement()效率测试 总结:不同浏览器下,innerHTM,效率要比 cre原创 2022-07-10 22:10:52 · 168 阅读 · 0 评论 -
动态生成表格
创建学生数据因为里面的学生数据都是动态的,我们需要s动态生成。这里我们模拟数据,自己定义好数据。因为里面的数据有好多好多个,所以我们采取数组的形式来存储,每个数组里面的元素是一个对象 创建行因为里面的学生数据都是动态的,我们需要js动态生成。这里我们模拟数据,自己定义好数据。数据我们采取对象形式存储。所有的数据都是放到tbody里面的行里面。因为行很多,我们需要循环创建多个行(对应多少人)创建单元格每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,并且把数据存入里面(双重f原创 2022-07-05 22:56:02 · 290 阅读 · 0 评论 -
节点基础~节点操作
1.创建节点 document.createElement()方法创建由tagName指定的 HTM元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。 2.添加节点 node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。node.insertBefore ()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的 before伪元素。简单版发布留言案例node. removechild()方法原创 2022-07-02 19:03:31 · 3587 阅读 · 0 评论 -
节点基础~节点层级
获取元素通常使用两种方式:1.利用DOM提供的方法获取元素2.利用节点层级关系获取元素这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。 一般地,节点至少拥有nodeType(节点类型) 、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。我们在实际开发中,节原创 2022-06-26 17:42:59 · 586 阅读 · 0 评论 -
排他思想,自定义属性操作,tab切换栏
排他思想,百度换肤,tab栏切换,自定义属性的操作,表单全选取消,表单隔行换色等案例学习~原创 2022-06-19 22:59:16 · 275 阅读 · 1 评论 -
事件基础和操作元素学习
一.事件三要素事件概述JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。简单理解︰触发---响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素(1)事件源 事件被触发的对象 谁 按钮(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标...原创 2022-05-31 20:43:24 · 361 阅读 · 0 评论 -
Dom 获取元素的几种方式
一.Dom简介文档对象模型(Document Object Model,简称DOM )),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。二.Dom树文档:一个页面就是一个文档,Dom中用document表示 ; 元素:页面中的所有标签都是元素,Dom中使用element表示; 节点:网页中的所有内容都是一个节点(标签,属性,文本,注释等),Dom中使用node表示Dom原创 2022-05-23 19:10:50 · 9705 阅读 · 2 评论 -
JavaScript数组对象
一.检测是否为数组1.instanceof ,运算符 ,用来检测是否为数组2. Array . isArray(参数); h5新增 , ie9以上版本支持二.添加删除数组元素1.push ( ) 在我们数组的末尾添加一个或者多个数组元素(1)push 是可以给数组后面追加新的元素(2) push()参数直接写数组元素就可以了(3) push完毕之后,返回的结果是新数组的长度(4)原数组也会发生变化2. unshift ( ) 在我们数组的开头添加一个...原创 2022-05-18 20:45:20 · 848 阅读 · 0 评论 -
JavaScript字符串对象
一.基本包装类型为了方便操作基本数据类型,JavaScript还提供了三个特俗引用类型:String,Number和Boolean。基本包装类型就是把简单数据类型包装成复杂数据类型,这样基本数据类型就有了属性和方法。按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js 会把基本数据类型包装为复杂数据类型,其执行过程如下∶二.字符串的不可变性指的是里面的值不可变,虽然看上去可以改变内容,但其实地址变了,内存中新开辟了一个内存空间当.原创 2022-05-17 08:49:53 · 433 阅读 · 0 评论 -
JavaScript日期对象
一.Date概述1.Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用2.Date实例用来处理日期和时间3.Date方法的使用获取当前时间必须实例化date()构造函数的参数如果括号里面有时间,就返回参数里面的时间。例日期格式字符串为‘2019-5-1’,可以写成new Date(2019-5-1)或者new Date(2019/5/1)二.日期格式化...原创 2022-05-14 23:06:39 · 139 阅读 · 0 评论 -
Math数学对象
一.概念Math数学对象,不是一个构造函数,所以我们不需要new 来调用, 而是直接使用里面的属性和方法即可。例如:二.Math 对象的最大值 (Math.max())注意:返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字,则会返NaN。 如果没有参数,则结果为-infinity三.封装自己的数学对象利用对象封装自己的数学对象,里面有PI,最大值和最小值四.math绝对值和三个取整方法Math对象不是构造函数,它具有数学常数和函数的属性原创 2022-05-11 22:12:41 · 278 阅读 · 0 评论 -
JavaScript对象
一.概念现实生活中∶万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性︰事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词)二.利用字面量创建对象对象字面量:就是花括号{}里面包含了表达原创 2022-05-09 09:03:58 · 72 阅读 · 1 评论 -
JavaScript预解析
一.预解析1.我们js引擎运行js 分为两步:预解析 代码执行(1).预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面(2).代码执行按照代码书写的顺序从上往下执行2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)(1)变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作(2)函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数例1:例2:二.预解析案例...原创 2022-05-04 17:38:14 · 445 阅读 · 0 评论 -
JavaScript作用域学习
一.作用域1.概述:通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使角提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突2.JavaScript作用域:就是代码名字,(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性更重要的是减少命名冲突3.js的作用域(es6)之前:全局作用域局部作用域4.全局作用域:整个script标签 或者是一个单独的js文件var num = 10;console.l原创 2022-05-04 09:07:22 · 55 阅读 · 0 评论 -
JavaScript 函数学习
一.函数的使用函数在使用时分为两步:声明函数和调用函数1.声明函数function是声明函数的关键字,必须小写由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如getSum2.调用函数调用的时候千万不要忘记添加小括号口诀:函数不调用,自己不执行。注意︰声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。3.函数的封装函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口简单理解:封装类似于将电原创 2022-04-27 22:12:37 · 1900 阅读 · 0 评论 -
筛选数组,数组去重,翻转数组,冒泡排序
可以通过修改length长度以及索引号增加数组元素可以通过修改length长度来实现数组扩容的目的 length属性是可读写的 可以通过修改数组索引的方式追加数组元素 不能直接给数组名赋值,否则会覆盖掉以前的数据案例:1.数组存放1~10个值...原创 2022-04-23 20:46:10 · 1067 阅读 · 0 评论 -
JavaScript数组学习
一.数组概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。二.创建数组1.JS中创建数组有两种方式∶利用new创建数组 这种方式暂且了解,等学完对象再看 注意Array 0 ,A要大写利用数组字面量创建数组2.我们数组里面的数据一定用逗号分隔3.数组里面的数据比如1,2,我们称为数组元素4.数组中可以存放任意类型的数据,例字符串,数字,布尔值等。三.获取数组中...原创 2022-04-20 18:02:23 · 891 阅读 · 0 评论 -
while和do while 循环
一.while循环1. while 循环语法结构 while当...的时候while(条件表达式){循环体}2.执行思路当条件表达式结果为true则执行循环体否则退出循环3.代码验证var num = 1;while (num <= 100){console.log('好啊有');num++;}4.里面应该也有计数器初始化变量5.里面应该也有操作表达式 , 完成计数器的更新防止死循环6.while循环案例这两个例子比较简单,for循...原创 2022-04-16 23:05:31 · 10402 阅读 · 0 评论 -
for循环练习实操
1.求0~100内所有数的平均值2.求0~100内奇数和偶数的和3.求100以内能被三整除的数的和4.求班级成绩案例弹出输入框输入总的班级人数(num)依次输入学生的成绩(保存起来 score),此时我们需要用到for 循环,弹出的次数跟班级总人数有关系条件表达式i <=num进行业务处理:计算成绩。先求总成绩( sum),之后求平均成绩(average),弹出结果注意:因为从prompt取过来的数据是字符串型的需要转换为数字型...原创 2022-04-14 21:57:59 · 635 阅读 · 0 评论 -
JS 的 for循环学习
一.语法结构1. for重复执行某些代码,通常跟计数有关系2. for语法结构for(初始化变量;条件表达式;;操作表达式){循环体}3.初始化变量就是用var声明的一个普通变量,通常用于作为计数器使用4.条件表达式就是用来决定每一次循环是否继续执行就是终止的条件5.操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新(递增或者递减)6.代码体验二.执行过程1.首先执行里面的计数器变量var i= 1 .但是这句话在for里面只执行一次 i=...原创 2022-04-10 21:26:41 · 1315 阅读 · 0 评论 -
三元表达式和switch语句(笔记)
一.三元表达式语法结构条件表达式?表达式1 :表达式2执行思路如果条件表达式结果为真则返回表达式1的值 ; 如果条件表达式结果为假则返回表达式2的值例子:二.分支流程控制switch语句1.概念:switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系的特定值的选项时,就可以使用switch。2.语法结构:switch(表达式){case value1://表达式等于value1时要执行的代码break;case va原创 2022-04-09 23:32:34 · 496 阅读 · 0 评论 -
流程控制和if分支语句
一.流程控制1.概念:在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。2.顺序流程控制顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的.二.分支流程控制i.原创 2022-04-08 23:35:43 · 170 阅读 · 0 评论 -
运算符学习
一.算数运算符1.概述:算数运算符使用的符号,用于执行两个变量或值的算数运算2.浮点数精度问题浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。所以:不要直接判断两个浮点数是否相等!3.表达式和返回值表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解:是由数字、运算符、变量等组成的式子表达式最终都会有一个结果,返回给我们,我们成为返回值二.递增递减运算符概述:如果需要反复给数字变量添加或减去1,可以使用递增(++)和...原创 2022-04-05 16:27:40 · 556 阅读 · 0 评论 -
数据类型的转换
一.什么是数据类型转换?使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换:●转换为字符串类型●转换为数字型●转换为布尔型二.转换为字符串●toString()和 String()使用方式不一-样。●三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换。例子:三.转换为数值型...原创 2022-04-03 22:07:01 · 1429 阅读 · 0 评论 -
简单数据类型之boolean,undefined,null及检测数据变量类型(3)
一.布尔型Boolean布尔型有两个值:true和false,其中true为真(对),false为假(错)布尔型和数值型相加时,true表示1,false表示0例子:二.undefined和null一个声明后没有被赋值的变量,会有一个默认值undefined一个声明变量给null值,里面存的值为空三.获取变量的数据类型typeofprompt取过来的值是字符型的...原创 2022-04-03 15:14:27 · 493 阅读 · 0 评论 -
变量的数据类型之字符串型(2)
字符串型 string字符串型可以是引号中的任意文本,其语法为双引号和单引号例如:var strmsg="十年之约,不离不弃" //使用双引号表示字符串var strmsg2='陪你长大,护你远航,等你回家' //使用单引号表示字符串var strmsg3=小旋今天也要努力呀~ //报错,没有引号,会被认为是js代码,但js没有这些语法因为HTML里面的标签使用的是双引号,所以js更推荐用单引号1.字符串引号的嵌套...原创 2022-03-31 22:17:04 · 324 阅读 · 0 评论 -
变量的数据类型(1)
一.变量的数据类型二.简单数字类型(基本数字类型)数字型number1.数字值型进制2.数字型范围3.数字型的三个特殊值4.isNAN原创 2022-03-26 23:55:00 · 290 阅读 · 0 评论 -
交换两个变量的值
课堂练习1.代码2. 运行结果原创 2022-03-26 23:59:04 · 252 阅读 · 0 评论 -
JS变量的学习(笔记)
一.定义1.为什么需要变量?因为我们一些数据需要保存,所以需要变量。2.变量是什么?变量就是一个容器,用来存放数据的,方便我们以后使用里面的数据。3.变量的本质是什么?变量是内存里面的一块空间,用来存放数据的。4.原创 2022-03-23 22:47:40 · 273 阅读 · 0 评论 -
JavaScript初体验
一.浏览器执行JS简介浏览器分为两个部分,渲染引擎和JS引擎。JS组成:1.核心(ECMAScript)2.文档对象模型(DOM)3.浏览器对象模型(BOM)二.JS三种书写位置1.例子2.说明行内式JS<input type="button" value="点我一下呀" onclick="alert('Hello World')"/>内嵌JS<script>alert('Hello World');<...原创 2022-03-21 23:17:51 · 963 阅读 · 0 评论