遗漏知识点

作者: _Enco_ | 来源:发表于2017-08-21 11:10 被阅读0次

input

把input的外边框放在内部（这样input外边框不占用多余像素）标准盒子类型转ie盒子类型

box-sizing:border-box;

ie盒子转标准盒子

box-sizing: content-box;  //W3C盒子

把input选中外边框去掉

outline:none;

textarea 固定样式

resize:none;

选中背景色改变

p::selection {
        background:yellow;
    }

css3 background-size

-webkit-background-size: ;
background-size: cover;

可填参数：
length：如100px 100px
percentage：百分比，如90% 90%
cover：按照较小边等比缩放目标大小
contain：按照较大边等比放大目标大小

null 是特殊对象

因为null是原型链的终结者

arr[0] 等价于 arr["0"];

var arr = [1,2,3,4];
arr.name = 'xi';
for(k in arr){
  console.log(k); //打印 0,1,2,3,name
}
console.log(arr.length); // 4

判断是否为空和数字

if( !num || typeof(num) !== "number"){
}

禁止默认事件

e.preventDefault();

阻止事件冒泡

e.stopPropagation();

jquery的入口函数

jquery （所有标签加载完毕就执行，DOM载入就绪，并且书写多个入口函数不影响）
$(document)意思是说，获取整个网页文档对象（类似的于window.document）

$(window).load();
$(document).ready();

js （等待所有文件加载完毕，书写多个入口函数只会执行最后一个入口函数）

window.onload = function (){}

json

json对象不可以存放function
键值都需要加引号
可以存放对象
JSON.stringify(); （转字符串时会自动删除对象里面的函数）
JSON.parse();

valueOf 方法

对象-->字符串
String.valueOf(Object obj) : 将 obj 对象转换成字符串, 等于 obj.toString()

event.target (事件委托会用到)

和this相同，指向事件的调用者

openRequest.onsuccess = function(event){
        var db = this.result;
        // var db = event.target.result;
      }

字符串、数组方法 contains();

判断数组内是否有相同值，返回布尔值

访问对象的方式

person.name;
person['name'];

this

var length = 10;
function fn(){
  console.log(this.length); // 10 这里没有调用者，是window在调用方法
}
var obj = {
  length: 20,
  method: function (fn){
    fn();
argments[0](); // 3 这里的等价于 arguments.fn()
  }
}
obj.method(fn,1,2);

字符串取第一个首字母

var first = words[0];
var first = charAt(0);

function cssToDom(cssStr){
  var words = cssStr.split("-");
  for(var i=1;i<words.length;i++){
    words[I] = words[I][0].toUperCase()+words.substr(1);
  }
  log(words.join(""));
}
cssToDom(border-type-nth);

事件冒泡

事件冒泡最终到window
window下面是document
阻止事件冒泡

event.cancelBubble = true;  //ie清除冒泡 现在也支持大部分流行浏览器
event.stopPropagation(); //不支持ie

w3c盒子和ie盒子的区别

W3c盒子模型和IE盒子模型&box-sizing属性
box-sizing 属性
content-box，border和padding不计算入width之内，也就是说，整个界面的宽度要是content+padding+border
padding-box，padding计算入width内也就是说，整个界面的宽度要是content+padding
border-box，border和padding计算入width之内，其实就是怪异模式了~也就是说，整个界面的宽度要是content的width

var

console.log(num); //undefined
      var num = 10;
      console.log(num); //10
      var num ;
      console.log(num); //10

以上代码，var num会变量提升，但是不会赋值，所以第一句打印语句打印undefined。然后执行赋值语句，所以在后面提升的num有了值10，所以之后打印的num的值为10.

取消a标签的默认事件

event.preventDefault();

js中的特殊数据类型

null
undefined

什么是原型链

JS原型对象和原型链
想要知道 f1 是如何把 prototype 留给“后代”，我们需要了解一下 JS 中的原型链。此时，JS中的 proto 入场了，这哥们长的很奇特，隐藏的也很深，以致于你经常见不到它，但它在普通对象和函数对象中都存在，它的作用就是引用父类的 prototype 对象，JS在通过 new 操作符创建一个对象的时候，通常会把父类的 prototype 赋值给新对象的proto属性，这样就形成了一代代传承...

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

现在我们知道，obj中proto保存的是 f 的 prototype，那么 f 的 prototype 中的 proto 中保存的是什么呢?
f.prototype 的 proto 中保存的是 Object.prototype，Object.prototype 对象中也有 proto，而从输出结果看，Object.prototype.proto 是 null，表示 obj 对象原型链的终结。
函数的 prototype 不属于自身的原型链，它是创建子类的核心，决定了子类的数据类型，是连接子类原型链的桥梁。

什么是闭包

