JavaScript总结

Posted 一阙梅曲香素笺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript总结相关的知识,希望对你有一定的参考价值。

(一)基础

 

javascript文件的扩展名 .js

您可以在文本字符串中使用反斜杠对代码行进行换行。如:docment.write("hello \ sjdlk");

方法是能够在对象上执行的动作。就是函数

输入的数据为字符串,要转换。

原生对象要声明,初始化,如var tody=new Date(); var d=gtody.etDate();

内置对象不用初始化,直接被使用,只有两个原生对象,GlobalMath

instanceof

 

 

()面向对象

封装,继承(对象冒充,call(),apply()),多态

 

arry

属性

constructor

//index

//input

length

prototype

方法

concat()

join()

 

shift()

pop()

unshift()

push()

 

reverse()

sort()

 

slice()

indexof()

splice()

 

toSource()

toString()

toLocaleString()

valueof()

 

 

Date

方法

getDate()

getDay()得到星期几

getMonth()

getFullYear()

 

getHours()

getMinutes()

getSeconds()

getMiliseconds()

 

setDate()

setDay()

setMonth()

setFullYear()

 

setHours()

setMinutes()

setSeconds()

setMiliseconds()

 

toString()

toLocaleString()

toLocaleDateString()

toLocaleTimeString()

 

 

Math

属性

PI

方法

abs()

ceil()

floor()

max(x,y,..)

min(x,y,..)

pow(x,y)

randow()

round(x)

 

 

Number

属性

MAX_VALUE

MIN_VALUE

NaN

NEGATIVE_infinity

POSITIVE_infinity

方法

toFixed()

 

 

String

属性

方法

anchor()

big()

blink()

bold()

charAt()

charCodeAt()

fixed()

fontcolor()

fontsize()

concat()

italics()

link()

replace()

slice()

small()

split()

strike()

sub()

sup()

//indexof()

lastindexof()

toLowerCase()

toUpperCase()

 

 

(三)事件

 

事件流事:件冒泡,事件捕获

阻止冒泡:属性cancelBubble=true,方法stopPropagation()

 

事件处理程序

事件发生时采取什么处理程序

DOM2级:addEventListener(),removeEventListener();

有三个参数addEventListener(“事件名”,函数名,是否处理程序要用事件冒泡或事件捕获)

第三个参数设置为true,在事件捕获阶段

第三个参数设置为false,在事件冒泡阶段

这里事件名,不加on

 

Event对象

event对象包含了事件发生时的特定信息:包括触发事件对象,事件发生时的鼠标(键盘)事件

eventwindow对象的一个属性

IE中可直接访问event,因为这时event作为全局变量来使用

DOM标准中规定:event对象只能作为仅有的参数传递给事件处理程序

事件属性方法见P45

事件类型:

鼠标事件

click

dblclick

mousedown

mouseup

mousemove

mouseenter

mouseover

mouseleave

mouseout

键盘事件

keydownkeyupkeypress

html事件

loadwindow.onload)、unloadaborterrorresizescroll

submitresetonreset)、focusblurchangeselect

onchange

 

 

DOM

标记:告诉浏览器要做什么

DOM是一种XML文档的解析标准,对HTML进行处理

HTML注重展示效果。

XML越简单越好。

节点又称标记。

DOM提供的API,可以对节点树进行增删改查。

API就是一堆函数(函数库),DOM中属性都是API

DOM原理:

不使用IE浏览器。

body里的两种元素块级内嵌。

元素:包括标记,内容。如<div>123wwe</div>

123wwe就是文本节点

HTML注释节点<!--sdf-->

Mozilla浏览器中,换行、空格被视为文本节点。

表单中用name才能提交值,value

append在元素后追加文本

文件选择框file

table>tr*3>td*4快捷

tableborder-collapsecollapse不分开,}

DOM用于获取HTML中的元素,并且可以修改它

获取指定节点

getElementByTagName(“某元素/标签/标记名”);得到是集合

getElementByName()

getElemeentById()

创建和操作节点

createElement(TagName)

createTextNode(Text)

apendChild()将给定的节点追加到某个节点的尾部;

function s(){

var op=document.createElement("p");

var optext=document.createTextNode("hahahaha");

op.appendChild(optext);

document.body.appenChild(op);

}

 

removeChild(),replaceChildnew,old),insertBefore(new,old);

HTML DOM特征功能

oimg.srrc="test1.html";

table方法

P92

innerHTML

改变HTML内容

innerTEXT包含标记

innerHTML

 

 

 

 

 

BOM

没有相关标准

窗口、导航对象、定位对象、屏幕对象

表单里不能嵌套表单

显示图片可用img type="img"

 

