JavaScript学习笔记(2)
内建对象(对象分为自建对象,宿主对象(浏览器提供),内部对象)
1.数组对象
(1.)数组的创建
a.var xx=new array();
b.字面量方式创建
var xxx=[xxx,xxx];
(2)数组的属性
a.具有length属性显示数组长度
对于非连续数组,会返回最大索引+1;
如果手动修改length,大于原来则多的会空出来,小于原来,多的会被删除;
(3.)数组的方法
a.push()方法,将要传递的数据作为参数传到函数中,会在数组的末尾自动添加这些数据,返回值是新的数组长度;
b.pop()方法,删除数组的最后一个数据,返回值是被删除的数据;
c.unshift()方法,将要传递的数据作为参数传到函数中,会在数组的开头自动添加这些数据,返回值是新的数组长度;
d.shift()删除开头的元素,返回值是被删除的元素;
e.forEach()方法,需要传一个函数作为参数,数组中有几个数据这个传进去的函数就会执行几次;
浏览器在调佣该函数时会传入实参第一个是数组每次的数据,第二个是当前正在遍历的数组索引,第三个是当前正在遍历的数组;
g.slice(),可以用来从数组中截取指定的元素然后返回,第一个参数是截取开始的位置,第二个参数是截取结束的位置(第二个参数可以省略,此时会截取从起始位置开始的所有元素),截取包括开始不包括结束,且该方法不会改变原数组;
可以传递负数,倒数顺序来找,如-1代表最后一个,-2代表倒数第二个;返回值是范围内的数据
h.splice(),删除数组中的指定数据,并把被删除的数据返回,第一个参数是开始删除的位置,第二个参数是删除的数量,第三个参数及以后参数是在被删除元素的位置添加新元素,此方法会影响数组的原内容;
2.Date对象
(1.)date对象的创建
a.直接new一个,那么该对象的内容是它被创建时的时间;如果向里面传时间的参数,那么它的内容就会变成传进去的时间;日期格式 年/月/日 时:分:秒
(2.)date对象的方法
a.getDate()返回当前是多少号;
b.getDay()返回是周几;(0表示周日)
c.getMonth()返回月份(0表示1月)
d.getFullyear()返回完整年份;
e.getTime()或者now()返回从19701月2日0时世界标准时间到今天的毫秒;
3.Math对象
是一个已经封装好了的工具类,不能再创建对象,但可以调用它的方法;
存在一些属性表示常量比如E PI
此外主要就是它的方法
abs()返回绝对值,ceil()返回向上取整(小数位只要有值就进位);floor()返回向下取整的数;
round()四舍五入取整,random()返回0-1之间的随机数,可以套用公式,math.random()*(y-x)+x来生成x-y之间的随机数;
max()向其中传入参数,返回最大数;min()返回最小的数;
pow(x.y)返回x的y次幂;
4.包装类;
js为我们提供了是三个包装类(构造函数),以便我们把基本数据类型转换为对象;
String() Boolen() Number()三个函数,
比如var num=new Number(3);这时就是创建了一个number的对象;
但一般不用基本类型的对象,不方便进行比较(对象变量保存的都是地址);
但是基本数据类型能调用包装类的方法(如tostring方法),这时其实是临时把该数据转为了对象,在调用完对象后再转回;
所以基本数据类型也能调用很多方法,主要是string的方法;
包装类实际上是浏览器自己底层自己调用的;
String的方法:在底层字符串是以字符数组来保存的(具有length属性)
a.charAt()返回指定位置的字符;
b.charCodeAt()返回指定位置字符的编码;
c.String.fromcharcode()用String构造函数来调用,返回某个编码的字符;
e.indexof()索引指定字符,返回第一次出现的位置,没找到返回-1,可以指定第二个参数表示开始查找的位置;
f.lastindexof()与indexof相同不过是从后往前找;
g.slice()截取指定位置的字符;
h.split()参数是一个字符串,根据该字符串来拆分该字符串,返回被拆分后的字符数组;如果传空串,每个字符都会被拆
i.toUpperCase()转成大写.toLowerCase()转成小写;
5.正则表达式
(1.) 创建正则表达式(正则表达式也是对象)
a.var 变量=new RegExp("正则表达式","匹配模式");
b.用字面量来创建正则表达式 变量名=/正则表达式/匹配模式
匹配模式i是忽略大小写,g是全局匹配（查找所有匹配而非在找到第一个匹配后停止）,可以两个一起用;
(2.)正则表达式的方法
a.test()传入测试是否满足正则,满足返回true;
(3.)正则表达式的语法
a|b是a或者b;
[xxx]也是或;
[^xxx]是除了(除了+或者,相当于全否)
可以通过设置量词来表达出现的次数,量词只对它前面的一个起效,比如a{3}就是说aaa,ab{3}是abbb.(ab){3}是ababab;
{x,y}表示出现x-y次,{x}表示正好出现x次,{x,}表示x次以上;
+表示x至少一个;{1,}
*表示x出现0个及以上{0,}
?表示x出现0次或者1次{0,1}
^x表示以x开头
x$表示以x结尾
^a$表示只有a,如果是想表达以a开头,以a结尾,可以用^a,a$来表达;
转义字符用\来使用,用字面量创建一个\就行,如果是new要用两个\(因为传的是一个字符串,额外的\用来表示它是一个转义字符);
(4.)正则表达式的应用
a.字符串的spilt方法,可以传进去一个正则表达式,正则表达式可以现写,默认全局匹配;
b.字符串的search()搜索到返回第一次的位置.,没有返回-1,可以传现写的正则,设置全局也没有用
c.字符串的match()方法,提出指定内容,可以用正则表达式,但是只找第一个,可以设置全局匹配,那么都会提出来;
match返回的是一个数组.及时只有一个;
d.replace()方法.第一个参数是被替换的内容,第二个是新内容,但只是替换第一个,应用全局可替换全部;
(5.)转义字符
\w 任意字母数字 \W除了字母数字 \d任意数字 \D除了数字 \s空格 \S除了空格
\b单词边界 (比如\bchild\b 表示单独的child单词)\B除了单词边界;
如把用户输入的字符串的前后空格取消,应用replace方法的正则表达式replace(/\s*|\s*$/g(这里必学开g使得前后都执行),"")或者replace(/\s*+\s*$\s/,"");
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
宿主对象(浏览器提供,包括dom和bom)
6.DOM
(1.)DOM简介
DOM是文档对象模型,文档就是整个的HTML网页文档,对象是指将网页的指定部分转换成对象,模型表示对象之间的关系,这样方便我们获取对象.
网页中的每个部分都可以视为对象,而构成我们网页的最基础的部分可以视为节点,节点又可以细分;
如标签被称为元素节点,属性被称为属性节点,文本被称为文本节点,文档被称为文档节点;
Nodename NodeType Nodevalue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
节点相互关联,构成了对象模型,而我们想获取所有对象,只需要获得某个指定对象,就可以根据模型获取其他对象;
而浏览器为我们提供这个document(文档对象),它是window对象的属性,属于是全局对象;
**************************************************************************************************************************************************************************
需要注意的是html和css先加载完,才有网页的节点对象,所以js要通过dom操作节点时,要把js代码放在后面
这时可以利用widow的onload事件绑定给window,当页面加载完成时调用;
可以把js代码都写在onload事件中;
(2.)创建DOM(即dom查询)
a.通过调用document的方法获取节点
getelementsbyname(name属性)/
getelementbyid/
getelementsbytagname(标签名)/
getelementsbyclassname(类名)/
queryseletor(元素选择器字符串)这个方法只会返回第一个满足此条件的元素/升级版-queryseletorall()此时返回一个数组
其中,通过标签名和name属性还有类名获取的元素对象都是一个数组;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
b.利用具体元素的方法和属性获取后代节点对象
getelementsbytagname(通过调用方法获取指定标签的后代元素对象)
.childnodes属性,表示当前节点的所有子节点对象,是一个对象数组,包括子节点(相当于文本节点是空的);
firstchild属性,第一个子节点对象;lastchild属性,最后一个子节点对象;
firstelementchild属性,第一个子元素节点对象;
c.利用具体元素的方法和属性获取父代和兄弟节点对象
parentnode属性,获取父节点对象;
previoussibling属性,获取前一个兄弟节点对象;
nextsibling属性,获取下一个兄弟节点对象;
d.特殊地document有一个属性body就是body这个元素对象的引用
还有doucumentelement这个属性，保留的是html根标签对象的引用；
all属性，保留页面的所有元素对象的引用；
(3)相关属性和方法
a.(属性).节点对象.innerHTML(对于自结束标签如input无法获取,这时直接读它具体的属性如value就行,但是不能读取class属性而是读classname属性)
节点内部的内容,可读可写;
b.(属性)节点对象.innerText显示对象内部文本内容,不会显示标签等html内容;
c.(方法)事件(文档或者浏览器中发生的交互瞬间,将节点对象和对象函数相绑定,完成事件监听)
本质是为节点对象的方法赋值
xxx.xxx=fuction{}(一个匿名函数)
7.修改元素样式
需要注意的是，css中带有-的样式名称是不合法的，比如background-color，这时要运用驼峰命名法(去掉-号，把后面的第一个字母大写)
首先给要修改样式的元素创建对象
a.语法：元素对象.style.样式名=样式值，但这样修改的是元素的内联样式(标签里的样式，优先级较高但仍比不过!important的优先级 )
读取的话直接 元素对象.style.样式名就行；但这读的只是内联样式，读不了css里的样式；
b.语法：元素对象.currentstyle.样式名 获取当前正在显示的样式，如果没有设置样式，会显示默认值；
c.语法：window的方法，可以直接调用 getcomputedstyle()来获取元素当前的样式，传递两个参数，第一个是要获取样式的元素，第二个是传递一个伪元素，一般是null；
它会返回一个对象，这个对象封装了样式，可以直接用样式名来读取,但如果没有设置样式，不会返回默认值，而是真实数据(比如current会返回auto但它不会，只返回真实数据)；
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
自建工具函数 function getStyle(obj,name) obj是要读取样式的对象，name是要读取的样式名字，前一个函数是正常浏览器的函数，后面一个是为了兼容ie8(ie8没有前面的)
{ if(window.getcomputedstyle(这里的形式是window的方法而不是直接的get....的变量，如果直接写会被当成不存在的变量而报错，相反如果是属性只会出未定义))
{return getcomputedstyle(obj,null)[name]}
else{return obj.currentstyle[name]}
}
************************************************************************************************************************************************************************************************************
元素样式的相关属性(都是只读的不能修改,想要修改只能改变内联样式,返回数值不带px)
.clientheight 可见高度(内容+内边距)
.clientwidth 可见宽度(内容+内边距)
.offsetheight 高度(内容+内边距+边框)
.offsetwidth 宽度(内容+内边距+边框)
.offsetparent 获取当前元素的定位父元素(返回最近的开启了定位的父元素,如果都没开启返回body,与css的定位不同)
.offsetleft 返回相对于定位父元素的水平偏移量
.offsettop 返回相对于定位父元素的竖直偏移量
.scrollheight 获取整个滚动区域的高度
.scrollwidth 获取整个滚动区域的宽度
.scrollleft 获取水平滚动条滚动的距离
.scrolltop 获取垂直滚动条滚动的距离
等式.scrollheight=scrolltop+clientheight(...)(滚到底时);
宽度类似
8.事件
在事件的响应函数被触发时,会向函数中传递一个事件对象,这个对象封装了这个事件的所有信息,比如:鼠标的坐标.哪个键被按下等;
(1.)相关属性(具体可以去文档查)
event.clientX 获取鼠标指针的水平坐标;
event.clientY 获取鼠标指针的垂直坐标;(client都是相对于可见窗口来获得坐标的)
event.pageX 获取鼠标指针水平坐标(相对于页面)
event.pageY 获取垂直坐标相对页面
event.cancebulle属性设置为true可以取消当前事件的冒泡
event.target 表示触发此事件的初试对象(比如子对象触发事件方法,它在原型链上找到了对应方法并触发了,则target就表示这个对象)
(2.)一个事件多个回调函数
对象.事件=函数的形式只能绑定一个事件;
如果想绑定多个事件,可以调用方法;
对象.addEventListen()
第一个参数是事件(属性)的字符串,不能有on;
第二个参数是回调函数
第三个参数是是否在捕获阶段执行,大多数是false;
这个方法能给事件绑定多个回调函数,事件触发时按照设置时的顺序依次执行;
ie8是attachEvent()与上类似,不过没有第三个参数;
(3.)事件触发过程
事件的触发分为三个阶段:
[1.]捕获阶段:从最外层document(标准)或者window(大部分浏览器)开始捕获事件;
[2.]目标阶段:一直捕获到了目标对象,特指那个目标件事,此阶段属于前后两个阶段的转折点,触发该目标事件后进入第三阶段;
[3.]冒泡阶段:事件的触发从目标元素开始向它的祖先元素开始传递,依此触发祖先元素的事件;
IE8里没有捕获阶段;
*******************************************************************************************************************************************************************
工具函数 function bind(obj,eventstr,callback)第一个是要绑定的对象,第二个是事件(属性),第三个是回调函数
{ if(obj.addEventListen)
{obj.addEventListen(eventstr,callback,false)}
else{obj.attchEvent("on"+evenstr,function {callback.call(obj)})(call方法改变this属性时会发生调用,但回调函数是浏览器调的,无法使用call,可以把它放进匿名函数里,然后就有空间调用call方法了)
}
}
