Web前端知识

day01-HTML

HTML语言开发工具：HBuilder

HTML：超文本标记语言

 HTML语法规范

1.HTML语言的注解方式：<!--注解内容-->

2.标签不区分大小写，官方建议使用小写

3.标签通常都是由开始标签和结束标签组成，也有个例，如：<br/>表示换行，<hr/>表示水平分割线

4.在谷歌浏览器上右键点击选择：显示网页源代码，可看到HTML源码，选择：检查，也可展示源码

HTML标签

1.<title></title>标签内容展示在网页的tab标签上；

2，<meta> ：网站的配置信息

eg：<meta charset=utf-8">指定浏览器打开页面的编码方式，如果内容有中文，编码方式设置为gbk，则会出现中文乱码的问题；

3.<p></p>段落标签，段落内容会前后都有空行

4.<h1></h1>标题标签，范围：1-6

5.<font></font>标签常用属性

　　color：颜色

　　size：改变字体大小，范围：1-7

　　face：设置字体

格式：<标签 属性的名称="属性的值">

6.<b></b>：加粗

7.<i></i>：斜体

8.<strong></strong>：加粗，带语义的标签

9.<em></em>：斜体，带语义的标签

10.img标签常用属性：

　　src：指定图片路径

　　　　./：代表的是当前路径

　　　　../：代表上一级路径

　　　　../../：代表上上一级路径

　　width：指定图片宽度

　　heigth：图片高度

　　alt：文件加载失败时的提示信息

11.ul标签是无序列表

　　内必须嵌套子标签<li>：列表项

　　属性type：circle-小圆圈，disc-小方块，默认小黑点square

12.ol标签是有序列表，展示1、2、3序列号

　　常用属性：

　　　　type：指定序号的类型，如：a

　　　　start：从几开始，必须得写数字

13.a超链接标签

　　常用的属性：

　　　　href：指定要跳转去的链接地址，需要加上http协议，如果访问的是本网站的html文件，可以直接写文件路径，="#"，井号是占位符，相当于一个锚

　　　　target：以什么方式打开

　　　　　　_self：默认打开方式，在当前窗口打开

　　　　　　_blank：新起一个标签页打开页面

　　　　　　值也可填充frame设置的name名称，这样的话，点击后跳转至此name名称对应的frame框架界面

14.table表格标签

　　常用属性：

　　　　border：指定边框，=1px

　　　　width：宽度，=100%，等于铺平网页宽度

　　　　height：高度

　　　　bgcolor：背景色

　　　　align：对齐方式，在table标签上写此属性，表格在网页页面居中（设置值为：center）

　　tr标签：行

　　　　align：对齐方式，在tr标签上写此属性，单元格中内容居中（设置值为：center）

　　td标签：列

　　　　合并单元格：

　　　　　　colspan：跨列操作，把合并的另外一个单元格删除

　　　　　　rowspan：跨行操作

　　　　　　background：设置背景图片

　　说明：顺序是table标签内嵌套tr标签，tr标签内再嵌套td标签

表格的嵌套：table标签中嵌套table标签

15.input标签

属性type（指定输入项的类型）的属性值：

　　text：文本输入框

　　password：密码输入框

　　file：文件上传按钮

　　radio：单选按钮，注意：选项为多个，需设置属性name的值相同，这样才会限制此一组中仅可选中一个

　　checkbox：复选框，可同时选择多个选项

　　submit：提交按钮，通常搭配属性value使用，设置按钮名称如：value="提交"

　　button：普通按钮

　　reset：重置按钮，清空文本框录入内容

　　hidden：隐藏域（在表单界面中不展示），主要是用来存放页面上一些ID信息（get请求方式，此参数不会展示在链接中）

　　date：日期选择框

　　datetime-local：日期+时间选择框

　　tel：在手机端会弹出纯数字的9宫格软键盘

　　number：限制文本输入框仅可输入数字，不可录入字母

