对象的创建
var person = {
"name":"zhangsan",
"age":10,
"gender":"male",
"addr":"dxy",
"walk":function() { 易错点 是:不是=
console.log("person walk.....");
}
};
DOM
定义
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM 模型被构造为对象的树。
document对象可以操作html页面
向页面输出内容
write(输出的内容);
获取HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取HTML元素</title>
<script>
/*
获取HTML元素的方式
1)document.getElementById("元素的id值); 最重要
2)document.getElementsByClassName("元素的类名)
3)document.getELementsByName("元素属性name的值")
4)document.getElementsByTagName(元素的标签名称);
* */
//document.getElementById("元素的id值)获取html元素
var p1 = document.getElementById("p1");
console.log(p1);
/*
目前存在的问题：getElementById("p1")返回null，没有按照预期获取到html元素
原因：浏览器解析html文件按照从上到下的方式解析，没有解析到想要操作的元素就运行了JS代码
如何解决：
1)讲JavaScript代码放到网页的最下面，待整个网页元素都被加载后再运行JavaScript代码
2)借助事件，待整个网页元素都被加载后再运行JavaScript代码。
|----为body添加onload事件：当文档加载完成时运行脚本
|----在body中添加onload事件，为onload事件绑定函数，这样整个body加载完成时就会触发onload事件
|----为window对象添加onload事件
* */
// window.onload = function test1() {
// //document.getElementById("元素的id值)获取html元素
// p1 = document.getElementById("p1");
// console.log(p1);
// }
function test() {
//document.getElementById("元素的id值)获取html元素
p1 = document.getElementById("p1");
console.log(p1);
//document.getElementsByClassName("元素的类名")获取html元素
var pclass = document.getElementsByClassName("pclass");
//获取数组长度
console.log(pclass.length);
//遍历数组
for(var index = 0; index < pclass.length; index++) {
console.log(pclass[index]);
}
//document.getElementsByName("元素的name值")
var hname = document.getElementsByName("hname");
console.log(hname.length);
for(var index = 0; index < hname.length; index++) {
console.log(hname[index]);
}
//document.getElementsByTagName("元素的标签名称");
var pall = document.getElementsByTagName("p");
console.log(pall.length);
for(var index = 0; index < pall.length; index++) {
console.log(pall[index]);
}
}
</script>
</head>
<body onload="test()">
<p id="p1">段落1</p>
<p class="pclass">段落2</p>
<p class="pclass">段落3</p>
<h3 class="pclass">三级标题</h3>
<h3 name="hname">三级标题</h3>
<h3 name="hname">三级标题</h3>
<p>段落4</p>
</body>
</html>
普通元素内容操作
获取值
- var strValue = document.getElementById(‘元素ID值’).innerText;
- var strValue = document.getElementById(‘元素ID值’).innerHTML;
赋值（显示动态值）
- document.getElementById(‘元素ID值’).innerText = 动态值;
- document.getElementById(‘元素ID值’).innerHTML = 动态值;
innerText和innerHTML
- innerText:只对文本处理
- innerHTML:可以解析HTML标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>普通元素内容操作</title>
<script>
/*
普通元素内容操作
1)获取元素里面的内容
|---元素对象.innerText 获取元素当中的文本信息
|---元素对象.innerHTML 获取元素当中的HTML标签及标签中的内容
2)设置元素里面的内容
|---元素对象.innerText = "内容"
|---元素对象.innerHTML = "内容"
* */
//body加载完成之后运行的方法
function init() {
//获取元素当中的文本信息
var txtp1 = document.getElementById("p1").innerText;
console.log(txtp1);
var txtdiv1 = document.getElementById("div1").innerText;
console.log(txtdiv1);
var htmldiv1 = document.getElementById("div1").innerHTML;
console.log(htmldiv1);
//设置元素当中的内容
document.getElementById("p1").innerText = "**********************";
document.getElementById("div1").innerHTML = "<h1>这是一个一级标题</h1>";
}
</script>
</head>
<body onload="init()">
<p id="p1">这是一个段落1</p>
<div id="div1">
<p>这是一个段落2</p>
</div>
</body>
</html>
表单元素内容操作
从元素获取值：var strValue = document.getElementById(‘表单元素id值’).value;
给元素赋值(显示动态值)： document.getElementById(‘表单元素id值’).value = 动态值;
注意：从表单元素中获取的值都是字符串类型，如需要数值计算需要进行数据类型转换
- parseInt
- parseFloat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素内容操作</title>
<script>
/*
表单元素内容操作
1)获取元素的内容
元素对象.value
2)设置元素的内容
元素对象.value = "内容"
* */
function init() {
var val = document.getElementById("username").value;
console.log(val);
document.getElementById("username").value = "Tom";
}
function clickFun() {
alert(document.getElementById("username").value);
};
</script>
</head>
<body onload="init()">
<input id="username" type="text" value="****" />
<input id="btn" type="button" onclick="clickFun()" value="按钮" />
</body>
</html>
属性操作
获取属性 getAttribute(“属性名”);
设置属性 setAttribute(“属性名”,“属性值”);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素属性操作</title>
<style>
.pclass {
border: 1px solid black;
color: yellow;
text-align: center;
}
</style>
<script>
/*
元素属性操作
1)获取元素的属性的值
元素对象.getAttribute("属性名");
2)设置元素的属性
元素对象.setAttribute("属性名", "属性值");
*/
function init() {
/*
获取所有p元素的id属性的值并打印
* */
var allp = document.getElementsByTagName("p");
for(var index = 0; index < allp.length; index++) {
//获取元素的属性的值
console.log(allp[index].getAttribute("id"));
//设置元素的属性
allp[index].setAttribute("class", "pclass");
}
}
</script>
</head>
<body onload="init()">
<p id="p1">这是一个段落1</p>
<p id="p2">这是一个段落2</p>
</body>
</html>
元素操作
createElement() 重点
- 创建元素节点
appendChild() 重点
- 把新的子节点添加到指定节点
- 如需向 HTML DOM 添加新元素,首先必须创建该元素，然后把它追加到已有的元素上
- 新元素作为父元素的最后一个子元素进行添加
removeChild() 重点
- 删除子节点
replaceChild()
- 替换子节点
insertBefore()
- 在指定的子节点前面插入新的子节点
createTextNode() 重点
- 创建文本节点
parentNode
var trdel=this.parentNode.parentNode
当前元素的父节点，this代表当前元素
几种input类型的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function submitInfo(){
var gender=[];
var hobby=[];
var home=[];
var genders=document.getElementsByName("gender");
for(var i=0;i<genders.length;i++){
//radio判断是否被选中
if(genders[i].checked){
gender.push(genders[i].value);
}
}
var hobbys=document.getElementsByName("hobby");
//checkbox判断是否被选中
for(var i=0;i<hobbys.length;i++){
if(hobbys[i].checked){
hobby.push(hobbys[i].value);
}
}
var homes=document.getElementsByClassName("o");
//select 中的option是否被选中
for(var i=0;i<homes.length;i++){
if(homes[i].selected){
home.push(homes[i].value);
}
}
console.log(gender)
console.log(hobby)
console.log(home)
}
</script>
</head>
<body>
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<br>
兴趣:
<input type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="跳舞">跳舞
<input type="checkbox" name="hobby" value="玩游戏">玩游戏
<br>
家庭成员:
<select name="home" multiple="multiple">
<option class="o" value="zs">zs</option>
<option class="o" value="ls">ls</option>
<option class="o" value="ww">ww</option>
</select>
<br>
<input type="submit" value="提交" onclick="submitInfo()">
</body>
</html>
操作CSS
HTML DOM允许JavaScript改变HTML元素的样式
document.getElementById(id).style.property=新样式
document.getElementById(‘元素的id’).style.color=“red”
document.getElementById(‘元素的id’).style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS操作</title>
<style>
#p1 {
color: black;
border: 1px solid black;
background-color: blue;
}
</style>
<script>
function test() {
//设置元素的CSS
document.getElementById("p1").style.color = "red";
}
</script>
</head>
<body onload="test()">
<p id="p1">这是一个段落</p>
</body>
</html>
事件驱动
- onclick 鼠标点击某个对象
- onblur 元素失去焦点
- onfocus 元素获得焦点
- onabord 图像加载被中断
- ondbclick 鼠标双击某个事件
- onkeydown 某个键盘的键被按下
- onkeypress 某个键盘的键被按下或按住
- onmousedown 某个鼠标按键按下
- onkeyup 某个键盘的键被松开
- onmousemove 鼠标被移动
- onmouseout 鼠标从某元素移开
- onmouseover 鼠标被移到某元素之上
- onmouseup 某个鼠标按键被松开
- onchange 值发生变化时
正则表达式
语法:
/^正则表达式$/
规则
-
元字符 (内容的格式)
.匹配除换行符以外的任意字符\w匹配字母或数字或下划线\s匹配任意的空白符\d匹配数字\b匹配单词的开始或结束^匹配字符串的开始$匹配字符串的结束
-
重复次数 （长度）
*重复零次或更多次
+重复一次或更多次?重复零次或一次{n}重复n次{n,}重复n次或更多次{n,m}重复n到m次- [ ] 匹配一个字符(不管方括号中有多少内容)
-
var reg=表达式;
-
**reg.test(相关变量);
JavaScript提交表单
onsubmit事件 οnsubmit=“return f();” 如果f()返回true，表单提交 ，返回false，表单不提交
window
**location.href 属性返回当前页面的 URL （赋值表示跳转） **重点
- window.history 对象包含浏览器的历史。
- window.history 对象在编写时可不使用 window 这个前缀。
- history.back() //后退
- history.forward() //前进
- 一些方法示例如下：
- history.back() - 与在浏览器点击后退按钮相同
定时器
- 定义定时器：
- setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数 （页面钟表）
- setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数
- 关闭定时器：
- clearInterval(定时器名称)
- clearTimeout(定时器名称)
显示时间案例
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1() {
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
</script>
</body>
</html>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
