03 2021 档案
摘要：一 请求参数 客户端向服务器端发送请求时，有时需要携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登录操作。 二 get请求参数 //1 参数被放置于浏览器地址栏中 例如：http://localhost:3000/?name=zhangsan&age=66 [ get参数 ]
阅读全文
摘要：1）协议的概念 // 超文本传输协议 // 它规定了：如何从网站服务器传输超文本到本地浏览器 // 它基于客户端服务器架构工作 是客户端和服务端 请求和应答的标准 2）报文 //1 在HTTP请求和响应过程中 传递的数据块 就叫报文 //2 包括：要传递的数据 和 一些附加信息 //3 并且要遵守规
阅读全文
摘要：代码 // 引用系统模块 const http = require('http'); // 创建web服务器 const app = http.createServer(); // 当客户端发送请求的时候 app.on('request', (req, res) => { // 响应 res.end
阅读全文
摘要：1）网站的组成 //1 客户端 在浏览器运行的部分，就是用户看到并与之交换的界面程序 [ HTML css js ] //2 服务端 在服务器中运行的部分 负责存储数据和处理应用逻辑 2）Node网站服务器 //1 能提供网站访问的机器称之为服务器 //2 它能够接受客户端的请求 能够对请求做出响应
阅读全文
摘要：a later version of node.js is already installed setup will now exit
阅读全文
摘要：二 浏览器访问服务器过程 get请求没有请求体 post请求有请求体 C/S 客户端服务架构 //1 优点：连接稳定 使用流畅 功能可以更强大//2 缺点：每个人都需要下载 升级维护没有B/S方便 B/S 浏览器端服务架构 //1 优点：部署维护非常方便 客户容易使用，有浏览器的地方就可以使用 如百
阅读全文
摘要：1）浏览器的组成 //1 人机交互部分 [ UI ] //2 网络请求部分 [ Socket ] //3 JavaScript引擎部分 [ 解析执行JavaScript ] //4 渲染引擎部分 [ 渲染HTML、CSS等 ] //5 数据存储部分 [ cookie HTML5中的本地存储 Loca
阅读全文
摘要：代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要：1 不注重基础 什么火学什么 2）老是纠结什么技术好 不存在最好的技术 适合的场景不同PHP 适合web开发java适合安卓 大数据c c++ 适合做底层开发 游戏引擎 系统软件汇编语言 适合做驱动开发Python适合做人工智能go语言是区块链的主力语言 也适合做web后台 3）喜欢看 不喜欢动手
阅读全文
摘要：1）常用网站插件 1. jQuery 插件库 http://www.jq22.com/ 2. jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤： 1. 引入相关文件。（jQuery 文件 和 插件文件） 2. 复制相关html、css、js (调用插件)
阅读全文
摘要：代码范例 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多库共存</title> <script src="jquery.min.js"></script> </head> <body> <div></di
阅读全文
摘要：基础语法 $.extend([deep],target,object1,[objectN]); //1. deep：true是深拷贝 默认false 浅拷贝 //2. target 要拷贝的目标对象 //3. object1 待拷贝的 第一个对象 //4. objectN 待拷贝的 第N个对象 一
阅读全文
摘要：一 显示隐藏 show() //1 显示 hide() //2 隐藏 toggle() //3 切换 这三个方法都有以下三个可选参数 //show/hide/toggle([speed][easing][fn]); //1 speed: slow”,“normal”, “fast”)或表示动画时长的
阅读全文
摘要：$('input').on('focus',function (event) { console.log(event); }); 基本和 webAPI 里面的 事件对象一致 $('input').on('focus',function (event) { console.log(event); })
阅读全文
摘要：一 获取元素尺寸 1）基本语法 $('div').width();//1 得到：元素内容宽度 $('div').innerWidth();//2 得到：元素内容宽度 + padding$('div').outerWidth();//3 得到：元素内容宽度 + padding + border $('
阅读全文
摘要：1）概念 //1 对一类元素做 同样的操作 用到了 隐式迭代 //2 对一类元素做 不同的操作 用到了 遍历： 2）基本语法 $('div').each(function(index,domEle){}); //方法1 主要用于遍历元素 $.each($('div'),function(index,
阅读全文
摘要：一 创建元素 $(''<li></li>''); //动态的创建了一个 li 元素 二 添加元素 // 内部添加元素，生成之后，它们是父子关系。 // 外部添加元素，生成之后，他们是兄弟关系 1）内部添加 element.append(''内容''); //把内容放入匹配元素内部最后面，类似原生 a
阅读全文
摘要：1）html() html(); //1 获取值 html("内容"); //2 设置值相当于原生的 innerHTML 2）text() text(); //1 获取值 text("内容"); //2 设置值 相当于原生的 innerText 3）表达值：value() val(); //1 获取
阅读全文
摘要：1）思路 //1 小的复选框按钮状态是跟着 全选复选框的状态的 //2 小的 一 全选按钮 代码 //1 全选按钮影响子按钮 $(".checkall").change(function () { //把全选按钮的checked值赋值给三个小的复选框 $(".j-checkbox,.checkall
阅读全文
摘要：一 元素固有属性 prop() prop(''属性''); //1 获取 prop(''属性'', ''属性值''); //2 设置property [ˈprɑːpərti] 所有物;财产prop 是 property的缩写 二 元素自定义属性 attr() attr(''属性''); = 原生 g
阅读全文
摘要：1）基础原理 //1 鼠标经过某个li有两步操作 //2 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入 //3 其余兄弟小li宽度变69px 小图片淡出 大图片淡入 2）代码实现 <!doctype html> <html> <head> <meta charset="utf-8"
阅读全文
摘要：代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-sty
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：一 操作CSS 1）设置单个css样式 // $('div').css('color','red'); 2）设置多个css样式 $('div').css({ 'width':'300px', 'height':'300px', backgroundColor :'red'//属性名可以不加引号 })
阅读全文
摘要：DOM遍历 [ 站在 父 子 兄 的角度 ] //1 找父亲 parent() // 查找父级 亲爸爸 //2 找儿子 children(selector); = $('ul>li'); // 子代选择器 find(selector); = $('ul li'); // 后代选择器 //3 找兄弟
阅读全文
摘要：一 jQuery选择器 ( 使用方法和CSS一致 ) 基本语法 $('选择器'); //里面直接写css选择器就可以 别忘记加引号 1）基础选择器 $('#id'); // ID选择器 $('.class'); // 类选择器 $('div'); // 标签选择器 $('*'); // 全选选择器
阅读全文
摘要：1）需求 //1 如果本地有用户名 就让它显示在文本框中 复选框处于勾选状态//2 如果客户点击了 不记住用户名 我们就删除掉 2）代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
阅读全文
摘要：一 基础概念 1）本地存储特性 //1 数据存储在用户浏览器中//2 设置 读取方便 甚至页面刷新不丢失数据//3 只能存储字符串 2）分类 //1 window.sessionStorage 会话存储 //2 window.localStorage 本地存储 3）两者的区别 //1 生命周期不同
阅读全文
摘要：1）下载地址 https://github.com/ireaderlab/zyMedia 二 基本使用 1）引入样式文件zy.media.css和js文件zy.media.js 2）输入html结构，例如视频，其中video标签的data-config属性用于设置参数， <div class="zy
阅读全文
摘要：官方地址：https://www.swiper.com.cn/ 使用教程 1）首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 <!DOCTYPE h
阅读全文
摘要：1）下载插件 https://github.com/ftlabs/fastclick 2）使用范例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：1）手机端click为什么会有延时300毫秒 //1 因为在手机端上 连个手机一捏就可以放大页面 连续点击2下复原到原来的大小//2 click的延时就是再等你是否是双击 2）解决方法 //1 禁止页面缩放 <meta name="viewport" content="user-scalable=n
阅读全文
摘要：// 返回顶部模块制作 var goBack = document.querySelector('.goBack'); var nav = document.querySelector('nav'); window.addEventListener('scroll', function() { if
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
阅读全文
摘要：1）知识梳理 classList 是H5新增的一个属性作用：获取 添加 删除 切换CSS类添加 删除 切换 等的使用 需要先获取到 2）返回值 返回一个数组DOMTokenList(3) ["one", "two", "three", value: "one two three"] 0: "one"
阅读全文
摘要：1）概况 //和PC端基本一样//1 可以自动播放图片 //2 手指可以拖动播放 一 图片自动播放 1）自动播放 //1 开启定时器 //2 用translate移动//3 让图片优雅的移动 添加transition过渡 2）无缝滚动 3）让小圆点跟着一起变化 二 classList属性 1）概念
阅读全文
摘要：移动端介绍 //1 不用考虑兼容性问题 可以放心的使用原生JS //2 能用CSS3的就用c3//3 会有独特的地方 如触屏事件 一 触屏事件 1）常见事件 //1 touchstart 手指触摸事件 //2 touchmove 手指滑动事件 //3 touchend 手指移出事件 2）代码范例 <
阅读全文
摘要：1）需求 //1 鼠标经过某个li 小云彩跟到当前小li//2 鼠标离开小li 筋斗云复原到开始的位置//3 鼠标点击了某个小li 筋斗云就留在点击这个小li上 2）实现原理 //1 利用动画函数做动画效果//2 一开始 筋斗云的起始位置是0//3 鼠标经过某个小li 就把小li的 offsetLe
阅读全文
摘要：滚动窗口到文档中的特定位置 // window.scroll(x,y); x y 不跟单位 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
阅读全文
摘要：if (callback) { callback();}等同于callback && callback();animate.js //1 动画函数 第三个参数是接收回调函数的形参 function animate(object,target,callback) { clearInterval(obj
阅读全文
摘要：1）节流阀的目的 //1 避免我们连续点击按钮 图片播放过快的问题//2 当上一个函数动画内容执行完毕，再去执行下一个动画，让事件无法连续触发 2）核心思路 //1 利用回调函数 添加一个变量 锁住函数和解锁函数//2 开始这是一个变量 var flag = true;//3 if(flag){fl
阅读全文
摘要：功能分解 //1 鼠标经过轮播图模块 左右按钮显示 鼠标离开隐藏按钮 //2 点击右侧按钮 图片往左播放一张 以此类推 左侧按钮同理//3 图片播放的同时 下面小圆点跟随一起变化 //4 点击小圆点 可以播放相应图片//5 不做任何操作 图片也会定时轮播//3 鼠标经过 轮播图模块自动停止播放 1）
阅读全文
摘要：一 缓动动画添加回调函数 1）注意实现 回调函数调用的位置：定时器结束的位置。 2）代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：四 缓动动画原理 1）概念 //1 匀速动画：盒子的当前位置 + 固定值 //2 缓动动画：盒子的当前位置 + 变化的值 [(目标值 - 当前位置) / 10 ] 1）基本公式 // ( 目标值 - 现在的位置 ) / 10 2）原理图 代码实现 <!DOCTYPE html> <html lang
阅读全文
浙公网安备 33010602011771号