JavaScript教程
关注
分享
扫一扫
JavaScript教程
ZHOU_VIP
这个作者很懒，什么都没留下…
展开
-
JS基础_JSON
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理 --> <script type="text/javascript" src="js/json2.js"></script> <s.原创 2021-01-25 10:18:15 · 146 阅读 · 0 评论 -
JS基础_二级菜单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; t...原创 2021-01-24 11:43:10 · 320 阅读 · 0 评论 -
JS基础_类的操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ height: 300px;...原创 2021-01-24 10:40:10 · 151 阅读 · 0 评论 -
JS基础_完成轮播图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* * 设置outer的样式 */ #outer{ /*设置宽和高*/ wid...原创 2021-01-24 10:33:16 · 183 阅读 · 0 评论 -
JS基础_定时器的应用（三）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-c.原创 2021-01-24 10:24:27 · 175 阅读 · 0 评论 -
JS基础_定时器的应用（二）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-c.原创 2021-01-24 10:23:52 · 213 阅读 · 0 评论 -
JS基础_定时器的应用（一）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-c.原创 2021-01-24 10:21:11 · 168 阅读 · 0 评论 -
JS基础_延时调用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var num = 1; //开启一个定时器 /*setInterval(function(){ console.log(num++); },3000);*/ .原创 2021-01-24 10:17:35 · 352 阅读 · 0 评论 -
JS基础_修改div移动练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .原创 2021-01-24 10:11:23 · 160 阅读 · 0 评论 -
JS基础_切换图片练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 使图片可以自动切换 */ //获取img标签 var img1...原创 2021-01-24 10:04:00 · 198 阅读 · 0 评论 -
JS基础_Location
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * Location * - 该对象中封装了浏览器的地址栏的信息 */ window.onload = function(){ //获取按钮对象 .原创 2020-12-27 11:22:17 · 176 阅读 · 0 评论 -
JS基础_BOM对象History
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * History * - 对象可以用来操作浏览器向前或向后翻页 */ window.onload = function(){ //获取按钮对象 .原创 2020-12-12 20:59:17 · 187 阅读 · 0 评论 -
JS基础_BOM对象Navigator
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* * BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 *.原创 2020-12-12 20:45:20 · 223 阅读 · 0 评论 -
JS基础_键盘移动div
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .原创 2020-12-12 20:19:57 · 251 阅读 · 0 评论 -
JS基础_键盘事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 键盘事件： * onkeydown * - 按键被按下 * -.原创 2020-12-12 20:18:27 · 465 阅读 · 0 评论 -
JS基础_滚轮的事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <scr.原创 2020-12-12 12:39:21 · 374 阅读 · 0 评论 -
JS基础_拖拽（三），用函数实现拖拽
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .原创 2020-12-12 12:15:48 · 369 阅读 · 0 评论 -
JS基础_拖拽（二）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .原创 2020-12-12 12:12:56 · 146 阅读 · 0 评论 -
JS基础_拖拽（一）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .原创 2020-12-12 12:01:40 · 295 阅读 · 0 评论 -
JS基础_事件的传播
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: yellowgreen; } #box2{ wi...原创 2020-11-29 20:16:07 · 216 阅读 · 0 评论 -
JS基础_事件的绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = d.原创 2020-11-29 17:01:36 · 253 阅读 · 0 评论 -
JS基础_事件的委派
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var u1 = document.getElementById("u1"); //点击按钮以后添加超链接...原创 2020-11-29 16:40:18 · 384 阅读 · 0 评论 -
JS基础_事件的冒泡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: yellowgreen; } #s1{ background.原创 2020-11-29 15:34:28 · 262 阅读 · 0 评论 -
JS基础_练习div跟随鼠标移动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 开启box1的绝对定位 */ p.原创 2020-11-29 15:14:57 · 446 阅读 · 0 评论 -
JS基础_事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>...原创 2020-11-29 12:09:04 · 235 阅读 · 0 评论 -
JS基础_滚动条练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; } &...原创 2020-11-28 22:20:24 · 215 阅读 · 0 评论 -
JS基础_其他样式相关的属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; padding: 10px; border: 10px.原创 2020-11-28 22:15:24 · 262 阅读 · 0 评论 -
JS基础_获取元素的样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: yellow; } </style> &.原创 2020-11-28 21:47:34 · 345 阅读 · 0 评论 -
JS基础_使用DOM操作内联样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <.原创 2020-11-28 21:19:26 · 392 阅读 · 0 评论 -
JS基础_a的索引问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="styleshe.原创 2020-11-22 22:10:55 · 277 阅读 · 0 评论 -
JS基础_添加删除记录练习-用innerHTML改进
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel=".原创 2020-11-22 22:02:35 · 340 阅读 · 0 评论 -
JS基础_添加删除记录练习-添加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel...原创 2020-11-22 21:17:40 · 323 阅读 · 0 评论 -
JS基础_添加删除记录练习-删除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="styles...原创 2020-11-22 20:05:02 · 299 阅读 · 0 评论 -
JS基础_dom增删改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <...原创 2020-11-22 19:16:28 · 198 阅读 · 1 评论 -
JS基础_dom查询的剩余方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取body标签 //var body = document.getElementsByTagName("bo.原创 2020-10-25 22:18:14 · 186 阅读 · 0 评论 -
JS基础_全选练习-复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title><script t...原创 2020-09-19 16:03:52 · 211 阅读 · 0 评论 -
JS基础_DOM查询（这个方法要会：定义一个函数，专门用来为指定元素绑定单击响应函数）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title>...原创 2020-09-19 10:11:40 · 312 阅读 · 0 评论 -
JS基础_dom查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <...原创 2020-09-16 21:27:03 · 165 阅读 · 0 评论 -
JS基础_图片切换的练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; paddi...原创 2020-09-11 23:42:56 · 164 阅读 · 0 评论 -
JS基础_文档的加载
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 浏览器在加载一个页面时，是按照自上向下的顺序加载的， * 读取到一行就运行一行,如果将script标签写到页面的上边， * 在代码执行时，页面还没有加载，页面没.原创 2020-09-11 23:09:47 · 215 阅读 · 0 评论