- 博客(45)
- 收藏
- 关注
RSS订阅原创 Vue学习——数据绑定
数据绑定Vue中有两种数据绑定的方式：单向数据绑定：使用v-bind，数据只能从data流向页面，不能从页面流向data双向数据绑定：使用v-model，数据可以从data流向页面，也可以从页面流向data 双向绑定一般都应用在表单元素上，比如input、select等。 v-model:value="name" 可以简写成 v-model，因为v-model默认收集的就是value值<body> <div id="root"> <!-- 普
2021-11-26 11:41:07
534
原创 Vue学习——Vue模板语法
Vue模板语法Vue模板语法有两大类：插值语法指令语法1. 插值语法功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以读取data中的所有属性<body> <!-- 容器 --> <div id="root"> <h1>插值语法</h1> <h3>{{name}}</h3> </div> <script&
2021-11-26 11:04:23
389
原创 Vue学习——初识Vue
一、搭建Vue运行环境下载vue.js文件Vue下载地址在代码中引入下载好的vue.js<script src="../js/vue.js"></script>清理浏览器中不必要的提醒（选做）在浏览器中安装Vue开发者工具，清理第一个在代码中设置生产提示Vue.config.productionTip = false // 阻止vue在启动时生成生产提示二、Hello,Vue<body> <!-- 准备好一个容器 --&
2021-11-26 10:20:24
568
原创 JavaScript进阶—函数高级之原型与原型链
一、原型1. 什么是原型每个函数都有一个prototype属性，这个属性指向一个空的Object对象，即称为原型对象原型对象中都有一个constructor属性，它指向函数对象// Date函数的prototype属性console.log(Date.prototype);// Date函数prototype中的constructorconsole.log(Date.prototype.constructor);2. 作用给原型对象中添加属性后（一般添加的都是方法），函数的所有实例
2021-11-25 16:58:52
59
原创 JavaScript进阶—基础总结（二）
对象1.什么是对象多个数据的封装体用来保存多个数据的容器一个对象代表现实中的一个事物2.为什么要用对象统一管理多个数据3.对象的组成属性：属性名（字符串）和属性值（任意类型）组成方法：一种特别的属性（属性值是函数）4.访问对象的内部数据.属性名：有时不能用[“属性名”]：通用什么时候必须用[“属性名”]方式？属性名包含特殊字符：- 空格属性名不确定函数1.什么是函数2.为什么要用函数3.如何定义函数4.如何调用（执行）函数...
2021-11-24 11:30:07
195
原创 原生ajax
1 Ajax简介Ajax，全称“Asynchronous JavaScript and XML”，即异步的 JavaScript 和 XML。通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。2 XML简介XML是可扩展标记语言，XML与HTML类似区别：XML被设计用来传输和存储数据HTML用来显示数据XML中的标签都是自定义的HTML中都是预定义标签XML现在已经被JSON取代了。...
2021-11-23 17:11:16
2717
原创 JavaScript进阶_基础总结（一）
一、数据类型总结1.分类基本（值）类型String：任意字符串Number：任意数字Boolean：true/falseNull：nullUndefined：undefined对象（引用）类型Object：任意对象Function：一种特别的对象（可以执行）Array：一种也特别的对象（数值下标，内部数据是有序的）2.判断typeof：返回数据类型的字符串表达可以判断 数值/字符串/布尔值/Undefined/Function不能判断：Null和Object
2021-08-30 10:23:33
91
原创 JavaScript学习笔记——JSON
JSONJS中的对象只有JS自己认识，其他的语言都不认识，但有时候我们需要在不同语言之间进行交互数据或者传递，所以就需要用到JSON。JSON其实就是一种特殊格式的字符串，这种字符串可以被任意语言识别，并且可以转换为任意语言中的对象。JSON：JavaScript Object Notation，JavaScript对象表示法JSON和JS对象格式一样，唯一不同的是JSON字符串中的属性名必须加双引号，其他的和JS语法一致JSON分类（1）对象 {}（2）数组 []JS
2021-08-25 09:16:03
99
原创 JavaScript学习笔记——类的操作
JS对CSS类的操作JS操作具体的样式（比如box.style.width = “10px”），这种通过style来修改元素样式的方式，每次只能修改一个样式，且每修改一个，浏览器就需要重新渲染一次，执行性能比较差。JS操作CSS类来修改样式，可以同时修改多个样式，浏览器只需重新渲染一次，并且这种方式可以使表现和行为进一步分离。obj.className：设置元素的class属性一、 给元素添加一个CSS类创建一个函数addClass()参数：obj：要添加类的元素classN： 要添加的类
2021-08-25 09:15:16
96
原创 JavaScript学习——定时器
setInterval()定时调用，可以将一个函数每隔一段时间执行一次参数：回调函数，被定时调用的函数每次调用间隔的时间，单位是毫秒返回值：会返回一个Number类型的数字，这个数字作为定时器的唯一标识。clearInterval()清除定时器参数：定时器的标识clearInterval()可以接受任意参数，参数有效就清楚定时器，无效什么也不做...
2021-08-18 19:56:41
68
原创 JavaScript学习笔记——BOM对象
Bom浏览器对象模型，BOM可以让我们通过JS操作浏览器。BOM中提供了一组对象，用来完成对浏览器的操作：Window：代表整个浏览器的窗口，同时也是网页中的全局对象Navigator：代表当前浏览器的信息，通过该对象可以来识别不同的浏览器Location：代表当前浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者实现窗口跳转History：代表当前浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的浏览记录，只能实现浏览器向前或向后翻页，且该操作只
2021-08-17 16:46:21
86
原创 HTTP与HTTPS协议学习笔记
一、什么是HTTP？Hyper Text Transfer Protocol（超文本传输协议），即就是传输的数据不仅仅是文本。是从服务器传输超文本到本地浏览器的传送协议。HTTP协议是基于TCP的应用层协议，它不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式。HTTP是基于请求与响应模式的、无状态的、应用层的协议。二、HTTP请求报文HTTP请求报文由请求行、请求头部、空一行、请求正文四部分组成。请求行：请求方法+请求的url+协议版本请求头：需要服务器了解的附加信息
2021-08-13 11:19:38
116
原创 JavaScript学习——DOM对象
DOM对象简介一、什么是DOMDOM，全称Document Object Model，文档对象模型。JDS通过DOM对象对HTML文档进行操作。文档：整个HTML页面就是文档对象：网页中的每个部分都是对象模型：使用模型来表示对象之间的关系，方便我们获取对象DOM树节点节点（Node），是构成网页最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如：html标签，属性，文本，注释，以及整个文档都是一个节点。节点有不同的类型，不同节点的属性和方法都不尽相同元素节点，HTML
2021-04-22 10:16:58
194
原创 JavaScript学习——正则表达式
正则表达式正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。一、创建正则表达式对象语法一：var 变量 = new RegExp(“正则表达式”,“匹配模式”);var reg = new RegExp("a");语法二：var 变量 = /正则表达式/匹配模式;var reg = /a/;匹配模式:i --> 忽略大小写g -->全局匹配模式使用test()方法检查字符串是否符合规则va
2021-04-12 18:25:10
177
原创 JavaScript学习——Date、Math和包装类
Date对象JS中使用Date对象来表示一个时间一、创建Date对象使用构造函数直接创建一个Date对象，会封装代码执行时的时间var d = new Date();document.write(d); //Sat Apr 10 2021 10:57:55 GMT+0800 (中国标准时间)使用构造函数创建一个指定的Date对象var d2 = new Date("2021,3,22,11:30:45");document.write(d2); //Mon Mar 22 2021 11:3
2021-04-10 11:20:20
80
原创 JavaScript学习——数组
一、数组的简介数组也是一个对象，它和普通对象类似，也可以存储值，不同的是普通对象使用字符串作为属性名，而数组使用数字作为索引来操作元素。数组的基本操作1.创建一个数组（1）使用构造函数创建数组语法一：var 数组名 = new Array(); 创建一个空数组var arr = new Array();语法二：var 数组名 = new Array(值1，值2…); 创建并添加元素var arr = new Array(1,2,3);语法三：var 数组名 = new Array(
2021-04-10 10:05:23
733
原创 JavaScript学习——原型对象
原型对象（prototype）我们所创建的每一个函数，解析器都会向函数中添加一个属性：prototype，这个属性指向一个对象，就是原型对象。图1当函数作为普通函数被调用时，prototype没有任何作用当函数以构造函数的形式被调用时，它所创建的对象中都会有一个隐含的属性__proto__，这个属性指向该构造函数的原型对象。图2原型对象就相当于一个公共的区域，同一个类的所有实例都可以访问到原型对象。所以我们可以将对象共有的内容，设置到原型对象中。在访问一个对象的属性或方法时，它会先在对
2021-04-08 16:32:33
57
原创 JavaScript学习——创建对象的其他方法(构造函数)
一、使用工厂方法创建对象这个方法不常用//定义一个创建对象的函数function createPerson(name,age){ var obj = new Object(); obj.name = name; obj.age = age; return obj;}//利用工厂函数创建对象var per = createPerson("tom",15);二、使用构造函数创建对象构造函数就是一个普通的函数，创建方式与普通函数相同，不同的是构造函数习惯上首
2021-04-08 15:39:29
111
原创 JavaScript学习——作用域
一、全局作用域1.全局作用域直接写在script标签中的代码都属于全局作用域，全局作用域在页面被打开时创建，在页面被关闭时销毁全局作用域中有一个全局对象：window，它由浏览器创建，我们可以直接使用在全局作用域中创建的变量，都作为windo对象的属性保存在全局作用域中创建的函数，都作为window对象的方法保存全局作用域中的变量都是全局变量，整个页面都可以访问到2.声明提前变量的声明提前使用var关键字声明的变量，会在所有代码执行之前被声明，但不会被赋值。使用函数声明创建的函
2021-04-07 18:08:58
177
原创 JavaScript学习——函数
一、函数的简介函数也是一个对象，它可以封装一些可执行的代码，在需要的时候直接调用。1.创建函数构造函数创建函数语法: var 函数名 = new Function("可执行代码");var fun = new Function("console.log('hello')");函数声明创建函数语法： function 函数名([形参1,形参2,...,形参n]){ 语句... }function fun1{ document.write("这是用函数声明的方法创建的函数");
2021-04-07 16:54:52
62
原创 JavaScript学习——对象
对象的简介对象是一种复合型的数据类型1.对象的分类内建对象由ES标准定义的对象，在任何ES的实现中都可以使用比如Math、String、Numbre、Function、Object…宿主对象由JS的运行环境提供的对象，主要指由浏览器提供的对象比如 DOM、BOM自定义对象由开发人员自己创建的对象2.对象的基本操作创建对象使用new关键字调用的函数，是构造函数（constructor），构造函数是专门用来创建对象的函数。var obj = new Object();
2021-04-07 12:05:58
67
原创 JavaScript学习——流程控制语句
一、条件判断语句（if语句）语法一：// 如果条件表达式值为true，则执行后边的代码块// 如果条件表达式为false，则不执行if(条件表达式){ 语句...}语法二// 如果条件表达式的值为true，则执行if后的语句// 如果条件表达式的值为false，则执行else后面的语句if(条件表达式){ 语句...} else{ 语句...}语法三// 从第一个条件表达式开始判断，若结果为true，则执行该条件后的语句， 若为false，则判断第二个条件表达式，若
2021-04-07 08:58:10
74
原创 JavaScript学习——其他运算符
一、赋值运算符共有六个个赋值运算符：=：用来将符号右侧的值赋给左侧的变量var a = 5; //将5赋值给变量a+=：a += 5 等价于 a = a+5-=： a -= 5 等价于 a = a-5*=： a *= 5 等价于 a = a-5/=： a /= 5 等价于 a = a+5%=： a %= 5 等价于 a = a-5二、关系运算符用来比较符号两侧数值的关系，如果关系成立返回true，不成立返回false。如果是非数值，将其转换为Number在进行比较。< ：
2021-04-05 11:03:54
239
1
原创 JavaScript学习——逻辑运算符
逻辑运算符共有三个逻辑运算符：!： 非运算&&：与运算||：或运算1.非运算! ：非运算符，用来对一个布尔值进行取反对一个布尔值取反两次，值不变如果是非布尔值，则将其转换为布尔值再进行非运算。//对布尔值bool进行非运算//结果：//true boolean//false booleanvar bool = true;document.write(bool + " "+typeof bool+"<br>");bool = !bool; d
2021-04-04 17:45:22
92
原创 JavaScript学习——算术运算符
算数运算符共有五种算术运算符：加法运算符：+减法运算符：-乘法运算符：*除法运算符：/取模运算符：%注意：1、除了字符串的加法运算之外 ，其余类型的数据进行各种算术运算时，全都转换为Number类型，再进行运算。2、任何值与NaN运算结果都为NaN。一. 加法运算+ ：加法运算符，可以对两个值进行加法运算，并返回结果。运算时，将非数值转换为Number，在进行运算。//Number与Number相加//结果：3 numbervar a = 1 + 2;document.w
2021-04-04 15:20:38
559
1
原创 JavaScript学习——数据类型转换
数据类型转换一般情况下，数据类型转换是把其他数据类型转换为String、Number、Boolean。一、 把其他类型转换为String有两种方式可以将其他类型转换为String类型：toString()方法String()函数注意：toString()方法和String()函数都不会对原变量产生影响，转换结果会作为返回值传回。1.方式一：调用toString()方法（1）Number类型转化为Stringvar a = 123;document.write(a,' ',typeof
2021-04-03 18:28:44
59
原创 JavaScript学习——变量与数据类型
一、变量1.声明变量使用var关键字来声明一个变量var a;2.给变量赋值a = 5;3.同时声明和赋值var a = 5;二、数据类型JavaScript中主要有六种数据类型：String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象String、Number、Boolea、Null、Undefined都是基本数据类型，Object是引用数据类型。typeof，用来检查数据的数据类型。1.Strin
2021-04-03 12:03:35
65
原创 JavaScript学习——js代码的编写位置
JavaScript代码的编写位置1.标签内部（不推荐）（1）写在标签的onclick属性中<button onclik = "alert('你好');"></button>（2）写在a标签的href属性中<a href="javascript:alert('hello');">嗨</a>2.写在script标签中<script> alert("我是script标签中的代码");</script>3.写在
2021-04-03 10:08:18
315
原创 JavaScript学习--JS的“hello world”
JavaScript中的输出语句1.alert()alert()： 在浏览器窗口弹出警告框alert("Hello World!");2.document.write()document.write()：向body中输出内容。ducument.write("Hello World！");3.console.log()console.log()：向控制台输出一个内容cansole.log("Hello World");...
2021-04-03 09:33:40
476
1
原创 HTML学习笔记——表格table
一、表格的简介表格（table）是块元素，但与块元素不同的是，他的宽高都被内容撑开。表格可以分成三部分： thead 头部，tbody 主体， tfoot 底部创建表格使用table标签创建一个表格使用tr标签创建表格中的一行，有几个tr就有几行tr可被th代替，表示表格的标题部分，样式与其他行有所不同注意：创建表格时直接使用tr，浏览器会自动创建tbody元素，也就是说，tr是tbody的子元素，不是table的子元素。使用td创建一行中的单元格<table border
2020-12-12 10:09:58
412
原创 CSS学习笔记——CSS Sprite(雪碧图)
雪碧图原理将要用的小图标都放在一张图片上，再将这张图片设置为元素的背景图片，利用background-position属性移动图片来显示想要的其中一个。优点将图片整合到一张图片上，加载时只需发送一次请求，提高网页的加载速度。示例测量大小设置与图片大小相同的元素将雪碧图设置为背景图片.box1{ border:1px solid red; width: 120px; height: 180px; background-image: u
2020-12-11 10:59:28
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人