复习
- javascript 组成？
- window 常用方法
- history 对象常用方法
- 如何打开一个窗口 ？ 关闭呢？
- location 对象的常用方法与属性？
单词预习
- document 文档
- get 获取
- element 元素
- By 通过
- name 名字
- Tag 标签名
- display 呈现，显示
- style 样式
- none 没有
- checked 选中
知识点讲解
3.1 获取元素
| 方法 | 描述 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| getElementsByClassName() | 返回带有指定class名的对象的集合（ie8）以下不兼容 |
| querySelector() | 返回指定css选择器对象的第一个(新版本浏览器才行) |
| querySelectorAll() | 返回指定css选择器对象的集合(新版本浏览器才行) |
案例 getElementById
function changeNode(){
var node=document.getElementById("node");
if(node.innerHTML=="新浪"){
node.innerHTML="搜狐";
}else{
node.innerHTML="新浪";
}
}
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeNode()" />
image.png
结果
image.png
案例 getElementsByTagName
function showInput(){
var s=document.getElementById("s");
var inputs=document.getElementsByTagName("input");
var str="";
for(var i=0;i<inputs.length;i++){
str+=inputs[i].value+"<br/>";
}
s.innerHTML=str;
}
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="showInput()" />
<input name="b3" type="button" value="显示season内容" onclick="showSeason()" />
<p id="s"></p>
点击前
点击 显示input内容 后
案例 getElementsByName
function showSeason(){
var s=document.getElementById("s");
var season=document.getElementsByName("season");
var str="";
for(var j=0;j<season.length;j++){
str+=season[j].value+"<br>";
}
s.innerHTML=str;
}
点击前
点击显示season内容后
3.2 显示/隐藏
| 值 | 描述 |
|---|---|
| visible | 表示元素是可见的 |
| hidden | 表示元素是不可见的 |
visibility属性的值
| 值 | 描述 |
|---|---|
| visible | 表示元素是可见的 |
| hidden | 表示元素是不可见的 |
object.style.visibility="值"
| 值 | 描述 |
|---|---|
| none | 表示此元素不会被显示 |
| block | 表示此元素将显示为块级元素 |
| inline-block | 行内的块 |
display属性的值
| 值 | 描述 |
|---|---|
| none | 表示此元素不会被显示 |
| block | 表示此元素将显示为块级元素 |
| inline-block | 行内的块 |
object.style.display="值"
点击前
点击 visibility后
点击display隐藏后
js
function hidden1(){
var b2=document.getElementById("b2");
if(b2.style.visibility!="hidden"){
b2.style.visibility="hidden"
// 隐藏图像还占原来的位置
}else{
b2.style.visibility="visible"
}
}
function hidden2(){
var b2=document.getElementById("b2");
if(b2.style.display!="none"){
b2.style.display="none"
// 隐藏图像不占原来的位置
}else{
b2.style.display="inline-block"
}
}
html
<br />
<input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden1()"/>
<input name="btn2" type="button" value="display隐藏图b2" onclick="hidden2()" />
3.3 树形菜单
树形菜单
3.4 全选效果
- 复选框的checked属性值
选中：true
未选中：false - onchange 事件 当表单发生改变时触发
思路
1 为每一个checkbox添加一个onchange事件
for(var i = 0, len = 单选框集合.length; i++) {
单选框集合[i].onchange = function() {
checkAllChecked();
}
}
2， 查看是否是全选
function checkAllChecked() {
var isSelected = true; //全选是否会选中
// 循环每一个多选框
for(;;) {
if(是否没有被选中) {
isSelected = false;
break; //退出来
}
}
allCheck.checked = isSelected;
// 设置全选按钮
}
3. 设置全选
allCheck.onchange = function() {
if（如果全选按钮被选中）{
// 循环所有的单选框都设置选中
}else{
// 循环所有的单选框都设置不选中
}
}
全选效果
扩展 （有时间讲）
eval(str) 把字符串当 js执行一次(小心使用)
计算器扩展
总结
- 获取元素有哪些方法
- 如果设置元素的显示与隐藏
- 如何设置单选框被选中 或者不被选中
- 表单发生改变触发的事件是什么
作业
- 全选
- 步进器
步进器
- 实现简易的计算器（选做）
- getElementsByClassName 不兼容怎么办（选做）
请自行百度 getElementsByClassName 如何兼容
提示
className 获取元素 class 的属性值
elem.className.indexOf(classname+" ") != -1
|| elem.className.indexOf(" "+classname+" ") != -1
|| elem.className.indexOf(" "+classname) != -1
