Javascript 个人笔记

主要记述字符串，数组的操作方法，BOM对象模型的使用，DOM对象模型的使用，事件流，以及jQuery的简单操作

js为基于对象的脚本语言，本身已经创建对象。区分大小写的语言

js 能创建和读取cookie，js不能读写机器上的文件，js不能写服务器上的文件，不能访问本站外的脚本或资源

js不能操纵其他窗口，js不能设置窗口过小

js注释           //

嵌入式    <script language="JavaScript" type="text/JavaScript">代码</script>

链接式    <script type="text/JavaScript" src=".js"></script>

行内式    <p onclick"JavaScript:alert('Hello World!');"></p>

运算符号

== 是否全等    === 是否全等，包括类型上的全等    ！= 是否不等于    ！==是否不全等于    >、<、>=、<=

in，用于判断对象中是否存在某个属性

instanceof  对象是否为某个类的实例

&&    ||    ！    支持简写赋值运算符   

+连接运算符，只要以链接为主，有一个非数值时执行链接     

？  ：三元运算符

typeof 返回对象类型

 

字符串类型        “     ”

字符串的属性和方法

length	返回字符串中字符的个数
charAt（n）	返回字符串对象在指定位置处的字符
charCodeAt（n）	返回字符串对象在指定位置处的ASCII码
indexOf（“”）	返回查找子串在字符串中的位置
laseIndexOf("")	返回查找子串在字符串中的倒数位置
substr（开始位置，长度）	截取字符
substring（开始位置，结束位置）	截取字符
split（“”）	分割字符成字符串
replace（“”，“”）	替换子串
toLowerCase（）	将字符串变成小写字母
toUpperCase（）	将字符串变成大写字母

数值型     布尔型

数组的属性和方法

length	返回数组的长度
toString（）	将数组转化为字符串
concat（）	将数组中附加新的元素或多个数组元素连接成新数组a..concat(b)
join(“”)	将数组的内容连接起来组成新的字符串，默认以逗号进行连接，也可以指定连接符
push（）	在数组的结尾添加一个或多个项，同时更改数组的长度
pop（）	返回数组的最后一个元素，并将其从数组中删除
shift（）	返回数组的第一个元素，并将其从数值中删除
unshift（）	在数组开始位置插入元素，返回新元素
slice（）	返回数组的片段，两个参数，一个开始，一个结束
splice（）	删除数组元素，两个参数，一个开始，一个结束
sort（）	大小排序
reserve（）	逆序

var rank=new Array（n）；rank[0],rank[1]……rank[n-2],rank[n-1]   

数值转字符串 结尾加“”连接成一个字符串或者使用toString（）

字符串转数值       parseInt（“”）   parseFloat(“”)

 

js语句与C语言一致

函数使用function标记 arguments数组访问函数的参数

 

js对象     自定义对象  内置对象    浏览器对象

with，通过省略对象，直接访问属性with object{xx=method1() yy=method2()       }

this 当前属性（1.行内为当前元素，作为传参使用        2 .事件触发体内this指代元素          3.window属性）

内置对象         Date对象，可以带参数变成设置指定时间，不带参数返回当前时间          Date("July 7,2018,11,26")

Date对象的方法  getFullYear()  getMonth（）     getDate（）      getHours（）       toLocaleString（）等

 

浏览器对象BOM（Browser Object Model）

1.调整窗口大小

（1）window.moveBy(dx,dy) 该方法将浏览器相当于当前的位置移动指定的距离（相对定位）

（2）window.moveTo(x,y)    将浏览器移动到指定位置（绝对定位）

（3）window.resize(dw,dh)   相对当前窗口增加或者减少窗口

（4）window.resizeTo(w,h)   将窗口调整到指定大小

2.打开新窗口

window.open([url][,target][,option])           target可以是窗口名称

3.window.opener父窗口属性

4.系统对话框

（1）alert("") （2）confirm("") （3）prompt("")

 

setTime（函数名，时间）设置隔多少时间执行一次函数   cleanTimeout取消指定引用

