JAVAScript知识总结(我)

时间：2024.5.9

为什么要学习js：

1.客户端表单验证；

2.页面动态效果，可以与用户进行交互；

3.动态改变压面内容；

Js是一种描述语言,也是一门编程语言，也是一种弱类型的语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言；

ECMA：欧洲计算机制造商会；

ECMA-262：是js的第一个标准，定义了叫做ECMAScript的脚本语言；

Js的三大组成：

1.核心语言：ECMAScript；

2.浏览器对象模型：BOM

3.文档对象模型：DOM

核心语言：ECMAScript

描述的内容：

语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字；

浏览器对象模型：BOM

BOM是一个分层结构；

BOM的功能：弹出新的浏览器窗体、移动，关闭浏览器窗口以及调整大小、页面的前进后退、

文档对象模型：DOM

DOM是HTML文档对象模型（HTML DOM）定义的一套方法，用来操作和访问HTML文档；

DOM提供了一组树状结构组织的HTML文档；

Js的基本结构：

Js语句

</script>

或

Js语句

</script>

在页面中引用js文件：<script src=”.js” type=”text/Javascript”></script>

Type运算符：

ECMAScript提供了type（变量名/值）来判断变量或值究竟属于那种数据类型；

六大数据类型：

1.undefined类型:只有一个值undefined；

2.null类型：null==undefined返回的是true；

3.number类型：包含62位小数和32位整数；

4.string类型：字符串一般被单引号或双引号括起来，js中不区分单引号或双引号；

5.boolean类型：true或false;

注释：//注释内容；

警告窗体：alert，弹出一个只含有确定按钮的消息、窗；

提示窗体：prompt，弹出一个含有确定和取消按钮的消息输入框；

常用系统函数：

ECMA提供了两个将非数字的原始值转换成数字的函数：parseInt()、parseFloat(); isNaN(值):用于检查其参数是否是非数字，不是数字返回true，反之；

自定义函数：

function 函数名(参数){

}

或

匿名函数

function (参数){}

或var 变量=function (参数){}

变量的作用域：局部变量和全局变量；

window对象的常用属性：

screen：有关客户端的屏幕尺寸和显示性能的信息；

history：有关客户访问过的url的信息；

location：有关当前url的信息；

window对象常用的方法：

prompt():提示用户输入对话框；

alert():带有确定按钮的警示窗；

confirm():带有确定和取消按钮的对话框；

close():关闭窗口；

open():打开窗口；

setTimeout(“做什么”，毫秒):过多久做什么一次；

setInterval(“做什么”，毫秒):多久循环做什么；

open（“弹出窗体的url”，“窗口名称”，“窗口特征”）

窗口特征属性(他们的值：yes/no/1/0)：

height/width：窗口宽、高

left/otp窗口坐标x、y

toolbar：是否显示工具栏

scrollbars：是否显示滚动条

location：是否显示地址栏

status：是否添加状态栏

menubar：是否显示菜单栏

resizable：是否可调节尺寸

titlebar：是否显示标题栏

fullscreen：是否使用全屏；

window对象的常用事件：

onload：一个页面或一个图像完成加载 onmouseover

onclick

onkeydown

onchange：域的内容被改变

Date对象：

Date对象的方法：

getDate():1-31

getDay():0-6

getHours():0-23

getMinutes():0-59

getSeconds():0-59

getMonth():0-11，在使用时常常加一； getFullYear():4位年份

getTime():返回自1970-1-1以来的毫秒数

BOM编程

history对象：

方法：

back():后退

forward():前进

go(下标):去向某个url，0表示当前页面

location对象：

属性：

host：设置或返回主机名和当前url的端口号 hostname:设置或返回当前url的主机名 href:获取或返回完整的url

方法：

reload():重新加载当前文档，刷新

replace():用新的文档替换当前文档

document对象：

属性：

referrer：返回载入当前文档的文档的URL，即从哪个页面跳转而来；

URL：返回当前文档的URL

方法：

getElementBuId():

getElementsByName():

getElementsByTagName():

