Web前端学习 第6章 jQuery Ajax 1 HTTP协议

示例代码如下所示： 1 //数据 2 let dataList = ["香蕉","苹果","鸭梨"]; 3 4 //get查看 5 router.get("/fruits", ctx => { 6

Web前端学习 第6章 jQuery Ajax 2 Ajax入门

这个概念出现的比较早，那个时候前端和后台的数据交互主要以XML格式为主，例如下面的数据格式： 1 <fruit> 2 <name>apple</name> 3 <weight>0.5kg</ ： 1 { 2 "fruit":{ 3 "name":"apple", 4 "weight":"0.5kg", 5 "color":"red" 6 router.get("/", async ctx => { 3 await ctx.render("index") 4 }) 5 router.get("/data", async ctx => { 6 ctx.body = "hello world" 7 }) 8 9 //前端程序 10 var xhr = new XMLHttpRequest(); //创建XHR对象 11 xhr.open let xhr = new XMLHttpRequest(); 4 xhr.open(method, url); 5 xhr.send(); //可以向后台传输数据 6

Web前端学习 第2章 网页重构6 盒子模型

，实例代码如下所示： 1 .box1{ 2 width:300px; 3 height:300px; 4 background-color: #f00; 5 } 6 1 .box1{ 2 width:300px; 3 height:300px; 4 background-color: #f00; 5 } 6 .box2{ 7 */ 6 margin:0 auto; 7 } 左右外边距的值设置为auto，元素就会根据其父级容器的实际宽度，将元素左右两边的外边距设置为相同的值，这样元素就实现了水平居中的效果。 { 2 width:300px; 3 height:300px; 4 background-color: #f00; 5 padding-top:50px; 6 这里顺便说一下，border属性简写的三个值是没有顺序要求的，我们可以写成 1 .box{ 2 border:blue 1px solid; 3 } 4 /* 或者 */ 5 .box{ 6

Web前端学习 第6章 jQuery Ajax 4 跨域请求

3000端口服务器的前端页面引入8080端口服务器的js文件。 然后使用3000端口服务器的数据。 require('koa-jsonp') 3 app.use(jsonp()) 4 router.get("/data", ctx => { 5 ctx.body = "hello jsonp" 6

web前端入门

= 后端 ** 为了能看懂前端的程序 从而能数据交互 数据一定后端 底线： 能看懂前端代码 一、web前端技术 面试题：你写网页能不能遵循web标准？ 你知不知道web前端技术都有什么？ Web前端技术是由w3c组织制定的一系列技术的集合，主要包括： HTML – 结构标准： 负责网页内容（布局） CSS – 表现标准、样式标准：美化 JavaScript，简称js，行为标准：负责行为动作 -- 标题共6个级别 名字h1 h2 h4 h6 --> <! </h6>

段落

Web前端事件

Web前端概述

HTML5新特性 引入原生多媒体支持（audio和video标签） 引入可编程内容（canvas标签） 引入语义Web（article、aside、details、figure、footer、header

web前端基础

用来定义一个块级标签又称为行外标签，块级标签独占一行 span标签：用来定义一个内联标签又称行内标签，行内标签不独占一行 块级标签和内联标签分类： 块级标签 内联标签 p、h1~h6、

web前端基础

接下来给大家看一下最基础的网页（注意：我们要创建一个文本文档，把后缀改成html）

【前端】Web前端学习笔记【1】

================================================================================ 6. number对象调用toString ); 3 // 而是分别在p1.then()和p1.catch()中传了进来： 4 // 　　 p1.then(f1(r)); 5 // 　　 p1.catch(f2(reason)); 6 1 $.fn.highlight2 = function (options) { 2 3 // 要考虑到各种情况: 4 5 // options为undefined 6 { 2 3 // 合并默认值和用户设定值: 4 5 var opts = $.extend({}, $.fn.highlight.defaults, options); 6 1 // 把默认值和用户传入的options合并到对象{}中并返回: 2 3 var opts = $.extend({}, { 4 5 backgroundColor: '#00a8e6'

【Web前端】Web API：构建Web应用核心

Web 开发中，API 通常用于实现前端与后端之间的通信。 客户端 JavaScript 中的 API 客户端 JavaScript 提供了众多可用的 API。 通常，这些 API 可以分为两种类型： 第一类是浏览器 API，它们嵌入于 Web 浏览器中，能够从浏览器及其周边环境获取数据，并用于执行各种复杂而有益的操作。 例如，Web 音频 API 为在浏览器中处理音频提供了一整套 JavaScript 接口，允许用户进行音轨提取、音量调整和特效应用等操作。 在现代 Web 开发中，JavaScript 通常与其他工具如框架（如 React、Angular）、库（如 jQuery）一起使用，这些工具也使用 API 来实现功能。 Web Storage API：允许在用户的浏览器中存储数据。 Canvas API：用于在网页上绘制图形。 Geolocation API：获取用户的地理位置信息。

【前端】Web前端学习笔记【2】

相关博客： Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中，this 绑定全局对象，浏览器环境全局对象为 window ---- 6. 常见的浏览器端的存储技术 ---- 有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。 目前常用的有以下几种方法： cookie cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K localStorage localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。 缺点：低版本浏览器不支持。 结论： 可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。 ---- 7.

Web前端学习 第5章 node基础教程6 Koa基础

一、Koa框架概述 Koa是一个基于Node的web服务器开发框架，通过Koa我们可以更便捷第开发web服务器。不必像上一节那样刀耕火种地从零开始写。 本节我们来讲解如何使用Koa创建一个web服务器。在学习之前，我们先来了解一些基础知识。 二、安装Koa 在安装Koa之前，先初始化一个项目。 5 app.use(async ctx => { 6 ctx.body = "hello world" 7 }) 8 9 app.listen(3000,() => { 10 3 const Koa = require("koa"); 4 const router = require("koa-router")(); 5 const app = new Koa(); 6 web应用的服务器，只有静态文件目录的文件才可以被html页面直接访问。 也就是说，我们需要先创建一个静态文件目录，然后在里面放置图片（或js，或css），才能被html页面访问。

Web前端学习 第3章 JavaScript基础教程6 函数基础

var num1 = 10; 3 var num2 = 20; 4 var result = num1 + num2; 5 console.log(result); 6 return，当函数被调用的时候就可以把调用的结果赋值给另一个变量了 示例代码如下： 1 function fun1(){ 2 3 } 4 5 function fun2(){ 6 (condition){ //条件 3 helloworld=function(){ //赋值 4 console.log("hello world"); 5 } 6 carName = " Volvo"; 2 3 // 此处可调用 carName 变量 4 function myFunction() { 5 // 函数内可调用 carName 变量 6 / 此处可调用 carName 变量 2 3 function myFunction() { 4 carName = "Volvo"; 5 // 此处可调用 carName 变量 6

前端利器，6 款开源 Web 性能优化辅助工具推荐

Web 性能优化是一个老生常谈的话题，也是前端页面开发十分重要的部分。当页面加载速度越慢，用户流失的概率就越大，性能和交互直接影响用户体验。 下面推荐几款 Web 性能优化辅助工具推荐，希望能对大家有所帮助。 Lighthouse Lighthouse 是 Google 开源的一个自动化工具，用于改进网络应用的质量。 传送门：https://github.com/speedracer/speedracer Yellow Lab Tools Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。 传送门：https://yellowlab.tools/ Web Tracing Framework Web Tracing Framework 也是 Google 推出的一组用于跟踪和调查复杂 Web 它可以帮助发现性能问题，跟踪回归，并构建流畅的 60fps Web 应用。能让你花更少时间来测试代码即可。

Web前端知识系列（包括web前端全部知识点）

Web前端课程 【课程概述】： 知识 体系: 1)HTML 2)CSS 3)JavaScript 4)Web前端框架 lJquery lbootstrap 5)5)Ajax 1.HTML 1.1 第6行 最新商品 嵌套一个2行7列的表格 7.第7行 放一个图片 8.第8行 两个段落 代码: <! 前端课程2.docx] 4.Web前端框架 4.1. jQuery框架 4.1.1.jQuery概述 4.1.1.1.jQuery框架概述 jQuery是一款优秀的javaScript库.jQuery