js笔记

js中:
如果写var a = function box(){ alert('xxx');  return 'haha'}
这时候 如果写a 只是单纯的写出这个函数   要调用必须写成 a ( );
如果用cosole.log( a ) 返回的是 box()
必须用cosole.log( a( ) ); 才能返回函数的返回值


event.preventDefault() 用于取消事件的默认动作。 如提交表单 ，跳转等


arry   对象用于在单个的变量中存储多个值。  详情 http://www.w3school.com.cn/jsref/jsref_obj_array.asp


Array 对象属性
constructor     返回对创建此对象的数组函数的引用。
语法:   object.constructor

length         设置或返回数组中元素的数目。

var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"

document.write("Original length: " + arr.length)
document.write("<br />")

arr.length=5
document.write("New length: " + arr.length + '</br>')
document.write(arr)
输出:         Original length: 3
    New length: 5
    John,Andy,Wendy,,     
    [注意  上面因为length设定为5，而多了两个 逗号(  ,  )]


prototype     使您有能力向对象添加属性和方法。


Array 对象方法  
concat()         连接两个或更多的数组，并返回结果。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3,4,6))
输出：

George,John,Thomas,James,Adrew,Martin,William,Franklin,4,6



join()         把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
语法:    arrayObject.join(separator)
separator     可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))

输出：George.John.Thomas


pop()         删除并返回数组的最后一个元素
pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)


输出：
George,John,Thomas
Thomas
George,John


push()         向数组的末尾添加一个或更多元素，并返回新的长度。
它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
注释：该方法会改变数组的长度。
语法:   arrayObject.push(newelement1,newelement2,....,newelementX)
newelement1     必需。要添加到数组的第一个元素。
newelement2     可选。要添加到数组的第二个元素。
newelementX     可选。可添加多个元素。

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
输出：    George,John,Thomas
    4
    George,John,Thomas,James





reverse()         颠倒数组中元素的顺序。
注释：该方法会改变原来的数组，而不会创建新的数组。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())
</script>
输出：

George,John,Thomas
Thomas,John,George



shift()         删除并返回数组的第一个元素
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。
注释：该方法会改变数组的长度。
提示：要删除并返回数组的最后一个元素，请使用 pop() 方法。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
输出：    George,John,Thomas
    George
    John,Thomas


slice()         从某个已有的数组返回选定的元素
语法:   arrayObject.slice(start,end)   //从start开始 end结束 但是不包括end （算头部算尾）
start     必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end     可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
例子如下：
<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 />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)

</script>
输出：
George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin


sort()         对数组的元素进行排序，对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
说明: 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。
比较函数应该具有两个参数 a 和 b，其返回值如下：
    若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    若 a 等于 b，则返回 0。
    若 a 大于 b，则返回一个大于 0 的值。

在本例中，我们将创建一个数组，并按字母顺序进行排序：
<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 />")
document.write(arr.sort())
</script>
输出：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
实例2  sort( ) 里面写了数值
<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

输出：

10,5,40,25,1000,1
1,5,10,25,40,1000

亲自试一试

splice()         删除元素，并向数组添加新元素。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法：  arrayObject.splice(index,howmany,item1,.....,itemX)
index         必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany     必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX     可选。向数组添加的新项目。


toSource()     返回该对象的源代码。


toString()         把数组转换为字符串，并返回结果。


toLocaleString()     把数组转换为本地数组，并返回结果。


unshift()         向数组的开头添加一个或更多元素，并返回新的长度。


valueOf()         返回数组对象的原始值



call()    用一个函数对象替换另一个函数对象。即用context替换process，也就是说process可以用context里面的方法，而item是传入的参数。   
如右 => process.call(context, item)


Prototype Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。
这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。
    function Cat(name,color){
    　　　　this.name = name;
    　　　　this.color = color;
    　　}
    　　Cat.prototype.type = "猫科动物";
    　　Cat.prototype.eat = function(){alert("吃老鼠")};
然后，生成实例。
    　　var cat1 = new Cat("大毛","黄色");
    　　var cat2 = new Cat("二毛","黑色");
    　　alert(cat1.type); // 猫科动物
    　　cat1.eat(); // 吃老鼠



isPrototypeOf()
这个方法用来判断，某个proptotype对象和某个实例之间的关系。
    　　alert(Cat.prototype.isPrototypeOf(cat1)); //true
    　　alert(Cat.prototype.isPrototypeOf(cat2)); //true


isPrototypeOf()
这个方法用来判断，某个proptotype对象和某个实例之间的关系。
    　　alert(Cat.prototype.isPrototypeOf(cat1)); //true
    　　alert(Cat.prototype.isPrototypeOf(cat2)); //true



hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
    　　alert(cat1.hasOwnProperty("name")); // true
    　　alert(cat1.hasOwnProperty("type")); // false


in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。
    　　alert("name" in cat1); // true
    　　alert("type" in cat1); // true


e.type  返回的是时间的类型，例如onclick,onmousedown.onmousemove等等，主要用于对同一对象绑定多个事件时，判断事件类型用
不同的事件对应各种e.type，这个东西主要用来，假如鼠标按下和抬起有共同的代码，但是有一点不同就应用到e.type
$('#id').bind("mouseup,mousedown,mousemove",function(e){
//这里是相同的代码
   if(e.type=="mouseup")
    { alert("这是鼠标抬起时运行代码");}
    else if(e.type=="mousedown")
   { alert("鼠标按下时运行代码");}
    else{
    alert("这是鼠标移动时运行代码")
    }
});



e.pageX( Y )  获取鼠标相对于文档的位置  X(Y)

三目运算符   b?x:y，先计算条件b，然后进行判断。如果b的值为true，计算x的值，运算结果为x的值；否则，计算y的值，运算结果为y的值。
a?b:c?d:e将按a?b:（c?d:e）执行。


js点击事件 在标签中加上 onclick="text()"


.innerHTML 输入内容   input中用value


js中改变CSS样式  如右图 document.getElementById('id1').style.color = red;


onblur            事件会在对象失去焦点时发生。获取焦点事件：onfocus


onfocus       事件在对象获得焦点时发生。失去焦点事件：onblur


getAttribute()    在找到那个元素后，我们就可以利用getAttribute()方法把它的各种属性的值查询出来


if (something)    如果不为空


.substring（a,b） 从第a个开始截取字符串b（从0开始）


eval(str)         JSON的字符串解析成JSON数据格式


.stopPropagation() 阻止冒泡事件


isNaN(x) 检查其中的x是否完全是数字


%表示取余的意思。 如右 => 3603 % 3600等于3


offsetTop   距离浏览器顶部的距离  如右 => div.offsetTop 表示div距离浏览器顶部距离


offsetLeft   距离浏览器顶部的距离  如右 => div.offsetLeft 表示div距离浏览器顶部距离