前端知识
前端知识
一、HTML
1、中文乱码问题
中文乱码问题 ，可以在浏览器上设置编码方式为GB2312 或者在html的最前面加上编码设置
二、CSS教程
1、语法： selector {property: value} 即 选择器{属性:值}
2、注释： /* /
3、内边距： padding指的是元素里的内容与边框之间的距离
4、外边距： margin指的是元素边框和元素边框之间的距离
5、超链状态：
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
6、隐藏：display:none; visibility:hidden;
三、JavaScript
1、document是javascript的内置对象，代表浏览器的文档部分
2、
3、注释 // / */
4、调试方法： alert
5、BOM（浏览器对象模型）
(1)Window：一旦页面加载，就会自动创建window对象
(2)Navigator：浏览器对象，提供浏览器相关的信息
(3)Screen：表示用户的屏幕相关信息
(4)History用于记录访问历史 history.back()
(5)Location： 地址栏 reload刷新/跳转（“/”或.assign(“/”))
6、弹出框： alert警告框 / confirm确认框 / prompt输入框
7、计时器： setTimeout只执行一次 setInterval不停地重复执行
clearInterval终止重复执行
四、HTML DOM
1、节点概念
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路
2、节点：整个文档、元素、元素属性、注释
attributes获取属性节点、childNodes获取内容节点
3、获取节点
(1)document.getElementById—通过id获取元素节点
(2)getElementsByTagName—通过标签名称获取元素节点
(3)getElementsByClassName—通过类名获取元素节点
(4)getElementsByName—通过表单元素的name获取元素节点
4、节点属性
(1)nodeName—节点名称
(2)nodeValue—节点值
(3)nodeType—节点类型
(4)innerHTML—元素的文本内容
5、事件
(1)Onfocus/onblur —焦点事件
(2)Onmousedown/onmouseup/onmouseup/onmouseout—鼠标事件
(3)Onkeydown/onkeypress/onkeyup—键盘事件
(4)Onclick/ondbclick—点击事件
(5)Onchange—变化事件
(6)Onsubmit—提交事件
(7)Onload—加载事件
(8)Return false—阻止事件的发生
6、节点操作
(1)创建节点：
createElement-----创建元素节点
createTextNode----创建文本节点
createAttribute-----创建属性节点
(2)删除节点：
removeChild----删除元素节点
removeAttribute----删除属性节点
removeChild----删除文本节点
(3)替换节点： replaceChild
(4)插入节点：
appendChild----追加节点
insertBefore----在前方插入节点
五、JSON
1、JSON数组
(1)JSON JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式
(2)JSON对象由 名称/值对组成 名称和值之间用冒号:隔开 ,名称必须用双引号" 包含起来
2、对象转换
(1)JSON对象和JavaScript对象
JavaScript对象 分内置对象(Number,String,Array,Date,Math)和自定义对象 （含JSON）
(2)字符串转成JSON对象
eval转换或者$.parseJSON
(3)JSON对象转换成字符串
JSON.stringify转换JSON到字符串
六、Ajax(通过AJAX Asynchronous JAvaScript and XML 实现异步刷新)
1、AJAX请求
(1)浏览器
创建XMLHttpRequest
设置响应函数
设置访问页面
执行访问
(2)服务器
调用响应函数
判断是否响应成功
获取相应文本
显示相应文本
2、创建XHR
(1)创建XHR对象 XMLHttpRequest
(2)XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
(3)AJAX就是通过它做到无刷新效果的
3、设置响应函数
(1)XHR对象：可与服务器进行交互
(2)服务器响应回来，通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
4、设置并发出请求
(1)xmlhttp.open(“GET”,url,true)----线程
(2)xmlhttp.send(null)----实际访问
5、处理响应信息
(1)在checkResult 函数中处理响应
function checkResult(){
if (xmlhttp.readyState4 && xmlhttp.status200)
document.getElementById(‘checkResult’).innerHTML=xmlhttp.responseText;
}
(2)xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById(‘checkResult’).innerHTML 设置span的内容为服务端传递回来的文本
七、JQuery
1、常见方法
Val—取值 html—元素 text—获取元素内容
2、CSS
(1)addClass----增加class
(2)removeClass----删除class
(3)toggleClass—切换class
3、属性
(1)attr ---- 获取
(2)Attr(属性，值)----修改
(3)removeAttr—删除
4、效果
(1)show—显示 hide—隐藏 toggle—切换
(2)slideUp—向上滑动 slideDown—向下滑动 slideToggle—滑动切换
(3)fadeIn—淡入 fadeOut—淡出 fadeToggle–淡入淡出切换 fadeTo—指定淡入程度
(4)Animate–自定义动画效果 callback—回调函数
5、事件
(1)加载 $(document).ready() / .ajax()—提交AJAX请求
(2).post—使用post方式提交ajax
(4)load()—最简单的调用ajax的方式
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选
(5)serialize()—格式化form下的输入数据
7、数组操作
(1) $.each()—遍历
(2) $.unique()—去除重复
(3) $.inArray()—返回元素在数组中的位置 ，如果不存在返回-1
8、JSON
(1) () 把DOM对象转为JQuery对象
八、BootStrap
1、使用方法
(1)
bootstrap用到了html5的特性，为了正常使用，需要在最开头加上
(2)Jar包： 首先是JQuery，然后是Bootstrap css，最后是Bootstrap js
(3)通过套用bootstrap css中定义的class即可
九、Vue.js
1、简介
(1)提供数据，以及数据要绑定到的元素的id
(2)把一个 json对象的数据，显示到一个元素上去
(3)库：vue.min.js
2、使用
(1)jar包：vue.min.js
(2)创建一个Vue对象
new Vue({
el: ‘#div1’,data: { message: gareen }})
(3)读取数据： {{gareen.name}}
