js/jquery补充

js/jquery web前端

js 中各种不理解的定义

js 中this的理解

普通情况

this：代表调用这个函数的对象(就是这个函数属于哪个对象，这个对象就代表this)[谁调用我，我就属于谁，就是这么没节操]
eg:

var self =  {};
self.name = 'zmm';
self.age = function(){
    return this.name;
}
console.log(self.age());

结果 ：

'zmm'

解析：

恩。针对懵逼的你，此刻的我要声明两点：
1. self.age 是一个函数；而不是一个字符串；
2. self.age 这个函数属于对象self，所以self就代表this；

eg:

var self = {};
self.name = 'zmm';
var name = 'zcdd';
var des = function(){
    return this.name;
}

self.age = function(){
    return this.name;
}
var age2 = self.age;

console.log( des() );
console.log( self.age() );
console.log( age2() );

结果：

'zcdd' ;
'zmm';
'zcdd'

解析：

1.des 相当于 window.des;所以这个函数属于对象window, 所以 this代表window。
2.var age2 = self.age = function(){return this.name} ;age2这个函数属于window ，所以 。。。
3.注意不是：age2 = self.age();

一些意外情况

setTimeout

原型

原型链

闭包

promise

为什么要用promise?

代替多层嵌套方式来解决异步请求代码的调用顺序问题。
promise主要解决回调地狱问题 使得原本的多层级的嵌套代码,变成了链式调用 让代码更清晰,减少嵌套数；

promise的状态：Pending[进行中]，Resolved[已完成]，Rejected[已失败]

实现方式 第一种：

var one = new Promise(function (resolved, rejected) {
    if(成功){
        resolved(参数一);
    }else{
        rejected(参数二);
    }
});

one.then(function (参数一) {
    成功之后发生什么...
}),function(参数二){
    没成功又发生什么..
}

实现方式 第二种：

function two (参数零) {
    return new Promise(function(resolved, rejected){
        if(成功){
            resolved(参数一);
        }else{
            rejected(参数二);
        }
    })
}

two(参数零).then(function(参数一){
    成功之后发生什么...
}),function(参数二){
    失败之后发生什么...
}

数组和对象的比较

对象：数组，函数

数组是特殊的对象，凡是对象有的性质，数组都有，另外，数组还有自己独特的性质

对象的性质

var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}
console.log(dis.math,dis[ 'math' ]);//他们两个是等价的；

json字符串与json对象

http://www.haorooms.com/post/json_object_json_string

在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

JSON字符串:

var str1 = '{ "name": "haorooms", "sex": "man" }';

JSON对象:

var str2 = { "name": "haorooms", "sex": "man" };

一、JSON字符串转换为JSON对象

要运用上面的str1，必须运用下面的要领先转化为JSON对象(这一点在ajax返回的时候，经常遇到！)：

var obj = eval('(' + str1 + ')');//法一

var obj = str1.parseJSON(); //法二

var obj = JSON.parse(str1); //法三

然后，就可以这样读取：

Alert(obj.name);
Alert(obj.sex);

特别注意：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。

二、JSON对象转化为JSON字符串

例如：

var last=str2.toJSONString(); //法一

var last=JSON.stringify(str2); //法二

上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。

三、读取JSON对象的方法

var str2 = { "name": "haorooms", "sex": "man" };

就可以这样读取：

alert(str2.name);
//弹出” haorooms”。

我们遇到的JSON很少有这么简单的，比如复杂一点的JSON对象如：

var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"haorooms"}};

解析用：

alert(str.GetUserPostByIdResult.Name); //弹出haorooms

if的简化【替代if的表达式】

三无运算符

在条件表达式十分简单的时候，可用三无运算符代替
eg：

var a = 1；
var result ="";
if(a == 1){
    result = "a is one";
}else{
    result = "a is not one";
}

可替换为：

var a = 1;
var result = (a == 1) ? "a is one" : "a is not one";

switch

当if else 过多时

promise

js 数组

数组的 属性：

constructor
length
prototype

constructor属性

constructor 属性返回对创建此对象的数组函数的引用。ps:[此对象非彼对象]

eg:

var a = [];
console.log(a.constructor);
var b = 'i have a pen'
console.log(b.constructor);

结果：

function Array() {}
function String() {}

eg：

function Myself(name, sex, age){
  this.name = name;
  this.sex = sex;
  this.age = age;
}
var myself = new Myself('zmm', 'girl', '20'); 
console.log(myself.constructor);

结果：

