js的点滴 - 爱码网

                        var obj = new XMLHttpRequest();
			obj.open("POST", '/login', true);
			obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 发送信息至服务器时内容编码类型
			obj.onreadystatechange = function () {
				if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
					//fn.call(this, obj.responseText);
					//window.open();
					//debugger;
				}
			};
			obj.send(convertData({username:'idata3d',password:'Idata3d'}));

0024:js的设计模式 http://blog.csdn.net/xianyu410725/article/details/46712921

0025：xss攻击 http://www.cnblogs.com/coding4/p/6536184.html

0026：elementUI http://www.cnblogs.com/coding4/p/6712940.html

0027:有时间研究下plantomjs爬虫；http://phantomjs.org/

一些css需要记住的链接：

sass: http://www.ruanyifeng.com/blog/2012/06/sass.html

http://www.w3cplus.com/sassguide/

less :http://www.cnblogs.com/coding4/p/6358009.html

css: http://www.cnblogs.com/coding4/p/6182809.html

重绘和回流（重排）：http://blog.csdn.net/yummy_go/article/details/50696328

一些工具的使用：http://www.cnblogs.com/coding4/p/5772575.html

new1 判断是对象还是数组

typeof null // object
typeof [] // object
typeof {} // object
方法1.
Object.prototype.toString.call({}) ===  "[object Object]"
Object.prototype.toString.call([]) ===  "[object Array]"
方法2.
let aa = []
aa.constructor === Array
let bb = {}
bb.constructor === Object
方法3.
Array.isArray()

1.函数的块级作用域和函数的自我执行是一回事。
!(function () {
function box(){alert('hello');};

})();

2.操作字符串的方法。
concat ------'yan'.concat('jinyun')
indexOf ------'yan'.indexOf('y')>-1 同lastIndexOf()
charAt ------ 'yanjinyun'.charAt('3')
match -------str.match('world')或者str.match(/\d+/g)
'1d12e34'.match(/\d+/g)
打印出来["1", "12", "34"]
replace------'yanjinyun'.replace('jin','dong');
search----"yanjin2yun".search(/\d+/g)
打印出6
toLowerCase() 同toUpperCase()
'yanjinyun'.toUpperCase()
打印"YANJINYUN"

3.split substr subString都是操作字符串的方法

split的用法：
mystring.split(",")
mystring.split(/[,_]/);对多个符号进行分割
substr的用法：
string A = ‘this is A string’;
string str = A.substr(8, 1);//A
substring 方法从开始到结尾
string A = ‘this is A string’;
string str = A.substring(8, 9)//A

splice() 方法用于插入、删除或替换数组的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
打印的结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

===================

slice操作字符串：同substring.
var obx='yanjinyun'
obx.slice(2,5)
打印"nji"

5.操作数组的方法：https://buluo.qq.com/mobile/detail.html?_bid=128&_wv=1027&bid=348745&pid=7751115-1488093599&from=share_copylink

join(',')
push, 添加元素。
pop 移除数组末尾的元素，并返回移除的元素。shift()//移除数组开头的元素，并返回移除的元素。
unshift()//数组开头添加两个元素。
数组中存在两个用来排序的方法，reverse,sort.
var box=['yan','jin','yun','shi','bob']
box.push('clock');
box//["yan", "jin", "yun", "shi", "bob", "clock"]
box.pop()
box//["yan", "jin", "yun", "shi", "bob"]
box.shift()
box//["jin", "yun", "shi", "bob"]
box.unshift('women')
box//box.unshift('women')

slice(start,end)

在ES5中，一共有9个Array方法

js数组的迭代器方法（some、every、forEach、map、filter)

http://blog.csdn.net/github_31392345/article/details/48631337

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach//和for一样
Array.prototype.map

Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

-----------------------------------------------

forEach方法（接收一个函数作为参数）
function square(num){
alert(num * num) ;
}
var nums = [1,2,3,4,5];
console.log(nums.forEach(square));

-------------------------------------------------

every方法（接收一个返回值为布尔值的函数，对数组中的每一个元素使用该函数）
function isEven (num) {
return num % 2==0;
}
var evens=[2,4,6,8,10];
var isAllEven = evens.every(isEven); //当且仅当数组中的所有的元素返回为真，every函数才会返回为真
if(isAllEven){
alert("all is even");
}else{
alert("not all is even");
}

-------------------------------------------------

some方法（只要数组中有一个元素使用方法返回为真，some函数就会返回真）
var nums = [1,2,3,5,7,9];
function isEven (num) {
return num % 2==0;
}

map：

js的点滴

indexOf的使用：arr.indexOf("orange") != -1

filter

var arr = [

{"name":"apple", "count": 2},

{"name":"orange", "count": 5},

{"name":"pear", "count": 3},

{"name":"orange", "count": 16},

];

