初始HTML(四) JS高级
时间:2019-01-10
本文章向大家介绍初始HTML(四) JS高级,主要包括初始HTML(四) JS高级使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JavaScript高级
1. BOM对象
Browser Object Model 浏览器对象模型
我们把浏览器抽取成对象模型,可以模拟一些浏览器的功能
1.1 window对象
对话框
<script>
/*
* 对话框
* 1) 警告框:window.alert('消息内容');
* 2) 确认框;confirm('消息内容');确认按钮
* 返回true,取消按钮 返回false
* 3) 输入框; prompt('消息内容',确认值,);
* 确认按钮输入值,取消按钮返回null
* window 方法和属性,window可以省略不写
* */
console.log(confirm("5+4=?"));
//window.alert("嘿,世界")
// console.log(prompt("5+4=?"));
</script>
定时器
/*
* 定时器
* 1) 复用定时器
* var number= setInterval('函数名()',间隔时间);
* 根据间隔时间,执行指定函数,无限循环,返回值定时器编号
* var number= setInterval(函数名,间隔时间);根据间隔时间
* 执行指定函数,
* clearInterval(number);关闭定时器
* 2) 一次性定时器
* var number = setTimeout('函数名()',间隔时间);根据间隔时间
* 执行指定函数,仅执行一次,返回定时器编号
* clearTimeout(number);关闭定时器
*
* */
会动的时钟
</head>
<body>
<!--创建一个时钟-->
<h1 id="clock">我是时钟</h1>
<!--制作一个开始的按钮-->
<input type="button" value="开始" onclick="start()"/>
<!--制作一个暂停的按钮-->
<input type="button" value="暂停" onclick="pause()"/>
</body>
<script>
var timer;
//开始调用
function start() {
//清除上一个计时器
window.clearInterval(timer);
//1秒之后开始begin()
timer= window.setInterval("begin()",1000);
}
//
function begin() {
//得到现在的时间
var time = new Date();
//得到 时钟元素
var clock = document.getElementById("clock");
//将时间显示在h1元素
clock.innerHTML = time.toLocaleString();
}
//暂停
function pause() {
//清除计时器
window.clearInterval(timer);
}
</script>
1.2 location对象
<input type="button" value="跳转到百度" onclick="jump()">;
</body>
<script>
/*
* location对象
* 1) location.href 当前窗口地址栏的属性值
* 2) location.reload() 页面刷新
* */
function jump() {
location.href="http://www.baidu.com";
}
</script>
页面跳转
<h1 id="jump">开始跳转</h1>
</body>
<script>
var num=5;
document.getElementById("jump").onclick=function () {
setInterval("time()",1000);
}
function time(){
if(num!=0){
document.getElementById("jump").innerText=num--;
}else {
location.href="http://localhost:63342/myWeb/day03/c_%E4%BA%8B%E4%BB%B6/" +
"b_%E8%BD%AE%E7%95%AA.html?_ijt=3sjhop04275fldr7ofrgj96lks";
}
}
</script>
1.3 history对象
属性和方法
</head>
<body>
<input type="button" value="前进" id="qian">
</body>
<script>
/*
* history.forward();前进
* history.back();后退
* history.go(1);前进
* history.go(-1);后退
* history.go(0);刷新
* */
document.getElementById("qian").onclick=function () {
history.forward();
location.href="http://localhost:63342/myWeb/day04/a_" +
"%E5%88%9D%E4%BD%93%E9%AA%8C/a_01%E5%AF%B9%E8%AF%9D%E6%A1%86.html" +
"?_ijt=t0pcrpdnj976otuj9i5arfbpkv"
}
</script>
</html>
2 DOM
Document Object Model 文档对象模型
html标签通过浏览器加载内存中会生成一颗DOM属性,通过js代码可以获取这颗树的任意一个节点,可以这个节点属性和文本内容,动态修改html标签
2.1 获取节点的方法
//获取唯一节点(元素)
document.getElementBYId(‘id的属性值’);
//获取一组节点(元素)
document.getElementByTagName(‘html标签名’);
//通过class过去属性
document.getElementsByClassName(“class的属性值”);
//name的属性
document.getElementByName(‘name的属性值’);
查找节点
<body>
<input type="button" id="lianjie2" value="标签">
<input type="button" id="lian3" value="通过name给div值">
<input type="button" id="jie4" value="通过类名div给值">
<hr/>
<a >百度</a> <br>
<a >千里寻</a> <br>
<a >龙猫</a> <br>
<a >你的名字</a> <br>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"> </div>
<div class="two"> </div>
<div class="two"> </div>
</body>
<script>
window.onload=function() {
var b2 = document.getElementById("lianjie2");
b2.onclick = function () {
var aN = document.getElementsByTagName("a");
for (var index = 0; index < aN.length; index++) {
aN[index].href = "http://www.itcast.cn";
}
};
//根据name的属性值找
var b3 = document.getElementById("lian3")
b3.onclick=function() {
//返回一个数组
var divs = document.getElementsByName("one")
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = "<a href='#'> 黑马程序员</a>";
}
};
//根据姓名寻找
var b4 = document.getElementById("jie4")
b4.onclick=function(){
var divs = document.getElementsByClassName("two")
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = "<a href='#'>java开发EE</a>";
}
}
}
</script>
全选与反选
<body>
<input type="checkbox" name="a" value="1500" >山地自行车1500 <br>
<input type="checkbox" name="a" value="200">时尚女装200 <br>
<input type="checkbox" name="a" > 笔记本电脑3000元<br>
<input type="checkbox" name="a" >情侣手表800 <br>
<input type="checkbox" name="a" >桑塔纳2000 <br>
<hr/>
<input type="checkbox" id="all" onclick="selectAll()"/>全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value="反选"/>
</body>
<script>
//全选/全不全
function selectAll() {
var all =document.getElementById("all");
//得到上面所有复选框状态
var v= document.getElementsByName("a");
for(i = 0;i<v.length;i++) {
v[i].checked=all.checked;
}
}
function reverseSelect() {
//得到上面所有的复选框
var a=document.getElementsByName("a");
for (i=0;i<a.length;i++) {
a[i].checked=!a[i].checked;
}
}
</script>
省市联动
<body>
<select id="proviceId" onchange="selectCity(this)">
<option > -请选择-</option>
<option > 黑龙江</option>
<option > 吉林</option>
<option > 辽宁</option>
<option > 河南</option>
</select>
<select id="cityId">
<option value="">
--请选择市
</option>
</select>
</body>
<script>
var citys = new Array(5);
citys[0] = [];
citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
citys[2] = ["长春市","吉林市","四平市","通化市"];
citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
function selectCity(pNode) {
//获取当前省份所选择到的索引值
var index=pNode.selectedIndex;
//根据索引值取出该省份对应的城市
var cityData=citys[index];
//进行初始话
var options="<option value=\"\">\n" +
" --请选择市\n" +
" </option>";
//遍历一维城市数组,每个城市就是一个option
for (var i= 0;i<cityData.length;i++) {
var cityName=cityData[i];
options +="<option>"+cityName+"</option>";
}
//添加到cityselect框下;
var cityNod= document.getElementById("cityId");
cityNod.innerHTML=options;
}
</script>
2.2 使用js控制css样式
动态修改样式
<head>
<meta charset="UTF-8">
<title>示例代码</title>
<style>
.two{
color: red;
font-size:45px;
font-family: 宋体 ;
}
</style>
</head>
<body>
<p id="first">
这是第一自然段
</p>
<p id="second">
这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()"/>;
<input type="button" value="改变类样式" onclick="changeClass()"/>
</body>
<script>
function changeClass() {
var p2= document.getElementById("second");
p2.className="two";
}
</script>
表格隔行换色
<head>
<meta charset="UTF-8">
<title>修改表格的背景色</title>
<style>
table {
margin: auto;
border-collapse: collapse;
}
tr {
text-align: center;
height: 32px;
}
</style>
</head
- MySQL备份恢复第一篇(r5笔记第5天)
- 经典面试问题: Top K 之 -- 海量数据找出现次数最多或,不重复的
- Java多线程详解4【面试+工作】
- Java多线程详解5【面试+工作】
- Java多线程详解6【面试+工作】
- MySQL备份恢复第二篇(r5笔记第6天)
- SpringMVC 中配置 Swagger 插件.
- MySQL和Oracle对比学习之事务(r5笔记第4天)
- 【面试宝典】Java如何打印数组
- MySQL数据导入导出牛刀小试(r5笔记第3天)
- SpringMVC 异常处理.
- 一条简单的sql在11g和12c中的不同(r5笔记第2天)
- 浅析 SpringMVC 原理和配置.
- 使用impdp不当导致的数据丢失问题(r5笔记第1天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 进化算法个体和指标的一致性
- matlab代码折叠与分节注释
- Flask从零到一 1 | 虚拟环境和第一个flask程序
- 按照元素指定条件筛选结构体数组
- 多目标优化按支配关系分层实现
- CentOS 7 解决丢失 nginx.pid
- $(function(){})和$(document).ready(function(){})
- javascript中的setTimeout() 方法和clearInterval() 方法和setInterval() 方法
- matlab生成数字1-n的列向量
- JavaScript中的匿名函数及函数的闭包
- ios下Safari无法触发click事件的处理
- 禁止网页右键、复制、另存为、查看源文件等功能
- ajax知识点
- 前端特效常用代码
- VBA编写Ribbon Custom UI编辑器02——编码转换