function Myself(name, sex, age){
this.name = name;
this.sex = sex;
this.age = age;
}

对 js prototype属性的理解

ヾ(｡｀Д´｡)，真的十分像java里的类啊啊啊啊啊啊啊啊，看来思路还是太死，还得变；

Q:
1.静态方法为什么叫静态方法？
2.静态方法有什么作用？

//构造函数
function People(name)
{
  this.name = name;
  //对象方法
  this.Introduce = function(){
    console.log("My name is " + this.name);
  }
}

//类方法[静态方法][同一个构造函数之间的类方法可以相互调用]
People.Walk = function() {
  console.log('adf'); 
}
People.Run = function(){
  console.log("I can run");
  this.Walk();
}

//原型方法[通过prototype向构造函数中添加对象方法]
People.prototype.IntroduceChinese=function(){
  console.log("我的名字是"+this.name);
}

//测试

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese(); 

结果：

My name is Windking
I can run
adf
我的名字是Windking

数组 函数：

数组方法【修改原始数组】

push()和unshift()

定义和用法
push() 方法可向数组的末尾添加一个或多个元素，并返回数组的新长度。
语法

arrayObject.push(newelement1,newelement2,....,newelementX)

参数 描述

newelement1 必需。  要添加到数组的第一个元素。
newelement2 可选。  要添加到数组的第二个元素。
newelementX 可选。  可添加多个元素。

说明
push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
提示和注释
注释：该方法会改变数组的长度。
提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。
eg1:

var a = [1, 2, 3];
var b = a.push(9);
console.log(b);
console.log(a);

输出：

4
[1, 2, 3, 9]

eg2:

var a = [1, 2, 3];
var b = a.unshift(0, 9, 4);
console.log(b);
console.log(a)

输出：

6
[0, 9, 4, 1, 2, 3]

pop() 和 shift()

pop() 删除数组的最后一个元素，并返回该元素；

shift() 删除数组的第一个元素，并返回该元素;

当数组为空时返回undefined

eg1:

var a = [1, 2, 3, 4];
var b = a.pop();
console.log(b);
console.log(a);

输出：

4
[1, 2, 3]

eg2:

var a = [1, 2, 3, 4];
var b = a.shift();
console.log(b);
console.log(a)

输出：

1
[2, 3, 4]

splice() 方法

定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数 描述

index   必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX   可选。向数组添加的新项目。

返回值
类型 描述
Array 包含被删除项目的新数组，如果有的话。
说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

提示和注释
注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
实例
例子 1
在本例中，我们将创建一个新数组，并向其添加一个元素：

<script type="text/javascript">

var arr = new Array(6)
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")
document.write(arr + "<br />")

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2
在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：

<script type="text/javascript">

var arr = new Array(6)
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,1,"William")
document.write(arr)

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3
在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素：

<script type="text/javascript">

var arr = new Array(6)
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,3,"William")
document.write(arr)

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

例子4
在本例中我们将删除 index 2 ("Thomas") 这个元素

<script type="text/javascript">

var arr = new Array(6)
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,1)
document.write(arr)

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,James,Adrew,Martin

sort()

给当前数组按照默认方式排序；直接改变数组元素的位置

eg:

let arr = [1, 2, 5, 8, 3, 7];
arr.sort();
console.log(arr);

结果

[1, 2, 3, 5, 7, 8]

reverse()

将当前数组反转

eg:

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr);

结果

[5, 4, 3, 2, 1]

数组方法【不修改原始数组】

forEach、filter、map、reduce

目前以你的理解范围当然这些方法只能运用在数组里

共同点： filter map forEach 在回调函数中可以传三个值（item，index，list）；
item：代表当前项;(arr[index])
index:代表当前项的索引值；从0开始;(index)
list:代表原始数组，【最初的整个的自己】;(arr)
有返回值的情况下，返回的是新数组，但是原来的数组并没有发生改变【只有forEach没有返回值】；

filter

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var b = [];
b = a.filter (function (item) {
        return item > 4;
     });
console.log(b);

b: [5, 6, 7, 8]
遍历数组的每一项，过滤出需要的内容；有返回值,返回过滤出的内容集合；

过滤出a数组中小于4的数；相当于forEach的如下：

forEach

a.forEach (function (item) {
  if(item > 4){
    b.push(item);
  }
});
console.log(b);

b: [5, 6, 7, 8]
forEach 遍历数组的每一项 没有返回值

map

b = a.map.(function (item) {
        return item > 4 ;
    });
    console.log(b);

