H5 CSS JS基础
前端基础
极光雨雨
“芝士”与你分享 ———纳西妲
展开
-
前端专题 JQuery select多级联动实现+注释
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript"> $(function(){ var原创 2020-08-08 10:44:42 · 248 阅读 · 0 评论 -
前端专题 表单的基本使用
表单的理解表单和一个问卷调查一样,可以将用户选择的和填写的内容整合成一套数据发送给我们的后台服务器,让服务器内部代码对数据进行操作并可以给与用户一定的反馈内容。标签:属性:method值:get、postAction:提交的服务器地址,写法之前img src指向某一路径表单内的元素Input标签属性:Name:元素名称,传输数据是根据name的属性传输的Id: 就是idType:Text:普通文本框 ,默认就是type=“text”Password:密码Radio: 单选按原创 2020-08-08 09:31:48 · 169 阅读 · 0 评论 -
HSL和HSLA颜色
HSLHSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。Hue 是色盘上的度数(从 0 到 360):0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 10原创 2021-04-10 09:05:39 · 1108 阅读 · 0 评论 -
前端专题 JS定时调用和延迟调用实现弹窗
setTimeout 延时调用方法方法为 JS 固有,写法setTimeout(“hid()”,2000) 其中第一个参数 hid()为要延时调用的方法,如果有参数可以放到()中。2000表示的是2000毫秒后调用。setInterval 定时调用方法同样为 JS 固有,使用方式与上面一致,效果为每过一定时间调用特定方法。弹窗实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l原创 2020-08-08 10:08:28 · 960 阅读 · 0 评论 -
JS专题 var ,let, const区别以及使用
let, const均为ES6中的申明方式, ES6本身是否生效只与浏览器以及浏览器版本相关var全局变量与局部变量:在函数内申明则为局部变量 仅函数体内可访问,在函数体外定义则为全局变量,函数体内外均可以访问块级作用域ES6之后提出了块级作用域被var申明的变量在块级作用域内外均可以被访问到简单来说块级作用域就是 {}var x = 20;// 20{ var x = 10; // 10}// x = 10使用let时效果如下var x = 20;// 20{原创 2021-07-20 18:22:22 · 91 阅读 · 0 评论 -
JS 基础使用提炼总结(二)
通用编程写法switchswitch (取值){case 值1 :case 值2 :case 值3 : 特定语句对处理Break;case 值4 : 特定语句对处理Break;case 值5 : 特定语句对处理Break;}For 循环 ,while循环,dowhile循环 ,dowhile循环 与c,java等通用循环中break,continue用法也一致JavaScript中for …in 循环一般用来循环数组例:Var x;Var hobbies原创 2021-04-10 19:17:56 · 94 阅读 · 1 评论 -
前端专题 RGB和RGBA( rgb 和 rgba ),及十六进制 颜色介绍
RGB三原色,Red, Green,Bule的简称。在实际前端style中使用的时候是这样的举个栗子<div style="background-color: rgb(255,0,0); width: 10px; height: 10px;"></div>效果就是一个红色的小方块,其中的rgb可以作为颜色的取值工具,或者函数来理解。变化范围为0~255,三个分别对应三原色的程度,都是零就是没有颜色,没有色彩就是一片黑暗,也就是黑色。对应的全为255则为白色。不同程度的原创 2020-08-09 20:54:24 · 5362 阅读 · 0 评论 -
前端专题 JQuery实现左右框添加内容
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ width: 200px; height: 300px; } </style> <script type="text/javascript" src="js/原创 2020-08-09 16:52:19 · 211 阅读 · 0 评论 -
前端专题 Bootstrap的使用及基础资源引入顺序+栅栏案例
BootstrapBootstrap是比较好用的,虽然有时候会出现样式覆盖的问题,但是可以通过再覆盖来解决。这里介绍一些bootstrap的使用方法引入方法,引入顺序出问题是会出现问题的,影响使用体验。引入的资源和顺序正确引入之后,最好直接上Bootstrap 的官方文档上看看,只要在需要使用的内容标签内加入对应class名字就可以实现对应效果。总体使用方法比较简单。多个class是被允许的,但是要注意自己的bootstrap使用时不要和自己写的样式中的class名重复了,以免引起不必要的麻烦。&原创 2020-08-09 19:36:44 · 303 阅读 · 0 评论 -
JS专题 array[String] 排序 replace的全部替换使用总结
let tempstr = JSON.stringify(_this.Meetingsign1.jobName).substring(1,JSON.stringify(_this.Meetingsign1.jobName).length-1)let tmpstr2 = tempstr.replace(/"/g,'') // /g表示的全部替换 /g前的 " 为要替换的符号,逗号后为替换的内容let temparr = tmpstr2.split(",") // 转数组let arrst原创 2021-06-14 17:21:00 · 856 阅读 · 0 评论 -
前端专题 JQuery对属性的获取和修改操作
内容比较简单,直接上代码,边看边试<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script> <script type="text/javascript">原创 2020-08-08 10:24:56 · 137 阅读 · 0 评论 -
JS 入门基础知识提炼总结(一)
基本标准ECMA制定的标准脚本语言叫做ECMAScript,Javascript符合ECMA标准,Javascript也可以叫做ECMAScript。(为了web兼容问题相关组织制定了标准这种语言标准)Jscript(与JavaScript不是一个东西)也符合ECMA但用户较少,vbscript仅限微软用户。JavaScript时一种基于对象和事件驱动,并具有安全性能的脚本语言。脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言,不需要与服务器响应处理,但也可以做到与服务器响应,且功能原创 2021-04-10 19:11:49 · 113 阅读 · 0 评论 -
前端专题 JQuery实现动画效果
内容不多,直接上代码,效果一次选一种查看<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bg{ width: 200px; position: fixed; bottom: 0px; right: 0px; display:原创 2020-08-08 10:33:11 · 158 阅读 · 0 评论 -
前端专题 JS图片轮播实现
首先需要将图片的命名格式统一一下,可以加上数字序号,通过改变数字序号来实现多图片的切换案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> num=0 function show(){ var aw = document.getEleme原创 2020-08-08 09:58:41 · 129 阅读 · 0 评论 -
前端专题 盒子模型和CSS样式基础
盒子模型在网页中的所有元素一般都可以看作是用了一个盒子将其内容包在一起案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ border: 0px solid red; padding: 10px 5px; /*内边距*/原创 2020-08-07 21:27:46 · 277 阅读 · 0 评论 -
前端专题 iframe搭建一个常见的后台管理系统框架
iframe的作用iframe可以将多张 HTML 网页放到一个页面内,组成一个复合的 HTML页面,从实际效果来看相当于实现了一个有横幅标题,有左侧菜单栏,有右边大面积的空白处显示具体内容网页。当然这些并不是固定的,具体复合多少个网页,怎样显示可以有你自己来决定。一般来说大概会做成这样的样子。其实和一般的开发工具的布局差不多,一般的后台管理系统也会做成这个样子。来看看代码,同样写在Hbuilder中,方便调试大小<!DOCTYPE html><html> <原创 2020-08-07 21:14:15 · 1746 阅读 · 0 评论 -
JS专题 list中的filter方法
let arr = this.list.filter(item=>item.fileType == row.fileType)符合条件的加入到返回值中,否则丢弃, =》写法为ES6写法,至只与浏览器有关,原生的JS写法原创 2021-06-19 07:21:35 · 11941 阅读 · 0 评论 -
前端专题 JQuery基础和JQuery选择器
JQuery理解Jquery其实是对JS的一个初步封装,简化了JavaScript的语法,并且丰富了一些功能,后面其实对还有在Jquery基础上进行封装发展的技术,其实还是对Javascript的封装,只不过更高级一点。使用更方便,但是封装的程度更高,不容易看到实现过程。JQuery 语法和选择器这里只说明部分使用方法,因为实在是太多了,可以直接到Jquery官网看到更多的使用方法和说明或者下载API文档来看。使用方法直接写到注释里面,边试边看<!DOCTYPE html><h原创 2020-08-08 10:22:44 · 149 阅读 · 0 评论 -
前端专题 JQuery实现checkbox全选/全不选效果
直接上代码,内容不多,边看边试<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript"> $(func原创 2020-08-08 10:28:05 · 123 阅读 · 0 评论 -
前端专题 HTML5基础篇,从txt开始写网页
网页的最简单写法(txt中)前提:保证你电脑上有浏览器,IE,火狐,谷歌都可以,应该又会有的吧…HTML超文本标记语言(Hyper Text Markup Language),浏览器网页,页面中可能含有文本,标点符号,图片,视频,音频,按钮等等,这些所有的元素都是同html这种标签去表示,这些标签都是定义好的,多用几次或者直接查阅相关资料就可以使用在你的桌面新建一个txt文本,鼠标右键,新建文本如下图 文本文档就是txt文档名字可以随便起,打开后可以这样简单写一个<html>原创 2020-08-04 20:31:34 · 1255 阅读 · 0 评论 -
前端专题 新手JavaScript的基本使用+案例
JavaScript介绍JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。内容JavaScript基本语法JavaScript对象获取JavaScript获取标签内容JavaScript操作标签属性JavaScript事件绑定JavaScript(简称JS)引入方式第一种原创 2020-08-08 09:54:28 · 260 阅读 · 0 评论 -
前端专题 Javascript图片预览实现
相当简单,之间看代码,有注释<!--<!DOCTYPE html>--><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> onload = function(){ IDfile.onchange = function(){ var file = IDfil原创 2020-08-08 10:41:07 · 147 阅读 · 0 评论 -
JS正则表达式学习总结 +多个校验案例
定义方式一般都要以 转义符号 \ 开头 不使用构造时,直接使用 / 开头 /结尾。中间为具体的表达式var reg = new RegExp("\\w+");var reg = /\w+/;修饰符书写第二种的时候,置于第二个 / 之后做修饰,可不填可以添加在 / 后面的值以及意义如下:i // 忽略大小写g // 全部匹配,匹配第一个后不停止m // 多行匹配方括号[abc] 查找方括号之间的任何字符[^abc] 查找任何不在方括号之间的字符[0原创 2021-08-05 17:33:08 · 321 阅读 · 0 评论 -
JS 基础使用+常用方法总结,理论在前总结在后(三---终)
JavaScript对象化编程JavaScript也属于面向对象编程,涉及范围可以划分为大大小小的对象,对象下可以继续划分对象,所有编程都是以对象为出发点,基于对象,小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。JavaScript对象有:基本对象,全局对象,文档对象基本对象属性和方法# string直接给一个变量赋值为字符串,对象就创建完了Var str = “一些字符串”之后就可以直接访问其属性和方法属性length 返回长度方法charAt(index)原创 2021-04-10 19:39:35 · 167 阅读 · 0 评论