JavaScript
关注
分享
扫一扫
文章平均质量分 79
小欧哥学前端
一个入门级前端小程序猿，分享自己平时的一些学习笔记及案例分析，有兴趣的小伙伴可以关注下一起学习探讨，加油！
展开
-
JavaScript-MySql 的简单操作
常用的数据库关系型数据库：oracle(中大型项目必用)mysql(常用)sql serve(微软开发必用)db2(二次开发必用 )nosql 键值对数据库sqllite(物联网使用)mongdb redisMySql 数据库介绍mysql数据库时属于oracle公司的产品，他最大的特点就是免费（200万条数据下免费，中小型公司使用的较多）三大范式 及acid三大范式第一范式：列不可再分第二范式： 属性完全依赖于主键第三范式：属性不依赖原创 2022-05-06 08:02:38 · 1323 阅读 · 0 评论 -
JavaScript-JSONP讲解
同源策略出于安全性的考虑，浏览器只允许对应的两者是同源的内容进行交互和访问不同源的内容不允许访问CORS 跨域跨域的问题（同源政策的影响）1.访问协议不同（http，https)2.域名不同3.端口号不同(浏览器默认80)4.走的是file协议，文件不一样也会跨域解决跨域问题：1.添加请求头，后端添加请求头 access-control-allow-origin:* 跨域的地址2.前端也可以添加请求头 setRequestHeader3.jsonp形式原创 2022-04-16 16:31:02 · 2303 阅读 · 0 评论 -
JavaScript-Ajax基础讲解
ajax概述：ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求）ajax的特点：1.支持异步请求2.实现局部刷新3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录）ajax运用：前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据1.创建一个请求对象 request 请求 response 响应let xhr = new原创 2022-04-16 11:24:43 · 2040 阅读 · 0 评论 -
JavaScript-面向对象简单讲解（重点）
面向对象是一种编程思想对象的创建1.字面量赋值let obj = {}2.使用new关键词创建1.字面量赋值let obj = {}2.使用new关键词(使用new关键词创建的都是对象)let newObj = new Object()let date = new Date() //创建一个日期对象let array = new Array() //创建一个数组对象3.使用class 类 创建对象的模板class Person{ constru..原创 2022-04-14 21:32:45 · 474 阅读 · 0 评论 -
JavaScript-缓冲动画小案例
有四个红色div，当鼠标移入时，让红色的div以缓冲速度变宽，鼠标移开时，让红色div以缓冲速度回到原来的宽度，且移入时位置发生变化，移出又回到原来的位置。<style> div{ width: 100px; height: 100px; background-color: red; margin-top: 5px; posit...原创 2022-04-07 15:25:57 · 226 阅读 · 0 评论 -
JavaScript-简单轮播图制作
<style> * {margin:0; padding:0;} ul {list-style: none;} img { vertical-align: top; /*除去 图片底部有3像素空白缝隙的问题 */ } .box { width: 490px; height: 170px; margin:...原创 2022-04-06 18:24:31 · 1103 阅读 · 0 评论 -
JavaScript-ES6新增语法讲解
1. es6对应的string类的增强includes 是否包含//检索是否包含这个内容，返回Boolean类型的值const str = 'hello'console.log(str.includes('he')); //true//可以传递两个参数，第二个参数表示从什么位置查找console.log(str.includes('he',3)); //false 包含对应的指定位置startsWith 判断是否是开头的内容//startWith 开始，判断是否..原创 2022-04-05 15:27:52 · 1360 阅读 · 0 评论 -
JavaScript-函数的简单运用小案例
<script> 1, 写一个函数计算1到n的和, 并返回结果打印出来;(n为函数参数)。 function sum(n){ var number01 = 0 //保存对应的计算的和 //遍历1-n for(var i=1;i<=n;i++){ number01+=i //将1-n的值累加给number01 } ...原创 2022-04-02 22:09:16 · 1157 阅读 · 0 评论 -
JavaScript-ES5和ES6基础讲解(上）
ES5 : ECMAScript 5ES5的严格模式：即更严格的模式 在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。声明严格模式："use strict";"use strict"; //声明严格模式 n=123 console.log(n); //这里面代码打印会直接报错，采用了严格模式后对应的内容需要更加规范，不支持8进制eslint 代码检查器设立严格格...原创 2022-04-01 22:21:42 · 863 阅读 · 0 评论 -
JavaScript-正则表达式基础讲解
正则对象定义方式第一种定义 常用var regx = /^b$/ //声明的就是一个正则对象， ^表示开头 $表示结尾，只匹配一个b第二种定义var regx1 = new RegExp('^a$') //声明一个正则对象，只匹配a这个单词[ ]表示其中的一个元素var regx2 = /^[abcdefg]$/ //匹配a 或者b 或者c 或者d 或者e 或者f其中的一个字母{ }表示个数，可以规定个数的范围{1,2} 表示1-2个 {1}...原创 2022-03-31 22:20:08 · 807 阅读 · 0 评论 -
JavaScript-事件知识点总结
事件构成三要素1.触发的元素2.事件函数（on+事件类型）3.事件处理函数（方法）事件书写方式元素内部直接写<a href='' onclick=”alert('hello')“></a>元素内部调用函数<a href='' onclick='fn()'></a>使用对应的事件属性添加事件var box = document.getElementById('box')box.onclick = function(原创 2022-03-30 20:59:53 · 664 阅读 · 0 评论 -
JavaScript-cookie基础讲解
http和https（安全）他俩都是负责网络通信 主要浏览器访问 浏览器访问服务器 服务器给我浏览器数据关于http的特点无状态 （同时俩个客户端请求服务器端 他是没有办法分辩谁是谁）需要标识了（房卡）无连接 （俩者的数据发送完 就断开连接）cookie 他就是用来解决http的无状态问题（认为是标识）cookie存储在浏览器上每次请求都会带上cookiesession叫会话 浏览器和服务器通信的过程会产生会话 （每一次会话会产生对应的sessionId）,每次会话产生都会有一个原创 2022-03-30 20:56:44 · 762 阅读 · 0 评论 -
JavaScript-事件讲解（下）
事件冒泡：从里往外逐个触发， 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式。在触发事件时候 会一层一层向上冒泡 （他同时会触发父类的事件）阻止事件冒泡 ：意思就是阻止事件的向上传递（stopPropagation)stopPropagation 这个方法可以阻止事件冒泡，且他遵从w3c规则 （兼容各大浏览器 ie9之前不兼容）ie浏览器的阻止事件冒泡 利用了一个属性 ，cancelBubble 设置为true 他也兼容各大浏览器（不遵从w3c规范 未来这原创 2022-03-29 21:38:06 · 174 阅读 · 0 评论 -
JavaScript-拖拽事件小案例
<style> #box{ width:100px; height:100px; background-color: red; position:absolute;} .bigBox{ width:500px; height:500px; position:absolute;...原创 2022-03-29 19:19:49 · 370 阅读 · 0 评论 -
JavaScript-用户名和密码登入检测案例解析
<body> <form action="#"> <input type="text" placeholder="用户名" name="username"><sapn style="color:red"></sapn> <br/> <input type="text" placeholder="密码" id="password"><sapn style="color:red"&g...原创 2022-03-29 10:52:38 · 1012 阅读 · 0 评论 -
JavaScript-事件的讲解（上）
JS事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数事件由三部分组成：触发事件的元素；对应的事件的函数；（事件函数的特点：全部小写且以on开头，onclick on事件开头，click是事件名点击的意思事件的处理函数；<!-- 内联模式 直接在标签内容以指定属性的方式 较少 --> <button onclick="alert('hello')">点击</button> <!-- 内联模式 直接在标签内容以指...原创 2022-03-28 20:20:58 · 765 阅读 · 0 评论 -
JavaScript- BOM和DOM知识点总结
BOM(brower object model) 浏览器对象模型常见对象 windowwindow的子对象document 文档对象（表示整个HTML文档内容）location（地址栏url对象）获取地址栏的内容 属性href 地址栏完整链接host hostname 主机pathname 文件路径hash 锚点port 端口号protocol 协议orgin 跨域相关方法assign 跳转方法replace 替换url的方法常见的原创 2022-03-28 20:18:31 · 193 阅读 · 0 评论 -
JavaScript-节点属性知识讲解
节点共有属性（元素节点有，属性节点有，文本节点有）var title = document.getElementsByTagName('title')[0]console.log(title.nodeName); //nodeName节点名称console.log(title.nodeType); //nodeType //节点类型： 元素节点； 属性节点；文本节点console.log(title.nodeValue); //节点值 ： 元素节点为nul...原创 2022-03-27 22:05:49 · 805 阅读 · 0 评论 -
JavaScript-数组及字符串的方法总结
数组（数组是可变的）数组的方法push 添加方法（添加到末尾），返回新的数组长度，会影响原本的数组pop 删除方法（删除末尾的元素），返回删除的元素，会影响原本的数组shift 删除方法（删除第一个元素），会影响原本的数组unshift 添加方法 （添加到第一个），会影响原本的数组concat 合并方法，将两个数组合并在一起（返回的是一个新的数组，不会改变原本的数组）reverse 反转 （将数组倒序），会影响原本的数组sort 排序方法 （将数组按照ascii码排序），会影原创 2022-03-27 22:01:50 · 674 阅读 · 0 评论 -
JavaScript-字符串知识讲解
字符串：是JavaScript的一种数据类型 ，用"" ''括起来的就是字符串字符串的定义通过直接赋值的形式是基本的数据类型，通过 new 关键词是对象类型(引用数据类型)第一种定义方法（常用）var str = 'str'var str1 = 'hello'第二种定义方法var 变量 = 字符串值，使用 new 关键词定义var strObj = new String(true) //返回的是一个字符串var strObj1 = new String("hel..原创 2022-03-27 22:00:02 · 3270 阅读 · 0 评论 -
JavaScript-排序算法知识讲解
冒泡排序1. 逐层冒泡，第一次执行的冒泡，执行的比较次数为当前的长度 -12. 冒泡的总次数为长度 -13. 冒泡的比较次数一次比一次 少，最后到达一次结束var arr = [1,3,8,5,7,6,2]function bubbleSort(array){ //冒泡的次数 for(var i=1;i<array.length;i++){ for(var j=0; j<array.length-i;j++){ //记录比较的次数 ...原创 2022-03-27 21:19:10 · 117 阅读 · 0 评论 -
JavaScript-数组的排序知识讲解
反转 ( reverse 会影响之前的数组，没有参数，返回值为倒转过来的数组)var arr = ['a','b','c','d']var strArr = arr.reverse() //反转 将数组元素全部倒过来console.log(strArr); // ['d','c','b','a']strArr 和 arr俩个其实指向的是一个变量 所以操作 strArr会影响arr 操作arr也会影响strArrconsole.log(strArr == arr); //...原创 2022-03-27 21:16:58 · 315 阅读 · 0 评论 -
JavaScript-递归+数组基础讲解
递归调用: 函数可以自己调用自己,必须要有结束条件,称为函数的递归调用;三大问题因素1.明确对应要解决的问题2.明确临界点（终止） if else(没有规律的)3.明确内部需要调用自己的函数递归调用的方式 首先去找临界值，即无需计算，获得的值(一般是返回该值)。 一般是有结果返回的 找这一次和上一次的关系(一般从后往前找) ，函数必须要有参 其次参数之间得到的结果会存再某种关系 假设当前函数已经可以使用，调用自身计算上一次的运行结果，再写出这次的运行结果原创 2022-03-27 21:14:06 · 495 阅读 · 0 评论 -
JavaScript-函数基础讲解
Js函数的概念：函数其实就抽取写好的js代码 ，作为一个通用的代码块（封装）函数的作用：1, 函数可以在同一个程序或其他程序中多次重复使用（通过函数名调用）2, 使程序变得更简短而清晰 ， 提高可读性3, 有利于程序维护函数的分类 ：系统函数 内置函数 和 自定义函数1. 系统函数 就是系统自带的函数 如：alert()2. 内置函数 Math.pow() 属于Math对象的内置函数3. 自定义函数 你自己写的函数 需要先书写 再进行调用函数的简单定义原创 2022-03-27 21:11:53 · 418 阅读 · 0 评论 -
JavaScript-循环语句讲解
JS循环的概念：循环就是重复做一件事, 在程序中指的是重复执行某段代码.我们没办法控制每次循环的时间长度循环会增大程序的时间复杂度（不建议无限循环嵌套，一般情况下不会嵌套超过两次）死循环的概念死循环就是重复执行代码, 不会停止.死循环会造成程序卡死甚至崩溃等问题, 我们不能写会造成死循环的代码.循环分为很多种 常见的有三种 ：while循环 do while循环 for循环1. while循环语句（可以嵌套）while(布尔类型表达式){ //循环体...原创 2022-03-27 21:08:34 · 677 阅读 · 0 评论 -
JavaScript- 运算符和逻辑分支讲解
JS运算符1.一元运算符只能操作一个值的运算符叫做一元运算符var a = ++b //先运算，后赋值var a = b++ //先赋值，后运算字符串类型，对于字符串类型来说自增 或自减 会自动进行类型转换var str = '10'str++ //str = Number(str) +1 ,自动转换 从string转为numberconsole.log(str); //11var str1 = 'ab'str1++ console.log(str1) //N...原创 2022-03-27 21:02:38 · 419 阅读 · 0 评论 -
JavaScript-节点操作案例详解
利用方法 添加一个ul 然后再ul里面添加10个li 并且里面li显示的值为1-10再写个按钮 点击删除ul里面的单数的li 再将最后一个li替换成a标签<body> <button onclick="fn()">按钮</button> <script> //第一步创建一个ul var ul = document.createElement('ul') //创建10使用for...原创 2022-03-25 19:53:12 · 446 阅读 · 0 评论 -
JavaScript-案例详解-动态表格的创建
1, 动态表格的创建, 在输入框中输入内容后，点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行的记录<body> <input type="text" placeholder="ID值"> <input type="text" placeholder="姓名"> <input type="text" placeholder="电话"> <button onclick="save()">保存&...原创 2022-03-25 19:38:42 · 852 阅读 · 0 评论 -
JavaScript-BOM+DOM 知识讲解
BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。1.BOM是进行浏览器操作的2.BOM里面是存在多个对象的3.BOM实际进行操作浏览器是使用多个对象里面的属性以及相关方法4.BOM没有规范，我们所讲的是BOM的共有对象window对象是BOM的核心, window对象表示浏览器窗口的一个对象window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的.windo原创 2022-03-24 23:03:46 · 230 阅读 · 0 评论 -
JavaScript-日期+对象+定时器 知识讲解
Date日期 UTC国际协调时间 从1970年1月1日0 时0分开始计算 可以精确到之前或之后的285616年定义日期//第一种var date = new Date() //返回的当前时间 没有参数会返回当前的显示时间（电脑上的）console.log(date);//第二种 指定一个日期（可以是字符串也可以是number）var date1 = new Date("2022-03-23T06:30:58.971Z")console.log(date1);console.原创 2022-03-24 22:53:32 · 654 阅读 · 0 评论 -
JavaScript学习-JavaScript基础
JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性.JavaScript由三部分组成: 核心基本语法(ECMAScript) ECMA：欧洲计算机制造商协会 浏览器对象模型(BOM） 文档对象模型(DOM) javaScript书写位置：1.书写在标签中：<a href="javascript:alert('hello')"></a>2.书写在script标签中<script>原创 2022-03-24 22:32:52 · 530 阅读 · 0 评论