JavaScript学习笔记
文章平均质量分 63
Mango酱
这个作者很懒,什么都没留下…
展开
-
140-----JS基础-----JSON
一 代码到本节,js的基础算学完了,由于个人是C++方向的,所以学习js只是为了学习基础的语法,因为有时候看源码需要用到,不得不去学一下,但不会往太深的方向发展。个人觉得如果是后台开发只需要深入学习一到两门主语即可。1 IE7以上以及其它各种浏览器使用JSON的方法JSON的操作很简单,就需要了解下面两个函数JSON.parse、JSON.stringify即可。<!DOCTYPE html><html> <head> <meta charset=原创 2021-11-26 20:26:43 · 116 阅读 · 0 评论 -
138-139-----JS基础-----二级菜单-完成基本功能、过渡效果
一 代码这两节的代码还是有点的难度的,有这样的需求时,按照类似的接口去做即可,不一定要和他的需求完全一样。因为我看他的需求好像点开另一个,已经打开的选项会被自动关闭,这样感觉不好,因为可能用户有时想要看到所有的选项的要求。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"原创 2021-11-26 18:50:07 · 161 阅读 · 0 评论 -
137-----JS基础-----类的操作
一 代码不算难,如果后续操作到类的话,可以直接使用下面封装好的接口到自己的tool中。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color原创 2021-11-26 17:56:18 · 75 阅读 · 0 评论 -
134-136-----JS基础-----完成轮播图界面、完成点击按钮切换图片、完成轮播图
一 代码本节的内容还是比较有质量的,用到轮播图的话,可以认真看看。下面的代码是依次看效果写出来的,建议看的时候直接看最后完成轮播图的代码即可。1 完成轮播图界面、完成点击按钮切换图片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin原创 2021-11-26 17:35:36 · 339 阅读 · 3 评论 -
131-133-----JS基础-----定时器的应用(一到三)
一 代码1 定时器的应用(一)一个使用定时器对div矩形向右移动的例子。很简单。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width:原创 2021-11-26 11:26:01 · 116 阅读 · 0 评论 -
130-----JS基础-----延时调用
一 代码很简单,看一下即可。注意延时调用和定时调用的接口也是不一样的。定时是:setInterval、clearInterval。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var num = 1; //开启一个定时器原创 2021-11-24 21:16:46 · 325 阅读 · 0 评论 -
129-----JS基础-----修改div移动练习(定时器相关练习)
一 代码之前我们在123节时,讲过键盘事件来修改div移动的练习,但是在按下键盘的开始时刻,键盘会有点卡顿的感觉,这是正常的,主要是为了防止人们误操作的行为。但是这样就导致我们如果想要速度是连续的话,这个开始的卡顿是明显不符合需求的,所以我们可以使用定时器去消除卡顿的影响。这种处理在游戏开发中可能经常遇到。下面例子很简单,看一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &原创 2021-11-24 21:12:27 · 124 阅读 · 0 评论 -
128-----JS基础-----切换图片练习(定时器相关练习)
一 代码很简单,看一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 使图片可以自动切换 */ //获取img标签原创 2021-11-24 21:02:20 · 72 阅读 · 0 评论 -
127-----JS基础-----定时器简介
一 代码很简单,看一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取count var count = document.getElementB原创 2021-11-24 20:34:12 · 73 阅读 · 0 评论 -
126-----JS基础-----Location
一 代码很简单,看一下即可。注意:01.BOM.html的代码在124节的Navigator中,只是一个简单的测试画面而已,自己随便弄一个测试也可以。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * Location *原创 2021-11-24 20:33:15 · 98 阅读 · 0 评论 -
125-----JS基础-----History
一 代码不难。首先是给出两个测试页面,方便点击按钮前进或者后退历史打开过的页面。页面1:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>TEST01</h1> <a href="test02.html">去test02&l原创 2021-11-23 22:04:20 · 59 阅读 · 0 评论 -
124-----JS基础-----Navigator
一 代码很简单。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* * 1. BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象,用来完成对原创 2021-11-23 21:55:39 · 86 阅读 · 0 评论 -
123-----JS基础-----键盘移动div(通过键盘事件移动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-11-23 21:27:38 · 97 阅读 · 0 评论 -
122-----JS基础-----键盘事件
一 代码很简单。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 1. 键盘事件: * onkeydown * - 按键被按原创 2021-11-23 21:26:24 · 58 阅读 · 0 评论 -
121-----JS基础-----滚轮事件(鼠标)
一 代码很简单。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style>原创 2021-11-23 21:25:31 · 112 阅读 · 0 评论 -
120-----JS基础-----拖拽(三)
一 代码有点东西,用到时再详细测一下即可,不难。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; positi原创 2021-11-23 15:38:18 · 81 阅读 · 0 评论 -
118-119-----JS基础-----拖拽(一与二)
一 代码有点东西,用到的时候再详细测一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; positio原创 2021-11-23 15:36:15 · 63 阅读 · 0 评论 -
117-----JS基础-----事件的传播
一 代码事件的传播也是基于事件的冒泡的,只不过强调的是顺序,这个我们了解一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color原创 2021-11-23 15:33:16 · 51 阅读 · 0 评论 -
115-116-----JS基础-----事件的绑定与完成bind函数
一 代码js中,事件的绑定可以绑定多个回调函数,事件被触发后,这些响应函数都会被执行。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹原创 2021-11-22 22:42:32 · 72 阅读 · 0 评论 -
114-----JS基础-----事件的委派(实际是利用了事件的冒泡)
一 代码不难,事件的委派就是利用了事件的冒泡。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var u1 = document.getElementById("u原创 2021-11-22 22:25:39 · 68 阅读 · 0 评论 -
113-----JS基础-----事件的冒泡
一 代码不难,很简单,理解一下即可。但需要注意不是所有的东西都会发送事件的冒泡。例如他演示的矩形触发鼠标移动进入绿色的区域。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px;原创 2021-11-22 21:25:36 · 68 阅读 · 0 评论 -
112-----JS基础-----div跟随鼠标移动(矩形跟随鼠标移动)
一 代码不难, 搞懂浏览器和页面的坐标系的意思即可,用到时再测测就行。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red;原创 2021-11-22 21:16:46 · 178 阅读 · 0 评论 -
111-----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原创 2021-11-22 21:05:22 · 97 阅读 · 0 评论 -
110-----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;原创 2021-11-22 20:56:04 · 76 阅读 · 0 评论 -
108-109-----JS基础-----获取元素的样式与getStyle方法(兼容不同浏览器修改样式的接口)
一 代码上一节操作内联样式时,只对内联的有效,如果不是内联的话,获取到的属性是一个空值,所以需要获取元素的样式接口去获取样式属性,而由于不同浏览器对获取元素的样式的支持不一样,所以需要getStyle方法去兼容不同的浏览器。注:通过style属性设置和读取的都是内联样式。代码不难,用到时看看即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti原创 2021-11-21 23:03:08 · 756 阅读 · 0 评论 -
107-----JS基础-----操作内联样式
一 代码不难,就是对样式的一些颜色操作,主要是熟用相关接口即可。用到时再看看即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-colo原创 2021-11-21 22:58:29 · 94 阅读 · 0 评论 -
106-----JS基础-----a的索引问题
一 代码下面的想表达,对比上一节的this,如果使用allA[i]代替this,for中的 索引i 在响应函数时使用的一个先后顺序,导致无法确定索引i的值,所以最好不要这样使用,使用之前的this即可。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-T原创 2021-11-21 22:56:45 · 92 阅读 · 0 评论 -
105-----JS基础-----添加删除记录-修改
一 代码本节的代码是对104节的内容进行优化,因为按照上一节的内容这样写的话,会创建过多的资源,造成资源浪费,导致用户体验不好,当界面复杂起来,可能会变得很卡,造成用户体验不好,所以需要进行优化。下面的例子,避免了人为的创建多个节点元素,使用createElement + innerHTML的方法,能快速创建,并且代码看起来更舒服。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stric原创 2021-11-21 22:54:43 · 74 阅读 · 0 评论 -
104-----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;原创 2021-11-20 22:49:53 · 65 阅读 · 0 评论 -
103-----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><lin原创 2021-11-20 22:46:34 · 87 阅读 · 0 评论 -
102-----JS基础-----dom增删改
一 代码下面以例子的方式进行讲述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>Untitl原创 2021-11-20 22:44:59 · 89 阅读 · 0 评论 -
101-----JS基础-----dom查询的剩余方法
一 代码下列方法是比较常用的,开发时用到看一下即可,没必要死记。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 1. 获取body标签 //var bod原创 2021-11-20 22:42:41 · 73 阅读 · 0 评论 -
98-100-----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>全选练习<原创 2021-11-20 22:40:02 · 66 阅读 · 0 评论 -
96-97-----JS基础-----DOM查询(二、三)
一 代码不难,用到时看一下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 Docu原创 2021-11-20 22:38:03 · 72 阅读 · 0 评论 -
95-----JS基础-----图片切换的练习
一 代码一个练习,就简单看看就好,项目中如果使用到的话再看一下即可。没用到没必要去看,避免浪费时间。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{原创 2021-11-20 22:31:39 · 74 阅读 · 0 评论 -
94-----JS基础-----dom查询
一 代码同样很简单,但是下面的接口会比较常用,用到时具体看一下即可。主要是三个接口:1)document.getElementById2)document.getElementsByTagName3)document.getElementsByName下面调用以例子呈现。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> &原创 2021-11-20 22:31:26 · 52 阅读 · 0 评论 -
93-----JS基础-----文档的加载
一 代码文档的加载就是我们可以指定一些代码,通过绑定事件回调函数,在文档加载完页面后,再执行这些代码。很简单。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 2. 浏览器在加载一个页面时,是按照自上向下的顺序加载的,原创 2021-11-20 22:31:10 · 76 阅读 · 0 评论 -
92-----JS基础-----事件的简介
一 代码了解一下即可。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- * 事件,就是用户和浏览器之间的交互行为, * 比如:点击按钮,鼠标移动、关闭窗口。。。 --> <!-- 我们可以在事件对应的属性中原创 2021-11-20 22:27:35 · 68 阅读 · 0 评论 -
91-----JS基础-----DOM简介
一 代码不难,概念性的东西,没必要去记,想要了解的可以看对应的pdf。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是一个按钮</button> <script type="text/javascrip原创 2021-11-19 19:16:58 · 561 阅读 · 0 评论 -
90-----JS基础-----邮件的正则
一 代码下面只是一个例子。开发时的约束不一定按着来,看具体的项目需求来做即可。例子是很简单的,没必要记。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 1. 一般电子邮件的格式由具体的网站规定,不一定按照原创 2021-11-19 19:16:48 · 124 阅读 · 0 评论