DOM:
概念:Document Object Model 文档对象模型,作用:操作标记性文档(目前学过的xml,html文档)
Dom分类
-
核心Dom(ECMA规范的基本语法)
核心Dom的api操作xml,html
-
xml的Dom
作用:操作xml文档的
-
html的Dom
作用:操作html文档的
-
总结:
核心Dom, xml的Dom, html的Dom 大部分api都是通用的
Dom的api
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
密码:<input type="password" name="psw" /><br/>
用户名:<input type="text" name="username" id="uname" class="s" /><br/>
性别:<input type="radio" name="sex" class="s" value="man"/>男
<input type="radio" name="sex" class="s" value="woman"/>女<br/>
<script type="text/javascript">
var username_tag=document.getElementById("uname");
document.write(username_tag.name+"<hr/>");
var input_tag=document.getElementsByTagName("input");
document.write(input_tag.length+"<hr/>");
var sex_objects=document.getElementsByName("sex");
document.write(sex_objects);
var classname=document.getElementsByClassName("s");
document.write(classname);
</script>
</body>
</html>
Dom操作文本
获取文本:innerhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
我是小鸟
</div>
<script type="text/javascript">
var div_tag=document.getElementById("d1");
document.write(div_tag.innerHTML);
div_tag.innerHTML="我是小老虎"
document.write(div_tag.innerHTML);
</script>
</body>
</html>
事件
事件与事件源的绑定
方式一:直接绑定(直接在标签里面定义事件属性,绑定对应的js代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="普通按钮1" onclick="top1()"/>
<script type="text/javascript">
function top1(){
console.log("11111");
}
</script>
</body>
</html>
方式二:间接绑定(不在标签里面定义事件属性,在使用时在绑定)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">普通按钮2</button>
<script type="text/javascript">
var tags=document.getElementsByTagName("button");
var singalTag=tags[0];
singalTag.onclick=function(){
console.log(2222);
}
</script>
</body>
</html>
常用的事件:
onchange: 在内容改变时,触发该事件,常与select一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在下拉选择框里面直接绑定内容切换</title>
</head>
<body>
<select onchange="changeContest()">
<option value="">plase choose</option>
<option value="">河南省</option>
<option value="">河北省</option>
</select>
<script type="text/javascript">
num=0;
function changeContest(){
console.log(num);
num++;
}
</script>
</body>
</html>
onload: 等html网页完全加载完毕后,才执行事件里面的js代码,所以把代码可以放在head里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function t2(){
var divTag=document.getElementById("p");
var div_text=divTag.innerHTML;
console.log(div_text);
}
</script>
</head>
<body onload="t2()">
<div id="p">
互相进步
</div>
</body>
</html>
BOM:
概念:
BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.
BOM里面包含的五个对象
window:表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)
location:表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)
history:表示用户访问过的前后的历史记录,操作用户访问过的历史记录
screen:表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)
navigator:表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
常用API:
window的open()和close()
<input type="button" value="开启一个新窗口" onclick="openW();"/>
<input type="button" value="关闭一个新窗口" onclick="closeW();"/>
<script>
//1开启一个新窗口
function openW(){
//wid: 表示新的窗口对象
window.open("http://www.baidu.com");
}
//2.关闭一个新窗口
function closeW(){
//开谁,关闭谁
window.close();
}
</script>
location使用:location.href
<body>
<input type="button" value="获取窗口的地址" onclick="getPath();" />
<input type="button" value="改变窗口的地址" onclick="changePath();" />
<script type="text/javascript">
//1.获取地址
function getPath(){
//var loc = window.location;
//var path = loc.href;
var path = location.href;
document.write(path);
}
//2.改变地址
function changePath(){
//location.href="https://www.baidu.com";
//location.href="index.html";
location.href="http://127.0.0.1:8020/javascript_high1/index.html";
}
</script>
</body>
练习:省市二级联动:
需求:点击省份数据,显示市区数据
出现错误:option value=""时,应该把value=""去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
省:<select id="p">
<option>请选择</option>
<option value="1">山西省</option>
<option value="2">陕西省</option>
</select>
市:<select id="c">
<option>请选择</option>
</select>
<script type="text/javascript">
document.getElementById("p").onchange=function(){
var province=this.value;
var city=document.getElementById("c");
if(province==1){
var data="<option>请选择</option>"+
"<option>太原</option>"+
"<option>大同</option>";
city.innerHTML=data;
}else if(province==2){
var data="<option>请选择</option>"+
"<option>西安</option>"+
"<option>安溪</option>";
city.innerHTML=data;
}
}
</script>
</body>
</html>
常见的内置对象
Global全局对象
全局对象:javascript内置的对象(这个对象的名称是Global: 只有名称,没有”真人“)
特点: 调用方法时,全局对象省略不写
常用方法:
eval(): 计算 JavaScript 字符串,并把它作为脚本代码来执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var a="document.write(1111)";
eval(a);
</script>
</body>
</html>
isNaN():检查某个值是否是数字。不是数字返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var a=10;
document.write(isNaN(a));
</script>
</body>
</html>
parseFloat():解析一个字符串并返回一个浮点数
parseInt():解析一个字符串并返回一个整数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num="da101";
document.write(typeof(num));
document.write(num);
var num1=parseInt(num);
document.write(typeof(num1));
document.write(num1);
</script>
</body>
</html>
Math对象
常用方法
floor();"地板方法"向下取整,比如: 5.9–>向下取整 5
ceil();"天花板方法"向上取整,比如:5.01–>向上取整6
round();四舍五入的方法
random();随机数,范围[0,1);包含0,不包含1,可以随机出小数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var n1=Math.random()*6;
document.write(n1);
</script>
</body>
</html>
JSON对象
概念:JSON(JavaScript Object Notation):是一种轻量级的数据交换格式。
特点:1.数据量小 2.比较直观
作用:在浏览器与服务器之间交换数据
对象的定义及遍历:
第一种:单个json对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var user={"id":1,"name":"jack"};
document.write(user.id+":"+user.name)
</script>
</body>
</html>
第二种:json数组对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var user=[{"id":1,"name":"jack"},{"id":2,"name":"rose"},{"id":3,"name":"ship"},]
for (var i = 0; i < user.length; i++) {
var p=user[i];
document.write(p.id+":"+p.name);
}
</script>
</body>
</html>
复杂的json对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var user={"马牛逼":{"age":1,"sex":"nan"}};
var casUser=user.马牛逼;
var casUserId=user.马牛逼.age;
document.write(casUserId);
</script>
</body>
</html>
JAVAScript面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
class Demo{
//成员变量
num=0;
//构造器
constructor(num){
this.num=num;
}
//方法
test(){
document.write(this.num);
}
}
//创建对象
var demo=new Demo(1000);
demo.test();
</script>
</body>
</html>