b:[false, false, true, true, true]
遍历数组每一项，根据判断条件返回 处理后的 数组的 每一项的集合；

reduce

用回调函数迭代地将数组简化为单一的值。
http://www.tuicool.com/articles/rAbEJfM
参数：arr.reduce(callback, initialValue)

initialValue:可选

callback(previousValue, currentValue, currentIndex, array1)
callback（一个在数组中每一项上调用的函数，接受四个函数：）

previousValue（上一次调用回调函数时的返回值，或者初始值）
currentValue（当前正在处理的数组元素）
currentIndex（当前正在处理的数组元素下标）
array（调用reduce()方法的数组）

第一次调用回调函数
在第一次调用回调函数时，作为参数提供的值取决于 reduce 方法是否具有 initialValue 参数。

如果向 reduce 方法提供 initialValue：

previousValue 参数为 initialValue。
currentValue 参数是数组中的第一个元素的值。

eg:

var  arr = [5, 6, 7, 8, 9];
sum = arr.reduce(function(pre, cur, index, arr) {
    console.log('pre:'+ pre, 'cur:' +cur, 'index' + index);
    return pre + cur;
},14);
console.log(arr,'pre+cur:'+ sum);

结果：

pre:14 cur:5 index0
pre:19 cur:6 index1
pre:25 cur:7 index2
pre:32 cur:8 index3
pre:40 cur:9 index4
[5, 6, 7, 8, 9] "pre+cur:49"

如果未提供 initialValue：

previousValue 参数是数组中的第一个元素的值。
currentValue 参数是数组中的第二个元素的值。

eg:

var  arr = [5, 6, 7, 8, 9];
sum = arr.reduce(function(pre, cur, index, arr) {
    console.log('pre:'+ pre, 'cur:' +cur, 'index' + index);
    return pre + cur;
});
console.log(arr,'pre+cur:'+ sum);

结果：

pre:5 cur:6 index1
pre:11 cur:7 index2
pre:18 cur:8 index3
pre:26 cur:9 index4
[5, 6, 7, 8, 9] "pre+cur:35"

slice()

arr.slice(start, end);

包括start，不包括end,相当于字符串截取中的substring();
返回一个新数组

concat()

数组连接
返回了一个新的Array。
可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：

eg:

let a = [1, 4, 6];
let b = a.concat(1, 2, [5, 8]);
console.log(a);
console.log(b);

结果：

a: [1, 4, 6]
b： [1, 4, 6, 1, 2, 5, 8]

函数

arguments（参数）

• 只在函数内部出现
• 指向当前调用的所有参数
• 类似数组，但不是数组

eg:

function test() {
    console.log(arguments);
}
test();

//callee:ƒ test()
//length:0
//Symbol(Symbol.iterator):ƒ values()
//__proto__:Object

eg:

function test(a, b) {
    console.log(arguments[0], arguments[1], arguments.length);
}
test(3, 6);

//3
//6
//2

乱七八糟的比较和方法

indexOf（String.indexOf 方法）

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

对于字符串：fromindex为可选
stringObject（searchvalue,fromindex）
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
如果在数组中没找到字符串则返回 -1。
提示如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。
对于数组start为可选
array.indexOf(item,start)

eg:

<body>
        <div id="app">
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-else>Name: {{ name }}</h1>
            <h1>---------------------分割线---------------------</h1>
            <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
            <h1 v-else>Sex: {{ sex }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                age: 28,
                name: 'keepfool',
                sex: 'Male'
            }
        })
    </script>
</html>

分析：这里的name: 'keepfool'，name.indexOf('keep') >= 0正确，因为keep与name的第0位开始匹配
如果name: 'mkeepfool'，name.indexOf('keep') >= 0描述不够精确，应该是name.indexOf('keep') >= 1，因为keep是与name的第1位开始匹配的。

js的getAttribute setAttribute与jQuery的attr

首先，身为一个宝宝，你要明白一点：

<div id="test" class="mm" title ="secret" value="haha"></div> 

id是div的属性,class是div的属性，title是div的属性 value是div的属性
获得属性值getAttribute("name");设置属性值 setAttribute("name","value")

<script type="text/javascript">
        var div = document.getElementById("test");
        console.log(div.getAttribute("title"));//获取 title值
        console.log(div.getAttribute("id"));//获取 id 的值
        console.log(div.getAttribute("class"));//class获取className   
        div.setAttribute('title',"hahaha");
        console.log(div.getAttribute("title"));