setInterval（代码，时间）每隔多少时间执行一次指定函数  clearInterval(setInterval(实参，时间)

 

location对象

location对象主要分析和设置页面的URL地址

hash ——锚点后部        host——服务器名称和端口部分       href——完整的URL pathname——主机名后的部分                      port——URL端口号  protocol——使用的协议           search——执行get请求的URL中间号（？）后的部分

history对象

history.go(-1) ==history.back();      history.go(0)==location.reload()    history.go(1)==history.forward();      history.length

BOM中的document对象

对象属性       

anchors——网页中所有锚点的集合

embeds——网页中所有嵌入式对象的集合

forms——页面中所有表单的集合

images——页面中所有图像的集合

links——页面中所有超链接的集合

cookies——用于设置或者读取cookies的值

body——指定页面主体的开始和结束

all——页面中所有对象的集合

lastModified属性获取网页最后更新时间

 

screen对象

availHeigh——窗口可以使用的屏幕高度，一般是屏幕高度减去任务栏的高度

availWidth——窗口可以使用的屏幕宽度

colorDepth——屏幕的颜色位数

height——屏幕的高度

width——屏幕的宽度

满屏显示

<script type="text/JavaScript">
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
</script>

文档对象模型（Document Object Module)DOM

HTML代码对应与一颗DOM树，每一个元素就是DOM树中的一个节点。node的属性和方法如下：

属性/方法	返回类型/类型	说明
nodeName	String	节点名称，元素节点的名称都是大写形式
nodeValue	String	节点的值
nodeType	Number	节点类型，数值表示
firstChild	Node	指向childNodes列表中的第一个节点
lastChild	Node	指向childBodes列表中的最后一个节点
childNodes	NodeList	所有子节点列表，方法item（i）可以访问第i+1个节点
parentNode	Node	指向节点的父节点，如果已是根节点，则返回null
previousSibling	Node	指向前一个兄弟节点，如果已是第一个节点，则返回null
nextSibling	Node	指向后一个兄弟节点，如果已是最后一个节点，则返回null
hasChildNodes（）	Bolean	当childNodes包括一个或多个节点时，返回true
attributes	NameNodeMap	包含一个元素的Attr对象，仅用于元素节点
appendChild（node）	Node	将node节点添加到childNodes的末尾
removeChild（node）	Node	从childNodes中删除node节点
replaceChild（newnode，oldnode）	Node	将childNodes中的oldnode节点替换成newnode节点
insertBefore	Node	在childNodes中的refnode节点前插入newnode节点

DOM在HTML中应用1.访问指定节点       2.访问相关节点       3.访问节点属性       4.检查节点类型       5.创建节点

通过ID访问指定节点             getElementById（）

通过元素name访问元素       getElementsByName（）              返回数组

通过标记名访问元素            getElementsByTagName（）          返回数组

        注意：childNodes获得的序列，Firefox会将元素后的回车列入，因此最好通过getElementsByTagName访问子节点

访问特殊节点元素

html——document.documentElement

head——document.documentElement.firstChild

body——document.body

超链接元素——document.links[n]

img元素——document.images[n]

form元素——document.forms[""]

访问和设置元素的HTML属性

getAttribute(name)     setAttribute(name,value)       removeAttribute(name)

可通过          DOM元素.属性名=“” 设置和删除属性          DOM元素.属性名访问属性

访问元素的内容innerHTML，可以添加元素或者文本

设置CSS属性

DOM元素.style.CSS属性      //样式带‘-’的后一个字母要大写并忽略‘-’        //float应为styleFloat       

//只能读取到元素的行内样式，style是行内元素，发生冲突时以style为准。

使用clssName属性切换元素的类名或者是追加元素的类名（需要在前面添加空格）

replace方法去掉元素的某一类名

获取元素的最终CSS样式

