Js杂六笔记
02 Apr 2016- name特性用以确保多个值中只有一个发送服务器 用于提交到服务器后的表单进行标识 只有带有name属性的值 服务器才能接收到
`<input type='radio' value='red' name='color'>`
`<input type='radio' value='red'>`
-
NodeList – 类数组对象，基于DOM结构动态执行查询的结果
-
insertBefore() 接受两个参数 要插入的节点和作为参照的节点
父节点.insertBefore(插入节点， 参照节点);
function insertAfter(newEl, targetEl) {
var parentEl = targetEl.parentNode;
if( parentEl.lastChild == targetEl) {
parentEl.appendChild(newEl);
} else {
parentEl.insertBefore(newEl, targetEl.nextSibing);
}
}
这里可以引入 parentNode(父节点), lastChild（最后一个子节点) nextSibing (同一个层级中的后面一个节点）previousSibing (兄弟层级中的前一个节点)
-
复制节点是 clone函数 它可以带一个参数 > clone(true) – 深复制， 复制整个节点及其子节点树
> clone(false) –浅复制 ， 复制节点本身 -
判断js代码中程序运行多久
console.time(a); console.timeEnd(a); // a 为执行的数据 -
setPropertyValue() 设置某个CSS属性 getPropertyValue() 获取某个CSS属性 removePropertyValue() 移出某个CSS属性
item()返回指定位置的属性名 —只能设置当个css属性 最好还是来改变类
// 判断是否包含property属性 自动为CSS3属性添加浏览器前缀
// 函数中包含charAt()方法来获取指定字符串位置的字符 toUppercase() 是将其转换为大写
function isPropertySupport(property) {
if(property in document.body.style) {
return false;
}
var prefixes = ['moz', 'webkit', 'o', 'ms'];
var prefProperty = property.charAt(0).toUppercase() + property.substr(1);
for(var i = 0; len = prefixes; i < len; i++) {
if( prefixes[i] + prefProperty) in document.body.style) {
return true;
}
return false;
}
- XML 严格区别大小写 HTML 不区分大小写 > property 属性 prototype 原型
Object.keys(对象) // 对象中包含的属性 可枚举
对象.hasOwnProperty(‘属性’); // 对象是否有自有属性
-
JS中 函数作为参数传值
-
遍历children 比 遍历 childNodes更快， 因集合项更少， HTML中的空格都属于文本节点
textNode -
DOMContentLoaded事件 相对于 jQuery中的
$(document).ready(function() {} );> ###当DOM树加载完毕之后触发脚本的执行### -
js中的链式调用
setTimeout( function() {
setTimeout(arguments.callee, interval);
}, interval);
- 柯里化函数 编程
> 一个相对于把函数分割几个模块来实行
var greent = function(a) {
return function(b) {
console.log(a, b);
};
};
greent(a)(b) ; // 借用闭包 把接收多个参数的函数， 返回一个接受单个参数的函数
+ JSON的转化 -- 没有变量的概念 ， 对象中属性必须用""来表示
JSON为全局对象
`JSON.stringify() ` JS对象 --> JSON字符串
`JSON.parse()` JSON字符串 --> JS对象
+ XMLHttpRequest() AJAX 异步调用
`var request = new XMLHttpRequest();`
request对象中包括
- 属性`readyState`（数据是否加载） `responText`(响应体) `status`(状态码)
- 方法 `abort()` 取消异步请求 `open()` 启动一个请求以备发送 `send()` `onload()`
+ JavaScript中原型链的最顶端为 `Object.prototype`
+ ##函数节流
function throttle(method, context) {
clearTimeout(method.tId);
method.tld = setTimeout(function() {
method.call(context);
}, 1000);
}
+ DOM中 `getElementsByTagName`方法代入标签名称， 返回该节点里包含的所有该标签节点以及节点里面包含的子节点(eg: textNode文本节点)的数组
+ **表单**中 用户改变字段之后 离开， 会触发`onblur`和`onchange`两种事件， 若没有改变字段内容的情况下离开， 只会触发`onblur`处理表单程序
> form表单中 想要了解用户按下了哪个键
var thiskey = evt.which; // Firefox or safari
var thiskey = window.event.keycode // IE中
+ JavaScript中 `return false;` 表示停止对用户单击的处理， 这样就不会加载href指向的页面了
+ 滚动鼠标时 滚动到一定距离出有提示
function checking() {
if(this.scrollHeight - this.scrollTop === this.clientHeight) {
console.log('谢谢阅读');
} else {
console.log('您还未读完');
}
+ 标签 break / continue 配合使用
top:
for(var i = 0; i < 3; i++) {
for(var j = 0; j < 3; j++) {
if(i === 1 && j === 1) {
break top; // 会直接跳到两个循环之外， 如果没有，只能跳出当前循环
console.log('hello world');
}
}
+ 位操作符
> | 0 和 ~ 将浮点转出整型且效率比 pareInt, Math.round 要快
var foo = (12.4 / 4.13) | 0; // 转为整型， 结果为3；
var foo = ~(12.4 / 4.13); // 结果为3
!! window === true; // 方便快速转化为boolern值
+ Math.round() 随机数 --- 随机产生颜色
Math.round(Math.random() * （n - m) + m ); // 生成[n, m]
color = 'rgb(' + random(0, 255) + ',' + random(0, 255) +','+ random(0, 255);
+ 数组去重
function unique(arr) {
var n = arr[0];
for(var i = 0, len = arr.length; i < len; i++) {
if(arr.indexOf(arr[i]) == -1) {
n.push(arr[i]);
}
}
}