JavaScript
极客研究者
空余时间喜欢研究、钻研技术,入行不久的一枚菜鸟
展开
-
JSON数据
JS中的对象只有JS可以识别,其他的语言都不识别而JSON字符串可以被任意的语言识别,可用于前后端数据的交互传递注意:JSON字符串的属性名必须使用双引号JSON分类:1.JSON对象2.JSON数组JSON中允许的值:1.字符串2.数值3.布尔值4.null5.对象6.数组Demo:<!DOCTYPE html><html lang="en">...原创 2020-04-27 15:25:57 · 133 阅读 · 0 评论 -
JavaScript之使用CSS选择器
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-04-27 15:08:34 · 2168 阅读 · 0 评论 -
JavaScript之轮播图
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-04-27 15:04:50 · 98 阅读 · 0 评论 -
JavaScript之定时器应用2
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-04-27 14:59:24 · 98 阅读 · 0 评论 -
JavaScript之定时器应用1
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-04-27 14:56:50 · 101 阅读 · 0 评论 -
JavaScript之定时器
使用定时器:1.var timeID= setInterval(code,interval):周期性函数code:要周期执行的代码字符串interval:周期执行的时间间隔(以毫秒为单位)按照指定的周期(以毫秒计)来调用函数或计算表达式该方法返回一个TimeID值,该值指向当前周期函数的执行引用计时器的唯一标识clearInterval(timeID):清除timeID对应的计时器对...原创 2020-04-27 14:52:57 · 131 阅读 · 0 评论 -
JavaScript之Location对象
Location对象存储当前页面与位置(URL)相关的信息。表示当前显示文档的Web地址。Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...原创 2020-04-27 14:49:17 · 188 阅读 · 0 评论 -
JavaScript之histroy对象
histroy对象:浏览器窗口访问过的URL信息Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2020-04-27 14:40:26 · 228 阅读 · 0 评论 -
JavaScript之鼠标滚轮事件
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-04-27 14:32:16 · 500 阅读 · 0 评论 -
JavaScript之事件拖拽
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-04-27 14:21:50 · 114 阅读 · 0 评论 -
JavaScript之事件绑定
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-04-27 11:52:46 · 130 阅读 · 0 评论 -
JavaScript之事件的传播
当一个事件触发了之后,它会在父、子元素之间进行传播。一、 事件传播的三个阶段捕获阶段:从window对象一直传播到目标节点(由外向内传递) --不会触发事件在捕获阶段,是从最外层的祖先元素,向目标元素进行事件的捕获,但是默认情况下,不会触发事件目标阶段:在目标节点上触发事件事件捕获到元素,捕获结束后开始在目标元素上执行事件处理函数冒泡阶段:从目标阶段冒泡回window对象(由内向外...原创 2020-04-27 11:51:10 · 305 阅读 · 0 评论 -
JavaScript之事件的委派
事件的委派:将事件统一绑定到元素共有的祖先元素,当后代元素的事件触发时,会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件事件的委派是利用了冒泡,通过委派可以减少绑定的次数,提高程序的性能Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-04-27 11:48:09 · 288 阅读 · 0 评论 -
JavaScript之事件的冒泡
事件的冒泡:事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也会被触发Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...原创 2020-04-27 11:40:54 · 108 阅读 · 0 评论 -
JavaScript之事件对象
JS以事件驱动来实现页面的交互。在特定事件上绑定处理函数,以便在事件发生时执行相应的代码在大多数浏览器中,事件对象(event)会自动传递事件处理函数在事件对象(event)中,封装了当前事件相关的一切信息。比如:鼠标坐标、鼠标滚轮状态、键盘哪个键被按下等等注意:在IE8及以下版本的浏览器中,浏览器不会自动传递事件对象是将事件对象作为window对象的属性保存Demo:<!D...原创 2020-04-27 11:38:42 · 120 阅读 · 0 评论 -
JavaScript之获取元素的样式
获取元素的当前样式:语法:元素.currentStyle.样式名只在IE上支持在其他浏览器中,可以使用 getComputedStyle(argu1,argu2)方法:获取当前元素的样式这个方法是window方法,可以直接使用需要两个参数:argu1:要获取样式的对象argu2:可以传递一个伪元素,一般传递null即可该方法返回一个集合对象,该对象封装了此元素的所有样式可以通过...原创 2020-04-27 11:34:20 · 229 阅读 · 0 评论 -
JavaScript之DOM 操作CSS
通过JS修改元素的样式:语法:元素.style.样式名 = 样式值注意:如果CSS的样式名中含有-,这种名称在JS中是不合法的比如background-color需要将这种样式名修改为驼峰命名法,去掉-,然后将-后的字母大写我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示但是如果在样式中写了!important,则此时样...原创 2020-04-27 11:20:02 · 277 阅读 · 0 评论 -
JavaScript之DOM增删改
插入节点:主要包括两种方法1.appendChild(newChild):向当前节点的子节点列表的末尾添加新的子节点2.insertBefore(newChild,refChild):在已有的子节点前插入一个新节点替换节点:replaceChild()方法:可以将某个子节点替换为另一个nodeObject.replaceChild(new_node,old_node)如果替换成功,则...原创 2020-04-27 11:12:45 · 156 阅读 · 0 评论 -
JavaScript之DOM查询
获取元素节点:通过document对象调用1.getElementById():通过id属性获取一个元素节点对象2.getElementsByTagName():通过标签名获取一组元素节点对象可以用于获取当前节点下的指定标签名的所有子节点3.getElementsByName()通过name属性获取一组元素节点对象Demo:<!DOCTYPE html><ht...原创 2020-04-27 11:08:22 · 110 阅读 · 0 评论 -
JavaScript之文档加载
浏览器在加载一个页面时,是按照自上向下的顺序加载读取到一行就执行一行,如果script标签写在页面的上边,在代码执行时,页面还没有加载Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...原创 2020-04-27 11:01:11 · 167 阅读 · 0 评论 -
JavaScript之DOM对象
浏览器已经为我们提供 文档节点 对象这个对象是window属性可以在页面中直接使用,文档节点代表的是整个网页Demo:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>...原创 2020-04-27 10:56:58 · 72 阅读 · 0 评论 -
JavaScript之包装类
基本数据类型String Number Boolean Null Undefined引用数据类型Object在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象String()- 可以将基本数据类型字符串转换为String对象Number()- 可以将基本数据类型的数字转换为Number对象Boolean()- 可以将基本数据类型的布尔值转换为Bo...转载 2020-04-27 10:41:07 · 150 阅读 · 0 评论 -
JavaScript之Math对象
Math对象:Math和其他的对象不同,它不是一个构造函数,它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法Demo:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type=...原创 2020-04-27 10:38:23 · 131 阅读 · 0 评论 -
JavaScript之Date对象
Date对象:在JS中使用Date对象来表示一个时间Demo01:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* ...原创 2020-04-27 10:33:19 · 117 阅读 · 0 评论 -
JavaScript之操作数组对象
操作元素:增加和删除数组元素使用Array对象的添加和删除方法:在数组尾部操作:push(): 给数组添加元素,并返回添加元素后的数组长度(从数组尾部插入一个或多个元素)可以包含多个参数,一次性把这个参数插入到数组的尾部pop(): 删除并返回数组的最后一个元素在数组头部操作:unshift():在数组头部添加一个元素可以包含多个参数,一次性把这个参数插入到数组的头部shif...原创 2020-04-27 10:23:02 · 280 阅读 · 0 评论 -
JavaScript之数组
JS中的数组:JavaScript属于弱类型语言,数组结构表现和语法约定相对比较松散,每个元素的值可以是任意数据类型,数组长度不是固定的,可以任意地拉伸和收缩是一块连续的内存空间,索引从0开始只有真正存储在数组中的元素才能够被分配到内存中创建数组:方式一:使用new运算符调用Array构造函数方式二:数组直接量:在中括号运算符中([])包含多个值列表,以逗号进行分隔向数组中添加元素...原创 2020-04-27 10:19:21 · 122 阅读 · 0 评论 -
JavaScript之垃圾回收
垃圾回收(GC):在JS中需要垃圾回收机制,对程序中产生的垃圾进行回收处理,当某一块堆内存空间没有任何对象或属性对其进行引用,此内存空间将变成垃圾空间,会导致程序变慢, 这种垃圾空间必须清除掉在JS(JS引擎)中拥有自动的垃圾回收机制,会自动的将这些垃圾对象进行销毁我们不能手动操作垃圾回收Demo:<!DOCTYPE html><html lang="en">...原创 2020-04-27 10:11:19 · 106 阅读 · 0 评论 -
JavaScript之this关键字的使用
this表示当前调用对象,用在函数体内。this是函数体内的一个对象指针,它始终指向调用函数根据函数的调用的方式不同,this会指向不同的对象1.以函数的形式调用时,this永远指向window对象2.以方法的形式调用时,this就是调用方法的那个对象Demo:<!DOCTYPE html><html lang="en"><head> &...原创 2020-04-27 10:07:31 · 127 阅读 · 0 评论 -
JavaScript之立即执行函数
立即执行函数:只会执行一次,执行完之后就会被释放掉函数也属于对象–>创建时也会在堆内存中分配一块内存空间函数名(内存地址) -->指向一块内存空间Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...原创 2020-04-27 10:01:52 · 97 阅读 · 0 评论 -
JavaScript之函数返回值类型
可以使用 return 来设置函数的返回值语法:return 值return后的值将会作为函数的执行结果返回,可以定义一个变量,来接收该结果在函数中return后的语句都不会执行如果return语句后不跟任何值就相当于返回一个undefined,如果函数中不写return,则也会返回undefinedreturn后可以跟任意类型的值Demo:<!DOCTYPE html&...原创 2020-04-27 09:52:10 · 3139 阅读 · 0 评论 -
JavaScript之函数参数
可以在函数的()中来指定一个或多个形参(形式参数)多个形参之间使用逗号(’,’)隔开,声明形参就相当于在函数内部声明了对应的变量但是并不赋值注意:调用函数时解析器不会检查实参的类型,所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查函数的实参可以是任意的数据类型调用函数时,解析器也不会检查实参的数量多余实参不会被赋值如果实参的数量少于形参的数量,则没有...原创 2020-04-27 09:47:19 · 167 阅读 · 0 评论 -
JavaScript之函数
函数 function- 函数也是一个对象- 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)- 函数中可以保存一些代码在需要的时候调用- 使用typeof检查一个函数对象时,会返回function我们在实际开发中很少使用构造函数来创建一个函数对象创建一个函数对象可以将要封装的代码以字符串的形式传递给构造函数var fun = new Function(“conso...原创 2020-04-27 09:32:04 · 85 阅读 · 0 评论 -
JavaScript之对象
如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。对象的分类:1.内建对象- 由ES标准中定义的对象,在任何的ES的实现中都可以使用- 比如:Math String Number Boolean Function Object…2.宿主对象- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提...原创 2020-04-27 09:27:36 · 86 阅读 · 0 评论 -
JavaScript之break和continue语句
break关键字可以用来退出switch或循环语句不能在if语句中使用break和continuebreak关键字,会立即终止离他最近的那个循环语句Demo:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <s...原创 2020-04-27 09:21:30 · 159 阅读 · 0 评论 -
JavaScript之for语句
for语句,也是一个循环语句,也称为for循环在for循环中,为我们提供了专门的位置用来放三个表达式:1.初始化表达式2.条件表达式3.更新表达式for循环的语法:for(①初始化表达式;②条件表达式;④更新表达式){③语句…}for循环的执行流程:①执行初始化表达式,初始化变量(初始化表达式只会执行一次)②执行条件表达式,判断是否执行循环。如果为true,则执行循环③如...原创 2020-04-27 09:16:53 · 539 阅读 · 0 评论 -
JavaScript之将其他的数据类型转换为Number
将其他的数据类型转换为Number转换方式一:使用Number()函数字符串 > 数字1.如果是纯数字的字符串,则直接将其转换为数字2.如果字符串中有非数字的内容,则转换为NaN3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0布尔 > 数字true 转成false 转成 0null > 数字 0undefined > 数字 NaN...原创 2020-04-27 09:12:14 · 378 阅读 · 0 评论 -
JavaScript之强制类型转换
强制类型转换指将一个数据类型强制转换为其他的数据类型类型转换主要指,将其他的数据类型,转换为String Number Boolean将其他的数据类型转换为String方式一:- 调用被转换数据类型的toString()方法- 该方法不会影响到原变量,它会将转换的结果返回- 但是注意:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错方...原创 2020-04-27 09:09:00 · 103 阅读 · 0 评论 -
JavaScript之代码块
正常情况下,所有代码将按顺序从上到下执行在JS中,可以使用{}为语句分组要么都执行,要么都不执行代码块: {代码;}只有分组的作用,没有其他用途Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...原创 2020-04-27 08:47:27 · 126 阅读 · 1 评论 -
JavaScript之条件选择结构
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-04-27 08:45:22 · 325 阅读 · 0 评论 -
JavaScript之编写位置
方式1.直接在网页中嵌入js代码的方式,写在script标签里方式2:引入外部的js文件Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2020-04-27 08:38:26 · 186 阅读 · 0 评论