function getCurrentStyle(element){
    if(element.currentStyle)
        return element.currentStyle          //IE支持
    else
        return document.defaultView.getComputedStyle(element.null)    //DOM支持

DOM节点的类型

DOM节点的属性	元素节点	属性节点	文本节点
nodeType	1	2	3
nodeName	元素标记名单大写	属性名称	#text

创建和操作节点

1.createElement（）方法创建元素    2.createTextNode（）创建文本节点    3.createDocumentFragment（）创建文档碎片

4.appendChild（）为当前节点新增一个子节点，并且将其作为最后一个子节点

5.insertBefore（）为当前节点新增一个子节点，将其插入到指定的子节点之前

6.replaceChild（）将当前节点的某个子节点替换为其他节点

7.removeChild（）删除当前节点的某个子节点

DOM操作表单

通过document.forms["name"].elements[n]访问表单中的子元素，或者直接通过元素的name属性访问（包括表单名及表单的子元素都可以使用.name属性访问）

属性/方法	说明
checked	对于单选和复选而言，选中则为true
defaultChecked	对于单选按钮和复选框而言，如果初始时选中则为true
value	除下拉菜单外，所有元素的value属性值
defaultValue	对于文本框和多行文本框而言，初始设定的value值
form	指向元素所在的<form>
name	元素的name属性
type	元素的类型
blur（）	使焦点离开某个元素
focus（）	聚焦到某个元素
click（）	模拟用户单击该元素
select（）	对于文本框、多行文本框而言，选中并高亮显示其中的文本

表单的submit（）方法代替提交按钮

使用js可同时设置多个action，target，submit等方法，将表单提交到不同的网页，然后使用框架的形式将返回的页面显示

 

事件流

捕获型事件采用body->div-->p，冒泡型采用特定事件传播到最不确定事件中

1.事件处理函数

（1）HTML标记事件处理程序，在HTML代码添加js代码

（2）以属性的形式出现的事件监听程序，即元素加事件名

2.通过事件监听程序注册事件，添加或者删除来重复执行相应的代码

元素.detachEvent（“事件”，函数名）       //IE删除监听函数

元素.attachEvent(”事件“，函数名）          //IE添加监听函数

函数名不带括号，即调用时才返回函数值。

元素.removeEventListener("事件”，函数，bolean）；            //标准DOM删除监听事件

元素.addEventListener（“事件”，函数，bolean）；               //标准DOM添加监听事件

DOM与IE的区别，事件不带on，bolean设置冒泡还是捕获，false为冒泡

鼠标事件
事件名	描述
onClick	单击鼠标左键时触发
onDbclick	双击鼠标左键时触发
onmousedown	鼠标任意一个按键按下时触发
onmouseup	松开鼠标任意一个按键时触发
onmouseover	鼠标指针移动到元素上触发
onmouseout	鼠标指针移出该元素边界时触发
onmousemove	鼠标指针在某个元素上移动时持续触发
常用的HTML属性
onload	页面完全加载在window对象上触发，图片加载完成后在其上触发
onunload	页面完全卸载后在window对象上触发，图片卸载完成后在其上触发
onerror	脚本出错时window对象上触发，图像无法载入时在其上触发
onSelect	选择了文本框的某些字符或下拉列表框的某项后触发
onChange	文本框或下拉框内容改变时触发
onSubmit	单击提交按钮时在表单form上触发
onBlur	任何元素或窗口失去焦点时触发
onFocus	任何元素或窗口获得焦点时触发

事件在浏览器中是以对象的形式存在的，在IE中，事件又是window对象的一个属性event.(window.event)因此使用事件对象可以是：

op.onclick=function(oEvent){
oEvent=oEvent||window.event}

jQuery框架

1.访问页面中的某个元素       2.修改页面的表现      3.更改页面的内容     4.响应事件     5.为页面添加动画      6.与服务器异步交互        

$("")作为选择器

使用jQuery后会产生对象，该对象的方法与DOM对象的方法不一样，两者不能互相使用，但对象之间可以互相转换

jQuery对象为一个数组对象$("")[0]转换为一个DOM对象          ||使用$("").get(0)方法得到相应的DOM对象

jQuery选择多个对象后，通过$("").eq(0)返回数组中的一个

DOM转iQuery只需要将对象用$()包装起来