_chun_-CSDN博客

原创 jQuery基础知识

jQuery介绍JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。理解成一个大的函数，函数内部封装了很多函数来供你使用。jQuery安装1.本地引入：新建一个.js文件，将jQuery库中jquery.js 与 jquery.min.js版本的代码复制到新建的.js文件中。然后在html文件中引入。<script src="./js/jquery.js"></script>2.在线引入：从j

2021-09-09 16:30:39 217

原创 AJAX

AJAX的定义AJAX是异步的JavaScript和XML;AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;AJAX是一种独立于Web服务器软件的浏览器技术;AJAX不是一种新的编程语言，而是一种技术;AJAX 使用 JavaScript 在web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。...

2021-09-09 16:30:07 237

原创浏览器对象模型BOM

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的Global 对象，另一个就是浏览器窗口的 JavaScript 接口。Global作用域<script> var name = 'zhangsan'; var sayName = function () { console.log(this.name); } console.log(window.name); //zhangsan .

2021-09-08 20:22:36 192

原创 DOM事件机制

事件是由三部分组成：事件源、事件类型、事件处理程序1.事件源：事件被触发的对象 -->按钮对象2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…3.事件处理程序：通过一个函数赋值的方式执行事件的步骤：1.获取事件源2.注册事件（绑定事件）3.采用函数赋值形式添加事件处理程序事件流事件流描述了页面接收事件的顺序，事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。事件冒泡（IE事件流）<!DOCTYPE html><html lan.

2021-09-08 19:53:13 219

原创文档对象模型DOM

定义DOM全称为“文档对象模型”（Document Object Model），DOM是针对HTML和XML文档的一个API（Application programming interfaces–应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。• 文档– 文档表示的就是整个的HTML网页文档• 对象– 对象表示将网页中的每一个部分都转换为了一个对象。• 模型– 使用模型来表示对象之间的关系，这样方便我们获取对象节点层级任何 HTML 或

2021-09-06 19:21:15 293

原创 Moment.js和lodash.js

Moment.jsJavaScript日期处理类库node.js中使用// 在当前目录下使用node安装moment库npm install moment --save// 模块化导入momentvar moment = require('moment');// 设置本地语言为中文require('moment/locale/zh-cn')moment.locale('zh-cn');// 根据对应的格式输出当前时间console.log(moment().format('MM

2021-09-03 17:02:08 826

原创 JavaScript 中的继承

1.面向对象语言支持的继承种类：接口继承和实现继承。2.接口继承只继承方法签名，实现继承继承实际的方法。3.接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。原型链继承基本思想：通过原型继承多个引用类型的属性和方法。每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个.

2021-09-03 16:42:48 127

原创深入理解对象

普通方式创建对象用字面量的方式创建对象的缺点：这个对象是一次性的用new Object() 创建对象的缺点：可以发现它是先实例化了一个对象，然后再为对象添加属性，这样就看不出来是个整体（像上面的用字面量来创建，属性都包在一个大括号里面，这样就很好看出这是个整体）。工厂模式作用：创建对象；降低代码冗余度。//将创建对象的代码封装在一个函数中function createPerson(name, age, gender) { var person = new Object();

2021-09-03 16:42:13 84

原创内置对象及内置函数

基本包装类型基本包装类型：Boolean, Number, String。只存在一行代码的执行瞬间，然后立即销毁。基本包装类型和其他引用类型的相同点：拥有内置的方法可以对数据进行额外操作。引用类型和基本包装类的最主要的区别：就是对象的生存期。引用类型使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中；而基本包装类型只存在一行代码的执行瞬间，然后立即销毁var str = 'test';//substring(start,end),截取从start到end的字符串，

2021-09-03 16:40:55 169

原创正则表达式

正则表达式的定义是一个描述字符模式的对象。是由一个字符序列形成的搜索模式。可用于所有文本搜索和文本替换的操作。正则表达式的创建字面量（直接量）// 在一对反斜线中写正则表达式内容，如/abc/// 正则表达式里面不需要加引号不管是数字型还是字符串型var reg = /正则表达式/修饰符;var reg = /hello/g;构造函数//构造正则表达式的实例，如new RexExp('abc')//内部传入的参数为字符串/字符串的变量var reg =new RegExp(

2021-09-03 16:40:26 157

原创 JavaScript数组

数组的基础数组是有序列表，是存放多个值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。有以下特性：每一项都可以保存任何类型的数据。数组的大小是可以动态调整。数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项数组的创建字面量创建数组由一对包括元素的方括号"[]“表示，元素之间以逗号”,"隔开// 可以接收任何类型的数据当做数组的元素var arr = [12,name,true,"larry",{},function()

2021-09-03 16:39:46 183

原创 JavaScript 函数

函数介绍JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。JavaScript 使用关键字 function 定义函数。函数可以通过声明定义，也可以是一个表达式。函数的作用是功能的封装，直接调用，代码复用率提高。函数实际上是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数声明函数由function关键字声明，后面紧跟函数名，函数名后面为形参列表，列表后大括号括起来的内容为函数体。也可以将一个匿名函数（

2021-09-01 20:30:41 198

原创 JavaScript的对象

对象的基础无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表:键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。对象的创建对象的初始化有两种方式，构造函数模式和字面量模式字面量模式实例：var obj = { name:"zhangsan", age:12, sayName:function(){ console.log("my name is ",this.name); }}

2021-08-31 19:56:01 197

原创流程控制语句

分支语句条件语句条件语句用于基于不同的条件来执行不同的动作。通常在写代码时，总是需要为不同的决定来执行不同的动作。可以在代码中使用条件语句来完成该任务。在 JavaScript 中，我们可使用以下条件语句：if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码if…else if…else 语句- 使用该语句来选择多个代码块之一来执行switch 语句 - 使用该语句来选择多个代码块

