HTML CSS JS
关注
分享
扫一扫
文章平均质量分 60
HTML CSS JS
CodeJiao
今之视昔，亦如后世视今。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JQuery
JQueryjQuery的概念 jQuery总体概况如下 :jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。学习jQue原创 2021-10-20 15:09:30 · 651 阅读 · 0 评论 -
JavaScript--获得和设置表单的值
1. 获得和设置表单的值用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。HTML表单的输入控件主要有以下几种：获得值对于:<label for="inputBox"></label><input type="text" id="inputBox">取值的方法为: let原创 2021-07-15 17:11:56 · 3364 阅读 · 0 评论 -
Java & JavaScript 递归构建树状图（根据parentId）
1. Java & JavaScript 递归构建树状图（根据parentId）类似于实现这样的效果实现思路：第一步：找到所有根节点（parentId == null）第二步：遍历跟结点，递归生成根节点的子树1.1 JavaScript 实现export class TaskManageModal { taskId: any = ''; // 任务id parentId: any = ''; // 父级任务id children: Array<TaskMana原创 2021-06-07 20:11:08 · 2343 阅读 · 5 评论 -
JavaScript--遍历数组的三种方法map()、forEach()、filter() & 确认数组元素是否满足某种条件( some() & every() )
1. 遍历数组1.1 map()方法概述map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组格式说明 let newArray = ["1", "2", "3"].map((item, index, arr) => { // 转换成10进制的数字 return parseInt(item, 10) } )map中回调函数中的第一个参数为：当前正在遍历的元素map中回调原创 2021-07-12 14:48:04 · 2743 阅读 · 1 评论 -
JavaScript--对象类型详解
1. 对象类型详解1.1 定义对象语法:示例: let person = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70, weight: 65, score: null }1.2 获取对象的属性值JavaScript对象属原创 2021-07-10 13:07:27 · 750 阅读 · 0 评论 -
JavaScript--数组类型详解
1. 数组类型详解数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：数组的元素可以通过索引来访问。请注意，索引的起始值为 0 ：1.1 数组长度1.2 修改数组元素的值1.2.1 修改所有元素1.2.2...原创 2021-07-10 11:10:02 · 2465 阅读 · 1 评论 -
JavaScript--标准对象(Date日期对象 & Json对象)
1. 标准对象1.1 标准对象在JavaScript的世界里，一切都是对象。1.2 常用标准对象1.2.1 Date在JavaScript中， Date 对象用来表示日期和时间。注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。时区1.2.2 JsonJson优点JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。采用完全独立于原创 2021-07-12 10:51:58 · 1033 阅读 · 1 评论 -
JavaScript -- ES6学习代码示例加讲解
什么是ES6?ES的全称是ECMAScript ,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。其中的6代表这个规范的版本。ES6实际上是一个泛指，泛指ES2015及后续的版本。1.let关键字let声明的变量只在所处于的块级有效(所谓的块级作用域就是指的是一个大括号内的区域) if (true) { let a = 10; } console.log(a);// a is not defined. for (let i = 0;原创 2021-01-18 16:03:33 · 899 阅读 · 0 评论 -
JavaScript--删除DOM
1. 删除DOM删除一个DOM节点就比插入要容易得多。插入DOM要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉：<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p>原创 2021-07-15 13:54:37 · 13111 阅读 · 0 评论 -
JavaScript--DOM选择器
1.Dom选择器什么是DOM文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。DOM树DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。原创 2021-07-14 20:53:34 · 1018 阅读 · 0 评论 -
JavaScript--变量的作用域 & var、let、const详解
1. 什么是ES6?ES的全称是ECMAScript ,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。其中的6代表这个规范的版本。ES6实际上是一个泛指，泛指ES2015及后续的版本。2 预备知识2.1 变量的作用域在JavaScript中，用 var 申明的变量实际上是有作用域的。如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量： 'use strict'; function foo() { var原创 2021-07-11 20:54:28 · 1381 阅读 · 12 评论 -
JavaScript-- 注释 & 变量 & 游览器调试使用
1. 注释为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是 单行注释 和 多行注释。1.1 单行注释单行注释的注释方式如下：// 我是一行文字，不想被 JS引擎 执行，所以 注释起来 // 用来注释单行文字（ 默认快捷键 ctrl + / ）4.2 多行注释多行注释的注释方式如下：/* 获取用户年龄和姓名 并通过提示框显示出来*//* */ 用来注释多行文字（ 默认快捷键 alt + shift + a原创 2021-07-09 15:06:15 · 488 阅读 · 0 评论 -
JavaScript--流程控制
1. 流程控制1.1 if & else 代码块 let age = 3; if (age >= 18) { alert('adult'); } else if (age >= 6) { alert('teenager'); } else { alert('kid'); }1.2 三目运算符语法结构表达式1 ? 表达式原创 2021-07-10 13:38:22 · 378 阅读 · 1 评论 -
JavaScript--JQuery操作DOM
1. JQuery操作DOM1.1 修改Text和HTMLHTML结构<!-- HTML结构 --><ul class="test-ul"> <li class="js">JavaScript</li> <li class="py">Python</li></ul>分别获取文本和HTML: $('.js').text();// JavaScript $('.test-u原创 2021-07-16 20:34:17 · 406 阅读 · 3 评论 -
JavaScript--函数(普通函数 & 箭头函数 ) & 异常 & typeof关键字 & 方法
1. 普通函数1.1 函数的定义定义在对象内: 被称为方法。定义在对象外部：函数。定义方式一 // 返回绝对值的函数 function abs(x) { if (x >= 0) { return x; } else { return -x; } }定义方式二 let abs = function (x) { if (x >原创 2021-07-11 19:41:43 · 608 阅读 · 2 评论 -
JavaScript--数据类型和运算符
1. 数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型：1.1 NumberJavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：1.2 字符串HTML推荐使用双引号“”，JavaScript推荐使用单引号‘’1.3 布尔值原创 2021-07-09 17:13:45 · 413 阅读 · 0 评论 -
JavaScript--更新DOM
1. 更新DOM1.1 更新节点拿到一个DOM节点后，我们可以对它进行更新。可以直接修改节点的文本，方法有两种：一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：使用innerHTML设置文本<body> <div id="item"></div></body><script> let item = documen原创 2021-07-14 21:08:09 · 2917 阅读 · 1 评论 -
JavaScript -- 正则表达式介绍
正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表达式的特点1.灵活性、逻辑性和功能性非常的强。2.可以迅速地用极简单的方式达到字符串的复杂控制。2.正则表达式在JavaScript中的使用在 JavaScript 中，可以通过两种方式创建一个正则表达式。方式一：通过调用RegExp对象的构造函数创建var regexp = new RegExp(/123/); console.log(r原创 2020-12-13 15:52:59 · 510 阅读 · 0 评论 -
JavaScript--插入DOM
1. 插入DOM111原创 2021-07-15 13:35:35 · 6569 阅读 · 0 评论 -
JavaScript--操作BOM
1. 操作BOM1.1 游览器原创 2021-07-14 10:34:24 · 375 阅读 · 0 评论 -
JavaScript--Map & Set
1. MapMap 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 是 ES6 中引入的一种新的数据结构1.1 创建MapTypeScript 使用 Map 类型和 new 关键字来创建 Map：let myMap = new Map();初始化 Map，可以以数组的格式来传入键值对：let myMap = new Map([ ["key1", "value1"], ["key2", "valu原创 2021-07-11 00:44:40 · 2459 阅读 · 0 评论 -
JavaScript--JQuery选择器
1. JQuery选择器JQuery帮助文档: 为什么会有JQuery选择器这里的选择器的语法都是CSS选择器的语法 CSS选择器按ID查找按tag查找按class查找按属性查找总之，如果你熟悉CSS选择器的语法，那么使用JQuery会得心应手...原创 2021-07-15 21:32:40 · 387 阅读 · 0 评论 -
JavaScript -- ES6箭头函数讲解
ES6箭头函数的定义方式:() => {}其中小括号用于放置形参,{}里面放的是函数体.我们通常用一个常量来给箭头函数命名:const fn = () => {} const alert1 = () => { alert(1); } alert1();这里定义了一个名为alert1的函数,它的功能是弹出1.显示结果:! 如果函数函数体只有一句代码而且代码的运行结果就是其返回值,则可以省略返回值.原创 2020-12-20 15:14:10 · 248 阅读 · 0 评论 -
JavaScript--字符串类型详解 & indexOf方法补充
1. 字符串类型详解1.1 字符串定义1.2 多行字符串由于多行字符串用 \n 写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ``表示：示例： <script> 'use strict'; // 如果浏览器支持strict模式，下面的代码将报ReferenceError错误: let str = ` a b c d `原创 2021-07-09 21:37:55 · 957 阅读 · 3 评论 -
JavaScript -- 关于if条件判断
1. 关于if条件判断1.1 基本: 检测布尔值js代码: if (true) { console.log(true); } if (flase) { console.log(flase); }运行结果:1.2 检测数值型js代码: if (0) { console.log(0); } if (1) { console.log(1); } if原创 2021-09-13 17:10:25 · 590 阅读 · 0 评论 -
JavaScript--JQuery事件 & 当网页元素加载完成后再去执行事件
1. JQuery事件这里的selector都是CSS选择器的语法 CSS选择器示例1 弹出提示框:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 成功引入Jquery--> <script src="lib/jq.js"></scr原创 2021-07-15 21:55:53 · 2483 阅读 · 1 评论 -
JavaScript--call()函数 & apply()函数 & bind()函数
1. call()函数 & apply()函数 & bind()函数call()、apply()、bind() 都是用来重定义 this 这个对象的1.1 不传参数首先定义这样一段函数 function logEgg() { alert("egg is : " + this.egg); } let hen = { egg: "鸡蛋" }call() logEgg.call(hen);// egg is原创 2021-07-12 17:01:54 · 433 阅读 · 1 评论 -
JavaScript--面向对象原型继承
1. 面向对象原型继承面向对象编程JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念：所以，类和实例是大多数面向对象编程语言的基本概念。在JavaScript中，这个概念需要改一改。JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。原型是指当我们想要创建 xiaoming 这个具体的学生时，我们并没有一个 Student 类型可用。那原创 2021-07-12 17:22:02 · 628 阅读 · 1 评论 -
JavaScript--JS中函数名后面的括号加与不加的区别和作用
示例代码：function addFunction(arg1, arg2) {return arg1 + arg2;}let a = addFunction; // a 指向addFunction这个函数对象的指针let b = addFunction(1, 2); // b = 3JS中我们把以上代码加粗的部分叫做函数，函数是一种叫做function引用类型的实例，因此函数是一个对象。对象是保存在内存中的，函数名则是指向这个对象的指针。let a = addFunction 表示把函数.原创 2021-07-20 19:43:24 · 1198 阅读 · 8 评论 -
JavaScript -- ES6之解构赋值(react-native里面会用到)
解构赋值给我们提供了一个从对象提取数据的简便方法这是ES5的写法: var myObj = { a: 5, b: 3 } var a = myObj.a; var b = myObj.b;ES6的写法为: var { a, b } = { a: 3, b: 4 };原创 2020-12-21 16:33:38 · 289 阅读 · 0 评论 -
JavaScript--解构赋值 & 剩余参数
1. 解构ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。如果解构不成功,变量的值为undefined(即没有对应的数据给解构的数据赋值)数组解构 //数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量 var arr = [1, 2, 3]; var [a, b, c, d] = arr; console.log(a);// 1 console.log(b);// 2 console.log(c);//原创 2021-07-12 09:24:10 · 1431 阅读 · 0 评论 -
JavaScript--面向对象class继承
1. 面向对象class继承在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。有没有更简单的写法？有！我们先回顾用函数实现 Student 的方法： function Student(name) { this.name = name; } // 现在要给这个Student新增一个方法 Student.p原创 2021-07-12 19:34:04 · 378 阅读 · 0 评论 -
JavaScript--表单提交及前端密码MD5加密
1. 表单提交及前端密码MD5加密表单提交通过 <form> 元素的 submit() 方法提交一个表单，例如，响应一个 button 的 click 事件，在JavaScript代码中提交表单：这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击 <button type="submit"> 时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应 <form> 本身的onsubmit 事件，在提交form时作修改：/原创 2021-07-15 19:37:20 · 3728 阅读 · 1 评论 -
JavaScript--快速入门 & 数据存储单位 & JavaScript输入输出语句
1. JavaScript 快速入门JavaScript参考网站1.1 前言JavaScript是一种运行在浏览器中的解释型的编程语言。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。很多人认为，写JavaScript代码很简单，并且JavaScript只是为了原创 2021-07-09 11:21:58 · 492 阅读 · 0 评论 -
JavaScript--初识JQuery及公式
1. 初识JQuery及公式下载JqueryJquery官网: 我们点击开发版本,进入了如下页面接下来全选里面的内容,保存下来放在txt文档里面然后给txt文件改名,改为jq.js(自定义,但文件拓展名必须是js)现在我们就成功的下载了Jquery1.2 引入Jquery使用jQuery只需要在页面引入jQuery文件即可：1.2.1 引入方法一: 本地的js文件把刚刚下载的Jquery放在lib目录下面<!DOCTYPE html><htm原创 2021-07-15 21:24:11 · 474 阅读 · 1 评论 -
HTML -- 使input文本框不可编辑的2种方法（有disabled属性的input框，后台获取不到值）
1. 使input文本框不可编辑的3种方法1.1 disableddisabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点，后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。示例：<input type="text" disabled="disabled" />1.2 readonlyreadonly 属性规定输入字段为原创 2021-05-29 21:02:10 · 4493 阅读 · 10 评论 -
CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
字体样式字体样式font-family 字体(可以添加2种字体,一种针对中文,一种针对英文)font-size 字体大小(默认400 加粗700)font-weight 字体粗细color 字体颜色示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I原创 2021-02-28 14:25:51 · 534 阅读 · 0 评论 -
CSS -- CSS选择器
基本选择器(重要)优先级：ID选择器 > 类选择器 > 标签(元素)选择器。标签(元素)选择器：选择某一个或者某一类元素。ID选择器 ：id不能重复，全局唯一。类选择器：可以跨标签，类相同，可以复用。示例:通配符选择器: * { margin: 0; padding: 0; }元素选择器 h1 { color: orange; }.原创 2021-02-28 11:05:51 · 9086 阅读 · 3 评论 -
CSS -- 初遇CSS+快速入门
什么是CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。如何学习CSS:学习CSS的重点：CSS选择器（重点+难点）CSS发展史快速入门<!DOC原创 2021-02-27 22:17:53 · 264 阅读 · 0 评论 -
HTML -- HTML表单的应用、增强鼠标的可用性、表单的初级验证（正则表达式）
表单的应用隐藏域（hidden）只读（readonly）禁用（disabled）示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="01.我的第一个网页.html" method="get">原创 2021-02-27 16:27:15 · 233 阅读 · 0 评论