干货分享：让你分分钟学会JS闭包
当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中。
当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会“污染”全局的变量时，就可以用闭包来定义这个模块。

事件的原理、如何传播

form 默认 method GET

<input type="hidden" name="a" value="login">

<form enctype = "multipart/form-data"> // 表单信息编码
form 文件上传method 必须写POST

序列加载表单数据

serialize()方法

表单对象.serialize();

$.ajax 中检测错误

error:function(XMLHttpRequest, textStatus, errorThrown){
            console.log("请求对象XMLHttpRequest: "+XMLHttpRequest);
            console.log("错误类型textStatus: "+textStatus);
            console.log("异常对象errorThrown: "+errorThrown);
          }

require 访问的文件是当前页面路径下的页面的路径

访问权限控制

public 是指外部可以直接访问的属性或者方法
protected 是指外部不可以直接访问的属性或者方法,子类可以访问
provate 只能自己内部使用的属性或者方法，包括子类也不能使用

php implode 方法

php 常见方法

表单的数据处理
转义函数 addslashes
转实体字符函数 htmlentities(); htmlspecialchars 反转 htmlentitles_decode();
富文本编辑器
trim() 清除空格

$__SERVER['REMOTE_ADDR'];

去除滚动条

::-webkit-scrollbar {
width: 0;
height: 0;
}

white-space: nowrap;/强制一行显示/
overflow: hidden;/超出部分隐藏/
text-overflow: ellipsis;/超出部分用省略号代替/
三栏布局

屏幕快照 2017-09-11 下午7.12.45.png
sort
从大到小

arr.sort(function(v1,v2){
  return v2-v1;
})

label 和 input 绑定

<label for='username'>用户名：</label>
<input type='text' id='username'>

对象转字符串

valueOf 如果对象是封装对象（String、Boolean、Number）会转换成相应的字符串，然后toString（）；如果不是封装对象，调用valueOf变成[object Object] toString();
if({}) // true
只要是对象都会转换成true

null 和 undifined

null 此处的值为空对象
undefined 此处应该有值，但是还没有赋值

数组操作

unshift() 添加到最前面 shift（）删除最前面一个
pop（）删除最后一个 push（）添加最后一个

new干了什么

this指向一个空对象，将构造函数的值赋值给对象，然后返回this

this = {};
this.name;
return this;

闭包（能访问函数内部变量的函数及其上下文环境）

使用返回函数实现使用内部变量，防止局部变量释放，外部一直持有内部变量的使用。
避免全局污染，能够达到常驻内存。

原型和原型链

对象都有proto
函数才有prototype
每个对象都有proto，且指向的也是个原型对象，也有proto，所以成为了原型链

ajax 同步属性

async:false 默认为true 表示异步

sql left join 和 right join

left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录
right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录
inner join(等值连接) 只返回两个表中联结字段相等的行
举例如下：

表A记录如下：
aID　　　　　aNum
1　　　　　a20050111
2　　　　　a20050112
3　　　　　a20050113
4　　　　　a20050114
5　　　　　a20050115

表B记录如下:
bID　　　　　bName
1　　　　　2006032401
2　　　　　2006032402
3　　　　　2006032403
4　　　　　2006032404
8　　　　　2006032408

1.left join
sql语句如下:
select * from A
left join B
on A.aID = B.bID

结果如下:
aID　　　　　aNum　　　　　bID　　　　　bName
1　　　　　a20050111　　　　1　　　　　2006032401
2　　　　　a20050112　　　　2　　　　　2006032402
3　　　　　a20050113　　　　3　　　　　2006032403
4　　　　　a20050114　　　　4　　　　　2006032404
5　　　　　a20050115　　　　NULL　　　　　NULL

（所影响的行数为 5 行）
结果说明:
left join是以A表的记录为基础的,A可以看成左表,B可以看成右表,left join是以左表为准的.
换句话说,左表(A)的记录将会全部表示出来,而右表(B)只会显示符合搜索条件的记录(例子中为: A.aID = B.bID).
B表记录不足的地方均为NULL.

2.right join
sql语句如下:
select * from A
right join B
on A.aID = B.bID

结果如下:
aID　　　　　aNum　　　　　bID　　　　　bName
1　　　　　a20050111　　　　1　　　　　2006032401
2　　　　　a20050112　　　　2　　　　　2006032402
3　　　　　a20050113　　　　3　　　　　2006032403
4　　　　　a20050114　　　　4　　　　　2006032404
NULL　　　　　NULL　　　　　8　　　　　2006032408

（所影响的行数为 5 行）
结果说明:
仔细观察一下,就会发现,和left join的结果刚好相反,这次是以右表(B)为基础的,A表不足的地方用NULL填充.

3.inner join
sql语句如下:
select * from A
innerjoin B
on A.aID = B.bID

