JavaScript
关注
分享
扫一扫
辰辰北
这个作者很懒，什么都没留下…
展开
-
页面渲染的两种方式
1 前后端分离+后端提供数据，前端使用ajax请求数据，再进行页面的组装和渲染2 服务端渲染+前端只负责浏览器打开页面，发送请求+服务端接收到请求后，在服务端准备好页面；+前端只需要提供一个浏览器，负责显示就好关于服务端渲染页面// +需要使用一个第三方模块 art-template(模板引擎)// +下载，命令行指令：npm install art-template// +导入： let template = require(‘art-template’)// 数据渲染的方法：//原创 2022-01-23 10:46:40 · 2262 阅读 · 0 评论 -
npm基本使用
包管理工具npm（Node Package Manager）包管理工具npm基本使用1 初始化+准备一个初始化配置文件，这个文件是项目的描述信息+打开命令行，切换目录到项目的根目录+输入指令 npm init 回车。输入配置信息-package name:项目名称，默认使用该文件夹名称-version 版本号 默认1.0.0-description: 项目描述-entry point: (index.js) 入口js文件（启动js文件） 默认是index.js-test command:原创 2022-01-23 09:51:01 · 2387 阅读 · 0 评论 -
nodejs完成从163邮箱发送邮件到qq邮箱
/* 发送邮件 第三方模块nodemailer专门用于发送邮件 1 下载 命令行下载：npm install nodemailer 2 在需要使用的文件中导入下载的第三方模块 + let nodemailer = require('nodemailer'); 3 按照规则使用 +三方包学习网站 npmjs.com +使用导入的nodemailer来创建一个发送器 +语法：nodemailer.createTransport({原创 2022-01-22 21:30:29 · 585 阅读 · 0 评论 -
nodejs基础
nodejs介绍:为什么浏览器可以运行js代码,因为浏览器有js解析引擎 !将浏览器引擎单独拿出来,做成一个软件,叫node,目的是使用js写后端什么是node一款基于chrome v8 解析引擎运行js代码时的环境node作用-当js代码引入到html中,在浏览器中运行的时候,叫做前端js,用来操作DOM和BOW,完成网页特效-当js代码通过node软件运行的时候,没有DOM和BOM的操作,而是读取电脑硬盘 读写文件 操作数据库等;-可以当作电脑系统和数据库的时候,就可以当作服务器来使用原创 2022-01-22 17:06:40 · 922 阅读 · 1 评论 -
node创建一个就简单的服务器
写一个简单的服务器；支持html css 和 js文件目录结构1 index.js中导入模块// 1 导入模块let http = require('http')let fs = require('fs')let path = require('path')let url = require('url')2 index.js中创建服务// 2 再次创建服务器 let server = http.createServer((req,res) => { let urlStr原创 2022-01-22 17:05:58 · 706 阅读 · 0 评论 -
jQuery的常见选择器和筛选器
关于jQuery是前端方法库特点：1 优质的选择器和筛选方法2 好用的饮食迭代3 强大的链式编程jQuery向外暴露两个变量：jQuery和$ (jQuery === $)选择器// jQuery选择器 $(选择器) 返回元素集合 // id选择器 console.log($('#li3')); // jQuery.fn.init(1) // 类选择器 console.log($('.c1')); // 标签选择器 console.log($('li')); /原创 2022-01-20 17:54:42 · 1734 阅读 · 0 评论 -
JS解决鼠标一直触发某个动画，导致动画效果一直展示
在动画中，常常有这样的问题，比如某个元素有鼠标悬停的动画，如果鼠标在短时间内不断移入移出，动画效果会来不及反应，短时间积累多次触发效果，导致，鼠标移除后，触发效果依然在继续。为了解决这个问题：可使用jQuery中的动画停止函数stop(),在鼠标移入移出函数中，添加$(元素).stop()例如：...原创 2022-01-19 22:21:38 · 729 阅读 · 0 评论 -
JS中jq实现手风琴图片展示
4张图片在一个盒子中展示，鼠标移入哪一张图片，该图片便展开显示，其他图片折叠；鼠标移出后四张图片平分黑子宽度// 手风琴// ul宽度640,鼠标移出的效果是每张图片width=160// 鼠标移入li,该liwidth=520,其他liwidth=(640-520)/3=40$('ul>li').hover(function(){ // 鼠标移入 // $(this).css('width',520).siblings().css('width',40) // 向将其他liw原创 2022-01-19 22:15:47 · 823 阅读 · 0 评论 -
JS中使用jq方法实现二级菜单的切换和隐藏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 20:51:54 · 1640 阅读 · 0 评论 -
JS中使用jq方法，完成图片放大和移动的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 15:45:57 · 491 阅读 · 0 评论 -
JS中使用jQuery实现高亮展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 09:58:09 · 293 阅读 · 0 评论 -
点击小图标，展示大图标和对应title
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 09:35:26 · 120 阅读 · 0 评论 -
JS中阻止事件冒泡或阻止链接跳转的操作
可通过return false阻止事件冒泡或阻止链接跳转的操作//在处理函数中使用return false;原创 2022-01-18 14:55:05 · 259 阅读 · 0 评论 -
JS中闭包
闭包函数条件：// 1 在函数A内部返回函数B// 2 在函数B中访问函数A的私有作用域变量intNum// 3 在函数A外部,有变量引用函数B（调用函数A，执行结果就是函数B，引用f1，实际上就是引用函数B）function A(){ var intNum = 100; return function B(){ var num = intNum; return num } } let f1 = A(); // 发原创 2022-01-17 21:01:53 · 282 阅读 · 0 评论 -
关于函数的定义、调用和执行
认识函数（定义-执行-销毁（执行空间））1-先定义2-再调用在JS函数中，数值是先赋值，再进预解析function fn(a){ console.log(a); function a(){} } fn(100);//ƒ a(){} 说明在函数中，先赋值，再进行预解析一个不销毁的执行空间在函数执行空间中，函数代码执行结束，则执行空间销毁，函数内的变量也会销毁；若想要保存函数内的变量，怎么办？答：在函数内返回一个引用数据类型(数组、对象、函数)，并且原创 2022-01-17 18:16:33 · 879 阅读 · 0 评论 -
JS中点击下面button的按钮，实际获取上面input的值，获取兄弟元素
//转为number类型后，增加1let number = target.previousElementSibling.value - 0 + 1;原创 2022-01-17 10:08:50 · 1223 阅读 · 1 评论 -
JS通过元素.dataset.xxx方式获取属性
原创 2022-01-15 00:59:51 · 461 阅读 · 0 评论 -
JS中一个ul中li点击事件，改变另一个ul中的li
原创 2022-01-15 00:50:28 · 423 阅读 · 0 评论 -
关于获取li标签的数据类型datatype
原创 2022-01-14 22:02:31 · 315 阅读 · 0 评论 -
JS中点击分类后，重新请求列表数据
// 切换分类事件category.addEventListener('click',e => { e = e || window.event; let target = e.target; // li标签及其内容 // 判断点击的对象是li if(target.nodeName === 'LI'){ // 切换类名 // ...category.children 是所有li的伪数组 // 可通过展开运算符...，放到中括号中，作为数组 // cons原创 2022-01-14 21:25:31 · 257 阅读 · 0 评论 -
JS中点击ul中的li，切换样式
// category ul的类名// 所有li的点击事件，可都委托给ulcategory.addEventListener('click',e => { e = e || window.event; let target = e.target; // li标签及其内容 // 判断点击的对象是li if(target.nodeName === 'LI'){ // 切换类名 // ...category.children 是所有li的伪数组 // 可通过展开运原创 2022-01-14 21:16:22 · 1688 阅读 · 0 评论 -
JS渲染商品列表
原创 2022-01-14 20:31:23 · 450 阅读 · 0 评论 -
JS渲染数据到ul中
原创 2022-01-14 15:25:51 · 418 阅读 · 0 评论 -
JS中p标签多余内容用省略号显示
.list>li>.info>.title{ font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}原创 2022-01-13 17:06:55 · 417 阅读 · 0 评论 -
JS退出登录
给退出登录按钮logoutBtn添加点击监听事件1、在点击事件中，确认退出// 弹窗确认退出 if(!window.confirm('确认退出吗')) return2、确认退出后，删除用户本地id和token// 删除本地token localStorage.removeItem('token') localStorage.removeItem('id')3、向后台发送退出登录的请求// 发送退出登录请求 await pAjax({ url:'http://local原创 2022-01-09 08:13:02 · 2804 阅读 · 0 评论 -
回调函数和Promise
一、回调函数回调函数:一般用在异步代码执行结束后还需要执行其他操作的情况函数b用参数的形式调用函数afunction a(){ console.log('a'); } function b(f){ setTimeout(()=>{ console.log('b'); f() },2000) } b(a) // b a缺点：代码维护难,形成回调地狱解决办法：在es6中,有一个P原创 2022-01-07 09:01:13 · 1601 阅读 · 1 评论 -
封装ajax
ajax.js/*封装ajax的逻辑 1 对参数的验证 必填参数的验证 选填参数的格式验证 2 设置参数的默认值 3 发送ajax请求信息*/function ajax(options={}){ // 1 对参数进行验证 // 1.1 url必填 if(!options.url){ throw Error('url必须填写') // 无需写return,报错会中断程序执行 } // 1.2 method 可以不填原创 2022-01-06 15:20:11 · 214 阅读 · 0 评论 -
JS中通过回电函数call判断数据类型
1 判断options.data是对象类型Object.prototype.toString.call(options.data) === ‘[Object Object]’)2 判断options.data是数组类型Object.prototype.toString.call(options.data) === ‘[Object Array]’)原创 2022-01-06 10:34:38 · 483 阅读 · 0 评论 -
ajax携带参数的get和post请求
发送一个携带参数的get请求 let xhr = new XMLHttpRequest() xhr.open('get','http://localhost:8888/test/third?name=kelly&age=25') xhr.send() xhr.onload = function(){ let res = JSON.parse(xhr.responseText) console.log(res); }发送一个携原创 2022-01-05 17:25:14 · 2509 阅读 · 0 评论 -
ajax中将后端的字符串转换为数字或者字符串
JSON.parse(xhr.responseText) <script> window.onload = function(){ /* 接收一个不一样的数据(接送格式) 不同格式的字符串(数字或者字母) */ let xhr = new XMLHttpRequest() xhr.open('get','http://localhost:8888/test/second') xhr.send()原创 2022-01-05 09:33:01 · 730 阅读 · 0 评论 -
ajax中GET和POST区别
ajax中GET和POST区别get和post的区别1 语义化的区别:get偏向于获取,post偏向于提交数据2 携带给后端的信息位置不一样get直接在地址后面拼接查询字符串post在请求体内进行信息的查询3 携带的数据格式不一样get:因为携带的数据是直接拼接在地址后面,只能使用url编码post:因为在请求体内,所以可有多种形式,但是需要提前说明4 携带的数据大小不一样get:因为拼接在地址后面,大小在2kb左右post:因为在请求体内,数据大小不受限制,除非服务器有显示5 安全原创 2022-01-02 21:29:23 · 2582 阅读 · 0 评论 -
ajax请求方式
ajax请求方式 1 GET 向后端获取数据 2 POST 向后端提交数据 3 PUT 向后端提交数据,偏向要插入的数据 4 PATCH 向后端提交数据,偏向要修改的数据 5 HEAD 获取头部响应信息 6 OPTIONS 为了获取服务器的详细信息,到那时需要服务器的允许 7 CONNECT 代理连接,转换管道(翻墙)...原创 2022-01-02 21:28:39 · 277 阅读 · 0 评论 -
ajax的同步和异步
ajax同步请求的化，需要将响应时间写在发送请求之前/* ajax 1 创建ajax对象 同步 2 配置请求信息 同步 3 发送请求 根据参数决定同步\异步,默认是异步 4 绑定接收响应事件 响应时触发 */ let xhr = new XMLHttpRequest() // 第三个参数编程false,是同步请求(需要将绑定响应的事件写在发送之前) xhr.open('get','原创 2022-01-02 21:04:18 · 576 阅读 · 0 评论 -
ajax的使用和注意事项
ajax1-async javascript and xml(异步请求代码)是js和后端的交互手段2-有点:可局部刷新,无需更新整个页面3-面向对象开发4语法:1 创建一个ajax对象,可进行前后端交互let xhr = new XMLHttpRequest()2 配置请求信息xhr.open(请求方式,请求地址,是否异步)默认是异步true3 发送xhr.send()4 配置一个接收返回信息的事件xhr.onload = function() { }执行时机:在本次ajax请求,原创 2022-01-02 19:42:11 · 432 阅读 · 0 评论 -
JS实现放大镜案例
放大镜案例实现效果如下图所示：第一步：结构分析结构分析1-一个大盒子 div.box2-一个放中等图片的盒子 div.middleBox一张中等图片一个遮罩层 div.shade3-一个放小图片的盒子 div.smallBox两张小图片4-一个放大图的盒子div.bigBox结构代码：<div class="box"> <div class="middleBox"> <img src="../img/middle1.jpg" alt原创 2022-01-02 10:27:06 · 606 阅读 · 0 评论 -
JS中ES6的继承方法
<script> window.onload = function(){ // es6中的继承,就是类和类之间的继承,通过extends和super()方法实现继承 // Person类 class Person { sleep(){ console.log('time to sleep'); } constructor(name){ this.name = nam原创 2022-01-01 10:12:31 · 347 阅读 · 0 评论 -
ES6中class类创建对象
区别于es5，es6中使用class类创建对象实例，更加简洁<script> // es5通过Function创建构造函数,通过构造函数创建对象(关键字new) // es6通过class类创建一个类,类里面的方法默认是在原型prototype上,默认的constructor是构造函数 class Stu{ // 在类中可直接书写方法,无需function关键字 // 在class中直接书写的函数,其实就是写在原型中 study(){原创 2021-12-31 23:51:34 · 375 阅读 · 0 评论 -
ES5之继承的三种方法（原型、构造函数继承、组合继承）
1、原型继承原型继承的问题：会出现多个实例属性相同的情况stu1的原型指向已经发生改变 <script> function Stu(sco){ this.sco = sco } function Person(name,sex){ this.name = name this.sex = sex } Person.prototype.sleep = function(){ console.log('今原创 2021-12-31 23:20:13 · 482 阅读 · 0 评论 -
JS中的自动以构造函数
1、自定义构造函数原创 2021-12-31 17:50:39 · 158 阅读 · 0 评论 -
JS中创建对象的三种方式
1、字面量创建 // 面向对象编程和面向过程编程 // 1 字面量创建对象 let stu1 = { name: 'kelly', age:20, like: function(){ console.log('喜欢运动'); } }2、内置构造函数创建// 2 内置构造函数创建 let stu2 = new Object() stu2.name原创 2021-12-31 15:47:23 · 120 阅读 · 0 评论