*通配符选择器不推荐用,效率低

body自带边距,要设置body{margin:0;}

hr水平分割线

 

window对象

window表示整个浏览器窗口

document.body.offsetWidth,容器自身宽度

document.body.offsetHeight,容器自身高度

div.offsetLeft;容器自身边界与浏览器(父元素)左窗口的距离,在设置定位后才能用

导航打开新窗口

window.open("URL""新窗口名字""字符特性p64");

window.open();

window.close();

top.opener,用子窗口关闭父窗口,用这个比较安全

var fu=div.top.opener找到父窗口,fu.close关闭父窗口

系统对话框

时间间隔和暂停

以后还是用setTimeout

setTimeout(函数名/hansu(num)/hans()”,毫秒数);

document.write会重载页面

setinterval()

clearTimeout()

clearInterval()

 

disable无效=true

 

历史

ctrl+h,查看记录

window.history.go-1)或history.go(-11)负数后退多少页,反则。。

history.back()前一个URL

history.forward()后一个URL

 

document对象

属性

referrer

title,该属性可读写,可改变页面的标题

top.document.title="new title"

url

对象的集合:就是查看元素的个数

anchors

forms

images

links

var aa=fomm.forms;alert(aa);//2

 

document.write()

document.writeln()在字符串后默认添加一个换行符(\n

 

 

location对象

解析URL

herf

host

pathname

port

protocol

search

 

跳转到新页面

location.herf"新页面路径";精确

location.assign"";

location.replace没有历史记录

刷新页面

reload重新载入当前页

location.reload(false)从浏览器缓存中重载,默认为false

location.reload(true)从服务器端重载

document.location==window.location

 

 

navigator对象

获取浏览器信息

window.navigetor

navigetor.appname

 

第六章使用DOM操纵样式表

htmlleft权重大于right

 

 

rgb0,0,0)黑色

 

 

 

第七章表单编程

js是用来做表单验证的

表单:inputselecttextarea

 

1.form元素进行脚本编写

postget的区别

传递密码、有个人隐私的信息、中文信息、上传文件用post

默认字符集(iso8859-1

中文<meta charset="UTF-8">

简体中文gbk,简体中文big5

 

1)获取表单元素方式

var a=document.getElementById();

var forms=document.getElementByTd("forms");

var b=document.forms[0];只要是表单元素都能得到

var c=document.myform;myformname的值

2)访问表单域(字段)

访问表单里面的内容和属性

3)表单提交按钮

<form action="test1.html"id=forms,name=forms,onsubmit="return false;"/>//onsubmit="return false;"阻止表单提交,js能提交

<input type=submit value="提交"/>

<input type=image src="1.jpg"/>

<input type="button" onclick="document.form.submit()" />js绑定才能提交

</form>

 

4)属性,方法

readonly:只读

blur

focus

change

 

 

2.对文本框进行脚本编写

1)单文本框

value得到的是字符串值

value.length

2)选择文本框

select()选择文本的内容

3)文本框事件

 

4)实现自动选择文本框

onfoucs="this.select";

 

5)文本框

style{resize:none;}//不能放大,缩小

textarea的提示直接写在标记中间<textarea name="" id=""cols=""  rows="" style="resize:none;">请输入内容</textarea>

 

 

3.对列表框和组合框脚本编写

 

1)下拉列表

multiple:允许多选

size设置显示多少个

selectedIndex//选项是否被选中,selectedindex.length,选中返回下标,没选中返回-1

selectedIndex设置返回下拉列表中被选项目的索引号

4.复选框和单选框

checked被选中

 

绑定用id,label

<form action="1.html">

<input type="radio" name="sex" value="m"id="male"/><label for="male"></label>

<input type="radio" name="sex" value="n"id="female"/><label for="female"></label>

//这时name值是为了分组,value是为了提交表单值

</form>

 

 

5.表单进行验证

 

 

 

 

 

 

 

 

获取表单的引用方法:使用文档树定位一个元素的方法;使用文档表单集合

 

表单字段共性:disable属性,blur()方法,focus()方法,blur事件,

focus事件

 

 

表单提交submit()

 

终止表单提交,实际上就是阻止事件的默认行为

表单重置reset()

value属性可以给文本框赋新值

 

select()选择文本框中的所有文本:focus(),select()

 

文本框事件:blurfocuschange(文本改变,失去焦点),select

 

以上是关于JavaScript总结的主要内容,如果未能解决你的问题,请参考以下文章

javascript总结

JavaScript 初识闭包closure及总结

JavaScript-Runoob-JS 实例 :JavaScript 总结

JavaScript 学习总结

JavaScript基础入门总结目录

JavaScript强化教程 —— JavaScript 总结