JS和DOM技术
任务
1、JS全局函数
2、DOM对象介绍
3、BOM对象介绍
4、JS中的事件
5、document对象
5、JS和DOM练习
课堂笔记
css的选择器：
1、标签名选择器
2、id选择器
3、class选择器
4、组合选择器
5、关联选择器（派生选择器）
6、伪元素选择器
JavaScript技术：
注释：
关键字、标识符
常量、变量
运算符（算术运算、赋值运算、比较运算、逻辑运算、位运算、三目运算）
语句（判断结构、分支结构、循环结构）
函数（三种定义方式：function定义，Function定义，匿名函数）
数组（2种定义方式）
1、JS中的全局函数
全局函数：JS中提供部分的函数，不需要任何对象，可以直接通过函数名在代码使用。
URL：统一资源定位符
浏览器地址栏中输入的信息
http：//www.itheima.com:80/index.jsp?name=zhangsan&password=123
URI：统一资源标识符
URI表示的资源数据不具体 index.jsp 称为一个URI
<scripttype="text/javascript">
/*
encodeURI() 对url中的数据进行编码
decodeURI() 对编码后的url进行解码
parseInt() 把一个字符串解析成整数
parseFloat() 把一个字符串解析成小数
eval() 可以把一个字符串解析成JS代码，并让解析后的js代码运行
*/
var str ="http://www.itheima.com:80?username=张三&age=23";
varen_str = encodeURI(str);
document.write(en_str +"<br/>");
varde_str = decodeURI(en_str);
document.write(de_str +"<br/>");
varss ="alert('abc')";
//alert(ss);
eval(ss);
</script>
2、BOM对象介绍
BOM：browser object model 浏览器对象模型，把当前的浏览器看成一个对象。
通过浏览器对象可以获取和浏览器相关的所有信息。
2.1、window对象
Window对象有浏览器在加载到body或者frameset标签的时候由JS引擎自动创建。我们在JS代码中可以直接使用，使用window。
使用window对象的时候，由于window是JS中最顶层对象，可以省略不写。
window对象中的属于：
专门获取window中包含的其他对象：
document 获取浏览器加载的html文件对象
history 获取浏览器中的历史记录对象
location 浏览器的地址栏对象
navigator 浏览器对象
screen 浏览器窗口在显示器屏幕上的相关对象
window对象中的方法：
<scripttype="text/javascript">
/*
setInterval("函数名",毫秒值)
在指定的毫秒值之后重复执行当前指定的这个函数
clearInterval()
清除重复执行的动作
setTimeout("函数名",毫秒值)
在制定的毫秒值后只执行一次某个函数
clearTimeout()
清除指定的执行动作
open() 打开一个新窗口
close() 关闭打开的新窗口
*/
var stop;
window.οnlοad= function(){
window.status = "我在浏览器的最下面，您能找到吗？";
//需要通过window对象中的setInterval设置重复给页面显示时间
stop = window.setInterval("showTime()", 1000);
}
functionshowTime(){
var date=new Date();
document.getElementById("time").innerHTML = date.toLocaleString();
}
function_stop(){
window.clearInterval(stop);
}
function_open(){
window.open("http://www.itheima.com");
}
</script>
</head>
<body>
<divid="time">显示时间</div>
<buttononclick="_stop();">停止</button>
<buttononclick="_open();">打开</button>
</body>
2.2、history对象
back返回上一个url地址显示的页面
forward 去下一个url地址显示的页面
go(数字|url) 到指定的页面
2.3、location对象
<scripttype="text/javascript">
function _demo(){
location.href = "http://www.itheima.com";
}
function_demo2(){
alert(location.href);
}
</script>
2.4、navigator对象
<scripttype="text/javascript">
/*
演示Navigator对象
*/
window.οnlοad= function(){
var ps =navigator.plugins;
for(vari = 0 ; i < ps.length ; i++){
document.write(ps[i].name+"<br/>");
}
}
</script>
3、DOM对象
DOM：Document Object Model 文档对象模型。
文档：html文件。但是后期也可能是xml文档
当浏览器把一个html文件加载到内存中，这时就会在内存中得到一个关于当前这个html文件的对象，这个对象就是DOM对象。
DOM对象的标准：由W3C指定，它规定如何通过JS技术来解析当前加载的这个html文件中的所有标签，以及标签中的属性，还有标签中封装的文本数据。
当我们去解析一个html文件的时候，解析到的标签称为标签对象（元素节点）、标签上的属性称为属性对象（属性节点）、标签中的文本称为文本对象（文本节点）。
4、dom对象中的方法介绍
<scripttype="text/javascript">
/*
介绍document对象中的getElementById方法
getElementById: 是根据页面上的标签的id属性值。获取当前某个标签对象
当获取到一个html页面中的标签对象之后，当前这个标签对象的具体操作需要查阅DHTML文档
getElementsByName() :根据页面上标签上的name属性的值，获取当前页面上的标签对象
由于标签的name属性的值可能重复，因此获取到的一个数组
getElementsByTagName():根据标签的名称获取标签对象，由于页面上会出现同名的标签，因此获取到一定也是一个数组
*/
function _getValue(){
var input= document.getElementById("username");
alert(input.value);
}
function_getValue2(){
var hobbies= document.getElementsByName("hobby");
for(vari = 0 ; i < hobbies.length ;i++ ){
alert(hobbies[i].value);
}
}
function_getValue3(){
var inputs= document.getElementsByTagName("input");
for(vari = 0 ; i < inputs.length ;i++ ){
alert(inputs[i].value);
}
}
</script>
</head>
<body>
用户名:<inputtype="password"name="password"id="username"/>
<buttononclick="_getValue();">获取值</button><br/>
爱好：<inputtype="checkbox"name="hobby"value="Java"/>Java
<inputtype="checkbox"name="hobby"value="c"/>C
<inputtype="checkbox"name="hobby"value="c#"/>C#
<inputtype="checkbox"name="hobby"value="ios"/>IOS
<buttononclick="_getValue2();">获取值</button><br/>
<buttononclick="_getValue3();">获取所有input标签</button><br/>
</body>
5、JS中的事件
事件：它表示的是在页面中用户通过鼠标，键盘等对页面上的标签的操作。任何的操作都会对应一个事件。
我们需要变成JS函数，给不同的事件指定不同的功能。
当页面上发生某个事件之后，需要为这个事件指定它所对应的功能。
给页面上的标签绑定事件对应的函数的2种方式：
1、直接在页面上的标签上书写事件名称，然后给名称的属性值绑定JS函数名
2、在页面加载完成之后，通过js和dom技术获取到这个标签对象，然后动态给这个标签绑定事件
<scripttype="text/javascript">
//直接在页面上的标签上绑定事件
function _click(){
var input= document.getElementById("username");
if(input.value =="请输入用户名"){
input.value="";
}
}
//动态的给页面上的标签绑定事件
//必须在页面架子完成之后绑定事件
/*
JS中的正则对象：
JS中创建正则对象可以直接new，还可以使用/正则表达式/
varreg = new RegExp("正则表达式");
varreg2 = /正则表达式/;
*/
window.onload = function(){
document.getElementById("username").onblur =function(){
//在事件中可以使用this关键字，this表示的是当前发生事件的哪个标签对象
var value =this.value;
varreg =new RegExp("^\\w{6,12}$");
if( reg.test(value) ){
document.getElementById("nameSpan").innerHTML ="用户名正确".fontcolor("green");
}else{
document.getElementById("nameSpan").innerHTML ="用户错误".fontcolor("red");
}
}
}
</script>
</head>
<body>
用户名:<inputtype="text"id="username"onclick="_click();"value="请输入用户名"/>
<spanid="nameSpan"></span><br/>
</body>
6、dom练习
6.1、dom中的创建和添加方法
<scripttype="text/javascript">
function demo(){
//获取页面上的div标签对象
var div = document.getElementById("div");
//div.innerHTML= "添加数据";
//使用dom技术动态先在内存中创建出一个文本对象
var text = document.createTextNode("数据");
//把文本标签对象条件到div中
div.appendChild(text);
}
functiondemo2(){
var div =document.getElementById("div");
//div.innerHTML= "<a href='http://www.itheima.com'>黑马</a>";
//创建a标签对象
var a = document.createElement("a");//<a></a>
a.innerHTML = "黑马";//<a>黑马</a>
//给a标签上添加属性
a.setAttribute("href","http://www.itheima.com");
//<ahref='http://www.itheima.com'>黑马</a>
div.appendChild(a);
}
</script>
6.2、dom中的删除、克隆、替换方法
<scripttype="text/javascript">
//删除页面上的id为two 的 div
function demo(){
var two =document.getElementById("two");
//删除的时候必须获取当前标签的父标签，才能删除自己
var body = two.parentNode;
//删除当前div标签对象
//获取 id为 one的div 使用兄弟标签获取
var one = two.previousSibling;
body.removeChild(one);
}
//替换
function demo2(){
//使用id为one的div替换id为two的div
var two = document.getElementById("two");
var one =document.getElementById("one");
//获取父标签
var body = two.parentNode;
body.replaceChild(one, two);
}
//克隆替换
function demo3(){
//使用id为one的div替换id为two的div
var two = document.getElementById("two");
var one =document.getElementById("one");
//获取父标签
var body = two.parentNode;
//克隆出id为one的div标签
var cloneOne = one.cloneNode(true);
body.replaceChild(cloneOne, two);
}
</script>
6.3、全选全不选反选
<html>
<head>
<title>check.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scripttype="text/javascript">
//页面加载完成之后，给页面上的三个按钮绑定单击事件
window.onload = function(){
document.getElementById("checkall").onclick =function(){
//获取页面上的所有checkbox标签
varitems =document.getElementsByName("items");
for(vari = 0;i < items.length ; i++){
items[i].checked = true;
}
}
document.getElementById("checkallNo").onclick =function(){
//获取页面上的所有checkbox标签
varitems =document.getElementsByName("items");
for(vari = 0;i < items.length ; i++){
items[i].checked = false;
}
}
document.getElementById("check_revsern").onclick =function(){
//获取页面上的所有checkbox标签
varitems = document.getElementsByName("items");
for(vari = 0;i < items.length ; i++){
/*
if(items[i].checked ){
items[i].checked = false;
}else{
items[i].checked = true;
}
items[i].checked= items[i].checked ? false : true;
*/
items[i].checked =!items[i].checked;
}
}
}
function _check(){
varc = document.getElementById("check");
varitems =document.getElementsByName("items");
for(vari = 0;i < items.length ; i++){
items[i].checked =c.checked;
}
}
</script>
</head>
<body>
您的爱好很广泛!!!<br>
<inputtype="checkbox"id="check"onclick="_check();"/>全选全不选
<inputtype="checkbox"name="items"value="足球"/>足球
<inputtype="checkbox"name="items"value="篮球"/>篮球
<inputtype="checkbox"name="items"value="游泳"/>游泳
<inputtype="checkbox"name="items"value="唱歌"/>唱歌
<br>
<inputtype="button"name="checkall"id="checkall"value="全选" />
<inputtype="button"name="checkall"id="checkallNo"value="全不选"/>
<inputtype="button"name="checkall"id="check_revsern"value="反选"/>
</body>
</html>
6.4、表格隔行变色
<scripttype="text/javascript">
/*
在页面加载完成之后，获取表格的所有tr
遍历当前所有的tr，判断奇数还是偶数，给奇数和偶数的行添加不同的class属性值
*/
window.οnlοad= function(){
var trs =document.getElementsByTagName("tr");
for(vari = 1 ; i < trs.length ; i++){
if( i % 2 ){
trs[i].className = "one";
}else{
trs[i].className = "two";
}
//定义变量记录原来某一行的class属性的值
var oldClassName ="";
//给当前遍历的到行动态的添加鼠标悬停和移出事件
trs[i].οnmοuseοver= function(){
oldClassName = this.className;
this.className="over";
}
trs[i].οnmοuseοut= function(){
this.className= oldClassName;
}
}
}
</script>
6.5、注册页面
7、JSON格式数据
JSON格式的数据主要是在客户端和服务器之间进行数据交互（传输）。
服务器把传递给客户端的数据拼接成JSON格式，在客户端就可以直接根据json格式解析数据。
或者是客户端把数据拼接成JSON格式，交给服务器，服务器使用Java代码解析出来。
JSON格式的数据表现形式：
第一种格式：
{
key:value,
key:value,
key:value
}
JSON格式中的数据的key必须是字符串。value值可以是任意类型的数据
第二种格式：
[
{ key:value , key:value }，
{ key:value , key:value }，
{ key:value , key:value }
]
<scripttype="text/javascript">
/*
json的第一种格式：
varjson = {key:value,key:value}
可以根据指定的json对象，调用它的key，得到对应的value
调用的方式：
格式1：对象.key 获取到key对应的value
格式2：对象["key"] 获取到key对应的value
如果要遍历json个数的所有数据，需要使用循环for in循环
====================================================
Java中的foreach遍历容器：
for( 容器中的数据类型 变量名 ： 容器名 ){
变量空间中保持的是容器中的某个元素数据
}
====================================================
JS中的for in格式
for( var 变量 in数组|对象|json ){
如果是数组的话，变量是数组的下标
如果是json个数数据，变量是key值
如果是对象，变量是对象中的某个属性或者方法名
}
var arr = [4,2,7,9,0,11];
for( var i in arr){
alert(arr[i]);
}
*/
var json = {
"name":"林青霞",
"age":26,
"address":"东莞",
"sex":"不详",
"student":{
"name":"风清扬",
"age":32,
"address":"西安",
}
};
for( var j injson ){
document.write(j +":"+json[j]+"<br/>");
for(vari injson[j] ){
document.write(i+":"+json[j][i]+"<br/>");
}
}
varjson2 = [
{"name":"黑马",
"age":"5"}
];
alert(json2[0].name);
</script>
8、自定义对象
<scripttype="text/javascript">
//定义对象
function Person(name ,age){
this.name= name;
this.age= age;
this.getName=function(){
returnname;
}
}
/*
varp = new Person();
p.age= 23;
p.name= "张三";
p.setName= function( name){
this.name = name;
}
*/
var p =new Person("zhangsan",23);
document.write(p.age+"...."+p.name)
alert(Person);
</script>
扫一扫
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
