1.3JavaScript基础
1.3.1DOM的相关知识
DOM的含义:Document Object Model,文档对象模型,
文档:指的是标记文档(html ,xml)
対象:可以使用dom里面的相关属性和方法来解析标记性文档.
Dom的组成:核心Dom,Html Dom ,XML Dom.
Dom如何解析html文档:
DOM会根据html的层级结构,在内存中形成一个树形结构,树形结构里面有标记元素和属性文本等元素,
整个html文档对应一个document对象,通过document文档对象, 可以操作html里面得到所有元素。
2.节点的访向:
节点対象. childNodes :获取该节点的所有子节点。
节点対象. parentNode:获取该节点的父节点。
3.荻取文档中的元素:
下面的方法是html dom的方法
根据标记的id属性值获取元素对象: document.getElementById(id属性对应的值);
根据标记的名称获取元素对象: document.getElementsByTagName(标记的名称);
根据标记的name属性值获取元素对象: document. getElmentsByName(name属性对应的值);
1.3.2 JavaScript概述
什么是js:它是基于对象和事件驱动的语言,它应用于客户端。
基于对象:在js里面提供了一些对象,可以直接使用。
面向对象:在java里 面先创建对象,再使用。
事件驱动: js里 面它触发事件,调用函数,实现网页里面的动态效果。
***客户端:浏览器。
javaScript和java的区别(雷锋塔和雷锋) :
- javaScript是网景的产品,java是sun公司的产品, 现在oracle.
- javaScript的运行只要系统里有浏览器就可以了。java的运行依赖于虚拟机。
- javaScript是弱类型语言,java是强类型语言。
弱类型语言:在js里面,所有的变量都用var定义,比如: var a=10;var b="hello js"强类型语言:在java里面,int a=10; int b="hello java" 错误的写法。
javaScript的组成: . - EcmaScript:规范了js的基于语法。
- Bom: Browser Object model ,浏览器对象模型,操作浏览器。
- Dom: Document 0bject model, 文档对象模型,操作文档。
js作用:它是给网页增加动态效果。
1.内嵌式:
在网页里,引入js代码的基本语法: <script type="text/javascript"> js代码</script>
在上述代码中,type属性是用来指定HTML文档引用的脚本语言类型,当type属性的值为text/Javascript时,表示<script></script>元素中包含的是Javascript脚本。
2.外链式:
在网页里,引入外部的js文件的语法: <script type=" text/javascript" src="js文件的url"></script>
操作步骤: 1.创建-一个js文件,2. 在script标记里面,使用src属性来引入外部的js文件。
比如:
<head>
<title>insert title here</title>
<script type="text/javaScript" src= " demo01. js"></script>
</head>
<body>
<br/>
来学习javaScript
</body>
3.js里的数据类型:
Number :数字类型
String :字符串类型
Object:对象类型
null:空类型
undef ined:未知的类型
Boolean :布尓类型
比如:
var a=10;
// alert(typeof a);
var b="hello js";
// alert(typeof b)
var c=null;
// alert(typeof f);
var d;
// alert(typeof d)
var e=true;
alert(typeof e)
4.变量
在js里面定义变量都用var来定义。
5.运算符算术运算符: + - * / 等等
比较运算符: > < >= <=等等
逻辑运算符: && ||等等
赋值运算符: += -=等等
注意: var a=10;var b="0"; var c=a-b;在进行减法(乘除法)操作时,会把string类型的值,转换为number型。
6.条件语句:
if ,if else,if else if else等语句
其它语句: for语句。switch case语句等等
比如:
var a3=10;
var b3=20;
if(a3==b3){
alert("相等的是10");
}else{
alert("other---")
1.3.3 JavaScript的使用
1.函数的定义和使用
在js里面定义函数的三种方式:
(1)创建普通函数
语法:function add(a,b){
var sum=a+b;
return sum;
}
(2)创建匿名函数
语法:var add2=function(a,b){
var sum=a+b;
return sum;
}
(3)创建动态函数:
语法:a.定义函数的参数:
var param=’’a,b’’;
b.创建函数体:
var method=”var sum=a+b;return sum;”
c.动态函数:
var add =new Function(param,method);
2.事件处理
事件:通过触发事件,去调用相关的函数,来实现网页的动态效果。
如果在网页里面去触发事件?
在网页里面绑定事件常用的两种方式:
(1)直接通过事件绑定函数。
比如:<input type=”button” name=”btn” value=”点我” onclick=”add()” >;” />
Function add() {alert(“点我啊”);}
(2) 通过给事件属性赋一个函数
比如:<input type=”button” name=”bbs” value=”aa” id=”inputID” >;” />
document.getElementById(“inputID”)onclick=function(){
alert(“点我了么”);
}
常用事件:
(4)点击事件:onclick
(5)失去焦点事件:onblur
(6)获取焦点:onfocuse
(7)键盘事件:onkeyup onkeydown onkey press
(8)页面加载事件:onload
(9)鼠标事件:onmouseout onmouseover onmousemove
3.常用对象
A.window对象:
常用的属性:history,document,navigator,location,screen
比如:var aa=window.location.href;
alert(aa);
常用的方法:
设置定时器方法:
Var id1=setInterval(js代码,时间):每隔一段时间循环执行对应的js代码
Var id2=setTimeout(js代码,时间):每隔一段时间,只执行一次对应的js代码
消除定时器的方法:
ClearInterval(id1)
clearTimeout(id2)
B.Date对象:
使用方法和Java差不多
Var myDate=new Date();
获取年份:myDate.getFullYear();
获取月份:myDate.getMonth();
获取天:myDate.getDay()
C.String对象
获取字符串的长度:
Length
与HTML相关的方法:
字体加粗:bold();字体变大:big();
与Java相似的方法:
IndexOf(),concat(),substr(),substring()
来源:51CTO
作者:wx5da03a3bd2999
链接:https://blog.51cto.com/14572091/2482252