H之一-CSDN博客

原创前端js语法摘录--笔记

Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组，方便map()方法遍历。3.1二维数组转一维数组（利用concat方法可以将传入的数组参数与当前数组拼接）Object.values():返回一个给定对象所有可枚举属性值的数组。1.includes：检测数组中是否包含某个元素，返回值是布尔值。指数（乘方）exponentiation运算符。5.取0.0 – 1.0之间的随机数。1.转换所有值的绝对值。2.指数操作符：**3.2多维数组转一维。

2022-09-23 15:01:17 420 1

原创禁用inheritAttrs继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。例如：Vue.component('my-component', { inheritAttrs: false, // ...})使用inheritAttrs: false；和$attrs 就可以决定哪些元素会被绑定当inheritAttrs: false，$attrs没绑定的时候

2020-12-29 19:32:01 294

原创使用JavaScript控制按钮点击触发的时间段

话不多说直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./addevent.js"></script> <title>D

2020-11-18 17:31:12 770 2

原创 JavaScript中偏移量属性

偏移量：获取在已定位的父级元素的子元素位置属性 offsetLeft 取正值从左向右偏移，取负值从右向左偏移 offsetTop 取值从上向下偏移，取负值从下向上偏移 offsetWidht 获取元素的宽度 offsetHeight 获取元素的高度 offsetParent 获取定位过的父元素，即有可能不是离得最近的父级元素客户区大小： clientLeft 离已定位的父级元素的左边距，包括自身左边框宽度 clientTop 离已定位的父级元素的上边距，包括自身上

2020-11-18 16:32:29 963

原创 JavaScript的event常见属性&鼠标和键盘的事件

event的常见属性 event.type 获取事件类型 event.clientX/clientY 获取当前事件源在浏览器窗口中的位置 event.pageX/pageY 获取当前事件源在页面中的位置 event.screenX/screenY获取当前事件源在屏幕中的位置 event.target ||event.srcElement 当前事件源 event.pr

2020-11-18 15:59:49 344

原创 DOM增加元素属性/dom事件

增: 元素(标签),节点创建元素三种方法:1 document.write(“html”);2 元素对象.innerHTML = “html”3 document.createElement(“标签名”); 创建元素对象,返回值元素对象.appendChild(子元素对象); 添加给body添加:document.body.appendChild(子元素对象);注:建议使用第三方法,性能最好元素对象.insertBefore(要插入的元素,已有元素); 在某元素之前插入元素元素对

2020-11-16 15:52:00 469

原创 Web API

BOM 常用APIAlert() 没有返回值Prompt() 返回值为字符串Confirm() 返回值为布尔型Onload 这是个属性,取值是函数,作用页面全部加载完执行函数Onunload 这是个属性,取值是函数,作用完全退出页面执行函数Onbeforeunload 这是个属性,取值是函数,作用退出页面前执行函数定时器：1.setTimeout(), setTimeout(函数，毫秒时间)；在指定的时间之后，执行一次函数。clearTimeout(存贮任务变量名) 清除

2020-11-16 15:45:54 82

原创 JavaScript控制灯泡开关

在html中使用<button>按钮去控制灯泡的开关。首先写出HTML中的灯泡和开关按钮：HTML：<div id=""> <img src="guan.jpg" ><br> <button onclick="kaiGuan()" id="kg">开</button> </div>JS: //使用变量获取到html中的灯泡和按钮； var deng = document.getEl

2020-11-16 15:22:24 762

原创解析查询字符串

var queryStr = "https://www.baidu.com/s?wd=%E5%90%89%E5%B0%94%E6%8B%9C%E7%99%BB&rsv_spt=1&rsv_iqid=0x8918dabe0005151c&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_0&rsv_sug3=1&

2020-11-09 17:44:02 337

原创 JavaScript实现简单时钟变换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #nowspan{

2020-11-08 18:47:36 160

原创查找字符串中所有某个字符出现的位置

//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st

2020-11-05 00:16:30 1349

原创 JavaScript各类标签的使用

内置对象：Date创建日期对象：1.Date（）无参2.Date（字符串）3.Date（年，月，日）// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数 var now = new Date(); console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数 Date构造函数的参数 1. 毫秒数 1498099000356 new Date(1498099000356

2020-11-04 17:31:35 355

原创函数中的更多用法

arguments的使用JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历案例：求任意个数的最大值：//求一组数中的最大值 function arr(){ var max = arguments[0]; console.log(argume

2020-11-04 15:21:50 147

原创 JavaScript函数的执行

函数就是重复执行的代码片为什么要有函数？如果要在多个地方求1-100之间所有数的和，应该怎么做？什么是函数？把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用函数的定义：·函数声明function 函数名（）{ //函数体 }·函数表达式var fn = function() { // 函数体 }特点：函数声明的时候，函数体并不会执行，只要当函数被调用的时候才

2020-10-29 23:35:20 245

原创 JavaScript中数组的概念

为什么要学习数组？之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中。那么这个集合我们就成为数组。数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。通过数组字面量创建数组<script> //创建一个空数组 var arr1 = []; //创建一个

2020-10-28 21:11:05 194

原创 javascript关于for循环语句的使用方法

for语句whlie和do…whlie一般是用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便for循环语法：// for循环的表达式之间用的是;号分隔的，千万不要写成, for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4 }执行顺序：1243—243—243（直到循环条件变成flase）1.初始化表达式2.判断表达式3.自增表达式4.循环体案例：打印1-100之间所有数<script> for(

2020-10-27 21:12:23 438

原创 JS语句结构

流程控制语句:程序的三种基本结构(1)顺序结构;(2)选择结构;单分支结构; 语法: if(条件){语句体} / 条件&& 语句体var score=90;if(score>80){console.log('优秀'); } //(条件默认为true)双分支结构; 语法: if(条件){语句体}else{语句体}(1) if(score>90){ alert('成绩大于90'); }else{ alert('成绩小于90'); }

2020-10-27 14:09:07 175

原创 JavaScript变量与数据类型的应用

JavaScript是运行在客户端（浏览器）的脚本语言，是基于事件驱动的弱类型的脚本语言；浏览器的内核：渲染引擎和JS引擎 &nb

2020-10-24 15:24:50 185

原创 CSS三种清除浮动的方法

清除浮动的方法有三种：父级上增加属性 overflow：hidden在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both（不推荐）使用成熟的清浮动样式类，clearfix如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

2020-10-10 15:39:08 97

原创 CSS margin-top塌陷问题

在俩个盒子嵌套的时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：1.外部盒子设置一个边框2.外部盒子设置voerflow:hidden3.使用伪元素类；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

2020-10-10 15:21:10 137

原创 HTML标签书写格式大全

一、常用浏览器与浏览器内核1.常用浏览器chromo(推荐谷歌)Firefox(火狐)IE浏览器Opera浏览器safari浏览器2.浏览器内核浏览器内核的主要组成部分：渲染引擎（layout或engine）和JS引擎渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序

2020-09-28 18:35:55 3579

原创 CSS图案设计

1.边框的设计边框其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。边框圆角border-radius 每个角可以设置两个值，x 值，y 值1: 边框圆角处理2: 正方形<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs

2020-09-27 17:55:45 176

原创 HTML表单及储存

H5的特性语义化标签标签描述header定义了文档的头部区域footer定义了文档的尾部区域nav定义文档的导航section定义文档中的节（section、区段）article定义页面独立的内容区域aside定义页面的侧边栏内容detailes用于描述文档或文档某个部分的细节summary标签包含 details 元素的标题dialog定义对话框，比如提示框2.新增表单控件email:邮箱tel:电话ur

2020-09-25 19:24:51 2207

原创 CSS设置文本字体，链接，背景等

一、CSS基础样式1.CSS文本及字体设计常用的应用文本的CSS样式设置文字的颜色color:red;设置文字的大小font-size:12px;设置文字的字体font-family:‘微软雅黑’;设置字体不倾斜font-style:‘normal’;设置字体倾斜font-style:‘italic’;设置文字是否加粗font-weight:bold; font-weight:normal设置文字的行高line-height:24px;

2020-09-25 19:07:23 603

原创 jQuery_基础学习4

jQuery-Ajax简介1.AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新load()从服务器加载数据，并把返回的数据放置到指定的元素中语法：$(selector).load(url,data,function(response,status,xhr))url必需。规定您需要甲在的URLdata可选。规定连同请求发送到服务器的数据function(response,status,xhr)可选。规定load()方法

2020-09-18 15:37:04 145

原创 jQuery_基础学习3

jQueryjQuery-添加元素append()-在被选中元素中插入内容【由下往上】prepend()-在被选中元素中插入内容【由上往下】after()-在被选元素之后插入内容before()-在被选元素之前插入内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ .

2020-09-17 16:16:36 117

原创 jquery_基础简介2

jQuery 效果- 隐藏和显示1. javascript控制隐藏和显示通过控制css样式的display属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> window.onload=function(){ d.

2020-09-16 17:03:04 106

原创 jquery_基础简介1

jQuery 是一个 JavaScript 库。[.js]jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 简介jQuery库可以通过一行简单的标记被添加到网页中。例如：<script scr="js/jquery.js"></script>您需要具备的基础知识在您开始学习jQuery之前，您应该对一下知识有基本的了解：HTMLCSSJavaScript**什么是jQuery？**jQuery是一个轻量级.

2020-09-15 17:47:15 119

原创 JavaScript_学习10

总结步骤:创建HttpRequest对象我们需要判断浏览器，不同的浏览器创建这个HttpRequest对象的时候，是使用的对象不同window.XMLHttpRequest-----IE7+, Firefox, Chrome, Opera, Safari 浏览器— XMLHttpRequest----IE5,IE6浏览器------ActiveXObject(“Microsoft.XMLHTTP”);2.请求发送以后的处理动作XMLHttpRequest 对象属性属性描述

2020-09-12 10:37:21 154

原创 JavaScript_基础简介9

1. JavaScript 异步编程 [javascript AJAX]简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效果更高.什么时候用异步编程在前端编程中（甚至后端有时也是这样）,当一个事件没有结束时，界面将无法处理其他请求。现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因

2020-09-11 10:08:45 218

原创 JavaScript_基础简介8

1.JavaScript Browser BOMBOM—浏览器对象模型1.1 JavaScript Window 对象所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <scri

2020-09-10 09:45:26 99

原创 JavaScript_基础练习7

https://www.w3school.com.cn/js/index.asp1. JavaScript HTML DOMHTML-----html标记JavaScript -----javascript对象/变量我们现在需要通过JavaScript来改变html标记所呈现的样子/样式/位置等等。那么这是我们就需要将html标记转换成javascript对象将html标记转换成javascript对象----HTML DOM对象DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象

2020-09-09 10:10:47 120

原创 JavaScript_简介学习4

JavaScript_4https://www.w3school.com.cn/js/index.asp1.JavaScript 数字JavaScript 只有一种数值类型。[没有整数和小数之分]实例:var x = 3.14; // 带小数点的数值var y = 3; // 不带小数点的数值超大或超小的数可通过科学计数法来写：实例:var x = 123e5; // 12300000var y = 123e-5; // 0.00123JavaScript

2020-09-03 14:45:13 145

原创 JavaScript_基础学习3

https://www.w3school.com.cn/js/index.asp1.JavaScript 事件HTML事件是发生在HTML元素上的“事情”.当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。通过JavaScript代码，向HTML元素添加事件处理程序。格式1：<html 元素事件名称=“JavaScript代码对应时间的处理程序”><html> <head> <meta charset=

2020-09-02 16:10:29 108

原创 JavaScript_简介2

https://www.w3school.com.cn/js/index.asp1.javascript 运算符JavaScript 使用（=）复制运算符。JavaScript 使用算数运算符（+ - * / % ++ --）来计算值。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/

2020-09-01 20:00:45 126

原创 javascript的简介

1.为何学习 JavaScript？ JavaScript 是 web 开发者必学的三种语言之一：HTML 定义网页的内容----[制作网页]----简单枯燥CSS 规定网页的布局和样式—[美化网页]HTML+CSS—网页—没有动态的网页【1.无动态效果 2.数据没有动态化】JavaScript 对网页行为进行编程【动态效果，数据动态加载】2. 什么是JavaScript？ 1.javascript和java是完全不同的语言，不论是概念还是设计。网景----浏览器【Netscap

2020-08-29 17:19:09 197

原创 CSS基本属性（三）

CSS基本属性3Transition—复合属性[检索或设置对象变换时的过渡。]<’ transition-property '>：检索或设置对象中的参与过渡的属性none：不指定过渡的css属性all：所有可以进行过渡的css属性自定义属性：指定要进行过渡的css属性<’ transition-duration '>：检索或设置对象过渡的持续时间时长:指定对象过渡的持续时间 [单位s秒]<’ transition-timing-function '&gt

2020-08-27 16:24:07 121

原创 CSS基本原理入门

1. 表格属性属性名称用途取值border-collapse设置或检索表格的行和单元格的边是合并还是独立。separate：边框独立 collapse：相邻边被合并border-spacing边框独立时，单元格与单元格之间的间距数字，不允许负值empty-cells设置或检索当表格的单元格无内容时，是否显示该单元格的边框。hide：隐藏该单元格的边框。 show：显示该单元格的边框。<!DOCTYPE html><html>

2020-08-26 15:35:21 155

原创 CSS基本原理入门

CSS基础属性1.什么是CSS？2.如何导入CSS到html文件中？【3种】3.CSS的基本选择器4.CSS的基本属性4.1 修饰文本样式属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" c

2020-08-25 17:28:29 252

原创 CSS基本原理入门级

CSS-1什么是css?CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 [美化页面]。如何将css加入您的网页中？内联定义 (Inline Styles)在html的开始标记内使用style属性定义适用标记样式表属性。<!DOCTYPE html><html> <head> <meta charset="utf-8">

2020-08-22 16:16:23 262

空空如也

空空如也