var newArr = arr.filter(function(item){

return item.name === "orange";

});

reduce

array1.reduce(callbackfn[, initialValue，currentIndex，this])//第一个参数是回调函数，第二个参数是初始值,第三个参数是索引

最常用的两个作用，第一个是算和

第二个可以去重之类的

js的点滴

reduceRight 就是数组便利的时候从右向左便利。

*****************************

类数组转化为数组的方法。

数组排序的方法。

*****************************

我们谈一谈数组非常重要的另一个因素：

数组的浅拷贝和深拷贝

浅拷贝：

let array1 = [1,'a',true,null,undefined];

---------------

let c1 = array1.slice();

---------------

let cc1 = array1.concat();

---------------

let fc1 = Array.from(array1);

---------------

let pc1 = [];

Array.prototype.push.apply(pc1,array1);

---------------

let mc1 = array1.map(function(item){
return item;
});

深拷贝：

let jsonc = JSON.parse(JSON.stringify(array1));

这种方法可以变相的实现深拷贝,但是这种方法也有其限制：

缺点：

首先，数组中的项如果是undefined，那么转换后将变为null
如果数组的项为对象，那么对象之间不可相互引用。会造成循环引用，无法JSON序列化。

最简单的深拷贝就是自己写一个for循环。不过代码比较多。

js的正则表达式
String对象可以用正则表达式的4个方法。
macth,replace,search（返回的是对应的下标值）,split
还有test exec都是非常有用的。

.表示一个 *表示多个 +表示一个

/g..gle/ .匹配一个任意字符
/g.*gle/ 匹配0个一个或多个
/g[a-zA-Z_]*gle/ 表示任意个a-zA-Z或者下划线中字符
/[^0-9]/表示任意个非0-9的字符
[a-z][A-Z]+表示一次或多次
\w*匹配任意多个所有字母数字_
\d*匹配任意多个数字
\D{7,}匹配至少7个非数字
^从开头匹配，$从结尾开始匹配
\s可以匹配到空格
\b可以匹配到是否到了边界
google|baidu|bing 匹配三种其中一种字符串
（google){4,8}匹配分组里的字符串4-8次。
google{4,8}表示的是
var box='sfsfda213123sadfaf';
box.match(/[0-9]{6}/g)
打印出：
["213123"]

js的点滴

检查邮政编码
要求：共6位，第一位不能为0
var str='224000';
var pattern=/[1-9][0-9]{5}/;
var str='224000';
--------------------------
检查文件压缩包：
/[\w]+\.zip|rar|gz\/;
删除多余空格:
var pattern=/\s/g;
var str='111 222 333';
var result=str.replace(pattern,'');
删除收尾空格
var pattern=/^\s+/;
var str=' goo gle ';
var restule=str.replace(pattern,'');
pattern=/\s+$/;
result=result.repalce(pattern,'');
删除前后空格
var pattern = /^\s*(.+?)\s*$/; 使用了非贪婪捕获
var str=' google ';
alert('|'+pattern.exec(str)[1]+'|');

移动网页端-M站-云视频播放器（暂用作无广告）

别以为贪婪都是没有用的，其实是有用的哈。
var url="http://basketball.lesports.com/";
url.match(/^http:\/\/(.*)\..*\..*/)
打印出：
["http://basketball.lesports.com/", "basketball"]

7. 原生js遍历对象和数组

------------------------------------------------
var arryAll=['aa','sss','dd'];
arryAll.forEach(function(e){
alert(e);
})
这里我们可以看出forEach可以遍历数组，ie也是支持的，但是不可以遍历对象，遍历对象就会报错。
for (var i = 0; i < myArr.length; i++) {
console.log(i+":"+myArr[i]);
};
for(var i in man) {
if(Object.prototype.hasOwnProperty.call(man,i)) { //过滤
console.log(i,":",man[i]);
}
}

遍历数组的话：jquery的$.each更好用些。

$.each(_self.ADKEY, function(i, item) {

});

-------------------------------------------------------

8.获取屏幕和文档的高度，这里请不要用原生了，有好的框架为什么不用呢，性能影响这么小，而且容易记忆。

获取浏览器显示区域的高度： $(window).height();
获取浏览器显示区域的宽度：$(window).width();
获取页面的文档高度：$(document).height();
获取页面的文档宽度：$(document).width();

获取滚动条到顶部的垂直高度：$(document).scrollTop();
获取滚动条到左边的垂直宽度：$(document).scrollLeft();
这里的Jquery的方法还有
offset().top offset.left()
position().top position().left
jquery获取鼠标的事件。
jquery对象.mousemove(function(e){
var x=e.clientX;
var y=e.clientY;
var li_x=$(this).offset().left;;
var li_y=4(this).offset().top;
});
js获取鼠标的事件：
var e=event || window.event;
x=e.clientX;
y=e.clientY;
parentDom.offsetLeft;
parentDom.offsetTop;

