前端散乱笔记汇总

1. div,p等非按钮元素的diabled效果实现 , 方法是css{pointer-events:none;} ，可以实现无法点击的效果，加上透明度改变食用更佳。

<div onclick="add()" class="hh"></div>
.hh{
opacity:0.5;
pointer-events:none; 
}

1.1 sublime 快捷键 ctrl + d 选中内容，按下快捷键 ，按几次就可以选中之后的多个此内容，一起修改。
ctrl + L 选中当前光标所在的行。
shift + 右键 拖动选中多行，多个光标。
1.2 angularjs Material 使用 md-menu 时候，由于md-menu 会创造一个子scope 所以ng-model 需要是对象方式的，这个对象在controller内部写好，然后数据就可以在js代码获取，如果ng-model绑定变量，不是对象，就无法在后端获取数据，操作数据。
2.js延迟加载的方式
（1）async属性，<script type="text/javascript" src="demo_async.js" async="async"></script>
规定一旦脚本可用，则会异步执行。async 属性仅适用于外部脚本。基本适用于所有浏览器。
（2）defer属性 <script type="text/javascript" defer="defer">
规定是否对脚本执行进行延迟，直到页面加载为止，只有 Internet Explorer 支持 defer 属性。

3.选择器的优先级
1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>
　　2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
　　3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}
　　4.最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
　　5.那么后代选择器的优先级就可以计算了 比如 .divClass span { color:Red;} 优先级别就是：10+1=11

4.jsonp
(1)JSONP的优点：
它不会受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XHR或ActiveX的支持；请求完毕可通过callback的方式回传结果。
(2)JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行调用的问题。
Jsonp原理： 1、首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function, function 名字就是传递上来的参数 jsonp. 2、最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。 3、客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

5.JavaScript RegExp 对象
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
RegExp 对象方法:
(1)compile 编译正则表达式 (2)exec 检索字符串中指定的值。返回找到的值，并确定其位置 (3) test 检索字符串中指定的值,返回 true 或 false。
支持正则表达式的 String 对象的方法search match replace split

6 this
函数里的this可以分为两种来记忆：
如果是使用new方式创建对象，this指向新建的那个对象；
如果只是普通的调用，谁调用这个函数，函数里的this就指向谁~

7.ES6 后新增了一类数据类型 ：Symbol ， ES5 中的基本数据类型有 5 种：Undefined、Null、Boolean、Number、String. 而 Object 是属于复杂数据类型

8.
1.常见的块级元素(自动换行， 可设置高宽 )有：
div,h1-h6,p,pre,ul,ol,li,form,table,label等
2.常见的行内元素（无法自动换行，无法设置宽高）有：
a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
3.常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：
(button,input，textarea,select), img等
9
Link,visited,hover,active.( L o v e h a t e 爱与恨) 伪类排列顺序
10 a中href=”#”表示回到最顶部,(一个小知识)。

<a href="#">回到`顶部`</a>

11 media query
“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表等。
(1) link方法引入
(2)样式文件中使用：

@media screen{  
   选择器{ 
    属性：属性值；
     }
 }

例子

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

and 是关键字(还有not/only) ，针对屏幕情况，宽度小于600px会使用small.css
12.
浏览器支持的图片格式不包括tif ，一般支持gif,jpg,bmp等
13.
table标签的基础知识：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
14.
location /navigator/history
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
reload() 重新加载当前文档。 (window.location.reload());
replace() 用新的文档替换当前文档。
Navigator 对象包含有关浏览器的信息。
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
back() 加载 history 列表中的前一个 URL。(后退功能： window.history.back())
forward() 加载 history 列表中的下一个 URL。（前进到下一个url： window.history.forward()）
go() 加载 history 列表中的某个具体页面。
15.
jQuery的知识：

$(this)    当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro")   所有 class="intro" 的 <p> 元素
$(".intro")    所有 class="intro" 的元素
$("p").css("background-color","red");
$(document).ready(function)    将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)    触发或将函数绑定到被选元素的点击事件
$(selector).mouseover(function)    触发或将函数绑定到被选元素的鼠标悬停事件
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
实例
$("button").click(function(){
$("p").hide(1000);
});
会延迟过渡效果消失

jQuery ajax:

ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。
返回的类型：除了单纯的 XML，还可以 html、json、jsonp、script 或者 text。
属性：
1.async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
2.dataType
类型：String
预期服务器返回的数据类型。XML，html、json、jsonp、script 或者 text。
3.url
类型：String
默认值: 当前页地址。发送请求的地址。
回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

16。
object instanceof constructor
参数
object 要检测的对象.
constructor 某个构造函数
描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

function C(){} 
function D(){} 
var o = new C();
// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 
// false，因为 D.prototype不在o的原型链上
o instanceof D; 
o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上
C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.
D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

17.
active link visited hover 伪类的用法特点：
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
link/visited+hover+active

1. angularjs一些知识
   （1）ng-src 这个指令要知道
   对于img 可以直接使用 ng-src=’{{name}}’;
   但是audio无法正常绑定url数据。
   需要在对应得control中添加 $sce 然后使用$sce.trustAsResourceUrl(捆绑的url)处理，然后进行捆绑就ok啦
   （2）关于angularjs中的filter

<input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>

这个代码 关键是 “friend in friends | filter:searchText” 随着输入筛选结果
如果friend是对象，要显示friend.name,则需要ng-model=”searchText.name” ,ng-repeat=”friend in friends | filter:searchText”
(3)
输入类型 - image
image 输入类型将图像定义为提交按钮。
对于 <input type="image">，src 和 alt 属性是必需的。
实例

<input type="image" src="img_submit.gif" alt="Submit" />

(4) toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
语法
NumberObject.toFixed(num)
eg:
var num = new Number(13.37);
document.write (num.toFixed(1))
13.4