前端
关注
分享
扫一扫
文章平均质量分 88
乐之者java
个人主页:http://www.roadjava.com/
展开
-
迁移html和css之四
五十一、display: flex;与justify-content实现均匀分布html： <divclass="box"> <section>条目1</section> <section>条目2</section> <section>条目3</section> </div>css:.box{ display:flex; justify-content:...原创 2021-05-13 10:30:17 · 452 阅读 · 0 评论 -
js实现上下文菜单
上下文菜单在web开发中也叫作右键菜单，在web开发中比较常见。如果后台系统用的前端插件，比如easyui等，本身就附带了这种上下文控件，但是如果想要自己实现，该如何做呢？这里我分享一个给各位朋友，先看下最终的整体效果：这里面有两个要解决的问题：如何准确的获取鼠标右键点击的位置，并让原本隐藏的菜单在该位置显示出来。当页面高度很高，以至于在页面最右边出现滚动条的时候也要确保弹出菜单的位置是正确的。如何解决？我们来看，如果想要获取鼠标的点击位置，我们可以通过事件的pageX或者clientX，但原创 2021-05-13 10:29:44 · 462 阅读 · 1 评论 -
迁移html和css之三
三十一、css代表着什么，css规则是什么意思？CSS（全拼是 Cascading Style Sheets，翻译过来就是"层叠样式表"的意思）控制 DOM 元素的视觉外观，css控制的是元素的样式，不然怎么叫样式表呢。下面就是一条简单的 CSS 样式：body{background-color:white;color:black;}css如何书写？CSS 样式由选择符和属性组成。选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性声...原创 2021-05-12 14:29:05 · 585 阅读 · 0 评论 -
迁移html和css之二
二十一、CSS3前缀 浏览器 厂商前缀 chrome、safari -webkit- opera -o- firfox -moz- internetexplorer -ms- 上标列出的是css前缀，为什么会有这些前缀呢？新的css属性发布还未纳入w3c标准之前如果各个厂商想使用，一般加..原创 2021-05-12 13:59:16 · 452 阅读 · 1 评论 -
迁移html和css之一
一、html元素的理解html元素，也叫html标签，是用来改变网页结构的作用。也就是说“标记”的作用 ：就是通过给内容添加标签来创建元素的过程。html标签写法注意点：01.HTML 标签以 < 开头，以 > 结束，比如表示段落文本的 <p>。02.标签一般都成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素。03.结束标签用一个斜杠表示元素的关闭或结束，比如 </p>。如...原创 2021-05-12 13:46:23 · 611 阅读 · 0 评论 -
迁移其他jquery文章之二
十一、jquery动画show,slideUp,fadeIn,fadeTo等对比jquery的动画方法：1.显示与隐藏show([数值/预设],[fn])和hide([数值/预设],[fn])和toggle([数值/预设])，这些方法的实质其实就是设置display属性2.向上滑动与向下展开slideUp([数值/预设],[fn])和slideDown([数值/预设],[fn])和slideToggle([数值/预设])...原创 2021-05-12 12:31:44 · 414 阅读 · 0 评论 -
bootstrap-datetimepicker使用
bootstrap-datetimepicker官方网址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm，上边有更详细的介绍，这里我举一个综合的例子，效果如下：使用的bootstrap是v3.3.5.<!doctypehtml><html><head><metacharset="utf-8"><title>bootstrap-datetimepicke..原创 2021-05-12 12:04:49 · 758 阅读 · 0 评论 -
jquery ui 之datepicker的使用
一、jquery插件机制介绍jquery插件机制的介绍jquery因为他的开源特性，大家都愿意聚集在它的周围，这也直接导致了jquery丰富的插件，据不完全统计，其插件个数已经超过千种，大致可以归为ui类（如jquery ui）、验证类（如表单验证插件jquery-validate.js）、特效类(如eayui等各种组件)、工具类(如json操作工具JSON2.js)等。jquery插件分为哪几种？一、自定义插件(可以提高系统的封装性)：基...原创 2021-05-12 12:01:58 · 2741 阅读 · 2 评论 -
easyui使用易错点
一、easyui报错:form[0].submit is not a function使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。原因：easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现...原创 2021-05-12 11:20:15 · 727 阅读 · 1 评论 -
迁移其他jquery文章之一
一、jquery的dom操作之插入节点内部插入节点select.append(content/select) 向每个匹配的元素尾部追加内容select.appendTo(select) 把所有匹配的元素追加到指定的select的尾部select.prepend(content/select)select.prependTo(select)外部插入节点...原创 2021-05-12 11:12:25 · 326 阅读 · 1 评论 -
迁移其他js文章之二
三十一、js检查一个数值是整数还是浮点数<script>functionisInt(n){returntypeofn==='number'&&n%1==0;}functionisFloat(n){returnn===+n&&n!==(n|0);}console.log(isInt(3));console.log(isInt(3.3));console.log(isFloat(3));co...原创 2021-05-12 10:36:10 · 330 阅读 · 1 评论 -
迁移其他js文章之一
一、javascript中dom的分类DOM：document object model，翻译过来叫做文档对象模型，它是由W3C制定的一套访问和操作XML文档的标准，即API，做后台的一般都很熟悉api这个词，就是接口的意思，说的再直白一点就是函数、方法。因此，直接的，可以这样理解，dom就是接口，比如我们常见的getElementsByTagName()，getElementsByTagName()，setAttribute()等等。DOM与特定的平台、浏览器、开发...原创 2021-05-12 10:00:24 · 253 阅读 · 1 评论 -
使用javascript实现Base64的加密和解密
Base64的加密和解密是后台编码中（如java，python等）常用的一种可逆的加密解密算法，非但在后代编码语言中可以实现，它在javascript中依然可以实现的，如果你使用node.js，那就爽歪歪了，npm包管理网站上有很多现成的npm包已经实现了Base64编码算法，那就没问题了，既然别人可以实现，我自然也可以实现的，这不，下面就奉上使用js实现的Base64算法：<script>varBase64={//base64的组成元素_keyStr:"ABCDEF...原创 2020-10-31 14:08:00 · 2152 阅读 · 1 评论 -
一文理解js里面的跨域访问
引入有个名为get.html的文件，里面通过script标签引入了外部的js文件：<scripttype="text/javascript"src="test.js"></script>test.js内容很简单:alert("当文件可能比较大的时候在需要的时候再进行加载");get.html全部内容如下：<!doctypehtml><html><head><metacharset="utf-8"...原创 2020-10-23 13:34:35 · 239 阅读 · 0 评论 -
使用jquery完成跨域访问
jquery实现跨域访问有两种方式，一个是$.getJSON，一个是$.ajax,注意只有get请求才能实现跨域访问。一、$.getJSON实现跨域访问get.html:<!doctypehtml><html><head><metacharset="utf-8"><title>javascript和jquery的跨域访问</title><scripttype="text/javascript"src...原创 2020-10-23 13:35:01 · 11411 阅读 · 0 评论 -
style-loader和css-loader
在使用了webpack之后，给了我们两种大的选择来使用css，一种就是我们传统的方式通过<linkhref="./public/css/users/users.css"rel="stylesheet"/>的方式来引入，这是我们很熟悉的方式；另外，我们还可以见到下面这种写法，就是在js文件里面写到：import'./index.css';然后再也页面上这个index.css还生效了，这是怎么一回事呢？这跟我这次要说的style-loader和css-l...原创 2020-06-29 13:48:58 · 901 阅读 · 0 评论 -
使用d3画一个带有坐标轴的完善的柱形图
前边搞得d3.js是从d3官网上下载的最新版本的d3.js，是v5.0.0,使用过程中发现文档比较少，因此改为d3.v3.js,官网上有v3.x这个版本的文档不说，而且还是中文的，还是用这个版本吧。而且5.0之后改的api非常多，以前熟悉的很多函数都没有了，或是换了写法，很操蛋，写起来很费劲，所以还是使用3.5.7这个d3.js版本吧。废话不多说，来看看最终的柱形图的效果：还是可以吧，下面是实现的源代码，先看html部分，html部分其实就是一个基本的h5结构，啥也没有：&...原创 2020-06-29 19:03:24 · 1006 阅读 · 1 评论 -
jquery中的事件模拟trigger
trigger(type,[data]):相当于帮你执行了type类型的事件，不会阻止浏览器默认行为。示例：<!doctypehtml><html><head><metacharset="utf-8"><title>事件模拟</title><style> </style></head><body> <formaction="1.html"...原创 2020-06-29 19:03:06 · 185 阅读 · 0 评论 -
bower的使用
bower是什么？bower用来管理项目中用到的js、css等框架，比如jquery、bootstrap、underscore等为什么需要bower？jquery我可以自行到网上去下载呀，为什么要需要bower呢？一个可以下载，多个你都去网上下载难道不浪费时间吗？而且网上下载的最好要去官网下载，不然有时候会出现莫名的错误。使用bower可以节省我们在网上下载这些框架的时间；同时，来源统一，相对安全。bower的安装F:\Program\workspace...原创 2020-06-25 11:50:29 · 1171 阅读 · 0 评论 -
配置npm全局安装目录
npm在nodejs安装后即可使用，当我们使用-g全局安装组件时，组件默认被安装在"C:\Users\zhao\AppData\Roaming\npm"下，这点我们可以通过"npm config ls"命令来查看：我的东西一般不喜欢安装在c盘，那么如何修改这个默认的路径呢？依我的电脑为例，在C:\Users\zhao目录（zhao为你自己电脑的用户名，即linux的家目录）下新建名字为".npmrc"的文件，并设置其内容为 1 2 cache=D:\Pr.原创 2020-06-25 11:40:26 · 2356 阅读 · 0 评论 -
jquery中的简单事件模式
因为使用bind或者one等事件处理函数比较麻烦，所以jquery对事件的处理又进行了封装,我们也可以直接使用封装事件函数，我们称之为jQuery里的简单事件模式。如：$("li").bind("click",function(){ //..... }); 改写为简单事件模式就是：$("li").click(function(){//....});下...原创 2020-06-25 11:37:09 · 150 阅读 · 0 评论 -
live与delegate与on处理动态创建元素的事件绑定
有下面这个例子：上面的表格中页面刚打开的时候如上图所示，最右边的“-”表示删除当前行的数据，如果我们使用$("span").bind("click",function(){ $(this).parents("tr").remove(); })或者$("span").click(function(){ $(this).parents("tr").remove(); })来处理删除操作(其中span为“-”的选择器)，就会有如下的问题：页面初始展示的3行是原创 2020-06-25 11:36:55 · 132 阅读 · 0 评论 -
使用one方法实现事件的一次性绑定
one方法格式：one(eventName,[data],fn)one方法功能：有时候，只希望事件执行一次，而又不想使用off()等函数解除事件绑定，这时候可以使用one(),为每一个匹配元素的特定事件绑定一个一次性的事件处理函数参数解释：eventName：事件名称，如clickdata:传给回调函数fn的参数，通过fn的事件参数.data.xxx来获取代码举例，html结构：<!doctypehtml><html><head><.原创 2020-06-25 11:36:00 · 514 阅读 · 0 评论 -
on与off方法实现jquery中的事件绑定与解除
on方法格式：on(events,[selector],[data],fn)off方法格式：如 off()、 off(“click”)、 off(“click.abc”)、 off(“.abc”)、 off(“click”,fn)，用于替代unbind()和die()和undelegate()除了之前学过的bind和unbind用来绑定事件，jQuery中还提供了live和die以及delegate和undelegate这两组函数用来处理事件委托，所谓事件委托就是把匹配元素的事件冒泡...原创 2020-06-25 11:35:47 · 380 阅读 · 0 评论 -
jquery中使用live绑定事件与die解除绑定事件
到现在为止，对于页面动态创建的元素绑定事件，我已经讲过了一组函数，即delegate与undelegate,下面我要说的是live和die，这两个函数在我使用的jquery-1.12.4这个版本中已经取消掉了，具体的应该是jquery在1.8之后的版本中就取消掉了这两个函数，因为它的功能完全可以由delegate与undelegate来实现，其实，在jquery1.8之后，也并不推荐再使用delegate与undelegate了，而是统一使用on与off函数来实现事件的绑定与解除，这样归于一...原创 2020-06-25 11:35:25 · 474 阅读 · 0 评论 -
delegate与undelegate处理事件
格式：delegate(childselector,[events],[data],fn)参数含义：childselector：最终绑定事件的元素events：要绑定的事件，多个用空格隔开data：传递给fn的参数fn：事件处理函数功能：为元素childselector（属于被选元素的后代元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数.适用于当前或未来的元素（比如由脚本创建的新元素）。undelegate([selector,[...原创 2020-06-25 11:25:40 · 365 阅读 · 0 评论 -
bind处理事件
格式：bind(eventName,[data],fn)功能：为每一个匹配元素的特定事件绑定一个事件处理函数参数含义：eventName：事件名称，如click，多个事件用空格分隔data:传给回调函数fn的参数，通过fn的参数.data.xxx来获取当需要一次性绑定的多个事件对应不同函数时，可以传入objunbind([事件名称])：解除事件的绑定 解除所有input元素的所有事件绑定：$(“input”).unbind() 解除所有input元素的某个...原创 2020-06-25 11:20:59 · 546 阅读 · 0 评论 -
jquery选择器演示代码
前边介绍了各种jquery选择器的用法，下面这个例子是涵盖了大部分选择器的示例程序。html代码：html代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29原创 2020-06-25 11:20:39 · 193 阅读 · 0 评论 -
jquery表单过滤选择器和表单对象属性过滤选择器
表单过滤选择器1、:input 用法: $(”:input”) ; 返回值 集合元素 说明:匹配所有 input, textarea, select 和 button 元素2、:text 用法: $(”:text”) ; 返回值 集合元素 说明: 匹配所有的单行文本框.3、:password 用法: $(”:password”) ; 返回值 集合元素 说明: 匹配所有密码框.4、:radio 用法: $(”:ra...原创 2020-06-03 23:11:32 · 788 阅读 · 0 评论 -
属性过滤选择器和子元素过滤选择器
属性过滤选择器1、[attribute]用法: $(”div[id]“) ; 返回值 集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.2、[attribute=value]用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素 说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 ...原创 2020-06-03 23:11:22 · 310 阅读 · 0 评论 -
内容过滤选择器与可见性过滤选择器
内容过滤选择器1、:contains(text)用法: $(”div:contains(’John’)”) 返回值 集合元素 说明: 匹配子元素或后代元素包含给定文本(text)的元素集合2、:empty用法: $(”td:empty”) 返回值 集合元素 说明: 匹配所有不包含子元素或者文本的空元素3、:has(selector) 用法: $(”div:has(p)”).addClass(”te...原创 2020-06-03 23:11:16 · 295 阅读 · 0 评论 -
过滤选择器分类与基本过滤选择器总结
jquery过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头(除属性过滤选择器外)，按照不同的过滤规则, 过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤表单和表单对象属性过滤选择器几个部分。基础过滤选择器1、:first用法: $(”tr:first”) ; 返回值 单个元素的组成的集合 说明: 匹...原创 2020-06-03 23:11:09 · 1110 阅读 · 0 评论 -
jquery基本选择器和层级选择器
jquery基本选择器分类：1、#id 示例：$(“#box”).css(“color”,”red”); 返回：单个元素组成的集合 注意：一张页面中id不能重复2、element 示例：$(“div”).css(“color”,”red”); 返回：集合3、.class 示例：$(“.box”).css(“color”,”red”); 返回：集合4、* 示例：$(“*”) 返回：集合5、selector1,selector2...原创 2020-06-03 23:10:56 · 268 阅读 · 0 评论 -
jquery里面的选择器分类
jQuery的核心组成部分就是选择器引擎，jQuery的选择器引擎继承了CSS1-CSS3的大部分语法，同时也新增了自己的一些语法规则.jQuery选择器的分类：1.基本选择器2.层级选择器3.基本过滤,4.内容过滤,5.可见性过滤6.属性过滤7.子元素过滤8.表单对象过滤9.表单对象属性过滤使用jQuery选择器的语法...原创 2020-06-03 23:10:49 · 118 阅读 · 0 评论 -
jQuery对象与DOM对象
jQuery官网：https://jquery.com/，大伙可以到官网去下载jquery，比如你下载的是jquery-1.12.4.min.js，你也可能见过jquery-1.12.4.js，带有min标记的表示是压缩版本，在生产环境建议使用压缩版本，节省网络流量，不带min的是非压缩版本，便于调试错误，两者功能是完全一样的。jQuery对象与DOM对象的转换 1 2 3 4 5 6 7 8 9 va...原创 2020-06-03 23:10:43 · 103 阅读 · 0 评论 -
jquery引入以及为什么需要jquery以及jquery的一些优势总结
jquery的口号是write less,do more，虽然不能达到“无码天书”的效果，但是jquery真的很“狂拽酷炫叼”，原先使用javascript需要十几行的代码有的时候用jquery一两行就能搞定了，jquery是一个javascript库，实际上就是封装了javascript，让我们使用起来更加方便，要记住一点，使用jquery能够实现的东西，使用javascript都能实现，因为jquery本身就是使用javascript来编写的。下面是我就jquery提出的一下问题...原创 2020-06-03 23:10:36 · 511 阅读 · 0 评论 -
使用javascirpt实现原生的ajax
前边说了ajax的概念以及ajax里面最重要的XMLHttpRequest对象，这次我们来看看如何使用javascript来实现ajax，并向服务器后台发送get和post类型的请求。例子效果如下：这个例子很小，但ajax的特性却从中一览无遗：1.ajax是异步的，一个请求的执行完成与否并不影响另一个请求的发送，这大大改善了网页程序的用户体验2.ajax是局部刷新的，一个ajax请求可以只影响整个网页中的一小部分，而不是刷新整个网页。那我们就来看一下，这个例子是怎么实现的吧，新...原创 2020-06-03 23:10:27 · 151 阅读 · 0 评论 -
ajax是什么与XMLHttpRequest介绍
ajax是什么？Asynchronous Javascript And XML，一种在无需重新加载整个网页的情况下，能够更新部分网页的局部刷新技术，可以使网页异步刷新。应用：注册页面的提示，大页面的分块加载等。要学习ajax最重要的是理解XMLHttpRequest对象。获取XMLHttpRequest 对象xhrXMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器均内建 XMLHttpRequest 对象，通过new XMLHttpReq...原创 2020-06-03 23:10:19 · 161 阅读 · 0 评论 -
fontawesome图标字体库
fontawesome图标字体库通过css类可以让你使用众多的图表，堪称一个图标字体的css框架了。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。具体的有如下特点：1.图标众多，现在的Font Awesome最新版本为4.7.0，包含了670多个图标，能满足日常使用了。2.不依赖JavaScript 3.可缩放而不损失质量，因为这个图标库是矢量图标库4.这些图标...原创 2020-06-02 23:49:38 · 1237 阅读 · 0 评论 -
svg之text
svg里面的text标签用来定义文本，看下面的效果：怎么实现的呢？我们先编写text.svg: 1 2 3 4 5 6 7 8 <?xmlversion="1.0"standalone="no"?> <!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/s...原创 2020-06-02 23:49:32 · 1534 阅读 · 0 评论