属性name（在表单提交的时候，当作参数的名称）：表单提交时文本录入框显示在网页链接中的名字，如设置name="username"，则链接中会展示：username=123

属性id：给输入项取一个名字，以便于后期我们去找到它，并操作它

属性placeholder：文本录入框中默认的灰色提示信息

16.textarea：文本域，可以输入一段文本

　　属性：

　　　　cols：列宽

　　　　rows：行宽　　　　

17.select：下拉选择标签

　　option子标签：下拉选项

18.form表单标签：主要是用来向服务器提交数据

属性：

　　action：指定提交的地址，即页面跳转到哪里

　　method：

　　　　get 方式，默认提交方式，（会将参数拼接在链接的后面，有大小限制，4K）form表单提交的信息会拼接在网页链接的网址中，不安全

　　　　post 方式，form表单提交的参数信息，（会将参数封装在请求体中，没有大小限制====通过右键->点击检查：form中查看）不会在网页链接中显示

19.frameset框架标签

　　属性rows：拆分成几行，说明：最后的取值可以用*，表示占满剩余的百分比，eg：rows="15%,*"

　　属性cols：拆分成几列

　　frame：子标签

　　　　属性src：链接到的html地址

　　　　属性name：给个名称，此名称可设置为a超链接标签点击后跳转至的frame

说明：frameset框架标签存在，则body标签需删除，因为通过frame的src管理了多个html的body标签

 

day02-CSS&JS

CSS简单的入门

表格布局的缺陷：

　　1.嵌套层级太多，一旦出现嵌套顺序错乱，整个页面打不到预期效果

　　2.采用表格布局，页面不够灵活，动其中某一块，整个表格布局的结构全都要变

HTML的块标签：

　　div标签：默认占一行，自动换行

　　span标签：内容显示在同一行

CSS概述：

　　Cascading Style Sheets：层叠样式表

　　主要作用：

　　　　1.美化页面

　　　　2.将页面美化和HTML代码进行分离，提高代码的复用性

CSS的简单语法：

　　在一个style标签中，去编写CSS内容，最好将style标签写在header标签中

<style>
选择器{
    属性名称：属性的值；
    属性名称2:属性的值2;
}
</style>

CSS选择器：帮助我们找到我们要修饰的标签

　　元素选择器：　

元素的名称{
   属性名称：属性的值；
   属性名称：属性的值；
}

　　ID选择器：　　

以#开头  ID在整个页面中必须是唯一的 取div/span标签的id属性值
#ID的名称{
　　属性名称：属性的值；
　　属性名称：属性的值；
}

　　类选择器：　　

以.开头  取div/span标签的class属性值
.类的名称{
   属性名称：属性的值；
　　属性名称：属性的值；  
}

CSS的引入方式：

　　外部样式：通过link标签引入一个外部的css文件

　　内部样式：直接在style标签内编写CSS代码

　　行内样式：直接在标签中添加一个style属性，编写CSS样式

CSS浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间

　　float属性：

　　　　left

　　　　right

　　clear属性：清除浮动（可以添加一个空的div标签，指定style属性，设置clear）

　　　　both：两边都不允许浮动

　　　　left：左边不允许浮动

　　　　right：右边不允许浮动

流式布局

CSS选择器的优先级：　

　　按照选择器搜索精度来排序：　　行内样式》ID选择器〉类选择器》元素选择器

　　就近原则（即：当某个标签设置了class属性，名称定义了两个，则优先生效的是更靠近被修饰元素的那个css样式）

CSS中的其他选择器：

　　选择器分组：

　　　　选择器1，选择器2{属性的名称：属性的值}   ，以逗号隔开，eg：h1,h2,h3{color:red;}

　　属性选择器：

　　　　a[title] ：包含某个属性的

　　　　a[title='aaa']：指定属性等于某个具体值的

　　　　a[href][title]：包含两个属性的 

　　后代选择器：

　　　　爷爷选择器 孙子选择器（中间以空格分开 ），找出所有的后代

