04 2022 档案

摘要:渲染 UL 结构遇到的问题 上述代码是通过字符串拼接的形式,来渲染Ul结构。 如果U结构比较复杂,则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化,修改起来也非常麻烦。 什么是模板引擎 模板引擎,顾名思义,它河以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面。 模板引 阅读全文
posted @ 2022-04-30 09:58 会前端的洋 阅读(120) 评论(0) 推荐(0) 编辑
摘要:form 表单的 enctype 属性 表单的同步提交及缺点 什么是表单的同步提交 通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL 的行为,叫做表单的同步提交。 表单同步提交的缺点 <form> 表单同步提交后, 整个页面会发生跳转, 跳转到 action URL 阅读全文
posted @ 2022-04-28 22:26 会前端的洋 阅读(81) 评论(0) 推荐(0) 编辑
摘要:接口的概念 使用Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。例如 : http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)http://www.liulongbin.top 阅读全文
posted @ 2022-04-28 16:11 会前端的洋 阅读(198) 评论(0) 推荐(0) 编辑
摘要:Ajax的全称是Asynchronous Javascript And XML(异步 JavaScript和XML)。 通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。 Ajax 的典型应用场景 用户名检测:注册用户时,通过ajax的形式,动态检测用 阅读全文
posted @ 2022-04-28 14:41 会前端的洋 阅读(121) 评论(0) 推荐(0) 编辑
摘要:客户端和服务器 什么是客户端 : 上网过程中,负责获取和消费资源的电脑,叫做客户端。 什么是服务器 : 服务器就是电脑, 只不过他的性能要比普通的电脑性能要高 URL 地址的概念 URL (全称是 UniformResourceLocator) 中文叫统一资源定位符, 用于表示互联网上的每个资源的卫 阅读全文
posted @ 2022-04-28 13:10 会前端的洋 阅读(84) 评论(0) 推荐(0) 编辑
摘要:HTTP状态码:浏览者访问一个网页时,浏览者的浏览器会向网页所在的服务器发出请求,当浏览器接收并显示页面前,此网页所在的服务器会返回一个包含HTTP状态码的信息头泳衣响应浏览器的请求。 HTTP状态码共分为5种类型: 1XX(临时响应):服务器收到请求——需要请求者继续执行操作。 2XX(成功):成 阅读全文
posted @ 2022-04-28 10:12 会前端的洋 阅读(210) 评论(0) 推荐(0) 编辑
摘要:计算机本身很棒,原因有很多,但是大多数计算机在相互连接时才真正开始运行。无论是发送电子邮件,流式传输电视节目,还是与世界另一端的人玩游戏,计算机都必须与他人链接才能执行此操作。要做到这一点,计算机必须知道如何与网络上的其他计算机进行通信。这就是TCP / IP的用武之地。 TCP / IP是Inte 阅读全文
posted @ 2022-04-26 16:21 会前端的洋 阅读(923) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2022-04-26 10:03 会前端的洋 阅读(34) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2022-04-25 11:15 会前端的洋 阅读(14) 评论(0) 推荐(0) 编辑
摘要:Request 阅读全文
posted @ 2022-04-25 11:14 会前端的洋 阅读(16) 评论(0) 推荐(0) 编辑
摘要:了解就行 阅读全文
posted @ 2022-04-25 10:12 会前端的洋 阅读(25) 评论(0) 推荐(0) 编辑
摘要:DNS DHCP 阅读全文
posted @ 2022-04-25 10:05 会前端的洋 阅读(19) 评论(0) 推荐(0) 编辑
摘要:TCP TCP 比较稳定 http 就是用的 TCP TCP 的特点就是 比较稳定, 利用三次握手原则 UDP UDP 的传输速度比较快 经常用于传输 视频和音频 UDP 的特点就是 速度快, 获取地址直接传送 阅读全文
posted @ 2022-04-25 09:57 会前端的洋 阅读(58) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2022-04-25 09:31 会前端的洋 阅读(24) 评论(2) 推荐(0) 编辑
摘要:http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name从上面的URL可以看出,一个完整的URL包括以下几部分:1.协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Intern 阅读全文
posted @ 2022-04-24 15:41 会前端的洋 阅读(1770) 评论(0) 推荐(0) 编辑
摘要:网站 : 阅读全文
posted @ 2022-04-19 16:32 会前端的洋 阅读(18) 评论(0) 推荐(0) 编辑
摘要:图片懒加载 作用 : (图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载) 当我们页面滑动到可视区域,再显示图片。 我们使用jquery插件库EasyLazyload。 注意,此时的 js 引入文件和js调用必须写到DOM元素 (图片) 最后面 在这个网址搜索图片懒加载 : (http 阅读全文
posted @ 2022-04-19 16:20 会前端的洋 阅读(647) 评论(0) 推荐(0) 编辑
摘要:目录 1. 概述 1.1 jQuery? 2. jQuery的使用 2.1 下载 2.2 jQuery 的入口函数 2.3 jQuery的顶级对象 $ 2.3.1 $ 是jQuery的别称 2.3.2 $ 是 jQuery的顶级对象 2.4 jQuery对象和DOM对象 2.4.1 两种对象之间的相 阅读全文
posted @ 2022-04-19 09:49 会前端的洋 阅读(716) 评论(0) 推荐(0) 编辑
摘要:1.setAttribute 描述:设置元素的【属性】 语法:元素名.setAttribute('属性','属性值'); 例子: box.setAttribute('style','background-color:red;height:400px'); 注意:设置的是行内样式 2.getAttri 阅读全文
posted @ 2022-04-18 14:14 会前端的洋 阅读(510) 评论(0) 推荐(1) 编辑
摘要:查看数据 : (关闭浏览器数据流失)代码示例 : <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> 阅读全文
posted @ 2022-04-17 20:47 会前端的洋 阅读(325) 评论(0) 推荐(0) 编辑
摘要:这是真对于移动端的插件 (客户端也可用) swiper 插件 制作动画类型 (比如轮播图) https://www.swiper.com.cn/ TouchSlide 插件 制作 触屏滑动特效插件 http://www.superslide2.com/ 视频 插件 各个浏览器的视频样式风格功能统一 阅读全文
posted @ 2022-04-17 15:25 会前端的洋 阅读(149) 评论(0) 推荐(0) 编辑
摘要:TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。 这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等 事件名 touchstart 手指触摸事件 touchmove 手指触摸移动事件 touchend 手指触摸松开事件 代码示例 : 阅读全文
posted @ 2022-04-16 22:24 会前端的洋 阅读(207) 评论(0) 推荐(0) 编辑
摘要:注 : 此处内容较多, 只显示代码, 具体讲解看注释. 具体参考 "黑马 pink老师" https://www.bilibili.com/video/BV1Sy4y1C7ha?p=328&spm_id_from=pageDriver 文件夹结构 html 结构 <!DOCTYPE html> <h 阅读全文
posted @ 2022-04-16 20:27 会前端的洋 阅读(450) 评论(1) 推荐(0) 编辑
摘要:往对象里面添加数据 方法一: 直接添加 let obj = { name: 'sun' }; // [] let key = 'age'; let value = 18; obj[key] = value; // . obj.age = 18; console.log(obj, 'obj'); // 阅读全文
posted @ 2022-04-15 14:18 会前端的洋 阅读(2313) 评论(0) 推荐(0) 编辑
摘要:当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,它们两者之间的差别是 mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标离开mousel 阅读全文
posted @ 2022-04-15 11:36 会前端的洋 阅读(69) 评论(0) 推荐(0) 编辑
摘要:定义 : scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 常用属性 : 需要用到页面滚动事件scroll因为是页面滚动,所以事件源是document 滚动到某个位置,就是判断页面被卷去的上部值。 页面被卷去的头部:可以通过window.pa 阅读全文
posted @ 2022-04-15 09:34 会前端的洋 阅读(55) 评论(0) 推荐(0) 编辑
摘要:定义 : client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 阅读全文
posted @ 2022-04-14 14:28 会前端的洋 阅读(94) 评论(0) 推荐(0) 编辑
摘要:offset 概述 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset 系列常用属性 offset 和 style 的区别 offse 阅读全文
posted @ 2022-04-13 17:03 会前端的洋 阅读(90) 评论(0) 推荐(0) 编辑
摘要:1. URL 统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。 互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL的一般语法格式为 : url 地址名称 location 对象的属性 常用属性 重要 阅读全文
posted @ 2022-04-13 14:50 会前端的洋 阅读(45) 评论(0) 推荐(0) 编辑
摘要:href 里面写路径 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|Bro 阅读全文
posted @ 2022-04-13 14:27 会前端的洋 阅读(538) 评论(0) 推荐(0) 编辑
摘要:复制代码, 需要更改用户输入时间 . 直接可用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal 阅读全文
posted @ 2022-04-13 11:15 会前端的洋 阅读(51) 评论(0) 推荐(0) 编辑
摘要:window 的延迟加载 js代码 window的原始用法 (缺点 : 只能使用一次) window.onload = function() { var btn = document.querySelector('button'); btn.addEventListener('click', fun 阅读全文
posted @ 2022-04-13 10:54 会前端的洋 阅读(77) 评论(0) 推荐(0) 编辑
摘要:键盘事件 注意 : 1.如果使用addEventListener不需要加on 2. onkeypress和前面2个的区别是,它不识别功能键,比如左右箭头,shift等。 3.三个事件的执行顺序是: keydown -- keypress keyup 键盘事件对象属性 注意 : onkeydown和o 阅读全文
posted @ 2022-04-12 14:07 会前端的洋 阅读(49) 评论(0) 推荐(0) 编辑
摘要:1. 概述 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看 2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键 阅读全文
posted @ 2022-04-12 10:49 会前端的洋 阅读(42) 评论(0) 推荐(0) 编辑
摘要:概述 : 文档对象模型(Document Object Model,简称DOM ),是W3C组织推荐的处理可扩展标记语言 (HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。 1.对于JavaScript,为了能够使JavaS 阅读全文
posted @ 2022-04-11 16:30 会前端的洋 阅读(45) 评论(0) 推荐(0) 编辑
摘要:var li = document.createElement('li') 创建节点 ul.appendChild(li); 添加节点到末尾 ul.insertBefore(li, ul.children[0]); // (要添加的节点, 添加到的位置) 添加节点到开头 代码示例 : <ul> <l 阅读全文
posted @ 2022-04-11 14:00 会前端的洋 阅读(49) 评论(0) 推荐(0) 编辑
摘要:概述 : 节点操作就是一种 父子兄 的关系 注 : 重点掌握父节点操作 和 子节点操作 (开发常用) 父节点操作: 方法 : element.parentNode 得到的是离元素最近的父级节点 , 如果找不到父节点就返回为 null <!-- 节点的优点 --> <div>我是div</div> < 阅读全文
posted @ 2022-04-11 11:37 会前端的洋 阅读(85) 评论(0) 推荐(0) 编辑
摘要:代码示例 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt 阅读全文
posted @ 2022-04-11 09:46 会前端的洋 阅读(89) 评论(0) 推荐(0) 编辑
摘要:注 : 本文章主要写功能 代码示例 : <body> <input type="checkbox" id="che" /><br> <input type="checkbox" id="" /> <input type="checkbox" id="" /> <input type="checkbo 阅读全文
posted @ 2022-04-11 09:03 会前端的洋 阅读(106) 评论(0) 推荐(0) 编辑
摘要:代码示例 : <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所有按钮元素 var btns = doc 阅读全文
posted @ 2022-04-10 09:59 会前端的洋 阅读(82) 评论(0) 推荐(0) 编辑
摘要:1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi 阅读全文
posted @ 2022-04-09 17:28 会前端的洋 阅读(2155) 评论(0) 推荐(0) 编辑
摘要:改变页面标签里的内容 (方法) innerText innerHTML (常用) 代码示例 <div></div> <p> 我是文字 <span>123</span> </p> <script> // innerText 和 innerHTML的区别 // 1. innerText 不识别html标 阅读全文
posted @ 2022-04-09 16:18 会前端的洋 阅读(550) 评论(0) 推荐(0) 编辑
摘要:document.getElementById('id名') // 获取页面设置指定 id 的元素 document.getElementsByTagName('标签名') // 获取页面上所有的指定标签 document.getElementsByClassName('class名') // 获取 阅读全文
posted @ 2022-04-09 14:25 会前端的洋 阅读(130) 评论(0) 推荐(0) 编辑
摘要:APL APl ( Application ProgrammingInterface,应用程序编程接口) 是一些预先定义的函数,目的是提供应用程序 与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 简单理解 : APL 是给程序员提供的一种工具,以便能更 阅读全文
posted @ 2022-04-09 13:20 会前端的洋 阅读(726) 评论(0) 推荐(0) 编辑
摘要:简单数据类型 简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。 值类型∶简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string , number , boolean , undefined , null 都是简单数据类型 比较特殊的就是 null 简单数 阅读全文
posted @ 2022-04-09 13:10 会前端的洋 阅读(499) 评论(0) 推荐(0) 编辑
摘要:1. js 查找数组中某个字符出现的次数 代码示例 let arr = ['asd', 'green', 'yeadt', 'red', 'wati', 'red', 'red'] let index = arr.indexOf('red') let num = 0 while (index !== 阅读全文
posted @ 2022-04-08 13:56 会前端的洋 阅读(3646) 评论(0) 推荐(0) 编辑
摘要:为了方便操作基本数据类型 JavaScript 还提供了三个特殊的引用类型 : String , Number 和 Boolean. 基本包装类型 : 就是把简单的数据类型包装城负责的数据类型 这样基本数据类型就有了属性和方法。 // 下面代码有什么问题 var str = 'andy'; cons 阅读全文
posted @ 2022-04-08 11:32 会前端的洋 阅读(32) 评论(0) 推荐(0) 编辑
摘要:代码示例 : function num(arr) { newArr = []; // 空数组用于存放最终结果 for (var i = 0; i < arr.length; i++) { // 获取原数组中的下标 if (newArr.indexOf(arr[i]) -1) { // 判断如果新数组 阅读全文
posted @ 2022-04-07 17:08 会前端的洋 阅读(30) 评论(0) 推荐(0) 编辑
摘要:Date 的常用方法 var date = new Date(); date.getYear() // 获取当前年份(2位) date.getFullYear(); // 获取完整的年份 (4位, 1970-???) date.getMonth() + 1; // 获取当前月份(0-11, 0代表1 阅读全文
posted @ 2022-04-07 10:08 会前端的洋 阅读(42) 评论(0) 推荐(0) 编辑
摘要:属性: Math.Pi 方法: Math.max() 最大值 Math.min() 最小值 Math.ceil() 向上取整 Math.floor() 向下取整 Math.random() 取随机数 Math.abs() 绝对值 Math.pow() 幂 Math.sqrt() 平方 重点 随机数的 阅读全文
posted @ 2022-04-07 09:15 会前端的洋 阅读(46) 评论(0) 推荐(0) 编辑
摘要:1. 语法格式 for (变量 in 对象) { console.log(变量) } 2. 代码实例 // 遍历对象 var obj = { name: 'pink老师', age: 18, sex: '男', fn: function() {} } for (var k in obj) { con 阅读全文
posted @ 2022-04-06 15:48 会前端的洋 阅读(171) 评论(0) 推荐(0) 编辑
摘要:我们为什么需要构造函数 答 : 因为一般的创建对象的方式一次只能创建一个对象, 里面很多的属性和方法是大量相同的 我们只能复制 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数 构造函数︰是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符 阅读全文
posted @ 2022-04-06 15:16 会前端的洋 阅读(552) 评论(0) 推荐(0) 编辑
摘要:1. continue continue 是for循环里的关键字 他的作用是退出本次循环 代码示例 // continue 关键字 退出本次(当前次的循环) 继续执行剩余次数循环 for (var i = 1; i <= 5; i++) { if (i == 3) { continue; // 只要 阅读全文
posted @ 2022-04-05 09:34 会前端的洋 阅读(53) 评论(0) 推荐(0) 编辑
摘要:1. while 的语法结构 while (条件表达式) { 循环体} 1.1 执行思路 当条件表达式结果为 true 则执行循环体 否则 退出循环 1.2 代码验证 var num = 1;while (num <= 100) { console.log('qwe'); num++; } 输出 1 阅读全文
posted @ 2022-04-04 17:19 会前端的洋 阅读(158) 评论(0) 推荐(0) 编辑
摘要:1. 定义 在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句 2. 执行流程 // for 循环的执行过程 for (var i = 1; i <= 100; i++) { console.log('你好吗') 阅读全文
posted @ 2022-04-04 12:57 会前端的洋 阅读(293) 评论(0) 推荐(0) 编辑
摘要:1. 一般情况下,它们两个语句可以相互替换 2. switch..case语句通常处理case为比较确定值的情况,而if...else...语句更加灵活,常用于范围判断(大于、等于某个范围) 3. switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if..else语句有几种条件,就 阅读全文
posted @ 2022-04-04 09:41 会前端的洋 阅读(391) 评论(0) 推荐(0) 编辑
摘要:1. js 代码 // 1. switch 语句也是多分支语句 也可以实现多选1 // 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思 // switch (表达式) { // case value1: // 执行语句1; // break; // case value2: 阅读全文
posted @ 2022-04-04 09:31 会前端的洋 阅读(1310) 评论(0) 推荐(0) 编辑
摘要:1. js 代码 // 1. 有三元运算符组成的式子我们称为三元表达式 // 2. ++num 3 + 5 ? : // 3. 语法结构 // 条件表达式 ? 表达式1 : 表达式2 // 4. 执行思路 // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式 阅读全文
posted @ 2022-04-04 09:16 会前端的洋 阅读(200) 评论(0) 推荐(0) 编辑
摘要:1. 概念 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行 流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。 阅读全文
posted @ 2022-04-04 09:01 会前端的洋 阅读(68) 评论(0) 推荐(0) 编辑
摘要:1. 优先级 2. js 代码 // ++num !num 2 + 3 console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) var num = 10; console.log(5 == num / 2 && (2 + 2 * 阅读全文
posted @ 2022-04-03 11:36 会前端的洋 阅读(54) 评论(0) 推荐(0) 编辑
摘要:1. 概念 概念∶逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断 逻辑 && 与 逻辑 || 或 逻辑 ! 非 就是取反 2. js 代码 // 1. 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false 阅读全文
posted @ 2022-04-03 11:06 会前端的洋 阅读(332) 评论(0) 推荐(0) 编辑
摘要:1. 概念 概念︰比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值( true / false )作为比较运算的结果。 2. js 代码 console.log(3 >= 5); // false console.log(2 <= 4); // true // 阅读全文
posted @ 2022-04-03 10:55 会前端的洋 阅读(208) 评论(0) 推荐(0) 编辑
摘要:1. 递增递减运算符的概述 如果需要反复给数字变量添加或减去1,可以使用递增( ++)和递减( -- )运算符来完成。 在JavaScript中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增 阅读全文
posted @ 2022-04-03 10:24 会前端的洋 阅读(287) 评论(0) 推荐(0) 编辑
摘要:1. 简介 概念: 算术运算符使用的符号, 用执行两个变量或值的算术运算符. 2. js 代码 console.log(1 + 1); // 2 console.log(1 - 1); // 0 console.log(1 * 1); // 1 console.log(1 / 1); // 1 // 阅读全文
posted @ 2022-04-02 13:10 会前端的洋 阅读(52) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示