第一章：JavaScript基础
1.为什么要学习JS
1):表单验证(减轻服务端的压力)
2):页面动态效果
2.什么是JavaScript
是一种基于对象和事件驱动的、
跨平台的、并且具有安全性的脚本语言
3.JavaScript的特点
1):向HTML页面添加交互行为
2):语法与java类似
3):解释性语言(边执行边解释)
4.JavaScript的组成
1)ECMAScript:
JS的内核
2)DOM:
文档对象模型、动态的访问程序
和脚本、更新其内容
3)BOM:
浏览器对象模型、可以与浏览器
窗口进行互动的对象结构
5.JavaScript的语法结构
由<script type=text/javascript>
标签包裹、可省略type属性、可以包含
在文档中的任何地方、只要保证它己被
加载到内存中即可
6.引入方式
1):在页面使用<script>标签
2):外部JS文件引入(通过src)
3):在HTML中直接引用(javascript)
7.核心语法
1):变量
(1):先声明在赋值
(2):同时声明和赋值变量
2):数组类型
{String 对象
1):对象名.length ：获取String长度
2):split(""):将字符串分割为字符串数组
3):join():把数组的所有元素组合为一个字符串
4):sort():对数组进行排序
5):push():向数组末尾添加一个或多个元素,
6):indexof(""): 返回原字符首次出现的位置
把通过一个分隔符进行分隔并返回新的长度}
7):substring(index1,index2)
返回的字段包含在index1和index2之间的字符
8):charAt(对象名) ：返回在指定位置的字符
9):==:只比较表面值
10):===:同时比较表面值和数据类型
11):alert:网页弹窗
12):praseInt:将字符串转换为整数值
13):praseFloat:将字符串转换为浮点数
14):isNaN:用于检查参数是否是非数字
{
trun:如果不是数字则返回trun
false:如果是数字将返回false
}
15):function事件
onload (加载) 事件 : 在页面加载后立即执行js
最常用于<body>元素中,用于在网页完全
加载所有内容(包括图像,脚本文件,css
文件等)后执行JS函数
通常用于进入页面即加载的动态数据的获取
onclick (点击) 事件 : 会在元素被点击时触发
对于绝大多数HTML元素都可以使用,
<head> <br> <iframe> <script> <style>
上面这些用不了点击事件
<div> <input type="button">
这些可以常用
通常用于(鼠标)点击页面的按钮 进行切换或者
添加登录等
onchange (输入) 事件 : 当所选的内容被改变时触发
这个事件也可以用于单选框与复选框改变后
触发
<input> <select> <textarea>
多用于input文本框输入完之后的效验
onmouseover (悬浮) 事件 : 鼠标指针移入元素中调用
对于绝大多数HTML元素都可以使用
<head> <br> <iframe> <script> <style>
上面这些用不了点击事件
多用于导航的新增列表显示
onkeydown (键盘) 事件 : 用户按下任意一个按钮的事件
根据 event 这个参数 去调用该参数
里面的keyCode(键盘编码)
然后根据固定的键盘编码执行相应的事件
点击"回车"登录
8.window: 浏览器对象模型
常用的属性
1.window.location : 根据详情的URL信息跳转
2.window.history : 对访问过的URL信息进行处理
window.history.forWard() :会加载历史列表中的最新的一个URL
window.history.back() :加载历史列表中的上一个URL
window.history.go(0) :页面刷新
window.history.go(1) :前进一个页面
window.history.go(-1) :后退一个页面
9.alert():
带有一个提示信息和一个确定按钮的警示框
prompt():
显示提示的用户可以输入的对话框
confirm():
显示一个带有提示信息的、确认按钮(trun)和
取消按钮(false)的对话框
open():
三个参数 : open(url,name,featires)
url : 新窗口的地址
name : 新窗口的名称
featires : 新窗口的特征
1):height、width : 显示区的高度和宽度 单位是px
2):left、top : 窗口的x轴和y轴 单位px
3):resozable : yes|on 窗口是否可调节尺寸 默认yes
4):fullscreen : yes|on 全屏模式浏览 默认yes
close():
直接关闭窗口,可用于所
10.location对象
常用属性
host : 返回主机名和当前URL的端口号
hostname : 只返回主机名
href : 返回完整的URL路径
常用方法
reload : 重新加载
replace : 用文档地址替换当前文档地址
Document对象
常用的属性
referrer : 返回的是 载入当前的URL
URL : 返回的是 当前自身的URL
Document的常用方法:
1.getElementById():
返回对拥有指定ID的第一个对象的引用
innerText : 改变相应文本
innerHTML : 将内容以HTML代码的格式插入
2.getElementsByName():
返回带有指定名称的对象的"合集";
3.getElementsTagName():
返回带有指定标签名的对象的"集合"
4.write():
像文档写文本、HTML表达式或JavaScript代码
clearInterval(setInterval返回的名字)
setTimeOut()
clearTimeOut
disptime();//调用函数
setInterval();第二个定时函数
setInterval("参数1",1000)
参数1 ：调用的函数名
1000 : 调用函数的周期 单位是毫秒 1000ms=1s
Math的四种方法
Math.ceil() - 向上区整数(往大的取)
Math.floor() - 向下取整数(往小的取)
Math.round() - 四舍五入
Math.random() - 返回0~1的随机数
节点：构成HTML文档最基本的单元
节点分为了四类
1. 文档节点(Document):
整个HTML文档的相关信息被封装后的
对象
2. 元素节点(Element):
构成HTML文档最基本的元素,对应HTML
文档中的HTML标签
3.文本节点(Text):
HTML标签中的文本内容
4.属性节点(Attribute):
元素的属性
节点的访问：
parentNode :
返回节点的父节点
nodeName:
返回节点的名字
childNodes:
返回子节点集合
#text : 文本(空格)
#comment : 注释
firstChild:
返回节点的第一个子节点
lastChild:
返回节点的最后一共子节点
nextSibling:
返回"同级"的下一个子节点
previousSibling:
返回"同级"的上一个子节点
中间加上Element则表示返回element元素
获取的节点是一个[object . . . ]类型的
根据id，name，TagName 是通过 .value 获取对应值
根据 层级关系获取的 是通过
nodeName : 节点名字
nodeValue : 节点值
nodeType : 节点类型
类型 返回的是数字
1 : 元素 element
2 : 属性 attr
3 : 文本 text
4 : 注释 comments
5 : 文档document
11:创建和插入
1.createElement(tagName)
创建一个标签名为tagName的新元素节点
2.setAttribute("属性名","属性值")
设置新元素节点的属性
3.getAttribute("属性名")
获取属性值
4.A.append(B)
将B节点追加到A节点的末尾(加上Child就等于插入A标签内)
5.cloneNode(deep?:boolean)
复制某一个指定的节点
该方法会接受一个布尔类型的参数,表示本次
复制是否深层拷贝
true : 执行深层拷贝,复制本节点以及整个节点数
false : 执行浅拷贝,只复制节点本身
6.insertBefore(A,B)
把A节点插入到B节点之前
12:删除和替换
removeChild(node)
删除指定的节点
replaceChild(A,B)
用A节点代替B节点
13:改变节点样式
onmouseover ：鼠标移动到某元素上
onmouseovet ：鼠标从某元素移开
操作节点CSS样式
1.HTML元素.style.样式属性 = "值"
例如:
document.getElementById("cart")
.style.backgroundColor="green"
2.Html元素.className = "类名"
例如:
document.getElementById("cart")
.className="cartOver"
14:元素属性的应用
1.offsetLeft :
是一个只读属性,返回当前元素相对与上级元素节点
左边界的偏移量,单位px(像素)
2.offsetTop:
是一个只读属性,返回当前元素相对于上级元素节点
上边界的偏移量,单位px(像素)
3.offsetHeight:
是一个只读属性,返回当前元素的高度,单位px(像素)
高度包括了 边框(border) + 内边距(padding),并
不包含外边距(margin)
4.offsetWidth:
是一个只读属性,返回当前元素的宽度,单位px(像素)
高度包括了 边框(border) + 内边距(padding),并
不包含外边距(margin)
5.offsetParent:
是一个只读属性,返回元素的偏移容器(离他最近的被定位的父(祖先)元素)
6.scrollTop:
返回当前元素的滚动条的垂直位置
单位px(像素)
7.scrolleft:
返回当前元素的滚动条的水平位置
单位px(像素)
8.clientHeight:
返回当前元素可见的一个高度,不包括border值,如果
区域内带有滚动条,还应该减去滚动条不可用的高度
一般火狐IE大致为17px
9.clientWidth:
返回当前元素可见的一个宽度,不包括border值,如果
区域内带有滚动条,还应该减去滚动条不可用的高度
一般火狐IE大致为17px
如何替换一张照片:
先获取需要被替换的元素的位置使用一个元素储存
var A = document.getElementById("获取需要被替换的元素的父节点名称").fistElementChild;
声明一个新的元素 createElement("")意为声明一个新元素节点括号内为元素名
var B = document.createElement("img");
输入其属性值 B.setAttribute("元素属性",元素属性值)
B.setAttribute("src",../img/12.jpg);
最后通过旧元素的父元素将其替换 replaceChild(新元素名,旧元素名)用前边元素代替后边元素
document.getElementById("获取需要被替换的元素的父节点名称").replaceChild(B,A);
关于定时函数的使用
该方式通过onload函数方法或者其他函数方法写出元素需要变化元素,然后通过setInterval()填写
该元素的id名和变化定时
<div id="first" onload="first()">
<img src="../img/35.jpg">
</div>
<script>
var num=0;
var img=["../img/35.jpg","../img/36.jpg","../img/37.jpg","../img/38.jpg"];
function first(){
num++;
if(num>img.length-1){
num=0;
}
var newImg = document.getElementById("img");
newImg.src=img[num];
}
setlnterval()里填写需要被定时的元素的id名,1000=1秒;
setInterval(first,1000);
</script>
关于时间的调用
//获取时间;
var smw = new Date();
var hh = smw.getHours();//当前小时
var mm = smw.getMinutes();//当前分钟
var ff = smw.getFullYear();//年
var pp = smw.getMonth();//月
var yy = smw.getDate();//日
food=document.getElementById("third");
food1= document.getElementById("b").value+"<br>"+document.getElementById("six").value+"发布时间:"+ff+"-"+pp+"-"+yy+"-"+hh+":"+mm+"<br>";
food.innerHTML=food1;
04-04
889
889
08-30
178
178
07-25
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