记住这个：
var parentDom=thisDom.parentNode;
parentDom.style.left=newLeft+'px';

9. replace与repalceAll

明确的一点是js没有提供replaceAll的方法，所以全部替换用replace的正则方式。

"hello worlld".replace('ll',"kk");//"hekko worlld"
replace这个时候只替代了一个。

全部替换方式1：

var str = "男的女的老的少的";
alert(str.replace(new RegExp(/(的)/g),''));

全部替换方式2：

var replaceStr = "的";
alert(str.replace(new RegExp(replaceStr,'gm'),''));

全部替换方式3：

var replaceStr = "的";
alert(str.split(replaceStr).join(''));

10. []==![]

这里我们有时间在学习。

js的点滴

11.[1,2,3,4]用递归输出1，4，9，16

js的点滴

12.证明一个数据类型是数组。

typeof([])//object

Object.prototype.toString.call([]);// "[object Array]"

13.js的内置的函数不判定类型直接操作，字符串可以调用数组的方法，普通对象可以调用数组的内置方法。

var ss = {};

Array.prototype.push.call(ss,"aa","bb");

console.log(ss);// {0: "aa", 1: "bb", length: 2}

14.为什么说bind的是延迟执行的，而call是立即执行的。

var obj ={

b:"aa_b"

}

var box ={

a:this.a,

b:"cc",

c:function(){

console.log(this.b);

}

用call方法；

box.c.call(obj);

用bind方法。

var fun = box.c.bind(obj);

fun();

15.如何重写一个alert和confirm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="add" type="button" value="添加" />
    <input id="delete" type="button" value="删除" />
    <input id="update" type="button" value="修改" />
    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        $("#add").bind("click", function () {
            $.MsgBox.Alert("消息", "哈哈，添加成功！");
        });
 
        //回调函数可以直接写方法function(){}
        $("#delete").bind("click", function () {
            $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });
        });
 
 
        function test() {
            alert("你点击了确定,进行了修改");
        }
        //也可以传方法名 test
        $("#update").bind("click", function () {
            $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);
        });
 
        //当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层
　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });
    (function () {
    $.MsgBox = {
        Alert: function (title, msg) {
            GenerateHtml("alert", title, msg);
            btnOk();  //alert只是弹出消息，因此没必要用到回调函数callback
            btnNo();
        },
        Confirm: function (title, msg, callback) {
            GenerateHtml("confirm", title, msg);
            btnOk(callback);
            btnNo();
        }
    }
 
    //生成Html
    var GenerateHtml = function (type, title, msg) {
 
        var _html = "";
 
        _html += '<div >;
        _html += '<a >;
 
        if (type == "alert") {
            _html += '<input >;
        }
        if (type == "confirm") {
            _html += '<input >;
            _html += '<input >;
        }
        _html += '</div></div>';
 
        //必须先将_html添加到body，再设置Css样式
        $("body").append(_html); GenerateCss();
    }
 
    //生成Css
    var GenerateCss = function () {
 
        $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
            filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
        });
 
        $("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',
            backgroundColor: 'White', borderRadius: '15px'
        });
 
        $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',
            backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',
            borderBottom: '3px solid #009BFE', fontWeight: 'bold'
        });
 
        $("#mb_msg").css({ padding: '20px', lineHeight: '20px',
            borderBottom: '1px dashed #DDD', fontSize: '13px'
        });
 
        $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
            border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
            lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'
        });
 
        $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });
        $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });
        $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
        $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });
 
 
        //右上角关闭按钮hover样式
        $("#mb_ico").hover(function () {
            $(this).css({ backgroundColor: 'Red', color: 'White' });
        }, function () {
            $(this).css({ backgroundColor: '#DDD', color: 'black' });
        });
 
        var _widht = document.documentElement.clientWidth;  //屏幕宽
        var _height = document.documentElement.clientHeight; //屏幕高
 
        var boxWidth = $("#mb_con").width();
        var boxHeight = $("#mb_con").height();
 
        //让提示框居中
        $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
    }
 
 
    //确定按钮事件
    var btnOk = function (callback) {
        $("#mb_btn_ok").click(function () {
            $("#mb_box,#mb_con").remove();
            if (typeof (callback) == 'function') {
                callback();
            }
        });
    }
 
    //取消按钮事件
    var btnNo = function () {
        $("#mb_btn_no,#mb_ico").click(function () {
            $("#mb_box,#mb_con").remove();
        });
    }
})();
    </script>
</body>
</html>

View Code