write(“写入到窗体中的内容”)：在窗体中加入内容，如果在窗体加载完成后，执行此语句，就会将内容写入到内一个新的页面；

元素的隐藏和显示：

visibility：隐藏后位置还是被占用；

visible：显示

hidden：隐藏

display：默认为快级元素，前后有换行符，隐藏后会空出位置；

none：隐藏

block：显示

DOM的三大组成：

Core DOM:也称核心DOM编程，定义了一套标准的针对任何结构化文档的对象，包括HTML,XHTML,XML;

XML DOM:定义了一套标准的xml文档的对象

HTML DOM:定义了一套标准的HTML文档的对象

Core DOM的标准节点操作：

查看节点：

getElementBuId():

getElementsByName():

getElementsByTagName():

查看或设置属性：

getAttribute(“属性名”)：

setAttribute(“属性名”,”值”):

根据层次关系查找节点：

parentNode/fristChild/lastChild:在表格中使用是因注意，tbody标签是会占一层节点的；

tbody和thead和tfoot在firefox中不被支持；

访问根节点：

document.documentElement;

document.body;

创建和增加节点：

创建节点：

createElement(tagName):

appendChild(nodeName):在已存在的节点后增加子节点；

insertBefore(newNode,oldNode)：将新的节点插入到oldNode节点前；

cloneNode(deep):复制某个节点；deep是bool值，如果是true就复制其所有子

节点，否侧只复制当前节点和它的属性；

删除和替换节点：

removeChild(node)

replaceChild(newNode,oldNode)

HTML DOM的特有对象和操作：

HTML DOM document对象代表整个HTML文档；

表格对象：

Table对象：

属性：rows[]:返回表格中所有的行；

方法：insertRow(index):在表格中插入新的一行；

deleteRow(index):从表格中删除一行；

TableRow对象：

属性：cells[]:返回行中所有单元格的一个数组；

rowIndex：返回该行在表格中的位置；

方法：

insertCell(index):在一行中的指定位置插入一个新的td标签

deleteCell():

TableCell对象：

属性：

cellIndex:

innerHTML:

align:设置或返回单元格内数据在水平排列方式；

className:设置或返回元素的class属性

this指正在执行的函数或指向函数所属的对象；如果在一个事件中写this，指的是当前的HTML元素；

获取样式属性值：

Position属性：

top:

left:

right:

bottom:

zIndex:

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；

scrollLeft:设置或获取位于对象左边界和窗口中可见内容的最左端之间的距离；

clientWidth：指对象的可见宽度，不包括滚动条等边线，会随窗口显示的大小而改变； clientHeight：值对象的可见高度；

页面事件：onscroll：页面垂直或水平滚动时；

onload：一个页面或图片加载完成后；

表单验证好处:减轻服务器压力、提高用户体验感；

表单验证的内容：空、是否是数字、邮箱、数据在摸个范围（如：月份：1-12）、长度、日期；

String对象：

属性：length：长度

方法：

toLowerCase():

toUpperCase():

charAt(index):

indexOf(字符串,index):

substring(indes1,index2)：

onsubmit事件根据返回值决定是否提交表单；

文本框对象常用的方法的事件：

事件：

onblur:

onfocus:

onkeypress:某个键盘键被按下并松口时；

方法：

blur():让文本域失去焦点；

focus():让文本域获得焦点；

select():选取文本域中的内容

属性：

id:

value:

正则表达式

定义：

普通方式：var abc=/表达式/参数;

参数值：g：全局匹配

i:不区分大小写

m：可以进行多行匹配；

构造函数方式：var abc=new RegExp(“表达式”,”参数”);

RegExp对象：

exec：检索字符中时正则表达式的匹配，返回找到的值，并确定其位置；

test：检索字符串指定的值；

var abc=/表达式/;

abc.test(字符串)：返回true或false;

String对象的方法：

match:找到一个活多个正则表达式的匹配；字符串对象.match(查找对象或正则表达式) search：检索与正则表达式匹配的值；字符串对象.search()