　　子元素选择器：

　　　　父亲选择器>儿子选择器，(中间以大于号隔开)，仅可找到直系儿子

　　伪类选择器：通常都是应用在a标签上===链接未点击时展示颜色，点击后展示颜色，鼠标悬浮展示颜色

CSS的盒子模型：万物皆盒子

内边距：控制的是盒子内容的距离

　　padding-top：

　　padding-right：

　　padding-bottom：

　　padding-left：

?

1 2 3 4

padding：10px；上下左右都是10px padding：10px 20px；上下是10px 左右是20px padding：10px 20px 30px； 上10px 右20px 下30px 左20px padding：10px 20px 30px 40px；上右下左，顺时针的方向

外边距：控制盒子与盒子之间的距离

　　margin-top：

　　margin-right：

　　margin-bottom：

　　margin-left：

CSS绝对定位：

　　position：absolute

　　top：控制距离顶部的位置

　　left：控制距离左边的位置

JavaScript概述

什么是JavaScript：一种直译式脚本语言

什么是脚本语言？

　　java源代码》编译成.class文件〉java虚拟机中才能执行

　　脚本语言：源码》解释执行

　　js由我们的浏览器来解释执行

HTML（超文本标记语言）：设计网页，决定了页面的框架

CSS（层叠样式表）：用来美化我们的页面，将美化和HTML代码进行分离

JS：脚本语言，由浏览器解释执行，弱类型语言（var i），提供用户的交互的

JS的组成：

ECMAScript：核心部分，定义js的语法规范

DOM：document Object Model 文档对象模型，主要是用来管理页面的

BOM：Browser Object Model 浏览器对象模型，前进、后退、页面刷新、地址栏、历史记录、屏幕宽高

JS的语法

变量弱类型：var i=true

区分大小写

语句结束之后的分号，可以有，也可以没有

写在script标签中 

JS的数据类型

基本类型

　　string

　　number

　　boolean

　　undefine

　　null

eg：alert(typeof i)==alert表示弹框，结果展示变量所属类型

引用类型

　　对象，内置对象

类型转换

　　js内部自动转换

JS的运算符和语句

运算符和java一样

　　"==="全等号：值和类型都必须相等

　　"=="值相等就可以了

语句和java一样

JS的输出

　　alert（）：直接弹框

　　document.write() 向页面输出

　　console.log() 向控制台输出

　　innerHTML：向页面输出，可设置标签属性，如字体颜色===可用来修改页面内容（文本替换）

　　innerText：向页面输出，纯文本不识别标签

　　获取页面元素：document.getElementById("Id的名称")

JS声明变量：

　　var 变量的名称=变量的值；

JS声明函数：

　　var 函数的名称=function(){

　　}

　　function函数的名称(){

　　}

JS的开发步骤

1.确定事件（注意：onsubmit事件比较特殊，需要一个返回，eg：onsubmit="return chechForm()"）

2.通常事件都会触发一个函数

3.函数里面通常都会去操作页面元素，做一些交互动作

说明：通过document.getElementById("Id的名称")获取到文本输入框input对象，再通过value获取到填写的文本内容值

var email=document.getElementById("email");

var uEmail=email.value;

正则表达式需要前后添加斜杠，eg：/正则表达式/===正则表达式对象.test(校验内容)，返回true或false

day03-JS

定时器

HTML DOM setInterval()方法

定义和用法

setInterval()方法可按照指定的周期（以毫米计）来调用函数或计算表达式。

setInterval()方法会不停的调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法：

setInterval(code,millisec)

code：要调用的函数或要执行的代码块

millisec：周期性执行或调用code之间的时间间隔，以毫秒计算

setTimeout()方法

用于在指定的毫秒数后调用函数或计算表达式

图片隐藏

var img = document.getElementById("img1");

img.style.display="none";

图片显示

img.style.display="block";

注册表单校验涉及的事件

onfocus：获得焦点事件

onblur：失去焦点事件

