JavaScript
关注
分享
扫一扫
文章平均质量分 65
js
_洋
一起学习吧
展开
-
原型与原型链——JS
文章目录原型对象原型对象获取：函数的prototype属性给原型对象添加属性(一般都是方法)原型对象和函数对象的关系原型对象的作用显示原型与隐式原型基本含义内部结构原型对象原型对象获取：函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象，即称为:原型对象eg： function fun (){ } console.log(fun.prototype,typeof fun.prototype)原创 2022-04-25 16:43:25 · 786 阅读 · 0 评论 -
行高、字体框——CSS
文章目录行高行高的应用：字体框行高会在字体框的上下平均分配行高行高是文字占有的实际高度，可以通过line-height来设置高度。line-height:行高可以直接指定一个大小（px em)也可以直接设置成一个整数如果是一个整数的话，行高将会是字体的指定的倍数默认行高是字体大小的1.33倍。eg：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> &l原创 2022-04-12 19:08:27 · 335 阅读 · 0 评论 -
图标字体——CSS
文章目录图标字体（iconfont) 的引入字体图标的使用——fontawesome下载解压将`css`和`webfonts`文件夹移动到项目中将all.css引入到网页中使用图标字体图标字体（iconfont) 的引入在网页中经常需要使用一些图标eg：可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。字体图标的使用——fontaweso原创 2022-04-12 18:11:58 · 1002 阅读 · 0 评论 -
字体——CSS
字体相关的样式color用来设置字体颜色font-size设置字体的大小font-family字体族(字体的格式)font-face字体和图片相比的优点color用来设置字体颜色color实际上指的是前景色，如果border不指定颜色，那么它的颜色也是color所指定的颜色。font-size设置字体的大小和 font-size 相关的单位 :em相当于当前元素的一个font-sizerem相对于根元素的一个font-size默认情况下：1em = 16px;1rem = 16px,因为字体的原创 2022-04-12 16:07:14 · 1109 阅读 · 0 评论 -
点击图片进行切换
实现效果：图片点击切换代码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> .img-list{ width: 480px; height: 850px;原创 2022-04-12 14:41:00 · 977 阅读 · 0 评论 -
style.width、clientWidth、offsetWidth
先演示再说结论：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #box1{ width: 100px; height: 100px; background-color: coral; padding:10px;原创 2022-04-11 15:36:53 · 241 阅读 · 0 评论 -
JSON——JS
文章目录JSON的产生JSON特点JS分为两类：JSON中允许的值:将js字符串转换为JS对象注意（1）`eval()`：这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回（2） 引入一个 json2.js 外部文件——推荐的使用方式JSON的产生JS中的对象只有JS自己认识，如果想要把数据传递给其他语言，则需要类型转换。通常将对象转换为一个字符串。JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象.JSON特点JS的全称 Javascr原创 2022-04-09 14:44:26 · 3108 阅读 · 0 评论 -
js操作样式类——JS
通过JS修改CSS的常用方法是：对象.style.属性 = “属性值”如： box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor ="red";这样做的缺点：通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。所以可以直接修原创 2022-04-09 10:39:31 · 474 阅读 · 0 评论 -
轮播图的实现——JS
效果：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <style> * { margin: 0; padding: 0; } #outer { width: 520px; height: 333px; margin: 50px原创 2022-04-09 09:42:05 · 254 阅读 · 0 评论 -
定时器的应用——div向右移动
点击按钮div向右移动<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <style> * { margin: 0; padding: 0; } #box1 { width: 100px; height: 100px; backgr原创 2022-04-09 00:53:00 · 1030 阅读 · 0 评论 -
图片切换的实现
简单的实现<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #outer{ width: 580px; margin: 50px原创 2022-04-08 20:16:21 · 710 阅读 · 0 评论 -
BOM简介——JS
文章目录BOM——浏览器对象模型作用BOM对象BOM——浏览器对象模型作用BOM可以使我们通过JS来操作浏览器BOM对象在BOM中为我们提供了一组对象，用来完成对浏览器的操作BOM对象：window代表的是整个浏览器的窗口，同时window也是网页中的全局对象Navigator-代表的当前浏览器的信息.,通过该对象可以来识别不同的浏览器Location-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面History代表浏览器的历史记录，可以通过原创 2022-04-08 19:38:41 · 581 阅读 · 0 评论 -
键盘控制div移动
实现滑块的控制移动按住上下左右使滑块向对应的方向移动。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <style> #box1{ height: 100px; width: 100px; background-color:red; posi原创 2022-04-08 15:12:38 · 716 阅读 · 0 评论 -
键盘事件——JS
键盘事件:onkeydown ：按键被按下onkeyup ：按键被松开键盘事件一般都会绑定给可以获取焦点的对象（如：输入框），或者是doument。属性通过event.keyCode获取按下键得编码值altKey：判断是否按了alt<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <style> </style>原创 2022-04-08 14:00:46 · 209 阅读 · 0 评论 -
拖拽的实现——JS
文章目录拖拽的流程实现div的点击拖拽：==注意==：要想使对象移动一定要对对象开启绝对定位。问题但是对IE8不起作用拖拽的流程当鼠标在被拖拽元素上按下时，开始拖拽（onmousedown）当鼠标移动时被拖拽元素跟随鼠标移动（onmousemove）当鼠标松开时,被拖拽元素固定在当前位置（onmouseup）实现div的点击拖拽：注意：要想使对象移动一定要对对象开启绝对定位。<!DOCTYPE html><html lang="zh"><head>原创 2022-04-08 13:14:20 · 2553 阅读 · 0 评论 -
滚轮事件——js
滚轮事件——js实现效果：滚轮向上移动，变长； 滚轮向下移动，变短<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #box1{ width: 100px; height: 100px; background-color: rosybrown;原创 2022-04-08 13:11:21 · 832 阅读 · 0 评论 -
事件的传播——JS
事件的传播事件传播分成了三个阶段1.捕获阶段在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件2.目标阶段事件捕获到目标元素,捕获结束开始在目标元素上触发事件3.冒泡阶段事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下不会使用。<!DOCTYPE html><html lang="en"><head&原创 2022-04-08 08:24:39 · 193 阅读 · 0 评论 -
事件的绑定——JS
事件触发后需要根据绑定的将函数作出回应。如何绑定事件？文章目录对象.事件=函数addEventListener()对象.事件=函数使用对象.事件=函数的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个,如果绑定了多个，则后边会覆盖掉前边的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script>原创 2022-04-08 08:22:14 · 330 阅读 · 0 评论 -
事件的冒泡——JS
文章目录事件的冒泡（Bubble)冒泡的取消冒泡的应用：事件委派委派定义：事件的冒泡（Bubble)所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。eg:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #box1{ width: 300px;原创 2022-04-07 23:56:13 · 150 阅读 · 0 评论 -
事件对象——JS
文章目录事件对象简单介绍实例一：实现鼠标位置的记录实例二：div跟随鼠标移动事件对象简单介绍事件对象: 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数.在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向……验证： areaDiv.onmousemove = function(event){ alert(event); // alert("我移动了"); }原创 2022-04-07 20:36:15 · 350 阅读 · 0 评论 -
样式的相关属性——JS
clientHeightelement.clientHeight 返回元素的可见高度element.clientWidth 返回元素的可见宽度会获取元素宽度和高度，包括内容区和内边距且返回值没有px单位，都是一个数字，可以直接进行计算属性是只读的不能修改。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style>原创 2022-04-07 19:17:12 · 229 阅读 · 0 评论 -
DOM操作CSS
文章目录修改样式读取样式修改样式通过JS修改元素的样式:语法:元素.style.样式名=样式值==注意:==如果CSS的样式名中含有-，比如background-color，这种名称在JS中是不合法的。使用方法： 去掉-，然后将-后的字母大写（即驼峰命名法），如:backgroundColor我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆原创 2022-04-07 16:31:54 · 303 阅读 · 0 评论 -
添加和删除记录——JS
效果：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <script> // s删除的响应函数 function deleA(){ // 获取tr var tr = this.parentNode.parentNode; var n原创 2022-04-07 15:06:54 · 360 阅读 · 0 评论 -
DOM增删改——JS
方法含义appendChild()把新的子节点添加到指定节点。removeChild(）删除子节点replaceChild(）替换子节点insertBefore(）在指定的子节点前面插入新的子节点createElement(）创建元素节点createTextNode(）创建元文本点createAttribute(）创建属性节点getAttribute(）返回指定的属性值setAttribute()把指定属性设置或修改为指定...原创 2022-04-07 12:39:27 · 291 阅读 · 0 评论 -
全选练习——js
效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> </style> <script> function myClick(idname,fun){ var btn = document.getElementById(idna原创 2022-04-07 09:21:02 · 169 阅读 · 0 评论 -
文档的加载顺序
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取一行运行一行（解释型语言的特点）。如果将script标签写到页面的上边，就会先执行<script>,再执行<body>,所以如果执行到script时调用 doument中创建的对象，就会出错，因为对象还没定义，所以有两种解决办法：将JS代码编写到 <body>后面<!DOCTYPE html><html> <head> <meta charset="U原创 2022-04-05 15:50:21 · 290 阅读 · 0 评论 -
事件——JS
文章目录事件定义事件的处理绑定函数，减小耦合事件的所有种类事件定义事件就是用户和浏览器之间的交互行为：如：点击按钮、鼠标移动，关闭窗口事件的处理事件是由用户触发的，触发之后需要浏览器有所反应，才能完成交互。浏览器的反应就是事件处理的过程。我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，浏览器就会返回这些事件对应的属性值，从而这些代码将会执行。eg： <button id="btn" onclick="alert('点我干啥')">按钮</button>原创 2022-04-05 15:25:52 · 173 阅读 · 0 评论 -
DOM简介、DOM查询——JS
宿主对象——DOM,BOM文章目录DOM是什么DOM的使用节点DOM是什么DOM的全称是文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。文档：表示的是整个HTML网页文档对象：对象表示将网页中每一个部分转换成一个对象，所有可见的都是对象。模型：使用模型可以表示对象之间的关系，这样方便我们获获取对象。eg：模型模型就是体现节点与节点之间的关系。DOM的使用DOM的作用就是通过对象和模型用来操作网页的。由于模型连接了全局的元素原创 2022-04-05 14:49:00 · 1220 阅读 · 0 评论 -
正则表达式——JS
正则表达式：用于定义一些字符串的规则。计算机可以根据正则表达式，来检查一个字符串是否符合规则,获取将字符串中符合规则的内容提取出来。eg：检查电子邮件的格式是否正确。参考文档：https://www.w3cschool.cn/jsref/jsref-obj-regexp.html文章目录创建正则表达式对象简单使用正则表达式的简写使用的情况量词习题.的使用创建正则表达式对象语法：var 变量= new RegExp(“正则表达式","匹配模式");在构造函数中可以传递一个匹配模式作为第二个参原创 2022-04-05 14:08:50 · 237 阅读 · 0 评论 -
String的方法——JS
String :在底层字符串是以字符数组的形式保存的。文章目录String属性：String方法：文档地址：https://www.w3cschool.cn/jsref/jsref-obj-string.htmlString属性：length属性 var str = "Hello NIHAO"; console.log(str.length);输出：11String方法：String的方法一般都不会对原字符串产生影响，将执行结果进行返回。charA原创 2022-04-05 09:51:12 · 249 阅读 · 0 评论 -
包装类——JS
在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象.String():可以将基本数据类型字符串转换为String对象Number():可以将基本数据类型的数字转换为Number对象Boolean():可以将基本数据类型的布尔值转换为Boolean对象 var num = new Number(3); var str = new String("abc"); var bool = new Boolean(true); 但是 注意原创 2022-04-05 08:51:56 · 182 阅读 · 0 评论 -
Date对象——JS
Date对象: 在JS中使用Date对象来表示一个时间文章目录创建Date对象Date对象方法创建Date对象创建对象var d = new Date(); console.log(d);获取的是当前的时间。创建指定时间：需要在构造函数中传递—个表示时间的字符串作为参数日期的格式：月份/日/年 时:分:秒 var d = new Date("12/03/2022 11:10:30"); console.log(d);输出：Sat Dec 03 2022原创 2022-04-05 08:31:58 · 174 阅读 · 0 评论 -
Math——JS
文章目录基本概念Math方法：基本概念Math和其他的对象不同,它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。文档：https://www.w3cschool.cn/jsref/jsref-obj-math.htmlMath方法：...原创 2022-04-05 08:31:28 · 168 阅读 · 0 评论 -
函数的隐含参数arguments——JS
在调用函数时，浏览器每次都会传递进两个隐含的参数;1.函数的上下文对象this2.封装实参的对象arguments function fun(){ console.log(arguments); } fun();输出：Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]文章目录ARGUMENTS是什么ARGUMENTS是什么arguments是一个类数组对象。它也可以通过索引来操作数据，也可以获取长度原创 2022-04-05 08:32:25 · 215 阅读 · 0 评论 -
函数的call()、apply()和this——JS
文章目录函数也是对象，它也有方法。THIS小结函数也是对象，它也有方法。call(）和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用当对函数调用call()和apply()都会调用函数执行。fun.call()\fun.apply() 和 fun() 的区别：在调用call（）和apply()可以将一个对象指定为第一个参数，即：此时这个对象将会成为函数执行时的this。 (因为call（）和apply（）可以传参)不使用call和apply时： function fu原创 2022-04-04 20:55:27 · 496 阅读 · 0 评论 -
数组——JS基础
内建对象——数组。文章目录数组定义数组操作数组创建对象方法创建数组字面量方法创建数组数组添加元素数组末尾添加值读取数组元素获取数组长度数组中的元素可以是任意的数据类型数组的方法数组的遍历数组定义数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的；不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素索引:从 0 开始的整数就是索引数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据普通对象和数组对象的存储：数组操作数组创建对象方原创 2022-04-04 20:19:18 · 550 阅读 · 0 评论 -
垃圾回收——JS
垃圾回收定义（GC)就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾,这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。垃圾产生当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾。垃圾回收在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收的操作。当你想要回收一个空间时，将不再使用的对象设置为null即可。...原创 2022-04-04 16:55:19 · 251 阅读 · 0 评论 -
toString ——JS
function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; } // 创建一个实例对象 var per = new Person("孙悟空",18,"男"); var result = per.toString(); console....原创 2022-04-04 16:49:45 · 201 阅读 · 0 评论 -
对象的创建——格式化创建对象
文章目录使用工厂的方式创建对象构造函数创建对象——相当于java中的类instanceof ——判断是否是该类的实例构造函数的缺点补充：this的使用：使用工厂的方式创建对象如果需要创建多个相似的独享的时候，需要填写许多重复代码。所以我们使用将其进行封装，实现工厂化生产，批量生产。将创建对象的过长写到函数中，并将函数传递给函数： function createPerson(name, age, gender){ var obj = new Object();原创 2022-04-04 16:33:30 · 1154 阅读 · 0 评论 -
js基础_原型对象
文章目录原型原型的小问题原型的原型原型原型prototype：我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype这个属性对应着一个对象,这个对象就是我们所谓的原型对象eg： function Person(){ } function MyClass(){ } console.log(MyClass.prototype); console.log(Person.prototype ==MyClass.原创 2022-04-04 16:32:11 · 195 阅读 · 0 评论