replace：替换与正则表达式匹配的字符串；字符串对象.replace(正则表达式,”替换值”) split：把字符串分割为字符串数组；字符串对象.split(分割符，数组最长个数)

RegExp对象的属性：

global:RegExp对象是否标识g

ignoreCase:RegExp对象是否标识i

multiline:RegExp对象是否标识m

正则表达式常用的符号：

字符含意

做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。

\ -或-

对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。

(x)

x|y

{n} 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a" 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A" 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa 匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa 匹配前面元字符0次或1次，/ba*/将匹配b,ba 匹配x保存x在名为$1...$9的变量中匹配x或y 精确匹配n次

{n,} 匹配n次以上

{n,m} 匹配n-m次

[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)

[^xyz] 不匹配这个集合中的任何一个字符

[\b]

\cX

\W 匹配一个退格符匹配一个单词的边界匹配一个单词的非边界这儿，X是一个控制符，/\cM/匹配Ctrl-M 匹配一个字数字符，/\d/ = /[0-9]/ 匹配一个非字数字符，/\D/ = /[^0-9]/ 匹配一个换行符匹配一个回车符匹配一个空白字符，包括\n,\r,\f,\t,\v等匹配一个非空白字符，等于/[^\n\f\r\t\v]/ 匹配一个制表符匹配一个重直制表符匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9] 匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。

下拉列表框对象：

事件：

onchange:

方法：

add():

属性：

options[]:

selectedIndex:

length:

Option对象的属性：

text:显示值

value:value属性值

数组

var abc=new Array();

方法：join():将数组中所有元素按照分隔符组成一个字符串； sort():排序；

属性：length:

扩展流行的css：E:/老师给/在线培训学习资料/index.html

第二篇：Javascript基础知识总结(代码篇)

Javascript总结（代码篇）

1)Alert box

<html>

<head>

function disp_alert()

{

alert("I am an alert box!!")

}

</script>

</head>

<body>

</html>

(2) confirm box

<html>

<head>

function disp_confirm()

