前端基础知识汇总

CSS：
@charset "utf-8";


body,ul,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,iput{margin:0;padding:0;}


body{font-size:12px;}


img{border:none;}


li{list-style:none;}


input,select,textarea{outline:none;}


textarea{resize:none;}


a{text-decoration:none;}


js：
JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，
所谓继承关系不过是把一个对象的原型指向另一个对象而已


原型：
xiaoming ----> Student.prototype ----> Object.prototype ----> null
子类对象共享函数：
function Student(name) {
this.name = name;
}


Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
};
浏览器对象：
window：innerWidth和innerHeight outerWidth和outerHeight
navigator对象表示浏览器的信息
screen对象表示屏幕的信息
location对象表示当前页面的URL信息
document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
document对象还有一个cookie属性，可以获取当前页面的Cookie，用户的登录信息通常也存在Cookie中
为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly
history对象保存了浏览器的历史记录


更新DOM：
document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()
使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便
插入DOM：
innerHTML会直接替换掉原来的所有子节
appendChild，把一个子节点添加到父节点的最后一个子节点
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
把子节点插入到指定的位置，可以使用parentElement.insertBefore(newElement, referenceElement)

操作表单：


jquery：
选择器：
基本选择器：
ID/tag/class/属性var email = $('[name=email]')/组合var emailInput = $('input[name=email]')/多项选择器$('p.red,p.green')
层级选择器： 
$('ancestor descendant')  $('ul.lang li.lang-javascript')
子选择器：
$('ul.lang>li.lang-javascript');  直属子节点
过滤器：通常附加在选择器上，帮助我们更精确地定位元素
$('ul.lang li:first-child'); 
表单相关：表单特有选择器  :input  :file :checkbox :radio :focus :checked
var radio = $('#test-radio');
radio.is(':checked'); // true
查找和过滤：
拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤
find parent next prev filter map
first()、last()和slice()方法可以返回一个新的jQuery对象


操作DOM：
修改Text和HTML：无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作
修改CSS：jQuery对象的css('name', 'value')方法
修改class：div.addClass('highlight');div.removeClass('highlight')；div.hasClass('highlight');
显示和隐藏DOM： jQuery直接提供show()和hide()方法
获取DOM信息：width() height()
attr()和removeAttr()方法用于操作DOM节点的属性  prop//true false
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性
input = $('#test-input'),
input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
事件：
格式：selector.event(funtion(){})  //有些事件需要event参数，如mousemove和keypress
$(function () {...})的形式，牢记这是document对象的ready事件处理函
一个已被绑定的事件可以解除绑定，通过off('click', function) //不能匿名函数
selectAll.on('change',function(){
    if(selectAll.is(':checked')){
        langs.prop('checked',true);   //attr不能用true/false设置
        selectAllLabel.hide();
        deselectAllLabel.show();        
    }
    else{
        langs.prop('checked',false);
        deselectAllLabel.hide();
        selectAllLabel.show();        
    }
})
动画：以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点,参数类似
show / hide   div.hide(3000); // 在3秒钟内逐渐消失   div.show('slow'); // 在0.6秒钟内逐渐显示
slideUp / slideDown
fadeIn / fadeOut
自定义动画：animate()，它可以实现任意动画效果，
我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS直到达到我们设定的值：
var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值
animate()还可以再传入一个函数，当动画结束时，该函数将被调用
selector.div({css}, time, callback())

Ajax: $.ajax(url, settings)  //settings为可选对象  
$.get(url, settings)   $.post(url, settings)   $.getJSON(url, settings)
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
ajaxLog('请求完成: 无论成功或失败都会调用');
});
jquery插件：
给$.fn绑定函数，实现插件的代码逻辑；
插件函数最后要return this;以支持链式调用；
插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
用户在调用时可传入设定值以便覆盖默认值。
错误处理：try ... catch ... finall，异步错误无法捕获，当前未执行


underscore则提供了一套完善的函数式编程的接口
jQuery在加载时，会把自身绑定到唯一的全局变量$上，underscore与其类似，会把自身绑定到唯一的全局变量_上


node.js
node --use_strict calc.js
模块：一个.js文件就称之为一个模块（module）
规范：一个模块想要对外暴露变量（函数也是变量），可以用module.exports = variable;
一个模块要引用其他模块暴露的变量，用var ref = require('module_name')  //module_name为路径
基本模块：
global process


HTML：
&nbsp; <hr /> <br /> <address> </address> <code>(多行<pre>)
表格：table、tbody、tr、th、td  summary表格简介  caption表格标题
链接：<a href="目标网址" target="_blank">click here!</a>  新的标签页打开
<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com & subject=主题 body=邮件内容">发送</a>
a或者img中 title，鼠标滑过时的提示信息


表单：
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>


所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 
标签之间（否则用户输入的信息可提交不到服务器上哦！
type： 
text：文本框  password：密码框  raido：单选按钮  checkbox：复选框 
file：文件选择框  submit：提交按钮  reset 重置按钮
多行文本：
<textarea  rows="行数" cols="列数">文本</textarea>


单选复选
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
同一组的单选按钮，name 取值一定要一致，checkbox不需要一致
下拉列表：
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>


在<select>标签中设置multiple="multiple"属性，就可以实现多选功能




CSS：
内联：<span style="color:red;font-size:10px;" >text</span>


嵌入：<style type="text/css">span{color:red;font-size:10px;}</style>


外部：<link href="style.css" rel="stylesheet" type="text/css">  link单标签


内联式适用情况:局部特殊化


嵌入式适用情况:统一标签样式格式


外联式适用情况:方便代码重用和管理


id选择器只能有一个，类选择器可以使用多次，可以多个一起使用


>作用于元素的第一代后代，空格作用于元素的所有后代
伪类选择器：a:hover{color:red;}
一个标签被多个样式匹配，根据权值进行判断，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，
处于最后面的css样式会被应用
最高权限：!important要写在分号的前面  p{color:red!important;}


粗体：font-weight:bold
斜体：p{font-style:italic;}
下划线：a{text-decoration:underline;}
删除线.oldPrice{text-decoration:line-through;}
段落缩进：p{text-indent:2em;}
行间距：p{line-height:2em;}
字母间距：letter-spacing:50px;  单词间距：word-spacing:50px;
对齐方式：text-align:center


盒模型：
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>


a{display:block;} 设置display:block就是将元素显示为块级元素（每个块级元素都从新的一行开始，并且其后的元素也另起一行）
 div{display:inline;} 转换为内联元素，同一行
 display:inline-block  内联块状元素， 和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置
 边框：
 div{border-bottom:1px solid red;}
 填充margin：
 div{padding:20px 10px 15px 30px;}  上、右、下、左(顺时针)
 便捷：
 div{margin:20px 10px 15px 30px;}