前端学习教程
湫湫的自述
测试的一些小经验
展开
-
28.正则表达式和前端性能优化
一。正则表达式正则表达式主要用在表单验证1.什么是正则表达式 能让计算机读懂的字符串匹配规则2.正则表达式的写法:var re = new RegExp("规则","可选参数")var re = /规则/参数3.规则中的字符a。普通字符匹配如:/a/ 匹配字符 "a" , /a,b/匹配字符"a,b"...原创 2019-11-15 15:10:22 · 166 阅读 · 0 评论 -
27.jQuery UI和本地存储及移动端js事件
一。本地存储本地存储分为cookie,以及新增的localStorage和sessionStoragecookie需要用到一个js文件,jquery.cookie.js文件,自行百度下载配置1.cookie存储在本地,容量最大4K,在同源的http请求是携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。 j...原创 2019-11-15 01:26:09 · 161 阅读 · 0 评论 -
26.Ajax和jsonp
ajax是用来读取json数据的一。jsonjson是javaScript Object Notation 的首字母缩写,单词的意思是js对象表示法,这里说的json指的是类似于js对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。javascript自定义对象:var oMan = { name:"tom", age:1...原创 2019-11-14 23:48:02 · 99 阅读 · 0 评论 -
25.jquery事件和元素节点
一。事件函数列表blur()//元素失去焦点---input标签使用focus()//匀速获得焦点---input标签使用click()//鼠标单击mouseover()//鼠标进入(进入子元素也触发)mouserout()//鼠标离开(离开元素也触发)m...原创 2019-11-14 10:55:24 · 108 阅读 · 0 评论 -
24.jQuery动画
一。jQuery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。<script>$("#div1").animate({width:300,height:300},1000,"swing",functio...原创 2019-11-13 17:54:49 · 84 阅读 · 0 评论 -
23.样式操作和click事件
一。jQuery样式操作jQuery用法思想二统一个函数完成取值和赋值操作行间样式:原生js无法读取行间没有定义的css属性值//读取div的样式$("div").css(width); $("div").css(color); //设置div的样式$("div").css("width","30px");$("div").cs...原创 2019-11-13 15:30:55 · 335 阅读 · 0 评论 -
22.jQuery介绍
学习jQuery函数库的基本使用方法和应用场景前面21章讲的都是调用原生js方法。一。jQuery介绍jQuery是目前使用最广泛的js函数库,据统计,全世界排名前100万的网站,由46%使用jQuery,远远超过其它库,微软公司是指把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x,3.x系列。1.x系列兼容低版本的浏览器,2.x,3.x系列放弃支持低版本浏...原创 2019-11-12 15:50:12 · 449 阅读 · 0 评论 -
21.封闭函数和常用内置函数
一。变量作用域变量作用域指的是变量的作用范围,js中的变量分为全局变量和局部变量。1.全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。2.局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。二。封闭函数---优先执行封闭函数是js中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。一般定义的函数和执行函数:...原创 2019-11-12 14:08:11 · 254 阅读 · 0 评论 -
20.JS组成和字符串操作
一。标签获取元素的方法 可以使用内置对象doucument上的getElementsByTagName方法来获取页面上的莫伊标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。二。JS组成 1.ECMAscript javascript的语法(变量,函数,循环语句等语法) 2.DOM文档对象模型 ,操作html和...原创 2019-11-11 14:43:42 · 74 阅读 · 0 评论 -
19.数组和循环语句
一。数组及操作方法数组就是一组数据的结合,JavaScript中,数组里面的数据可以是不同类型的。定义数组的方法://对象的实例创建var aList = new Array(1,2,3); ---这种方法性能不高。//通过直接量的方式创建数组var aList2 = 【1,2,3,"asd"】 --- 采用这种方式进行定义。二。操作数组中数据的方法1.获取...原创 2019-11-11 10:51:56 · 253 阅读 · 0 评论 -
18.分支语句
前端由简单的两个逻辑: 1.定义变量获取id元素 2.再操作元素的事情一。运算符:算数运算符:加 减 乘 除 求余赋值运算符: = += -= *= /= %=条件运算符:== === > >= < <= != &&而且 ||或者 |否二。加法...原创 2019-11-08 16:48:17 · 101 阅读 · 0 评论 -
17.javascript函数
一。函数函数就是重复执行的代码片。以下是标签内调用,最好不要用二,提取行间事件---常用(必备)在html行间调用的事件可以提取到JavaScript中调用,从而做到结构与行为分离。标签内调用要写小括号,再script里面不能写小括号,写的话会直接调用。不要在标签内调用,不保险。变量与函数预解析JavaScript解析过程分为两个阶段,显示编译阶段,然后执行阶段...原创 2019-11-07 18:48:37 · 107 阅读 · 0 评论 -
16.移动端和PC端布局区别
一,移动端页面开发了解移动端页面与PC端开发的区别,学习移动端页面的开发流程。二,移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般比移动设备可视区域大,宽度可能是980px 或者 1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端视口的大小,这样会让页面不容易观看,可...原创 2019-11-07 11:43:20 · 1348 阅读 · 0 评论 -
15.操作元素属性
一。操作元素属性获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。操作属性的方法:1.“ . ” 点操作2.“【】” 操作属性写法:1.html的属性和js里面的属性写法一样2.class 属性写成 className3.style 属性里面的属性,有横杠的改成驼峰式。比如:font-size 改成 fontSize解释...原创 2019-11-07 01:17:25 · 298 阅读 · 0 评论 -
14.JS介绍-js引入
一。介绍学习前端脚本语言javascript的基本概念,页面引入方式,获取页面元素及操作元素属性的技巧,学习函数的基本定义方法和使用方法。JS分为 原生js 和 jQuery库 (很重要的库) 二。原生js介绍 js是运行在浏览器端的脚步语言,js主要解决的是前端与用户交互的问题,包括使用交互与数据交互。js是浏览器解释执行的,前端脚本语言还有JS...原创 2019-11-06 17:31:11 · 176 阅读 · 0 评论 -
13.图片格式总结
一。PS学习使用ps的基本使用以及ps中关于切图这一块的知识,目的是能熟练使用ps查看UI设计师的设计效果图,同时利用ps切图来制作专业html页面。二。常用图片格式 常用前4个 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特性,可以方便我们在制作网页是选取适合的图片格式,图片格式及特性如下:1.psdps的专用格式优点:完整保存图...原创 2019-11-06 10:31:14 · 269 阅读 · 0 评论 -
12.background属性
一。background属性属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:1.background-color 设置背景颜色2.background-image 设置背景...原创 2019-11-05 23:46:09 · 136 阅读 · 0 评论 -
11.浮动/定位布局
一。浮动浮动特性:1.浮动元素有左浮动float:left 和右浮动 float:right 两种2.浮动的元素会向左或向右浮动,碰到父元素边界,其它元素才停下来3.相邻浮动的块元素可以并在一行,超出父级宽度就换行4.浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙的问题)5.浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避...原创 2019-11-05 17:47:56 · 180 阅读 · 0 评论 -
10.盒子类型(重点记录一下)
一。块元素,内联元素,内联块元素 元素就是标签,布局中常用的有三种标签,块元素,内联元素,内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。块元素: 块元素,也可以称为行元素,布局中常用的标签如:div ,p , ul ,li, h1 -h6 , dl , dt ,dd 等等都是块元素,它在布局中的行为:1.支持全部的样式2.如果没有设置宽度,默认的宽度为...原创 2019-11-05 11:14:07 · 246 阅读 · 0 评论 -
9.盒模型使用技巧及相关问题
一。margin技巧1设置元素水平居中:margin x auto;----常用如果使盒子在浏览器中居中,可使用auto这个技巧。auto 自适应浏览器的宽度方向,不能用在高度方向。二。margin使用技巧2margin 负值让元素位移及边框合并 ----常用针对盒子模型不能贴边的问题,是因为body包含8个元素。想要贴边,必须要减去8个元素。外边距合...原创 2019-11-04 17:04:33 · 201 阅读 · 0 评论 -
8.CSS盒子模型
一。CSS盒子模型盒子模型解释元素在页面中显示成一个方块,类似一个盒子,css盒子模型就是使用显示中的和字来做比喻,帮助我们设置元素对应的样式,盒子模型示意图如下:把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子的内容和边框之间的距离(padding)、盒子与盒子之间的距离(margin)设置宽高w...原创 2019-11-03 23:57:55 · 149 阅读 · 0 评论 -
7.CSS常用的文本样式
一。CSS文本设置常用的应用文本的css样式:1.color 设置文字的颜色 ,如:color:red;2.font-size 设置文字的大小 ,如:font-size:12px;3.font-style 设置字体是否倾斜 ,如:font-style:"normal" 设置不倾斜 font-style:"italic" 设置文字倾斜4.font-family 设置文字的字...原创 2019-11-03 22:59:48 · 366 阅读 · 0 评论 -
6.样式介绍
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css由此思想而诞生,css是Casscading style sheets 的首字母组成,意思是层叠样式表,有了css,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加整洁。CSS基本语法: css定义方法是:...原创 2019-11-01 16:34:18 · 102 阅读 · 0 评论 -
5.表单标签
一。表单 表单用于搜索不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:1.<from>标签 定义整体的表单区域 a。action属性 定义表单数据提交地址 b。method属性 定义表单提交的方式,一般有“get”方式和“post”方式2.<label> 标签 为表单元素定义文字标...原创 2019-11-01 14:18:10 · 145 阅读 · 0 评论 -
4.表格标签和传统布局
一。表格1.<table>标签:声明一个表格,它的常用属性如下:a。border属性 定义表格的边框,设置值是数值b。cellpadding属性 定义单元格内容与边框的距离,设置值是数值c。cellspacing属性 定义单元格与单元格之间的距离,设置值是数值d。align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left c...原创 2019-10-31 16:19:48 · 283 阅读 · 0 评论 -
3.HTML块标签,含样式的标签
最近一直没有更新,是由于最近一个月在搞考试,后面会持续更新一些学习经验。一,Html块标签<div> 标签标识块元素,可以嵌套,不带样式,标识一块内容,没有具体的语义<span> 标签,行内元素,标识一行中的一小段内容,没有具体语义以下标签面试时候会考到:<em>标签 行内元素 ,表示语气中的强调词&l...原创 2019-10-30 17:52:20 · 220 阅读 · 0 评论 -
【转】Sublime Text 3 全程详细图文使用教程
一、前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知。最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎、片面,不够系统和全面,所以一路走来,耗费了本人大量的时间和精力。所以蒙生了写这篇《Sublime Text 3 全程详细指南》,一来对自己的经验是一个总结,二来可以给初学者做个系统、全面的指引,让他...转载 2019-09-24 00:15:14 · 240 阅读 · 0 评论 -
2.HTML概述和基本结构
一、html概述HTML意思是超文本标记语言,超文本值得是超链接,标记值得是标签,是一种用来制作网页的语言,这种语言是由一个个的标签组成,用这种语言制作的文件报错的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳...原创 2019-09-24 00:17:29 · 262 阅读 · 0 评论 -
1.前端开发概述
一、什么是前端开发前端开发也叫web前端开发,它指的是基于web的互联网产品的页面(也可以叫界面)开发及功能开发。二、什么叫互联网产品互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务,百度搜索、淘宝、qq、微博、网易邮箱等都是互联网产品。三、互联网产品开发流程及前端开发岗位?四、前端需要哪些技术?前端工程师参照产品的效果图来开发页面(也可以叫界面),效果图...原创 2019-09-23 00:35:41 · 249 阅读 · 0 评论