前端基础知识
一 前端
(1) Css html
HTML 骨架
css 化妆，美颜
Js 1浓妆 2动态页面
Jq 封装的框架
行级 <sapn> <font> <i> <u> <strong> <b> <em>
块级 <h1>-<h6>
<a>跳转网页，锚点
<thead>表头
<tfoot>表角
<ol>有序列表
<ul>无序列表
****使用表单控件一定要写在表单中<form> 表单控件必须在有name属性前提下才可以提交
--表单相关控件 <form>控件</form>
表单提交的时候，提交的是每一个控件的value值
表单的input标签控件
<input>
type中确认控制类型
value值，name值
1文本框<input type=”test”/>
Placeholder="请输入用户名"
2密码文本框<input type = “password”/> 密码隐藏
3单选按钮 <input type=”radio”/> 单选必须name为同一个值才会产生单选逻辑
单选和多选需要设置value属性才可以提交数据
4多选按钮<input type=”checkbox”/>多选框name为同一个值
5提交按钮<input type=”submit”/>
6普通按钮<input type = “button” value=“普通按钮”/>
7重置按钮<input type = “reset”>
二 非input标签控件
- 下拉列表
<select>
<option></ontion>
</select>
多行文本域 <textarea></texterea>
----在表单当中设置默认值
1一般的控件设置默认值，就是设置value属性
2文本框出现 提示效果，placeholder属性
3单选框时值默认值checked,如果同一组中多个单选框都有checked属性，那么最后一次会被默认选中
4多选框也是checked
demo1.html?username=&password=&sex=男&aihao=吃&aihao=喝&native+place=---无---
-------css样式
1内联样式-是在标签中编写的样式，极度自私，但是优先级最高，是在标签中写入
<h1 style=”color:red”></h1>
2内部样式-在head标签中编写，可以写多个，在本页面中可以重用
<style type=”text/css”>
H1{
color:blue
}
</style>
3外部样式-创建一个.css的文件，在这个文件中编写，可以被广泛重用
<link rel=”stylesheet” type=”text/css” href=”demoFIle.css”>
----css选的选择器
选择器的作用是为了选出当前页面中符合要求的一个或者多个标签，设置其样式
1标签选择器 选出当前页面中标签名称符合的所有标签
P{
Color:red;
}
2 id选择器 选出当前页面id符合要求的唯一一个标签
3 类选择器 常用首先在标签中定义好class名称，类选择器会自动取匹配这些符合要求的标签
4派生选择器
-后代选择器 不管父容器中，子标签还是孙子标签，都会被找到
父标签[空格] 后代标签{}
-子选择器 只管内部第一层（儿子层），其他后代不管
5 选择器组
/p1,a,ul,#id{
}
--------css常用属性
一个div宽度由 左外边剧+左边框+左内边框+内容取于+右内边剧+右边框+
1布局相关属性
Width 宽度 px 100%
2背景相关属性
Background-color:背景颜色
Background-color:背景图片<img src=….>
Background-repeat:背景平铺方式
### 关于平铺
1background-repeat:repeat;
2background-repeat:
3background-repeat:repeat-x横向平铺
4background-repeat:repeat-y纵向平铺
Background-size:背景图片大小
Background-position:背景图片定位
Background-position:center|top|bottom|left|right
Background-position:right left;
Background-position:50px 100px x轴偏移量50px y轴偏移量100px
Background-position:center center;
css中颜色
1）.类似于red这种英文单词的设置
2）.使用rgb的方式设置#红红绿绿蓝蓝（16进制）#FFFFFF
3）.#123#fff--→#112233 #ffffff #069
4) .rgb(255,255,255);
5).rgba(0,0,0,0.4) a代表透明度 0-1之间
--------3字体属性 font
font-size 单位问题 px cm rem 1.5em--,默认字体的5倍大小
font-family: 微软雅黑
font-weight: 字体的粗细 pt 磅
font-style: 字体样式 normal.<i>italic 斜体
text-decoration:文本装饰 下划线等
line-height:行高如果与父元素高度一样，实现的是垂直剧中的效果
-------4文本属性
color:文本颜色
text-align:文本对奇
----5边框属性
border-top:20px solid red;***********边框颜色
border:10px solid black;
border:width:px
border-color;
border-style;
border-bottom-color
设置圆角边框
border-radius:3px;
virder-radius:100px/50px;
如果
1 布局相关属性
width 宽度 1000px 100%
height 高度 %100
margin-top上
margin-right右
margin-bottom下
margin-left左
padding内边剧******
padding: 上下px 左右px;代表上下px 左右px
margin外边剧******
margin: 0px auto;代表左右剧中
margin: auto 0px;代表上下垂直剧中
margin: px px;代表上下px 左右px
浏览器 缺省设置
外部样式表或者内部样式表
-就近优先
内联样式
溢出属性overflow分三个属性
1 visible 溢出部分可见
2 hidden 溢出部分隐藏
3 scroll 溢出部分显示滚动条
6其他复杂属性
******************************************************
1)display--控制元素的显示方式
display:inline按照行级标签进行显示
display:block 按照块级
display:none 隐藏标签，不显示
行级标签一行中可以有多个，从左到右排列
块级标签一行一个 只有块级标签才能设置宽高
2)float浮动:
面试回答：*****浮动是让元素脱离普通文档流
浮动是为了解决块级元素在同一行排列的方法之一
float:left;元素浮动起来往左放
float:righf;往右放
一旦元素设置了浮动属性，当前这个元素就会脱离普通流，在普通流上面一层进行渲染，那么由于这个元素浮动起来，它原来的位置会被其他元素占用
clear:both 清除浮动
3)定位position（定义元素在页面当中的位置（任何位置））
Z-index （z轴是层的概念）
设置方式:
position:absolute绝对定位
position:relative相对定位
position:fixed相对浏览器窗口定位
如果设置一个div的position为absolute那么这个div会脱离当前文本流，称为一个单独的层
可以使用z-index属性设置层的编号，编号越大，离默认文本流越远，如果两个不同层的div在同
一个位置，上层元素会把下层元素覆盖
top:以上边框到上边的距离
left:以左边框到左边的距离
right:以右边框到右边的距离
默认的情况下，使用position:absolute需要寻找参照物的定位点
找法：先找当前父级标签，看看有没有position
/1 如果父级由position那么就以父级为参照物去做移动
/2 如果父级没有position那么就继续向上寻找，直到找到第一个带position的祖级标签
/3 如果所有祖级标记都没有position，那么以body为参照去定位.
/4 position:relative不是为了改变自己的位置，而是为了告诉子孙，如果你定位要以我为基准
/5 父级中存在position:absolute,子标签在定位的时候会跟随父级标签的位移，一起移动
****相对浏览器窗口定位
position:fixed
/**********************************************************/
display: block;/* 把行级变成块级 */
/***********************************************//////////
图片慢慢的放大的效果
img:hover{
cursor: pointer;
-webkit-transition: 5s -webkit-transform;
-moz-transition: 1s -moz-transform;
}
img:hover{
-webkit-transform: scale(1.1,1.1);
-moz-transition: 5s -moz-transform;
}
(2) javaScript
什么是javascript
是一款在浏览器端运行的弱类型脚本语言
javascript是嵌入html中，在浏览器中的脚本语言
具有类似java语言和c语言的语法
网页的编程技术，用来向html页面提交数据交互行为，直接嵌入在html页面中
由浏览器解释执行代码，不进行预编译。（不报错）
javascript的特点是
1-可以使用任何的文本编译工具编写
2-右浏览器内置的JavaScript引擎执行代码
3-它是解释执行：事先不编译，逐行执行***********
基于对象：内置大量现成的对象
javascript是干什么用的
1-客户端数据计算
2-验证客户端表单合法性
3-浏览器事件的触发
4-网页特效
5-服务器的异步数据提交 js 中 ajax的技术（单独分出来的一种技术）
*************
js的组成部分分为三点：
1-js的语法部分（ECMA Script 规范）名词需要背
2-DOM 文档对象模型 document object model
3-BOM 浏览器对象模型 Browser object model
---内联
在标签内的事件中，直接编写js代码
特点为：代码不可重用
<!-- 1.内联使用js,不可重用 -->
<!-- 2.input标签是单标签,p双标签，对内容处理方法不同 -->
<input type="button" vlaue="按钮4" onclick="f1()";>
<p>我是一个p标签</p>
----嵌入式
在<script>标签中写js，该标签可以放到html的任何位置，但是我们通常放在<head>（头部中);
如果在<script>中不适用方法封装js代码，那么在页面被渲染之前，先执行完js .
---练习一:把上述情况，看看<scrtipt>在其他位置的效果
<script type="text/javascript">
/* 在渲染控件之前，先弹窗 */
/* 按调弹窗以后，才开始渲染 */
/* alert是阻塞式的方法 */
/* alert("传奇老师");*/
/* 方法名 */
function f1(){ 1function是关键字，用来声明函数方法
alert("传奇老师"); 2f1是方法名字，小括号内可以声明参数
} 3大括号是方法体
4js中的方法都是公共的，不需要修饰符
5js中的方法不需要声明返回值
----文件调用式
<script src="demo1.js"></script>
1在单独的.js文件中写js代码，需要引入到html中才能使用
2这个引用是一个双标签，哪怕没有内容也得写全
3这个标签不能在引用外部js的同时，又写js代码
关于注释
1<script></script>属于js地盘，可以使用// /* */
2出了<script></script>标签，使用<!-- -->
-- js中的数据类型*************************************************
Number类型
1不区分整型和浮点型
2所有数字都采用64位浮点格式存储，这种格式类似于double的格式
3Number默认直接量是10进制的，16进制前面加0x，8进制前面加0
4浮点数直接量，使用小数点3.4等等
5 科学记数法 4.3e23=4.3*（10^23）
### String类型
1.由Unicode字符/数字/标点符号等组成的字符序列
2.直接量' '或者""括起来
3.js中没有char类型 var c'a';是一个长度的String
4.特殊字符需要转移 \n \' \""
5.双引号套单引号的时候，不需要转义
### boolean (true false)
1. boolean可以参与数学运算
js引擎对boolean类型右解释规则
1 真true:非零的数字.非空字符串.非空对象.
2 假false:数字0 空串 空对象 NaN（nat a number不是一个数） null undefind
3 boolean参与运算，true=1，false=0，
js中所有的数据类型都是用var声明
/*******************************/
特殊类型：null undefined-未定义
内置对象：
字符串+布尔型 = 字符串true或false
布尔值+布尔值=布尔值转为换数值1或0
全等：=== 类型相同 数值相同
不全等：！==
##逻辑运算符
! && || 短路(& |)
##流程控制 if else
1.条件表达式：js中可以使用任何数据做条件
1) var a=hello();
可以写if(a){...}
2)在js中关于条件语句true和false的判定
空值都是false
null都是false
0都是false
未定义(undefined)是false
空字符串是false
NaN是false
----------------*************************---------------------
课堂案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function pf() {
//1获取文本框对象
var input= document.getElementById("num");
console.log(input);
//获取文本框的值
var n=input.value;
console.log(n);
//3获取span
var span=document.getElementById("result");
//4判断是否位数字并打印结果
if (isNaN(n)) {//true不是数字
span.innerHTML="请输入一个数字";
} else { //false 是数字
span.innerHTML=n*n;
}
}
document.getElementsByTagName//通过标签名字获取对象
</script>
</head>
<body>
<input type="text" id="num" placeholder="请输入数字" >
<input type="button" onclick="pf();" value="平方">
<span id="result" >计算的结果</span>
</body>
</html>
## js调式技巧
1.看错误信息，console中，调你会的单词
2.打桩，观察程序执行过程，看每一步的变量是否正确。
3.排除法+二分法
--每次删除一半代码留一半，判断哪一部半当中存在错误，这种方法是来定位语法错误。
//////////////////////////////////////////////////////////////////////////////
null
null在程序中代表“无值” 或者“无对象”
可以通过给一个变量赋值 null 来清除变量的内容
undefined
声明流变量但从未赋值
对象属性不存在
## 内置对象
- String对象
- Number对象
- Boolean对象
- Array对象
- 与java中数组和arraylist很相似
- js中的array对象可以同时存储不同数据类型的数据
- js中的Array都是object类型
- Math对象
- Date对象
- RegExp对象
- Function对象
<!-- 1 创建正则对象 -->
//1.1 new RegExp( "正则表达式","模式");这里需要转义
// var reg= new RegExp("\\d","g");
//1.2 var reg=/正则表达式/模式 g全局模式从头找到尾
// var reg2=/\d/g
var str="you can you up,no can no bi bi";
var reg=/no/g;
//1返回一个字符串符合正则表达式的部分
console.log(reg.exec(str));
//2判断字符串中有没有符合表达正则表达式的字符串
console.log(reg.test(str));
//3字符串支持正则表达式对象的方法
//3.1 str.replace(reg,"");将字符串中 包含正则reg里的字符串替换成 给定的空串
//3.2 str.match(reg); 从str字符串找出和reg正则表达式对象匹配的子串
//3.3 str.search(reg); 从str找到符合reg正则表达式对象的第一个子串的下标(索引);
##关于js方法的说明
1 js声明方法，提供参数列表对象argunments;
2 我们可以使用arguments获取函数中参数列表
3 arguments数组封装了调用这传递过来的所有参数
//通过function关键字声明
//浏览器加载网页到此处时，并没有调用此对象，仅仅时创建对象而已
function add2() {
var sum=0;
if(arguments.length>0){
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
}
return sum;
}
console.log(add2(1,2,3,4,5,6));//一般是在点击按钮时调用，也可以使用其他时间-
或者在页面加载时直接调用
-*-*-*-*-*总结-*-*-*-*-*-*
1-js函数没有重载，多个重名的函数，会被最后一个覆盖
2-在js调用函数的过程中，只检查函数名，不检查参数列表，如果参数列表匹配，则直接使用，同时不管参数列表是否匹配，都可以使用arguments访问传递过来的参数列表
(3)DOM理论解释
--一.DOM理论解释
1 浏览器获得网页后需要将其解析成对象
2 以后向读写网页内容只需要读写对象即可
3 这套对象具有树型结构,称之为DOM树
4 树结构中每级对象称之为节点，：文本节点3，元素节点1，注释节点8，属性节点2 文档节点9等等
5 节点具有不同的分类
就是对每一个节点的 ****增删改查
总结：学习DOM就是学习DOM的结构以及各种节点上的API
DOM做两件事
-找到目标节点
-对这个节点增删改查
--二 元素节点的内容
1读写节点的内容--双标签中间的文本角内容，任何的双标签都由内容
2对于双标签使用两个方法： innerHTML，innerText
3读写节点的值：
只有表单控件中的数据叫做值：input,select,textarea
1. window
- alert();
- confirm();
- prompt();
2. 定时器
- 周期性定时器
- var id=window.setInterval();
- window.clearInterval(id);
- 一次性定时器,延迟,超时
- var id=window.setTimeout();
- window.clearTimeout(id);
3. history 封装浏览器历史记录
- back()
- forward()
- go(1) -1
4. location 封装浏览器地址
- location.href="......"
5. screen 封装屏幕信息
- screen.width
- screen.height
- screen.availwidth
- screen.availheight
6. navigator 封装浏览器帮助信息
- navigator.userAgent
7. document DOM
- 1.找到目标节点
- 2.对这个节点做增删改查
#### 读写节点属性
1. 通过方法读写节点属性(*)
- 对象.setAttribute(属性名)
- 对象.getAttribute(属性名)
- 对象.removeAttribute(属性名)
2. 通过属性名获取节点属性(*) a1.href
## 查询节点
1 根据id查询节点
2 根据标签名称查询节点
3 根据层次查询节点
4 根据name查询节点
查找节点的方法：
.parentNode;通过子类找到父类，返回值是父类对象
.childNodes;通过父类找到所有子类，返回值是数组
var new_li= document.createElement("li");//创建对象
包含为本节点
- childNodex,包含文本节点
1 。读写
-nodeName/nodeType
-innerHTML/innerText
-value
-getAttrbute/setAttribute
-节点对象.className/.id/.style.color
2 .增加和删除
-createElement
-parent.appendChild(字节点对象)//追加子节点
-parent.insertBefor(新字节点对象，旧子节点对象)；//在旧子节点值前
-parent.removeChild(子节点对象)//删除
-子节点对象.parentNode.removeChild(子节点对象)
3 .查询
-getElementById();通过id名
-.....ByTagName();通过标签名字
-......ByName(); 单选框
-parentNode/childNodes 找到自己的父亲/孩子
###鼠标事件
onclick: 绑定鼠标点击
ondbclick: 双击事件
onmousedown：鼠标点下
onmouseup： 鼠标抬起
onmouseover：鼠标悬停
onmouseout: 鼠标移除
###键盘事件
onkeyup 键盘上
onkeydown 键盘下
#状态事件
onload 页面加载的时候触发
onchange 值改变的时候触发
pmfpcus 获得焦点的时候触发
onblur 失去焦点的时候触发
onsubmit 提交的时候触发
##event对象
1.系统自带的对象，任何一个事件触发之后都会产生一个event的对象
2.event对象记录了事件发生时，鼠标的位置，键盘的按键状态，触发对象的信息等
##事件处理机制
当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理
onclick="event.cancelBubble=true;alert('button');"//取消事件冒泡
onclick="event.stopPropagation()"
##项目技术点填坑
给多个同标签控件，循环绑定事件
给多个同标签控件，循环绑定事件,事件触发时改变的是其他控件数据，
前提，要求有事件的控件和改变的控件是一一对应的关系
###容易犯错的代码总结
1 方法的事件的动态绑定,方法后面不能有(),如果添加了小括号，1动态绑定失败，2有小括号，方法执行一次
2 子节点元素个数的计算
-getElementsByTagName(标签名)，都是元素节点，不包含文本节点的。
-childNodes,方法包含文本节点，包含文本节点（回车空格）
(4)jQuery
jQuery是一个JavaScript
# jQuery AJAX - ajax()
在使用jQuery时，通过ajax()函数可以设置AJAX请求过程中所有的可设置项！
使用ajax()的基本语法是：
$.ajax({配置});
以上语法中，“配置”及左右两侧的{ }整体表现为一个JSON对象格式。
在“配置”中，通常会设置的属性有：
url：请求的路径
例如：
$.ajax({
"url":"getCities.do",
"success":function(obj) {
}
});
还会设置的属性有：
type：请求的类型（请求方式），取值为"GET"或"POST"
data：请求的参数，参数值可以是字符串格式的，也可以是JSON对象格式的
dataType：响应结果的数据的类型，常用的取值有"text"、"json"，当取值为"text"时，后续success属性对应的处理函数中的参数将是字符串类型的，当取值为"json"时，后续success属性对应的处理函数中的参数将是JSON对象
success：成功得到响应结果时的处理函数，即该属性的值是某个函数，该函数仅会在成功得到响应结果后被调用，所以，在函数内部，无须再判断状态为4或响应码为200，并且，在编写处理函数时，请为该函数添加参数，参数名称可自行定义，参数将是成功得到响应结果时的响应结果，类似于xmlhttp.responseText
在配置以上属性时，不区分先后顺序，即先配置哪个后配置哪个，并没有要求！
除此以外，ajax()函数还可以配置许多属性，如有需要，请参考相关文档。
dom数组 和 jq方法 才被称为jq对象
1.jQuery对象本质就是dom数组，和操作数组的方法
2.jQuery方法只能用jQuery对象调用
3.jQuery转换成Dom对象 obj[index]
4.Dom转换成jQuery对象 $(dom)
###jQuery选择器
jQuery选择器准确的选取你希望找到元素
jQuery选择器允许使用标签，属性名，内容等对元素进行查找
1 读写
nodeName,nodeType,innerHTML,innerText,value,getAttribute()
2查询
getElementById
getELementsByTagName
getElementsByClassName
3增删
1创建一个节点对象
2 把这个对象刮刀dom树上
3语法根据不同对象有两套
3.1 父级节点末尾 .append(new node)
3.2 兄弟节点上边.before(new node)
3.3兄弟节点下边.after(new node);
3.4父级节点开头.prepend(new node);
createElement();
insertBefore();
