JS 02
HTML DOM对象
HTML Document Object Model ( HTML文档对象模型 )
###通过文档对象 document , 获取元素对象 *****
1. 通过元素的id属性值, 查找一个元素对象
var 元素对象 = document.getElementById("id值");
2. 通过元素的名称 , 查找一个元素对象数组
var 元素对象数组 = document.getElementsByTagName("标签名称");
3. 通过元素的class属性值, 查找一个元素对象数组
var 元素对象数组 = document.getElementsByClassName("class值");
4. 通过元素的name属性值, 查找一个元素对象数组
var 元素对象数组 = document.getElementsByName("name值");
###如何操作元素的属性 ***
设置属性值:
元素对象.属性名 = 值;
获取属性值:
var 属性值 = 元素对象.属性名;
例如:
元素如下:
<img id="img1" src="images/1.jpg" width="200px" height="200px">
JS代码如下:
var img1 = document.getElementById("img1");
上述查找到的img1对象, 包含了img标签所有的属性, 但是只有src 和 width 以及 height 是有值的.
操作属性代码如下:
将图片的透明度设置为0.5:
img1.style = "opacity:0.5";
修改图片显示为images/2.jpg:
img1.src = "images/2.jpg";
例如:
在用户输入完毕(输入框失去焦点)时 , 获取如下输入框的内容:
<input id="input1" onblur="x1()">
<script>
function x1(){
var input1 = document.getElementById("input1");
var val = input1.value;
alert("输入的内容:"+val);
}
</script>
###特殊属性:
1. class属性 : class在JS中是关键字. 因为属性名的命名规则不允许使用关键字, 所以class的属性操作, 需要通过className属性来完成.
2. 标签内容 : 通过innerHTML属性 来操作开始标签 与 结束标签之间的部分.
####class属性修改的案例:
<style type="text/css">
body{
margin: 0px;
}
.style1{
background-color: #aec7d6;
color:#076d07;
}
.style2{
background-color: #dc8aa0;
color:#e6e4e4;
}
.content{
padding: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
function x1(num){
var content = document.getElementsByClassName("content")[0];
if(num == 1){
content.className = "content style1";
}else{
content.className = "content style2";
}
}
</script>
<div class="content style1">
<div>
请选择你的性别:
男:<input type="radio" name="sex" checked="checked" onclick="x1(1)">
女:<input type="radio" name="sex" onclick="x1(2)">
</div>
<h3>xxx小说阅读器</h3>
元素的 创建 / 插入 / 删除 / 清空
- 创建元素:
var element = document.createElement("标签名");
- 将创建的元素 加入到网页中
- 通过父元素, 追加子元素
格式: 父元素.appendChild(创建的元素);
- 通过父元素向指定位置 , 加入子元素
格式: 父元素.insertChild(创建的元素, 参考的已存在的子元素);
//插入到参考子元素的前面 , 如果参考子元素不存在, 则效果为追加.
- 删除元素
父元素.removeChild(子元素对象);
- 清空元素:
元素.innerHTML = "";
###window对象
- 打开窗口
var 窗口对象 = window.open(url,[name],[config],[specs]);
参数1. url : 新窗口加载的内容地址.
参数2. name: 窗口的名称, 是窗口的唯一标识, 不能同时打开两个名称相同的窗口.
参数3. config: 窗口的配置, 是一个字符串参数.
格式:
有多个键值对组成, 键与值之间等号连接, 多个键值对逗号分隔.
- width : 窗口的宽度px
- height : 窗口的高度px
- left : 窗口距离屏幕左边框的距离px
- top : 窗口距离屏幕上边框的距离px
参数4. specs: boolean 类型参数 , 是否允许使用历史记录.
- 关闭指定窗口
窗口对象.close();
- 关闭当前窗口
window.close();
定时器 ***
一次性定时器 ****
作用: 指定延迟时间, 执行代码.
格式:
setTimeout(function(){
//这个函数, 在指定的延迟时间后, 执行.
},延迟时间毫秒);
周期性定时器 **
作用: 指定间隔的周期时长, 重复执行某段代码.
- 开启周期性定时器
var 定时器的序号 = setInterval(function(){
//这个函数, 每隔周期时间 , 重复执行
},周期时间毫秒);
- 关闭周期性定时器
clearInterval(定时器序号);
浏览器地址对象 location ***
属性:
href : 用于设置与获取当前浏览器的地址内容.
函数:
reload() : 刷新网页
replace("网址") : 替换网页.
屏幕对象 screen 了解
用于获取屏幕的宽度 和 高度.
属性:
- screen.width : 屏幕宽度
- screen.height : 屏幕高度
- screen.availWidth : 屏幕宽度
- screen.availHeight : 屏幕高度
控制台对象 console 掌握
- 输出普通日志
console.log("文本");
- 输出错误日志:
console.error("文本");
- 输出警告日志:
console.warn("文本");
- 输出提示日志:
console.info("文本");
- 输出调试日志:
console.debug("文本");
JS 事件 *
JS中三大分类:
1. 状态事件
2. 鼠标事件
3. 键盘事件
事件对象 event
在任何一个事件触发的 代码块中, 都可以操作一个对象, 对象名称叫做event.
常用属性:
1. clientX : 鼠标事件时, 鼠标所在的x坐标.
2. clientY : 鼠标事件时, 鼠标所在的y坐标
3. keyCode : 键盘事件时, 触发事件的键盘码.
键盘事件
- onkeydown : 当键盘按下. (当按下按键不松开时, 会持续的触发键盘按下事件)
- onkeyup : 当键盘弹起.
键盘事件使用格式:
window.onkeydown = function(){
}
面向对象 了解
面向过程 , 面向对象
JS中定义对象的三种方式
JS中创建对象, 不需要提前编写类.
JS中可以先创建一个空对象 (不包含任何的属性和函数)
后续, 再给空对象 , 设置属性和函数.
格式1.
var 对象名 = new Object();
JS中给对象设置属性值, 如果对象中不存在此属性, 则创建属性并赋值.
案例:
var person = new Object();
person.name = "人人";
person.age = 18;
person.sex = "男";
person.length = "180mm";
person.say = function(){
alert("我是:"+this.name+" , 我今年"+this.age+"岁了 , 我的性别是: "+this.sex+" , 我的身长是:"+this.length);
};
person.say();
格式2.
先创建对象模板, 然后通过new的方式, 来完成对象的创建.
格式:
创建模板的格式:
function 模板名称(形式参数列表){
通过this , 给属性赋值.
}
使用模板的格式:
var 对象名 = new 模板名称(实际参数列表);
案例:
function Book(id,name,info){
this.id = id;
this.name = name;
this.info = info;
this.toString = function(){
console.log("图书编号:"+this.id+" , 图书名称:"+this.name+" , 图书详情:"+this.info);
};
}
格式3 , 通过JSON来创建对象*****
JSON: JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式.
格式:
JSON中包含两大格式: JSON对象 和 JSON数组. 这两种格式可以互相嵌套.
1. JSON对象
一个对象, 由一个大括号表示.
括号中 描述对象的属性与函数 . 通过键值对来描述对象的属性与函数
(可以理解为, 大括号中, 包含的是一个个的键值对.)
格式:
键与值之间使用冒号连接, 多个键值对之间使用逗号分隔.
键值对的键 应使用引号引住 (通常Java解析时, 键不适用引号会报错. 而JS能正确解析.)
键值对的值, 可以是JS中的任意类型的数据
例如: 描述一个人:
//var person = {} 相当于 var person = new Object();
var person = {
"name":"XXX",
"age":1,
"say":function(){
alert("姓名:"+this.name+" , 年龄: "+this.age);
}
};
person.say();
2. JSON数组
就是JS中的数组.
案例:
描述小泽马:
var p = {
"name":"XXX",
"age":8,
"PY":["XXXX","XXXX","XXX","XXXX",{
"name":"XXXX",
"info":"XXXXXXXX"
}],
"haha":{
"name":"XXXXX",
"length":"10000"
}
};
alert(p.PY[4].info);
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
