Delete.Q-优快云博客

原创 HTML清除浮动的四种方式

在我们使用html搭建网页时，如果一个父元素中的某个子元素设置浮动后，就会造成父元素的高度塌陷，会导致页面结构混乱。这是因为在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。例如： <!DOCTYPE html> <html lang="en"> &l

2021-10-02 12:00:50 11405 1

原创 ajax使用总结

ajax是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。 ajax的使用 1、首先要创建一个XMLHttpRequest对象 var xhr=new XMLHttpRequest() 2、使用open方法设置和服务器交互信息语法： open(‘请求方式’，‘请求的地址’) 请求方式：GET/POST/HEAD/DELETE/OPTIONS/PUT GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的 POST:用于HTML表

2021-09-27 19:00:21 231

原创 JavaScript之DOM事件机制

事件机制事件组成三部分 1、事件源：事件触发的对象 2、事件类型：鼠标事件、键盘事件、点击事件… 3、事件处理程序：通过一个函数赋值的方式 //事件触发对象button <button onclick="fun()">点我</button> //当点击button时触发事件 <script> //事件处理程序 function fun(){ console.log("hello world!") } </script>

2021-09-26 15:08:02 282

原创 JavaScript DOM节点操作

JavaScript DOM节点操作 DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容） DOM节点操作获取dom节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"

2021-09-22 19:50:54 192

原创 JavaScript继承方式

1、原型链继承 ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。构造函数、原型和实例之间关系：每一个构造函数都有一个原型对象，原型对象有一个constructor属性指回构造函数，而实例有一个内部指针指向原型。如下图：如果一个原型对象是另一个构造函数的实例呢？这样的话这个原型内部本身有一个指针指向另个原型，而另一个原型中也有一个指针指向构造函数。这样实例和原型之间就构成了一条原型链。这也是原型链的基本构想。实现原型链的

2021-09-17 19:38:50 105

原创 css优先级机制

css引入方式的优先级内联样式>内部样式>外部引入也就是就近原则，谁距离元素近，谁的优先级就高 css选择器优先级 !important 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible

2021-09-14 19:30:31 117

原创 JavaScript中this指向问题

JavaScript中this指向问题面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是一成不变的，它会随着执行环境的改变而改变。 1、如果单独使用，this表示全局对象 2、在方法中使用，this表示该方法所属的对象 3、在函数中，this表示全局对象 4、在事件中，this表示接收事件的元素 5、在显示函数绑定时，我们可以自己决定this的指向 1、this单独使用浏览器环境下单独使用this 在node环境下，单独使用this 2、在方法中使用，

2021-09-13 21:24:49 196

原创 JavaScript函数的调用之call、apply、bind的使用

call(执行环境的对象，实参列表) apply(执行环境的对象，实参列表数组) bind(执行环境的对象)(实参列表数组) 1、call的使用 var obj = { name: 'zhangsan', sayName: function (a,b) { console.log(this.name); console.log(a,b); // 1,2 } } var b = obj.sayName; b.call(obj,1,2); // zhangsan 2、apply使

2021-09-10 15:57:15 147

原创 js数组API总结

在学习js的数据类型中，数组的学习是一个重要的部分。js数组为我们提供了很多现成的方法供我们使用，但是众多的数组api难以全部都记住，所以本文对数组的api做个详细总结。 1、栈与队列方法 push()从数组的末尾添加一个或多个元素 var arr=[1,2,3,4] arr.push(5)//[1,2,3,4,5] pop() 方法用于删除数组的最后一个元素并返回删除的元素。 var arr=[1,2,3,4] arr.pop()//[1,2,3] shift() 方法用于把数组的第一个

2021-09-08 14:58:39 344 2

原创 JavaScript数据类型和类型转换

1、JavaScript数据类型在JavaScript中，数据类型分为了两大类。分别是基本数据类型和引用数据类型。本文在Node.js环境中进行输出 1.1、基本数据类型 JavaScript中的基本数据类型为有：String、Number、Null、Undefined、Blooean、Symbol（ES6新增）在JavaScript中我们使用var关键字来声明变量 // 字符串 var str = "hello world" console.log(str+"----这是一个字符串"

2021-09-01 20:29:50 230

原创 html中父子级、兄弟级margin外边距合并问题的解决方法

在默认(标准流)布局的垂直方向上，默认情况外边距是不会叠加的，会出现合并现象。父子级外边距合并例如：我们设置两个div，父容器div中包裹着一个子元素div，给子元素设置一个margin-top：100px。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

2021-08-22 19:33:32 825

原创 CSS选择器的使用

文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言 css是前端必须要掌握的知识，其实css学起来虽然简单，但是要记的知识有很多，css的学习一共分为两大部分，一个是css的选择器，另一个是css的属性。本文总结一下css选择器的使用方法一、css选择器 1.标签选择器作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式: 标签名称{ 属性:值; } 注意点:...

2021-08-21 09:54:02 349

原创 HTML水平垂直居中的四种方式

第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i

2021-08-16 18:24:10 4497

原创 HTML基础入门

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML是什么？二、HTML的特点总结前言第一次接触HTML，是大三上学期开设的web基础课程，里面不仅介绍了HTML，还有CSS和JS。那是我第一次接触HTML，学起来也很简单。因为它不是一门编程语言，所以并没有像C++和Java那样学起来晦涩难懂，而且我们是边授课边实践的，讲到一个知识点，就要打一个代码例子，所以上手也很快。时间过了也快有一年了，有些知识也遗忘了一些，现在重新整理一遍.

2021-08-03 19:20:23 701 2

weixin_44961514的博客