![](https://img-blog.csdnimg.cn/20200510003943531.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS+JS
前端笔记
寒泉Hq
当你试图解决一个你不理解的问题时,复杂化就产生了
展开
-
服务器安全:浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括浏览器同源策略与跨域请求XSS攻击原理及防御策略如何使用SpringSecurity防御CSRF攻击CC/DDOS攻击与流量攻击什么是SSL TLS HTTPS?一、浏览器的同源策略请求方式:HTTP,HTTPS,Socket等HTTP请求特点:无状态。想要保持状态的话,需要服务器下发token/cookie到浏览器,在服务器端存的是session服务端与客户端要建立会话:浏览器的同源策略同源策略:当访问同一域名下的所有子URI时,不需要重新登录。所谓的同源是指:1.原创 2020-05-10 22:24:35 · 67573 阅读 · 0 评论 -
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小(改js源码)
效果图1、WangEditor本身提供的 “编辑图片” 功能,调整图片大小选项只能为30%,50%,100%。2、修改 wangEditor.js 源码后,用户可以输入自定义大小。例如,50%效果如下:再例如,20%效果如下:修改方式在 wangEditor.js 中进行修改,整体修改内容如下图:主要分为两个部分的修改:输入框、事件方法。1、增加输入框:大约在源码的268...原创 2020-05-03 23:28:15 · 83147 阅读 · 2 评论 -
前端如何实现:在不刷新页面的情况下实时看到自己的评论
需求描述1、类似CSDN论坛 右上角的消息通知 如果有新消息 整个页面不刷新 右上角的消息数字即时+12、类似于论坛评论区 ,发布评论之后,不刷新页面就可以立刻看到自己的评论新浪微博的评论区实现方式观察了一下新浪微博的评论区实现,从下面的图可以看出,因为时间固定显示为10秒前,因此可以推断:点击“评论”之后,评论框的 div 只是在本地 append 的,而不是去刷新整个评论区(除非...原创 2020-04-22 10:49:45 · 73078 阅读 · 0 评论 -
【jQuery】使用jquery.form.js,获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简单、容易,且能完整控制提交过程和处理结果,不需要任何特殊标签辅助,不影响原表单结构,只要使用该库就能使普通表单平滑升级为ajax提交表单。官方地址:https://github.com/jquery...原创 2020-04-15 23:50:49 · 71976 阅读 · 0 评论 -
【jQuery】在表单提交前触发事件(数据校验/执行计算等)
方式1给form加一个id,然后在js中可以这样触发提交事件:$("#FormID").submit(funtion(){ // do something...});方式二直接在 form 标签添加 checkForm,可以根据返回值 True/False 决定是否提交表单<form id="score_form" action="/" method="post" onsub...原创 2020-03-26 18:11:58 · 70592 阅读 · 2 评论 -
前端配色方案:最舒服的十种颜色
科学上最舒服的十种颜色███ 19CAAD ███ D6D5B7███ 8CC7B5 ███ D1BA74███ A0EEE1 &...原创 2020-03-26 18:01:00 · 83693 阅读 · 2 评论 -
【BootCDN】前端使用开源免费的 CDN 加速服务
BootCDN - 官网链接CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。引用方式示例<script src="...原创 2020-02-09 20:42:24 · 71207 阅读 · 0 评论 -
【JavaScript】前端模块化:import 和 export 的使用
为什么要有模块化?多人开发时会遇到变量作用域问题。解决方案:匿名函数,但是会带来代码不可复用的问题解决代码不可复用的问题,可以使用模块化:ES6 规范里的模块化实现比如可以使用type=module不同的模块化规范,导入、导出的写法可能不太一样,但都有这两个核心:导入、导出。随着前端的发展,已经不需要使用模块化。只需要遵守别人的规范即可使用了。导出:可以导出类:...原创 2020-02-01 12:53:17 · 70931 阅读 · 0 评论 -
【JavaScript】请求数据时,添加时间戳,避免浏览器缓存
浏览器具有缓存,不会请求相同的数据。如果要写一个刷新验证码功能,可以请求数据时,添加时间戳,避免浏览器缓存,示例:原创 2020-01-25 10:17:19 · 71306 阅读 · 0 评论 -
【JavaScript】判断一个字符串是否是数值 / 判断是否包含字母(附常用正则表达式)
JavaScript 使用示例如果是值(数字),返回其值;如果不是数字,返回空字符串''。可以避免从数据库中取到空值,导致在前端显示报错的情况。autoConvertNum()函数定义如下:// 如果是值(数字),返回其值;如果不是数字,返回空字符串''function autoConvertNum(numStr) { if (typeof (numStr) != 'string') ...原创 2020-01-21 21:40:45 · 75262 阅读 · 0 评论 -
【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串,将数据显示为int类型值
目的需要将数据库中取出的值进行前台展示。为了使用easyui拓展中的排序功能,需要把表格中的值显示为int类型,但是如果是空字符串的话,转换为int会报错。如果全部转换为str的话,排序会出问题(会按照字符排序而非数值大小)解决方式:进行一下逻辑判断。如果是None,则转换为空字符串'',如果有值,则取其值。部分js代码示例<script> $(docume...原创 2019-12-04 20:20:45 · 29914 阅读 · 0 评论 -
easyUI tree 多选框设置是否级联选中
问题easyUI的tree树前默认带有多选框级联选中,造成很多麻烦:如,勾选子节点时,父节点也被选中解决方案加入cascadeCheck:false 属性,取消默认级联关系 $('#tt').tree({ data: jsonArray, checkbox: true, cascadeCheck:false,//取消默认级联关...原创 2019-11-29 11:26:13 · 29250 阅读 · 0 评论 -
【EasyUI】DataGrid实现表格的筛选过滤、排序
明白一个道理,百度上搜索半天搜不到的问题,不如自己去读一下官方文档。所以:EasyUI官方文档 - DataGrid文档先放上效果:一、实现DataGrid表格排序下图来自官方文档如果不需要自定义排序,可以直接使用 remoteSort:false, sortName:'', sortOrder:'asc',一些特殊排序,或者指定某个字段的排...原创 2019-11-24 16:35:12 · 36171 阅读 · 0 评论 -
可关闭的浮动div示例
页面效果示例(黄色框)为可以关闭的浮动div可以在里面添加<span>, <button>等,灵活实现想要的效果源码<html> <head> <title>可移动、可关闭的div浮动层</title> <meta http-equiv="Content-Type" content="text/htm...原创 2019-11-14 21:07:11 · 28752 阅读 · 0 评论 -
【JavaScript】js数组与字符串的相互转换
一、数组转字符串需要将数组元素用某个字符连接成字符串,示例代码如下:var a, b;a = new Array(0,1,2,3,4);b = a.join("-");123二、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解。原创 2019-10-24 22:47:43 · 25023 阅读 · 0 评论 -
Echarts给坐标轴添加自定义属性
给yAxis添加自定义属性myname,如下:运行效果完整源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <!-- <script src="/static/js/...原创 2019-10-18 16:26:44 · 28517 阅读 · 0 评论 -
JS读取嵌套的JSON数据
例1var json = { contry:{ area:{ man:"12万", women:"10万" } } };//方式:使用eval解析var obj = eval(json);alert(obj.contry.area.women);例2var json1 ={ "苹果": { "axisclass": "HQING", "指数开盘价(白糖)": [123, ...原创 2019-10-18 10:06:54 · 29993 阅读 · 0 评论 -
【EasyUI】Tree中自定义在节点前是否显示checkbox
参考:https://blog.csdn.net/qq_40529542/article/details/90729145在tree中利用checkbox显示复选框时,发现每个节点前面都有,如图所示如果不想让父节点显示checkbox,解决办法如代码所示如果以下方式无效,尝试换一下easyui版本 $('#main_tree').tree({ data: [{...原创 2019-10-14 22:54:35 · 26056 阅读 · 3 评论 -
【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法
01-js-js的声明和引入<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js的声明呵和引入</title> <!--声明js代码域--> <!--引入外部声明好的js文件--> <script sr...原创 2019-09-23 15:06:17 · 22487 阅读 · 0 评论 -
【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似。主要是结合js的函数使用。单 / 双击事件鼠标事件键盘事件交点事件页面加载事件值改变事件<html> <head> <title>js的事件机制学习1</title> <meta charset="UTF-8"/> <!--...原创 2019-09-25 11:42:01 · 22439 阅读 · 0 评论 -
【JavaScript】Window对象学习
Javascript组成JavaScript的实现包括以下3个部分:1、核心(ECMAScript):描述了JS的语法和基本对象。2、文档对象模型 (DOM):处理网页内容的方法和接口。3、浏览器对象模型(BOM):与浏览器交互的方法和接口。window对象JS基于对象,万物皆对象。在浏览器里面,window对象(注意,w为小写)指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一...原创 2019-09-25 13:13:35 · 22099 阅读 · 0 评论 -
【JavaScript】Document对象学习
Document 对象当浏览器载入 HTML 文档, 它就会成为 Document 对象。Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。因此,可以通过js在html里面凭空创造一个标签出...原创 2019-09-26 20:55:18 · 22394 阅读 · 0 评论 -
【JQuery】JQuery学习笔记
Jquery不同版本之间的区别jquery学习 1、什么是jQuery jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。 2、jQuery的特点 支持各种主流的浏览器。 使用特别简单 拥有便捷的插件扩展机制和丰富的插件 3、使用jquery 引入jQuery文件 jQuery的封装原理 jQuery的选择器 ...原创 2019-09-27 09:18:04 · 22171 阅读 · 0 评论 -
【EasyUI】EasyUI学习笔记
一.EasyUI 简介1.EasyUI 是前端框架.2.前端框架2.1 封装大量css2.2 封装大量JS3.使用前端框架3.1 给标签设置easyui提供的 class 属性即可,id属性可以随便起名。4.easyui 中需要注意的地方4.1 data-options 属性定义easyui 属性的.4.2 如果easyui 提供的属性和html 标签属性相同,可以把这个属性不...原创 2019-09-27 14:39:24 · 22344 阅读 · 0 评论 -
在JS中如何判断undefined和null
不当用法有时为了判断某个值有效,JS新手会写这种臃肿代码:if (data != null && typeof(data) != undefined && data != '') { ...}为避免这种情况,首先要了解undefined和null的区别。什么是undefined和null当声明的变量未被初始化时,默认值为undefined。如:...转载 2019-09-29 08:08:07 · 31279 阅读 · 6 评论 -
Jquery中的$(document).ready()详解
参考:https://blog.csdn.net/beidaol/article/details/81009740因为html代码顺序执行,所以想要在js操作某个标签元素的时候,要保证这个元素已经被加载出来了,否则会取不到。为了保证元素已经被加载,可以使用$(document).ready()。window.onload = function(){ alert("welcome"); }...原创 2019-10-01 21:49:55 · 24450 阅读 · 0 评论