{

var r=confirm("Press a button")

if (r==true)

{

document.write("You pressed OK!")

}

else

{

document.write("You pressed Cancel!")

}

</script>

</head>

<body>

</html>

(3)

Prompt box

<html>

<head>

function disp_prompt()

{

var name=prompt("Please enter your name","Harry Potter")

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?")

}

</script>

</head>

<body>

</html>

(4)

Call a function1

<html>

<head>

function myfunction()

{

alert("HELLO")

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction()"

value="Call function">

</form>

<p>By pressing the button, a function will be called. The function will alert a message.</p>

</body>

</html>

(5)

Function with an argument

<html>

<head>

function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Hello')"

value="Call function">

</form>

<p>By pressing the button, a function with an argument will be called. The function will alert

this argument.</p>

</body>

</html>

(7)Function with an argument 2

<html>

<head>

function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Good Morning!')"

value="In the Morning">

<input type="button"

onclick="myfunction('Good Evening!')"

value="In the Evening">

</form>

<p>

When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

</p>

</body>

</html>

(8)

Function_return

<html>

<head>

function myFunction()

{

return ("Hello, have a nice day!")

}

</script>

</head>

<body>

document.write(myFunction())

</script>

<p>The script in the body section calls a function.</p>

<p>The function returns a text.</p>

</body>

</html>

(9)

<html>

<head>

function product(a,b)

{

return a*b

}

</script>

</head>

<body>

document.write(product(4,3))

</script>

<p>The script in the body section calls a function with two parameters (4 and 3).</p> <p>The function will return the product of these two parameters.</p>

</body>

</html>

(10)

for

<html>

<body>

for (i = 0; i <= 5; i++)

{

document.write("The number is " + i)

document.write("<br />")

}

</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html>

(11)

<html>

<body>

for (i = 1; i <= 6; i++)

{

document.write("<h" + i + ">This is header " + i)

document.write("</h" + i + ">")

}

</script>

</body>

</html>

(12)

while

<html>

<body>

i = 0

while (i <= 5)

{

document.write("The number is " + i)

document.write("<br />")

i++

}

</script>

<p>Explanation:</p>

<p><b>i</b> is equal to 0.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html>

(13)

do...while

<html>

<body>

i = 0

{

document.write("The number is " + i)

document.write("<br />")

i++

}

while (i <= 5)

</script>

<p>Explanation:</p>

<p><b>i</b> equal to 0.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

</body>

</html>

(14)

break

<html>

<body>

var i=0

for (i=0;i<=10;i++)

{

if (i==3){break}

document.write("The number is " + i)

document.write("<br />")

}

</script>

<p>Explanation: The loop will break when i=3.</p>

</body>

</html>

(15)

try...catch

<html>

<head>

var txt=""

function message()

{

try

{

adddlert("Welcome guest!")

}

catch(err)

{

txt="There was an error on this page.\n\n"

txt+="Error description: " + err.description + "\n\n"

txt+="Click OK to continue.\n\n"

alert(txt)

}

</script>

</head>

<body>

</html>

更多相关推荐：

Tcp知识总结: Tcp知识总结在网络体系结构中下层协议向相邻的上层协议提供服务相邻的上层通过原语Primitive或过程Procedure调用相邻下层的服务这里提供服务包括面向连接的服务ConnectionOrientedSe...

C语言知识点难点总结: 总体上必须清楚的1程序结构是三种顺序结构循环结构三个循环结构选择结构if和switch2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择3计算机的数据在电脑中保存是以二进制的形式数据存...
计算机二级C语言知识点总结: 20xx20xx年计算机二级考试C语言知识点总结完全针对考试大纲总体上必须清楚的1程序结构是三种顺序结构循环结构三个循环结构选择结构if和switch2读程序都要从main入口然后从最上面顺序往下读碰到循环做循...
C语言各章知识点总结: 总体上必须清楚的2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择4bit是位是指为0或者1byte是指字节一个字节八个位5一定要记住二进制如何划成十进制概念常考到的编译预处理不是C语...
C语言知识点总结【完美版】: C语言最重要的知识点总体上必须清楚的1程序结构是三种顺序结构选择结构分支结构循环结构2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择有且只有一个main函数3计算机的数据在电脑中保存...
20xx二级C语言知识点全部总结: 好好加油各位学弟学妹计算机二级考试C语言知识点总结完全针对考试大纲总体上必须清楚的1程序结构是三种顺序结构循环结构三个循环结构选择结构if和switch2读程序都要从main入口然后从最上面顺序往下读碰到循环做...
C语言知识点总结【完美版】: C语言最重要的知识点总体上必须清楚的1程序结构是三种顺序结构选择结构分支结构循环结构2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择有且只有一个main函数3计算机的数据在电脑中保存...
c语言课本知识点总结: C语言最重要的知识点复习资料总体上必须清楚的1程序结构是三种三个循环结构和switch2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择3计算机的数据在电脑中保存是以二进制的形式数据存...
C语言基础知识点总结以及题目订正: 好老师重庆市二级C语言基础知识点总结以及题目订正第一章1函数是从主函数main开始执行回到主函数main结束2一个程序的编译是从第一个函数语句开始到最后一个函数语句结束第二章1算法的特性有穷性确定性有一个或者0...

c语言重点知识: 1、结构化程序是由顺序结构、选择结构(分支结构)、循环结构三大结构组成。2、读程序时都要从main()入口,然后从main中第一行程序依次顺序往下读。3、计算机数据在电脑中保存是以二进制形式存放的。4、bit是…
C语言最重要的知识点: C语言最重要的知识点总体上必须清楚的1程序结构是三种顺序结构循环结构三个循环结构选择结构if和switch2读程序都要从main入口然后从最上面顺序往下读碰到循环做循环碰到选择做选择3计算机的数据在电脑中保存是...
最新计算机二级考试c语言公共基础题知识点: 计算机二级考试c语言公共基础题知识点第一章数据结构与算法11算法算法是指解题方案的准确而完整的描述算法不等于程序也不等计算机方法程序的编制不可能优于算法的设计算法的基本特征是一组严谨地定义运算顺序的规则每一个规...

热门关注