前端-JavaScript基础
关注
分享
扫一扫
本专栏主要记录我在学习JavaScript这门技术的过程中所学到的知识，以及一些Js技术的应用例子，也是我个人笔记系列的第二部，希望能继续下去
PCC.
这个作者很懒，什么都没留下…
展开
-
Js实战之利用定时器实现方块的左右运动
利用定时器实现方块的左右运动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>定时器版本二</title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 {原创 2021-10-18 16:01:20 · 360 阅读 · 0 评论 -
Js实战之实现图片的自动切换
实现图片的自动切换<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实现图片的定时转换</title> <script type="text/javascript"> /** * 实现图片的自动切换 */ window.onload = function ()原创 2021-10-18 10:42:50 · 1312 阅读 · 0 评论 -
JS实战之使用键盘方向键控制方块的上下左右移动
使用键盘方向键控制方块的上下左右运动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;原创 2021-10-13 20:38:44 · 2541 阅读 · 0 评论 -
Js实战之方块大小随着滚轮的上下滚动而改变大小
方块大小随着滚轮的上下滚动而改变大小<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1 { width: 100px; height: 100px; backgrou原创 2021-10-12 21:04:36 · 290 阅读 · 0 评论 -
Js实战之实现方块拖拽功能
实现方块的拖拽<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实现方块的拖拽</title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-co原创 2021-10-11 20:18:32 · 402 阅读 · 0 评论 -
Js实战之方块跟随鼠标移动
方块跟随鼠标移动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>方块跟随鼠标移动</title> <style type="text/css"> #box1 { width: 100px; height: 100px; background-原创 2021-10-09 15:13:27 · 516 阅读 · 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">原创 2021-10-09 11:48:04 · 191 阅读 · 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> &原创 2021-10-08 19:39:53 · 943 阅读 · 1 评论 -
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>DOM增删改</title> <lin原创 2021-10-08 16:23:10 · 142 阅读 · 0 评论 -
Js实战之多选框
关于多选框的一道小练习题目要求：1、点击全选框时，全部多选框（足球、篮球、羽毛球、乒乓球）选中，全选/全不选框选中；2、点击全不选框时，全部多选框不选中，全选/全不选框不选中；3、点击反选框时，选中的多选框变为不选中，同时不选中的多选框变为选中，如果全部多选框处于选中状态，那么全选/全不选框选中，反之则不选中；4、点击提交框，将会显示选中的多选框信息；5、点击全选/全不选框时，选中则全部多选框选中；不选中，则全部多选框不选中。同时，如果全部多选框处于选中状态时，全选/全不选框也将处于选中状态，原创 2021-10-08 14:59:29 · 5206 阅读 · 0 评论 -
Js实战之实现图片的切换
实现图片间的切换代码的主要思路：1、先给“下一张”和“上一张”两个按钮绑定单击响应事件；2、获取img标签对象，用于修改src属性的值，实现图片的切换；3、切换图片实质上就是修改img标签里面src属性的值；4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可；5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单；6、需要注意的是，如果当前显示的图片原创 2021-10-06 10:08:53 · 9276 阅读 · 0 评论 -
JS正则表达式之邮箱的正则
使用正则表达式编写邮箱的正则/*电子邮箱的基本格式：hello@abc.com.cn hello部分:表示任意的字母数字以及小圆点(.),如abc.abc@qq.com,不过小圆点的部分是可有可无的，可以表示为：\w{3,}(\.\w+)* @:可以表示为：@ abc部分：表示任意的字母数字,长度大于1，[A-z0-9]+ .com部分：表示任意字母，长度为2-5位，可以表示为：\.[A-z]{2,5} .cn部分：表示任意字符，长度为2-5位，由于.cn部分和.c原创 2021-10-05 17:50:32 · 10744 阅读 · 0 评论 -
如何使用Js正则表达式去除用户名前后的空格，注意用户名中间的空格不用去除
使用Js正则表达式去除用户名前后的空格var userName = prompt("请输入用户名：");userName = userName.replace(/^\s*|\s*$/g, "");//正则表达式表示去除开头和结尾的多个空格/*^\s*:表示匹配到开头的多个空格\s*$:表示匹配到结尾的多个空格g:表示全局匹配*/...原创 2021-10-05 17:12:08 · 497 阅读 · 0 评论 -
JavaScriptBOM对象
BOM什么是BOM？BOM（浏览器对象模型），BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。什么是window对象？window对象是BOM的核心，它表示一个浏览器的实例。在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。需要注意的是：window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。（也是就是说window对象原创 2021-10-03 10:42:36 · 150 阅读 · 0 评论 -
JavaScript事件
事件（Event）事件（Event）：当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向…可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存元素.事件 = function(event){ event = event || window.event; }; 元素.事件 = fun原创 2021-10-03 09:49:54 · 70 阅读 · 0 评论 -
JavaScriptDOM对象03
DOM对CSS的操作DOM对CSS的操作1、读取和修改内联样式：使用style属性来操作元素的内联样式（1）读取内联样式：元素.style.样式名元素.style.width;元素.style.height;注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法,将-去掉，然后-后的字母改大写background-color --> backgroundColorborder-width ---> borderWidth（2）修改内联样式：元素.style.样式名 = 样式原创 2021-10-03 09:43:08 · 100 阅读 · 0 评论 -
JavaScriptDOM对象02
DOM（主要是DOM对象的一些常用操作，内容较为重要）DOM查询：通过具体的元素节点来查询1、元素.getElementsByTagName()：通过标签名查询当前元素的指定后代元素；2、元素.childNodes：获取当前元素的所有子节点，会获取到空白的文本子节点；3、元素.children：获取当前元素的所有子元素；4、元素.firstChild：获取当前元素的第一个子节点；5、元素.lastChild：获取当前元素的最后一个子节点；6、元素.parentNode：获取当前元素的父元素；原创 2021-10-03 09:15:04 · 87 阅读 · 0 评论 -
JavaScriptDOM对象01
DOMDocument Object Model，文档对象模型，通过DOM可以来任意来修改网页中各个内容。文档：文档指的是网页，一个网页就是一个文档。对象：对象指将网页中的每一个节点都转换为对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了。模型：模型用来表示节点和节点之间的关系，方便操作页面。节点（Node）：节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点，虽然都是节点，但是节点的类型却是不同的。1、文档节点 （Document），代表整个网页；2、元素节点原创 2021-10-03 08:59:43 · 98 阅读 · 0 评论 -
JavaScript正则表达式
正则表达式正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。创建正则表达式1、var reg = new RegExp(“正则”,“匹配模式”);2、var reg = /正则表达式/匹配模式匹配模式：1、i:忽略大小写；2、g:全局匹配模式；3、设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求正则语法1、| 或；2、[] 或；3、[^ ] 除了；4、[a-z] 小写字母；5、原创 2021-10-02 19:54:59 · 241 阅读 · 0 评论 -
JavaScript包装类、Date类和Math类
包装类在JS中为我们提供了三个包装类：String()、 Boolean()、 Number()通过这三个包装类可以创建基本数据类型的对象：但是在实际的开发中不会这么用var num = new Number(3);var str = new String("hello");var boolean = new Boolean(true);Date类日期的对象，在JS中通过Date对象来表示一个时间创建对象1、创建一个当前的时间对象var date = new Date();2、创建原创 2021-10-02 19:39:46 · 87 阅读 · 0 评论 -
JavaScript数组
数组数组（1）数组也是一个对象，是一个用来存储数据的对象，和Object类似，但是它的存储效率比普通对象要高；（2）数组中保存的内容我们称为元素；（3）数组使用索引（index）来操作元素。数组的操作1、创建数组//方式一var arr = new Array();//方式二var arr = [];2、向数组中添加元素对象数组[索引] = 值；arr[0] = 0;3、创建数组时直接添加元素var arr = [1, "hello", true, null];数组的方原创 2021-10-02 17:26:40 · 109 阅读 · 0 评论 -
JavaScript原型
原型原型（prototype）：（1）创建一个函数以后，解析器都会默认在函数中添加一个数prototype，prototype属性指向的是一个对象，这个对象我们称为原型对象；（2）当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。这个隐含的属性可以通过对象.__proto__来访问。（3）原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。我们可以将对象中共有的属性和方法统一添加到原型对象中，这样我们只需要添加一次，就可以使所原创 2021-10-02 17:04:13 · 59 阅读 · 0 评论 -
JavaScript函数
函数函数也是一个对象，也具有普通对象的功能，函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码，使用typeof检查一个函数时会返回function。创建函数：1、函数声明：function 函数名（[形参一，形参二，形参三...]）{ 语句;}2、函数表达式：var 函数名 = function([形参一，形参二，形参三...]){ 语句;}调用函数：语法：函数对象([实参1,实参2…实参N]);形参：形式参数，定义函数时，可以在()中定义一原创 2021-10-02 16:54:41 · 154 阅读 · 0 评论 -
JavaScript对象
对象对象是JS中的引用数据类型，是一种复合数据类型，在对象中可以保存多个不同数据类型的属性，使用typeof检查一个对象时，会返回object。创建对象：1、var obj = new Object();2、var obj = {};向对象中添加属性:1、对象.属性名 = 属性值;2、对象[“属性名”] = 属性值;读取对象中的属性：1、对象.属性名；2、对象[“属性名”]如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined删除对象中的属性：1、delete 对原创 2021-10-02 15:50:53 · 74 阅读 · 0 评论 -
JavaScript基本语法03
运算符逻辑运算符：1、非（!）：非运算可以对一个布尔值进行取反，true变false false边true，当对非布尔值使用!时，会先将其转换为布尔值然后再取反，我们可以利用!来将其他的数据类型转换为布尔值（！！s）;2、与(&&)：&&可以对符号两侧的值进行与运算，只有两端的值都为true时，才会返回true。只要有一个false就会返回false。如果第一个值是false，则不再检查第二个值，对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值（如果第一个值为f原创 2021-10-02 15:33:19 · 84 阅读 · 0 评论 -
JavaScript基本语法02
JS中一共分成六种数据类型：- String 字符串- Number 数值- Boolean 布尔值- Null 空值- Undefined 未定义- Object 对象基本数据类型有：1、String 字符串：JS中的字符串需要使用引号引起来双引号或单引号都行，使用typeof运算符检查字符串时，会返回"string" ；2、Number 数值：JS中所有的整数和浮点数都是Number类型，使用typeof检查一个Number类型的数据时，会返回"number"（包括NaN 和 Infi原创 2021-10-02 15:09:31 · 203 阅读 · 0 评论 -
JavaScript基本语法01
JavaScript负责页面中的的行为，它是一门运行在浏览器端的脚本语言。JS的编写的位置：1、可以编写到标签的指定属性中<button onclick = "alert('hello');">我是一个按钮</button><a href="javascript:alert('aaa');">我是超链接</a>2、可以编写到script标签中<script type="text/javascript"> //编写js代码原创 2021-10-02 11:36:36 · 90 阅读 · 0 评论