2021-08-25 18:34:47 90

原创操作符及类型转换

操作符算数运算符运算符描述例子结果+加法var num = 1 + 2;3-减法var num = 4 - 3;1*乘法var num = 4 * 3;12/除法var num = 6 / 3;2%取余var num = 7 % 3;1正常的数据运算var num1 = 8;var num2 = 4;console.log(num1 + num2); //12console.log(num1 - num2);

2021-08-25 18:34:19 291

原创文本编辑器

文本编辑器 vi/vimvi/vim 共分为三种模式，分别是命令模式（Command mode），输入模式（Insert mode）和底线命令模式（Last line mode）。命令模式i 切换到输入模式，以输入字符。x 删除当前光标所在处的字符。: 切换到底线命令模式，以在最底一行输入命令。命令模式其他指令光标操作 0 这是数字『 0 』：移动到这一行的最前面字符处 (常用) $ 移动到这一行的最后面字符处(常用) nG n 为数字。移动到这个档案的第 n 行。

2021-08-23 11:19:30 222

原创 Linux命令

用户相关命令查看当前用户who am i 添加用户：$ adduser 用户名$ adduser user1#查看用户信息$ cat /etc/passwd#查看组信息$ cat /etc/group添加组$ addgroup 组名$ addgroup group1#查看组信息$ cat /etc/group新建用户指定组$ adduser --gid 1001 user2#查看用户信息$ cat /etc/passwd#查看组信息$ cat /etc/gr

2021-08-23 10:59:10 152

原创 JavaScript

JavaScript的组成ECMAScript：描述了该语言的语法和基本对象。【js标准】（兼容性100%） (类似于CoreJava，制定了基础的语法)文档对象模型（DOM）：描述处理网页内容的方法和接口。（Document Object Model文档对象模型）js操作html的api——是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。（Browser Object Model 浏

2021-08-23 09:58:13 108

原创 visibility: hidden和display: none 在作用、对HTML元素的影响、定义上有所不同:

visibility: hidden和display: none 在作用、对HTML元素的影响、定义上有所不同:1、作用不同visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。display: none----将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。d

2021-08-19 16:39:16 635

原创媒体查询的使用

定义媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。媒体查询与弹性盒布局的适用情况媒体查询：当页面的结构发生变化的话最好使用媒体查询。弹性盒：如果只是宽高的变化，尽量使用弹性盒。使用方法<!-- link元

2021-08-19 16:33:12 3607

原创 Transitions和animation

Transitions定义CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。过渡三要素1.1必须要有属性发生变化；1.2必须告诉系统哪个属性需要执行过渡效果； 1.3必须告诉系统过渡效果持续时长。过渡触发1、:hover 鼠标悬停触发；2、:active 用户单击元素并按住鼠标时触发；3、:focus 获得焦点时触发；4、@media触发符合媒体查询条件时触发；5、点击事件

2021-08-19 16:22:34 257

原创 flex布局

定义Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。模型模型定义：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。特点：1. 每个弹性容器都有两根轴：主轴和交

2021-08-19 15:19:14 228

原创定位布局——position

静态定位定义：是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。 position: static;相对定位定义：相对定位就是相对于自己以前在标准流中的位置来移动。 position: relative; （使用top,right,bottom,left来控制）【注】： 1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间； 2.在相对定位中同一个方向上的定位属性只能使用一个； 3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块

2021-08-19 14:55:30 198

原创 CSS布局——浮动

浮动布局方式如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)。可选值： none，默认值，元素默认在标准流(文档流/普通流)中排列； left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动； right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动；当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通流)，

2021-08-19 14:38:11 128

原创 CSS盒模型

1.盒子组成盒子属性（ Box properties）文档中的每个元素都可以被看作是一个矩形盒子。具有如图的一些属性。margin外边距代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）border设定介于padding的外边缘与margin的内边缘之间，默认值为0padding内间距在任何定义的边界内的元素内容周围生成空间width & height用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。盒子一般指的是块

2021-08-10 20:20:06 93

原创字体及文本样式

1.文本属性color：为字体指定颜色格式: color: 值;取值：英文单词、rgb、rgba、十六进制 font-style：用于打开和关闭斜体文本格式：font-style:italic取值： normal ：正常的，默认就是正常的 italic : 倾斜的font-weight 为字体设置粗细程度格式： font-weight: bold;取值: bold 加粗 bolder 比加粗还要粗 lighter 细线，默认就是细线数字取值： 100-900之

2021-08-10 20:16:27 218

原创 CSS引入样式

内联样式（行内样式）优点：样式与结构冗余缺点：优先级较高使用方法：<div style="color:red">设置文字的颜色为红色</div>【注】：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。多个css样式写在一起的效果如下面所示：<div style="color:red;font-size:14px"> 设置字体颜色为红色，并且字体.

2021-08-05 16:24:45 189

原创 CSS选择器

标签选择器作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。格式: 标签名称{ 属性:值; }【注】： 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签。 2.标签选择器无论标签藏得多深都能选中。 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)。id选择器作用: 根据指定的id名称找到对应的标签, 然后设置属性格式： #id名称{

2021-08-05 16:24:23 248

原创 CSS三大特性

继承性作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。【注】： 1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承。 3.继承性中的特殊性： 3.1 a标签的文字颜色和下划线是不能继承的，a标签当作子元素。 3.2 h标签的文字大小是不能继承的，h标签当作子元素。<div> <a href="https://www

2021-08-05 16:23:58 46

空空如也

空空如也