</script>

attr

1.返回属性值
返回被选元素的属性值。
语法

$(selector).attr(attribute)

    参数          描述

attribute   规定要获取其值的属性。

eg：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $("button").click(function(){
        alert("Image width " + $("img").attr("width"));
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>
</body>
</html>

2.设置属性/值
设置被选元素的属性和值。
语法

$(selector).attr(attribute,value)

    参数        描述

attribute   规定属性的名称。
value       规定属性的值。

eg：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $("button").click(function(){
        $("img").attr("width","180");
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>
</body>

3.使用函数来设置属性/值
设置被选元素的属性和值。
语法

$(selector).attr(attribute,function(index,oldvalue))

参数 描述

attribute   规定属性的名称。
function(index,oldvalue)    

规定返回属性值的函数。
该函数可接收并使用选择器的 index 值和当前属性值。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $("button").click(function(){
        $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 50 像素</button>
</body>

4.设置多个属性/值对
为被选元素设置一个以上的属性和值。
语法

$(selector).attr({attribute:value, attribute:value ...})

eg:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $("button").click(function(){
        $("img").attr({width:"50",height:"80"});
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>

jQuery 事件 - keyup() 方法

 $("选择器").keyup(function(){
 当该选择器被按下又松起时发生的事件；鼠标获得焦点时发生的事件
  });

eg：

        $('#my_score').keyup(function(){
                var my_score=$(this).val();
                if(isNaN(my_score)){
                    alert("请输入数字");
                    my_score="";
                }
                $('#integral').text(my_score);
                    if(my_score<70){
    //                    $("input[type='radio'][name=adopt][value='0']").attr("checked",true);
                        $("input[type='radio'][name=adopt][value='1']").attr("disabled",true);
                        $("input[type='radio'][name=adopt][value='0']").attr("checked",true);
                    }
                else {
                        $("input[type='radio'][name=adopt][value='0']").attr("checked",false);
                        $("input[type='radio'][name=adopt][value='1']").attr("disabled",false);
                }

        });

重载jquery on方法实现click事件在移动端的快速响应

只要复制上这一段代码就可以~(≧▽≦)/~啦啦啦

(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;
                $.fn.on = function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return _on.apply(this, arguments); 
            };
    })();

300ms延迟默认--解决方法：除去默认事件；

    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    console.log(isAndroid);
    !isAndroid && document.body.addEventListener('touchend', function (event) {
        event.preventDefault();
        event.target.click();
        if(event.target.tagName == 'INPUT'){
            event.target.focus();
        }
    });

jquery中html(),text(),val()的区别

.html()用为读取和修改元素的HTML标签
.text()用来读取或修改元素的纯文本内容
.val()用来读取或修改表单元素的value值。

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；

.html()是用来读取改元素内的HTML内容（包括Html标签），
.text()用来读取元素的纯文本内容，包括其后代元素的文本内容，
.val()是用来读取表单元素的"value"值。
.text()方法不能使用在表单元素上,.val()只能使用在表单元素上；
.val()方法和.html()方法使用在多个元素上时，只读取第一个元素；
.text()应用在多个元素上时，将会读取所有选中元素的文本内容;

简单粗暴的对比：

<body>
    <div id="big_div">
        我是长草大大
        <p id="small_p">团子特么最好看</p>
        <div id="small_div">瘦20斤！！！！！！</div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    console.log($("#big_div").html()) ;
    console.log($("#big_div").text());
    console.log($("#big_div").val());
</script>

结果：
one:

我是长草大大
<p id="small_p">团子特么最好看</p>
<div id="small_div">瘦20斤！！！！！！</div>

two:

我是长草大大
团子特么最好看
瘦20斤！！！！！！

three: 为空

加参数时:

<body>
    <div id="big_div">
        我是长草大大
        <p id="small_p">团子特么最好看</p>
        <div id="small_div">瘦20斤！！！！！！</div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   console.log($("#big_div").html("<p>Nice to meet you</p>"));
</script>

结果：界面：Nice to meet you
console：返回一个jquery对象

<body>
    <div id="big_div">
        我是长草大大
        <p id="small_p">团子特么最好看</p>
        <div id="small_div">瘦20斤！！！！！！</div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   console.log($("#big_div").text("<p>Nice to meet you</p>"));
</script>

结果：界面：<p>Nice to meet you</p>
console：返回一个jquery对象

setTimeout 与 setInterval

setTimeout: 设置一个定时器，在定时器到期之后开始执行一段代码；