javascript基础
jwz934738949
这个作者很懒,什么都没留下…
展开
-
实现bind方法与apply方法
bind()方法bind()方法有两个参数。第一个参数调用绑定函数时作为 this 参数传递给目标函数的值,第二个参数当目标函数被调用时,被预置入绑定函数的参数列表中的参数例如:function fn(a, b, c) { return a + b + c;}var _fn = fn.bind(null, 10);var ans = _fn(20, 30); // 60实现bind方法 Function.prototype.myBind = function (that,原创 2021-07-03 09:01:16 · 156 阅读 · 0 评论 -
js实现鼠标拖拽效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js实现鼠标拖拽</title> <style> div { position: absolute; width: 100px; height: 100px;原创 2021-07-03 09:00:48 · 241 阅读 · 0 评论 -
原型链与继承
原型链JS中的每个对象都有一个属性__proto__,该属性会指向对象的原型JS中每个函数对象不仅有__proto__属性,还有一个prototype属性当函数对象作为构造函数创建实例时,prototype属性会被当做对象的__proto__属性函数对象拥有__proto__属性是因为:函数对象是Function对象的实例对象原型链就是由不同的原型所连接的一条链,不同对象在查找属性或者方法时,会先在本身查找,找不到再向原型查找,直到找到原型的起点Object对象构造函数new原理 /原创 2021-07-03 08:59:42 · 99 阅读 · 0 评论 -
js基础——div跟随鼠标移动
1、clientX、clientY可以获取元素当前窗口的偏移量;2、pageX、pageY可以获取整个页面的偏移量,无法在IE8浏览器中实现;3、获取滚动条的距离:谷歌浏览器认为滚动条是属于body的,而火狐等浏览器认为滚动条是属于html的。<!DOCTYPE html><html lang="en"><head> <met...原创 2019-09-08 16:36:58 · 202 阅读 · 0 评论 -
js基础——DOM元素对象
1、clientHeight:在页面上返回内容的可视高度(不包括边框,内边距或滚动条);2、clientWidth:在页面上返回内容的可视宽度(不包括边框,内边距或滚动条);3、offsetHeight:返回任何一个元素的高度包括边框和填充,但不包括内边距;4、offsetWidth:返回元素的宽度,包括边框和填充,但不包括内边距;5、offsetLeft:返回当前元素的相对水平偏...原创 2019-09-07 08:52:48 · 95 阅读 · 0 评论 -
js基础——获取元素的样式
获取当前显示的样式:currentStyle 语法:元素.currentStyle.属性 但是这种方法只能用于IE浏览器,在其他浏览器中不支持。 getComputedStyle(参数1,参数2) 该方法的参数1为要获取的样式;第二个参数为一个伪元素,但大多数情况下为null 语法:getComputedStyle(参数1,参数2).属性 但是这种方法无法兼容IE8以及以前的浏览...原创 2019-09-04 21:46:28 · 106 阅读 · 0 评论 -
js基础——操作内联样式
通过JS修改元素的样式语法:元素.style.属性 = 属性值(属性值需要加双引号)当CSS样式中含有-的,在JS中不能直接表示,需要使用驼峰命名法。即去掉-,将后面的首字母大写。例如:background-color变为backgroundColor。在CSS样式中如果设置了!important属性后,JS就无法对CSS样式进行修改。通过style设置和读取的都是内联样式,无...原创 2019-09-04 20:18:10 · 1357 阅读 · 0 评论 -
js基础——DOM增删改练习
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定",此方法返回true,否则返回false。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM增删改练习</title>...原创 2019-09-02 22:09:23 · 547 阅读 · 0 评论 -
js基础——事件的冒泡与委派
1、冒泡事件的冒泡就是事件的向上传导,当后代元素事件被触发时,祖先元素与会触发该事件。2、取消冒泡event.cancelBubble = true;这样就可以取消子元素与祖先元素之间的关联3、事件的委派为了实现只绑定一个事件,而这个事件可以用在多个元素上,即使是后添加的元素。我们可以使用绑定祖先元素来实现这个功能。事件的委派:将事件统一给元素统一的祖先元素,当子元素事...原创 2019-09-10 12:16:44 · 126 阅读 · 0 评论 -
js基础——事件的绑定
使用对象.事件 = 函数的形式只能为对象添加一个响应函数,后添加的函数会覆盖之前的函数。1、addEventListener(参数1,参数2,参数3)可以添加多个函数。参数1:事件的字符串,没有前缀on;参数2:回调函数,当事件触发时调用该函数;参数3:是否在捕获阶段调用事件,一般为false。2、attachEvent(参数1,参数2)在IE8以下浏览器中使用。参...原创 2019-09-11 19:22:00 · 106 阅读 · 0 评论 -
js基础——滚动事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚动事件</title> <style> #box1 { width: 150px; ...原创 2019-09-13 09:19:52 · 417 阅读 · 0 评论 -
js基础——键盘事件
1、onkeydown:按键被按下,当一直按着,则浏览器会一直识别该按键;2、onkeyup:按键被松开键盘事件不是所有元素均可以使用的,只有可以识别键盘的元素才可以使用。3、keyCode:获取按键的编码a的编码为:65,z的编码为:90;数字的编码为:48-57;4、altKey、ctrlKey、shiftKey分别判断alt、ctrl、shift是否被按下,返回值...原创 2019-09-13 10:10:42 · 184 阅读 · 0 评论 -
js基础——方向键移动div
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>方向键移动div</title> <style> #box1 { width: 200px; ...原创 2019-09-13 10:33:19 · 365 阅读 · 0 评论 -
js基础——定时器
setInterval():定时调用函数,可以将一个函数每隔一段时间执行一次参数:1、回调函数,该函数会每隔一段时间执行一次;2、间隔时间,该时间是调用回调函数间隔的时间,单位为毫秒。一般需要为定时器定义一个标识量,方便关闭定时器。clearInterval():关闭定时器。参数:定时器的标识量。<!DOCTYPE html><html lang="e...原创 2019-09-14 09:03:52 · 88 阅读 · 0 评论 -
js基础——切换图片练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切换图片练习</title> <script> window.onload = function () { /...原创 2019-09-14 14:31:43 · 141 阅读 · 0 评论 -
js基础——修改div移动练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>修改div移动练习</title> <style> #box1 { width: 100px; ...原创 2019-09-14 15:34:13 · 123 阅读 · 0 评论 -
js基础——DOM增删改
1、document.createElement():创建元素节点对象,它需要一个标签作为参数,并且返回创建好的对象;2、document.createTextNode():创建文本节点对象,它需要一个文本内容作为参数,并且返回创建好的对象;3、appendChild():向一个父节点添加一个子节点。用法:父节点.appendChild(子节点);4、insertBefore():...原创 2019-09-01 20:47:11 · 135 阅读 · 0 评论 -
js基础——DOM查询
1、获取子节点childNodes:返回当前节点的所有子节点 children:返回当前元素的所有子元素 firstChild:返回当前节点的第一个子节点 firstElementChild:获取当前元素的第一个子元素 lastChild:返回当前节点的最后一个子节点注意:当标签之间含有空白时,DOM也会认为空白是一个节点;而在IE8浏览器中不会把空白当做节点。2、获取父节点和兄...原创 2019-09-01 10:59:40 · 158 阅读 · 0 评论 -
js基础——全选练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选练习</title> <script> window.onload = function () { var...原创 2019-08-30 21:50:42 · 306 阅读 · 0 评论 -
js基础——逻辑运算符
1、与运算与运算,使用&&符号。当两个布尔值同时为true返回ture,否则返回false;对于两个非布尔值,与运算是找false运算:当true&&true时,返回第二个值;当false&&true时,返回false的值;当false&&false时,返回第一个值。2、或运算或运算,使用||符号。当两个布...原创 2019-07-15 16:54:14 · 444 阅读 · 0 评论 -
javascript基础——js编写位置
js与css类似,一共可以有三种方式书写js代码。1、内联:在标签中书写,例如:<a href="javascript:alert('这是内联方法');">内联方法</a>这种方法较为繁琐,在书写js代码中,一般不会使用。2、在script标签中书写:例如:<script> alert("在script标签中书写js代码"...原创 2019-07-06 17:47:35 · 153 阅读 · 0 评论 -
js基础——数据类型与各种类型转换为String
1、数据类型js中的数据大致分为几类:数值型——number;字符型——string;布尔型——boolean:取值为true或者false;null与undefined:null代表空值,它的类型为object;undefined代表未定义,所有未定义值的变量均为undefined,类型也为undefined;<!DOCTYPE html><html...原创 2019-07-07 13:44:59 · 402 阅读 · 0 评论 -
js基础——查找质数
质数是指除了1与它本身,在1与它本身之间的数都无法整除,则该数为质数。求质数的简便方法,不需要从2开始找到它本身之前的一个数,只需要找到该数的平方根,则可以得出该数是不是质数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...原创 2019-08-02 17:16:59 · 1545 阅读 · 2 评论 -
js基础——对象与属性
对象是javascript中的一个数据类型,与其他数据类型不同的是,它可以包括许多不同的数据,叫做属性。1、创建对象:var 对象名 = new Object();2、建立属性:对象名.属性名 = 属性值;对象名["属性名"] = 属性值;这种方法更为灵活。3、删除属性:delete 对象名.属性名;4、in"属性名" in 对象名in可以查询对象中是否含...原创 2019-08-03 11:02:45 · 158 阅读 · 0 评论 -
js基础——prompt函数
prompt()方法用于显示可提示用户进行输入的对话框。函数返回值为字符串。当用户输入为数字或布尔类型时,一律返回string型,若想使类型不变,则需要进行类型转换。例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...原创 2019-07-28 17:12:19 · 13706 阅读 · 0 评论 -
js基础——switch语句练习
输入一个学生成绩,判断成绩是否合格。当成绩大于等于60分,合格;当成绩小于60分,不合格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><sc...原创 2019-07-28 17:38:51 · 923 阅读 · 0 评论 -
js基础——构造函数与instanceof
构造函数:构造函数与普通函数的创建方法一致,但是构造函数是专门用来处理对象相关问题的。普通函数可以直接调用,而构造函数必须使用new关键字来调用。构造函数调用流程:立即创建一个新的对象; 将新建的对象设置为函数中的this,可以使用this来引用新建的对象; 逐行执行函数中的代码; 将新建的对象作为返回值返回当使用同一个构造函数建立的对象成为同一类对象,而每个不同的构造函数成为...原创 2019-08-08 17:49:25 · 273 阅读 · 0 评论 -
js基础——枚举对象的属性
当我们不知道对象的属性以及属性值是什么的时候,使用for in 语句来查找对象所有的属性。for(var 变量名in 对象名)其中对象的属性名赋值给变量名,循环的次数代表有多少个属性;属性值使用对象名[变量名]来代表。<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-08-06 16:15:31 · 137 阅读 · 0 评论 -
js基础——原型对象
每当我们创建一个函数时,解析器都会向函数添加一个新的属性prototype,这个属性对应着一个对象,这个对象叫做原型对象。当函数以构造函数调用时,它所创建的对象都会产生一个隐含的属性,指向该构造函数的原型函数。对于该原型对象,可以使用__proto__来访问该属性; 同一个类的实例都可以访问该原型对象。我们可以将对象中共有的属性或方法,统一设置到原型对象中去; 当对象访问一个属性或方法时,...原创 2020-09-26 16:39:37 · 184 阅读 · 0 评论 -
js基础——函数与函数作用域
1、函数函数是用来实现一定功能的,他的用处很大,可以有返回值,也可以没有返回值。定义函数一共有两种方法:function 函数名(形参){函数体;}var 函数名 = function(形参){函数体;}2、函数作用域函数作用域是指在函数内部定义的变量,这些变量无法在函数以外的地方使用;当一个函数调用一个变量时,会从内而外寻找,现在本函数内部寻找是否存在该变量,在向上一...原创 2019-08-07 16:51:23 · 101 阅读 · 0 评论 -
js基础——this
面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。 在函数中,this 表示全局对象。 在函数中,在严格模式下,this 是未定义的(undefined)。 也就是说,this灵活度高,用在全局中指的就是wi...原创 2019-08-07 16:59:48 · 95 阅读 · 0 评论 -
js基础——数组
1、创建数组:构造函数方法:var arr = new Array(1,2,3); 字面量方法:var arr = [1,2,3];2、数组属性length:数组的length属性可设置或返回数组中元素的数目。例如:var arr = [1,2,3,4];document.write(arr.length);结果为4。3、pop()方法pop() 方法用于删除并...原创 2019-08-11 15:49:10 · 128 阅读 · 0 评论 -
js基础——正则表达式
1、定义:正则表达式用于定义一些字符串的规则。计算机可以根据正则表达式来检查一个字符串是否符合规则;正则表达式也可以将符合条件的字符串的内容提取出来。2、创建方法:var 变量 = new RegExp("正则表达式","匹配模式") var 变量 = /正则表达式/匹配模式3、方法:test()方法:检查一个字符串是否符合正则表达式,如果符合返回true,否则返回false;...原创 2019-08-26 21:11:13 · 77 阅读 · 0 评论 -
js基础——DOM
1、DOMDOM,全称Document Object Model,文档对象模型。JS中通过DOM来对HTML文档进行操作。文档:表示的是整个HTML文档; 对象:将网页中的每个部分都转化为了一个对象; 模型:使用模型来表示对象之间的关系,这样方便我们获取对象。2、节点节点Node,是构成网页最基本的组成部分,网页中的每一个部分都是一个节点。文档节点:整个HTML文档; 元素...原创 2019-08-29 08:34:29 · 90 阅读 · 0 评论 -
js基础——图片切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style> * { margin: 0; padding...原创 2019-08-29 13:21:04 · 113 阅读 · 0 评论 -
js基础——数据转换为number型与boolean型
1、转换为number型使用Number()函数:字符串转换为NaN,true转换为1,false转换为0,null转化为0,undefined转换为NaN;使用parseInt()函数:只可以识别字符串,如果字符串中含有数字与字符,函数从一个个字符开始识别,当遇到第一个非数字字符时停止;使用parseFloat()函数:专门用来识别含有浮点数的字符串;2、转换为boo...原创 2019-07-08 18:33:15 · 3473 阅读 · 0 评论