js基础教程
关注
分享
扫一扫
plannothing
这个作者很懒，什么都没留下…
展开
-
JavaScript中定时器的练习
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 使图片可以自动切换 */ //获取img标签 var img1 = document.getE原创 2020-08-22 10:49:08 · 947 阅读 · 0 评论 -
JavaScript中定时器
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取count var count = document.getElementById("count"); //使c原创 2020-08-22 09:50:31 · 332 阅读 · 0 评论 -
JavaScript中用方向键来移动方块
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:100px; height: 100px; background-color:red ; position: absolute; } </style> <scr原创 2020-08-18 20:26:02 · 986 阅读 · 0 评论 -
JavaScript中键盘事件
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 键盘事件 * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会.原创 2020-08-18 19:52:21 · 893 阅读 · 0 评论 -
javascript中滚轮事件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javas原创 2020-08-17 21:06:43 · 1915 阅读 · 0 评论 -
JavaScript中拖拽图片
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:原创 2020-08-17 19:57:08 · 540 阅读 · 0 评论 -
JavaScript中拖拽
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:原创 2020-08-17 18:57:30 · 204 阅读 · 0 评论 -
JavaScript中事件的传播
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:300px; height: 300px; background-color: yellowgreen; } #box2{ width:200px; height原创 2020-08-16 16:15:56 · 212 阅读 · 0 评论 -
JavaScript中事件的绑定
<html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = document.getElementById("btn01")原创 2020-08-16 15:39:25 · 170 阅读 · 0 评论 -
JavaScript中事件的委任
<html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ //点击按钮以后添加超链接 var u1 = document.getElementById("u1"); var btn01 = document.g原创 2020-08-16 14:41:24 · 170 阅读 · 0 评论 -
JavaScript中事件冒泡
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: #CCBBDD; } span{ background-color: yellow; }原创 2020-08-15 20:05:14 · 152 阅读 · 0 评论 -
JavaScript中鼠标移动加上相应的图片
<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #box01{ width: 100px; height: 100px; background-color: red; /* * 开启box01的绝对定位 */ .原创 2020-08-15 19:20:52 · 603 阅读 · 0 评论 -
JavaScript中鼠标移动事件的坐标获取
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#areaDiv { border: 1px solid black; width: 300px; height: 50px; margin-botto原创 2020-08-15 17:50:53 · 2311 阅读 · 0 评论 -
JavaScript中用户注册时阅读条款后的事件练习
<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #info{ width:300px; height: 500px; background-color: #cbd; overflow: auto; } </style> <script type="text/javascri原创 2020-08-15 15:56:46 · 830 阅读 · 0 评论 -
javascript中操作属性
<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box01{ width:100px; height:100px; background-color:red; padding:10px; border:10px solid yellow; } #box02{ paddin原创 2020-08-15 15:52:22 · 184 阅读 · 0 评论 -
JavaScript中getstyle方法来读取元素的样式
<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:; height:100px; background-color:yellow; } </style> <script type="text/javascript"> window.o原创 2020-08-14 21:26:10 · 1147 阅读 · 0 评论 -
JavaScript中使用dom操作css
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:200px; height:200px; background-color:red !important; } </style> <script type="text/javascript"&原创 2020-08-14 19:44:15 · 186 阅读 · 0 评论 -
javascript中for循环中超链接a的问题
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * 点转载 2020-08-11 06:28:39 · 950 阅读 · 0 评论 -
JavaScript中利用createElement添加元素
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * .原创 2020-08-11 06:17:56 · 1456 阅读 · 0 评论 -
JavaScript中添加删除修改
<!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-08-10 20:56:50 · 954 阅读 · 0 评论 -
JavaScript中删除元素练习
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * 点原创 2020-08-10 19:30:23 · 440 阅读 · 0 评论 -
JavaScript中增删改
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript">转载 2020-08-09 15:28:22 · 193 阅读 · 0 评论 -
Javascript中dom查询的其他方法
!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取body标签 var body = document.getElementsByTagName("body")[0]; consol.原创 2020-08-09 14:55:16 · 111 阅读 · 0 评论 -
JavaScript中全选全不选实例
<!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 typ.原创 2020-08-09 09:37:54 · 404 阅读 · 0 评论 -
javascript中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> <link原创 2020-08-08 20:18:54 · 130 阅读 · 0 评论 -
JavaScript中运用dom来制作图片轮播
!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; padding: 10px; text-align:.原创 2020-08-06 21:30:04 · 357 阅读 · 0 评论 -
JavaScript中文档的加载
/* * 浏览器在加载一个页面时，是按照自上而下的顺序加载的 * 读取到一行就运行到一行，如果将script标签写到页面的上边 * 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载， * 会导致无法获取到DOM对象 */ //获得ID=btn的按钮 /* * onload事件会在整个页面加载完成之后才触发 * 为window绑定一个onload事件 * 该事件对应的响应函数将会在页面加载完成之后执行 * 这样可原创 2020-08-03 21:05:23 · 177 阅读 · 0 评论 -
JavaScript中事件
<!-- 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --> <!--<button id = "btn" onclick= "alert('讨厌你点我干嘛')">我是一个按钮</button> <button id = "btn" ondblclick= "alert('讨厌你点我干嘛')">我是一个按钮</button> <button id = "btn" onmousemove= "aler.原创 2020-08-03 20:39:15 · 168 阅读 · 0 评论 -
JavaScript中Dom
<button id = "btn01">我是一个按钮</button> <script type="text/javascript"> /* * 浏览器已经为我们提供文档节点 对象这个对象是window对象的属性 * 可以在页面中直接使用，文档节点代表的是整个网页 */ console.log(document); var btn = document.getElementById("btn01"); //修改按钮的文字 .原创 2020-08-03 20:13:37 · 116 阅读 · 0 评论 -
javascript中的date方法
/** Date对象* - 在js中使用Date对象来表示一个时间*/ //创建一个Date对象 //如果直接是使用构造函数创建一个Date对象，则会封装为当前代码执行的时间 var d = new Date(); //创建一个指定的时间对象 //需要在构造函数中传递一个时间的字符串作为参数 //日期的格式 月份/日/年时：分：秒 var d2 = new Date("12/2/2009 12:25:35") console.log(d2);原创 2020-08-02 16:04:19 · 824 阅读 · 0 评论 -
JavaScript中函数对象方法arguments
/* * 在调用函数时，浏览器每次都会传递进两个隐含参数 * 1.函数的上下文对象this * 2.封装实参的对象arguments * - arguments 是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度 * - 在调用函数时，我们所传递实参都会在arguments中保存 * - 我们即使不定义形参，也可以通过arguments来调用实参 * arguments[0]表示第一个实参 * arguments[1]表示..原创 2020-08-02 15:20:50 · 137 阅读 · 0 评论 -
javascript中call和apply方法
function fun(a,b){ console.log("a ="+a); console.log("b = "+b); alert(this.name); } /* * call()和apply（） * - 这两个方法都是函数对象的方法，需要通过函数对象来调用 * - 当对函数调用call（）和apply（）都会调用函数执行 * - 在调用call和apply（）可以向一对象指定第一个参数 * 此时这个对象会成为函数执行时的thi..原创 2020-08-02 14:53:24 · 255 阅读 · 0 评论 -
JavaScript中数组的方法
var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr3 = ["玉皇大帝","玉兔精","蜘蛛精"]; /* * concat()可以连接两个或多个数组，并将新的数组返回 * - 该方法不会对原数组产生影响 */ var result = arr.concat(arr2,arr3,"铁扇公主"); console.log(result); /* * joi..原创 2020-08-02 11:29:23 · 130 阅读 · 0 评论 -
javascript中数组数字元素的去重
//创建一个数组 var arr = [1,2,3,2,2,3,4,2,5]; //去除数组中重复的数字 //获取数组中每一个元素 function quchong(){ for(var i = 0;i<arr.length;i++){ for(var j =i+1;j<arr.length;j++){ //判断两个数的值是否相等 if(arr[i] == arr[j]){ //如果相等则证明出现重复元素，则删除j对应的元素原创 2020-08-02 10:47:12 · 250 阅读 · 0 评论 -
JavaScript中数组方法之slice
/* * slice() * - 可以用来在我们的数组中提取指定的元素 * - 该方法不会改变原数组，只会将截取到元素封装到一个新数组 * - 参数： * 1.截取开始的位置的索引，包含开始索引 * 2.截取结束的位置的索引，不包括结束索引 * - 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素 * - 索引可以传递一个负值,如果传递一个负值，则从后往前计算 * -1倒数第一个 */ var arr ..原创 2020-08-02 09:52:14 · 640 阅读 · 0 评论 -
javascript中forEach方法
/** 一般我们都是用for循环进行遍历数组* JS中还为我们提供了一个方法，用来遍历数组* forEach（）* - 这个方法只支持IE8以上的版本* IE8及以下的浏览器都不支持该方法，所以如果需要兼容IE8，则不要使用forEach*/ var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /* * forEach()方法需要一个函数作为参数 * - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数原创 2020-08-02 09:31:44 · 1214 阅读 · 0 评论 -
javascript中数组遍历的练习
function Person(name,age,gender){ this.name = name; this.age =age; this.gender = gender; } Person.prototype.toString = function(){ return "Person[name="+this.name+",age ="+this.age+"]"; } //创建一个Person对象 var per = new Person(原创 2020-08-02 08:34:04 · 307 阅读 · 0 评论 -
JavaScript中数组方法之二 pop，unshift，shift
/** pop()* - 该方法可以删除数组中最后的一个元素* - pop的返回值是弹出的元素*/ var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精"); result =arr.pop(); arr.pop(); arr.pop(); console.log(arr); console.log(result);输出结果[Web浏览器] “孙悟空,猪八戒,沙和尚” /初级教程07/原创 2020-08-02 06:07:02 · 261 阅读 · 0 评论 -
javascript中数组方法一 push
//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; /* * push() * - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 * - 可以将要添加的元素作为方法的参数传递，这样这新添加的元素直接添加数组的末尾 * */ var result = arr.push("唐僧","蜘蛛精","白骨精"); console.log(arr); console.log(result);控..原创 2020-08-02 05:34:36 · 1137 阅读 · 0 评论 -
JavaScript中数组的字面量
//创建一个数组 var arr = new Array();// arr[0] = 123;// arr.hello = “hello”//数组也是支持属性这种创建模式的// // console.log(arr.hello);//输出结果为hello //使用字面量来创建数组 //语法使用：[] var arr = [] console.log(typeof arr); var arr = [1,2,3,4,5,10];原创 2020-07-24 22:01:44 · 440 阅读 · 0 评论