onkeyup：键盘按键弹起事件

补充：

文档加载完成的事件 onload事件

ondbclick：双击事件

鼠标移入：onmouseinter

鼠标移出：onmouseout

引入一个外部js文件

?

1	<script src="js文件的路径" type="text/javascript"/>

DOM的常见操作

DOM( Document Object Model ) 文档对象模型，提供了很多对标签增删改查的操作。

下边分享DOM中常见的增删改查操作：

常用方法:

1.获取节点：

document.getElementById(idName) //通过id号来获取元素，返回一个元素对象

document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组

document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有）

document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组

document.querySelector() //ES6标准，通过css选择器获取元素。返回匹配得元素

document.querySelectorAll() //ES6标准，通过css选择器获取元素，返回类数组集合

2.获取/设置元素的属性值：

element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值

element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

3.创建节点Node：

document.createElement("h3") //创建一个html元素，这里以创建h3元素为例

document.createTextNode(String); //创建一个文本节点；

document.createAttribute("class"); //创建一个属性节点，这里以创建class属性为例

4.增添节点：

element.appendChild(Node); //往element内部最后面添加一个节点，参数是节点类型

elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

5.删除节点：

element.removeChild(Node) //删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null

element.removeAttribute(new,old)

常用属性:

1.获取当前元素的父节点 ：

　　element.parentNode //返回当前元素的父节点对象

2.获取当前元素的子节点：

element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点

element.chilidNodes //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）

element.firstChild //返回当前元素的第一个子节点对象

element.firstElementChild //ie6，7，8 不兼容

element.lastChild //返回当前元素的最后一个子节点对象

element.lastElementChild //ie6，7，8 不兼容

3.获取当前元素的同级元素：

element.nextSibling //返回当前元素的下一个同级元素 没有就返回null

element.previousSibling //返回当前元素上一个同级元素 没有就返回null

4.获取当前元素的文本：

element.innerHTML //返回元素的所有文本，包括html代码

element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

5.获取当前节点的节点类型：

node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。

6.设置样式：

element.style.color=“#eea”; //设置元素的样式时使用style，这里以设置文字颜色为例。

select标签多行显示属性：

　　multiple="multiple" 允许多选

　　checked属性，值设置为checked，表示input标签的复选框已被选中

转译符号:& eg:&gt,大于号

修改行的颜色：

row.bgColor="red"

row.style.backgroundColor="black"

row.style.background="red"

"background-color:red"

"background:red"

day04-JQuery

JQuery概述

javaScript函数库

JQuery的作用：

1.写更少的代码，做更多的事情（write Less，Do more）

2.将js代码和HTML页面代码进行分离 

JQ的入门案例

JQ函数关于文档加载完成（onload）事件的三种写法：

JQuery(document).ready(function(){

　　alert("第一种写法");

});

$(document).ready(function(){

　　alert("第二种写法");

});

$(function(){

　　alert("第三种写法");

});

js加载完成的事件：

window.onload = function(){

　　alert("js写法");

}