结果如下:
aID　　　　　aNum　　　　　bID　　　　　bName
1　　　　　a20050111　　　　1　　　　　2006032401
2　　　　　a20050112　　　　2　　　　　2006032402
3　　　　　a20050113　　　　3　　　　　2006032403
4　　　　　a20050114　　　　4　　　　　2006032404

结果说明:
很明显,这里只显示出了 A.aID = B.bID的记录.这说明inner join并不以谁为基础,它只显示符合条件的记录.

注:
LEFT JOIN操作用于在任何的 FROM 子句中，组合来源表的记录。使用 LEFT JOIN 运算来创建一个左边外部联接。左边外部联接将包含了从第一个（左边）开始的两个表中的全部记录，即使在第二个（右边）表中并没有相符值的记录。

语法：FROM table1 LEFT JOIN table2 ON table1.field1 compopr table2.field2

说明：table1, table2参数用于指定要将记录组合的表的名称。
field1, field2参数指定被联接的字段的名称。且这些字段必须有相同的数据类型及包含相同类型的数据，但它们不需要有相同的名称。
compopr参数指定关系比较运算符："="， "<"， ">"， "<="， ">=" 或 "<>"。
如果在INNER JOIN操作中要联接包含Memo 数据类型或 OLE Object 数据类型数据的字段，将会发生错误.

事件委托事件代理

jsonp

jsonp

jquery 三层ajax

对于封装的方式，jQuery 采用了三层封装:最底层的封装方法为:$.ajax()，而通过这层封装了第二层有三种方法:.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON() 方法。
.load()方法可以参数三个参数:url(必须，请求html文件的url地址，参数类型为String)、 data(可选，发送的 key/value 数据，参数类型为 Object)、callback(可选，成功或失败的回调函数，参数类型为函数 Function)。
如果想让 Ajax 异步载入一段 HTML 内容，我们只需要一个 HTML 请求的 url 即可。

$('input').click(function () { $('#box').load('test.html');
});

如果想对载入的 HTML 进行筛选，那么只要在 url 参数后面跟着一个选择器即可。

$('input').click(function () {
$('#box').load('test.html .my'); });

如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式:get 和 post。

//不传递 data，则默认 get 方式 $('input').click(function () {
$('#box').load('test.php?url=ycku'); });
//get 方式接受的 PHP <?php
if ($_GET['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
    } 
?>

//传递 data，则为 post 方式 $('input').click(function () {
$('#box').load('test.php', { url : 'ycku'
}); });
//post 方式接受的 PHP <?php
if ($_POST['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
} ?>

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数也可以传递三个可选参数:responseTex(t 请求返回)、textStatus(请求状态)、XMLHttpRequest (XMLHttpRequest 对象)。

$('input').click(function () { $('#box').load('test.php', {
url : 'ycku'
}, function (response, status, xhr) {
alert('返回的值为:' + response + '，状态为:' + status + '，
状态是:' + xhr.statusText);
}); });

注意:status 得到的值，如果成功返回数据则为:success，否则为:error。XMLHttpRequest 对象属于 JavaScript 范畴，可以调用一些属性如下:

屏幕快照 2017-09-21 下午7.28.06.png
如果成功返回数据，那么 xhr 对象的 statusText 属性则返回'OK'字符串。除了'OK'的状态字符串，statusText 属性还提供了一系列其他的值，如下:

屏幕快照 2017-09-21 下午7.33.25.png
.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和
$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数，后面三个为可选参数。

//使用$.get()异步返回 html 类型 $('input').click(function () {
$.get('test.php', { url : 'ycku'
}, function (response, status, xhr) { if (status == 'success') {
$('#box').html(response); 
    }

注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。
-$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下:
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的;
2.GET 提交有大小限制(2KB)，而 POST 方式不受限制;
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题;
4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

//使用$.post()异步返回 html $.post('test.php', {
url : 'ycku'
}, function (response, status, xhr) {
$('#box').html(response); });

jQuery 提供了一组用于特定异步加载的方法:$.getScript()，用于加载特定的 JS 文件;
$.getJSON()，用于专门加载 JSON 文件。
有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了，
这时课时使用$.getScript()方法。

//点击按钮后再加载 JS 文件 $('input').click(function () {
$.getScript('test.js'); });

$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) { alert(response[0].url);
}); });

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数，传递一个各个功能键值对的对象。
url String 发送请求的地址
type String 请求方式:POST 或 GET，默认 GET
timeout Number 设置请求超时的时间(毫秒)
data Object 或 String 发送到服务器的数据，键值对字符串或对象
dataType String 返回的数据类型，比如 html、xml、json 等
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的回调函数
async Boolean 是否异步处理。默认为 true，false 为同步处理
jsonp String 指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。