JQ和JS对象之间的转换

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!DOCTYPE HTML> <html>         <head>               <meta charset="UTF-8">  　　　　　　　　　<!--引入JQ的js文件-->                <script>　　　　　　　　　　　　function changeJS(){　　　　　　　　　　　　　　var div = document.getElementById("div1");　　　　　　　　　　　　　　div.innerHTML = "JS成功修改了内容";　　　　　　　　　　　　　　//将JS对象转成JQ对象　　　　　　　　　　　　　　//$(div).html("转成JQ对象来修改内容");　　　　　　　　　　　　}  $(function(){//给按钮绑定事件 　　$("#btn2").click(function(){//找到div　　 　　$("#div1").html("JQ方式成功修改了内容");　　　　//将JQ对象转换成JS对象来用　　　　var div = $("#div1");　　　　var jsDiv = div.get(0);  //也可以   　　　　var jsDiv = div[0];　　});});                  </script>           </head>         <body>                 <input type="button" value="JS修改div内容" onclick="changeJS()"/>                   <input type="button" value="JQ方式修改div内容" id="btn2"/ > 　　　　　　　　　　<div id="div1">　　　　　　　　　　　　　　这里的内容要被JS/JQ代码修改掉　　　　　　　　　　</div>         </body> </html>

　

JQ的动画效果　

show()：显示

hide()：隐藏

slideUp：向下滑动（窗帘拉上），隐藏

slideDown：向上滑动（窗帘拉下），显示

fadeIn：淡入

fadeOut：淡出

animate: 自定义动画

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

JQ中根据ID查找元素

?

1 2 3 4 5

全都是根据选择器去找的<br>#ID{ }   .类名{ }   $("#ID的名称")

补充：link标签引入css样式文件

基本选择器

　　ID选择器：#ID的名称

　　类选择器：以.开头 .类名

　　元素选择器：标签的名称

　　通配符选择器：*

　　选择器分组：选择器1，选择器2

层级选择器

　　子元素选择器：选择器1>选择器2===找出所有儿子

　　后代选择器：选择器1 选择器2====找出所有儿孙

　　相邻兄弟选择器：选择器1+选择器2====找出紧挨着的一个弟弟

　　找出所有弟弟选择器：选择器1～选择器2

基本过滤器

说明：css() ：修改css样式

$("div:first").css("background-color","green");  //过滤出所有div中第一个元素

$("div:even").css("background-color","green");  //过滤出所有div中索引为偶数位的div

$("div:odd").css("background-color","green");  //过滤出所有div中索引为奇数位的div

$("div:gt(2)").css("background-color","green");  //过滤出所有div中找出索引大于2的

:last

:lt(index)

:eq(index)

属性过滤器

$("a[href]").css("background-color","green"); //过滤出包含属性href的所有a标签元素

$("a[href][title]").css("background-color","green"); //过滤出包含属性href和title的标签

$("a[href][title='tit1']").css("background-color","green"); //过滤出包含属性href和title，且title属性值等于tit1的标签

说明：红色字体也可写成^tit1（以tit1开头），tit1$(以tit1结尾)，tit1*（包含tit1）

表单过滤器

$(":input").css("background-color","green"); //注意，这里过滤出来的并非只有input标签元素，包含所有输入框的元素，如textarea

:text 找出type类型为text的

:password

说明：过滤器都是在选择器的基础上进行过滤的，通过冒号：过滤

表单对象属性

$("select option:selected").css("background-color","green"); //找出select标签中被选中的选项

：checked

JQ的开发步骤：

1.导入JQ相关的包

2.文档加载完成的事件（$(function(){});），页面初始化：绑定事件，启动定时器

3.确定事件，如：onclick

4.实现事件所要触发的函数

5.函数里面再去操作我们要操作的元素

JQ的表格全选和全不选

attr：操作一些自定义的属性 <img abc="123" />

prop:通常是用来操作元素固有属性的，建议大家使用prop来操作属性

prop()方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性，如<a>标签的href属性。具体语法示例如下。

?

1 2	$(selector).prop("属性名")             //获取属性值 $(selector).prop("属性", "属性值")      //设置属性值

　　下面我们通过代码演示prop()方法的使用。

?

1 2 3 4 5

<a href="http://localhost" title="主页"></a> <script>     console.log($("a").prop("href"));   //输出结果: http://localhost     $("a").prop("title", "首页");       //设置title的值为“首页" </script>

　　开发中，还会经常使用prop('属性')获取表单元素的checked值，示例代码如下。

?

1 2 3 4 5 6 7

<input type="checkbox" checked> <script>     //获取表单元素的checked值     $("input").change(function(){         console.log($(this).prop("checked"));       //复选框选中时，输出结果为true     }); </script>

　　上述代码中，第1行代码设置了input的type值为checkbox，表示复选框。第4行代码给input绑定了change事件，当表单元素状态发生变化时触发。如果复选框处于选中状态，则输出结果为true，否则输出false。

技巧：

　　网页上右键，选择检查，找到对应元素，然后，再在元素标签上右键，选择copy》selector：显示元素的选择器结果

JQ添加节点（文档操作）：

appendChild(JS)

1.append:添加子元素到末尾

2.appendTo:给自己找个爹，将自己添加到别人家里

3.prepend:在自己最前面添加子节点

4.after:在自己的后面添加一个兄弟

5.before:在自己的前面添加一个兄弟

6.empty：清空所有子节点

遍历函数：each（object,[callback]）

1.JQ对象调用遍历

$("数组对象").each(function(index,data))

?

1 2 3 4 5

$([上海市，深圳市，广州市，北京市]).each(function(i,n){ //function中第一个参数表示数组索引，第二个参数表示数组元素值   　　console.log(i+"===="+n);   })

2.JQ的函数调用

$.each(arr,function(index,data))

?

1 2 3 4 5

$.each([上海市，深圳市，广州市，北京市],function(i,n){ //each函数参数，each（object,[callback]）：第一个表示需要被遍历的数组或对象，第二个表示每个成员/元素执行的回调函数   　　console.log(i+"===="+n);   })

day05-BootStrap

trigger( event, [data] )

在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

triggerHandler( event, [data] )

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.
如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作:
trigger()会操作jQuery对象匹配的所有元素，而triggerHandler()只会影响匹配到的第一个元素。

is（）

JSON格式

　　JSON对象　

?

1 2 3 4

{     key1:value1,     key2:value2 }

　　JSON数组　

?

1	[{key:value},{key:value},{key:value}]

 

ajax请求：

$.get(url,function(data){})　

bootstrap概述

1.轻量级开发响应式页面的前端框架

2.全局CSS、组件、JS插件

3.栅格系统：将页面的宽度分为12个等分

　　　   col-lg-数字：在超宽屏幕上使用

　　　　col-md-数字：在中等屏幕上，PC电脑

　　　　col-sm-数字：在平板电脑上

　　　　col-xs-数字：在手机上

注意：jquery文件的引入，一定要在bootstrap核心javascript文件之前引入。

什么是bootstrap？

　　是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

什么是响应式页面？

　　适应不同的分辨率显示不同的样式，提高用户的体验

全局CSS样式：css样式

栅格系统

　　　　将屏幕划分成12个格子/12列

　　　　class='row' 当前是行

　　　　行里面放的是列 col-屏幕分辨率-数字（每一种分辨率后的数字总和必须是等于12，如果超过12，另起一行）

　　　　col-lg-数字：在超宽屏幕上使用

　　　　col-md-数字：在中等屏幕上，PC电脑

　　　　col-sm-数字：在平板电脑上

　　　　col-xs-数字：在手机上

组件：导航条、进度条、字体

javascript插件：轮播图

总结：

HTML（超文本标记语言）：设计网页，决定了页面的框架

CSS（层叠样式表）：用来美化我们的页面，将美化和HTML代码进行分离

JS：脚本语言，由浏览器解释执行，弱类型语言（var i），提供用户的交互的

jquery：javascript函数库，进一步的封装

　　选择器：

　　　　ID选择器

　　　　类选择器

　　　　元素选择器

　　　　通配符选择器

　　　　选择器分组

　　层级选择器

　　　　后代选择器

　　　　子元素选择器

　　　　相邻兄弟选择器

　　　　兄弟选择器：找出所有的弟弟

　　属性选择器：

　　　　选择器[属性名称="属性值"]

　　表单选择器：

　　　　：input

　　　　：text

　　　　：password

右键》copy〉selector：可拷贝选择器路径

子元素过滤器：nth-child(数字)

　　基本过滤器：

　　　　:first

　　　　:last

　　　　:even

　　　　:odd

　　　　:gt

　　　　:lt

　　　　:eq

　　表单对象属性：

　　　　：selected

　　　　：checked