前端专题学习汇总
关注
分享
扫一扫
文章平均质量分 66
前端专题：Vue、Jquery、Bootstrap等前端知识
刘远山
日积月累
展开
-
Vue-单文件组件使用说明
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、jsvue-loader浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等需要注意的是vue-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具原创 2022-06-23 08:15:02 · 1839 阅读 · 0 评论 -
Vue-组件及组件间的通信方式
1）什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码组件是自定义元素（也相当于对象）2）定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件组件的分类分类：全局组件：可以在所有vue实例中使用局部组件：局部组件:只能在当前vue实例中使用引用模板和动态组件1）引用模板将组件内容放到模板template中并引用2）动态组件（内置组件）component :is=""组件原创 2022-06-22 16:36:43 · 338 阅读 · 0 评论 -
页面布局设计与PC端后台界面实战
前端页面布局初探原创 2022-06-16 13:08:49 · 857 阅读 · 0 评论 -
JavaScript对象和原型的相关方法
实例<script> //in 关键字用来寻找属性或方法是否在对象中写法：属性 in obj /* var person = { name: "张三", age: 23, gender: "male", eat: function(){ console.log(this.name+"is eating"); } } //使用in来遍历对象中的所有属性 f原创 2020-10-08 23:19:11 · 154 阅读 · 0 评论 -
JavaScript中改变this指向call/apply/bind方法
实例<script> //call和apply，都是可以改变this的指向 /*var obj1 = { width: 30, height: 50, getArear: function() { console.log(this.width*this.height); }, getCube: function(w,h,l){ console.log原创 2020-10-08 12:55:53 · 172 阅读 · 0 评论 -
JavaScript中ES6中类的定义与使用
class =》类 object =>对象构造函数=>用来模拟类的函数es6以后可以使用class来定义类，然后用类来定义对象实例<script> //class =》类 object =>对象 //构造函数=>用来模拟类的函数 //es6以后可以使用class来定义类，然后用类来定义对象 var methodName = "smoke" var proper = "height"//定义类使用方法二 class P原创 2020-10-08 11:57:46 · 825 阅读 · 0 评论 -
JavaScript回调函数
回调函数和处理异步回调函数指的是当一个函数作为另一个函数的参数时，作为 参数的函数就是一个回调函数，回调函数应用最广泛的就是处理异步问题 实例<script> /* var res; function a(){ setTimeout(()=> { res = 5 },1000) } function b(){ console.log("我要拿到a函数计算后的结果"+res);原创 2020-10-08 11:24:18 · 381 阅读 · 0 评论 -
JavaScript闭包原理与使用
闭包 闭包就是能够读取其他函数内部变量的函数，例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 闭包主要作用目的是防止变量污染，让闭包所在的函数中有相对独立的命名空间和作用域实例<!doctype html><html lang="en"><head> <meta charset="UTF-8"> &原创 2020-10-07 23:45:58 · 142 阅读 · 0 评论 -
JavaScript原型链__proto__与原型继承使用
为什么要用原型？是为了减少内存的浪费实例<script> //原型，原型链，继承 function Rect(width,height){ this.width = width; this.height = height; } var rect1 = new Rect(4,5); console.log(rect1); //原型是构造函数的一个属性（prototype)，这个属性也是一个对象， //对该构造函数定义的对象将自原创 2020-10-07 18:21:09 · 148 阅读 · 0 评论 -
JavaScript箭头函数及其使用
实例<script charset="utf-8"> //匿名函数 /*var f = function (x){ return x * x; } console.log("5的平方为："+ f(5));*/ //箭头函数 => /*var f = x => x * x; console.log("5的平方为："+ f(5));*/ //--------一个参数的箭头函数，可以省略参数两边的括号原创 2020-10-07 17:29:46 · 279 阅读 · 0 评论 -
JavaScript对象的3中this指向
1、构造函数中的方法、自定义函数中、new出的对象里添加方法去使用里边的值对于this指向的对象要清晰实例<script> //在对象中的方法里定义其它对象 function Rect(width,height){ this.width = width; this.height = height; this.cal = new Caculator(); this.getArea = function(){原创 2020-10-07 16:28:15 · 173 阅读 · 0 评论 -
JavaScript全局角度看this
<script charset="utf-8"> //在没有进行任何初始化的时候，this就是window对象 console.log(this); //构造函数或任何函数或在函数以外中出现的this，其实都指的是window this.document.write("大家好，我是使用的this.document.write显示的文字") function Caculator(){ this.aaplus = function(op1,o原创 2020-10-07 13:44:39 · 153 阅读 · 0 评论 -
JavaScript自定义构造函数
自定义构造函数1、自定义构造函数约定成俗的采用大驼峰的写法，即所有单词首字母都大写2、删除对象中的方法，切记删除方法函数不要加括号3、同一个构造函数创建的不同对象来说，每个对象的属性和方法执行都互不干扰实例<script charset="utf-8"> function Person(person){//自定义构造函数约定成俗的采用大驼峰的写法，即所有单词首字母都大写 this.name = person.pName; this.age = p原创 2020-10-07 12:28:58 · 467 阅读 · 0 评论 -
JavaScript对象初识
<script charset="utf-8"> //-----------定义对象的方法------ //方法1：使用对象的字面量方法来定义对象 var zhangsan = { name: "zhangsan", age: 33, weight: 160, //定义方法，在对象中定义的函数我们称之为该对象的方 eat: function(n){ console.lo原创 2020-10-07 11:16:31 · 156 阅读 · 0 评论 -
JQuery动画与特效
显示与隐藏hide([参数])和show([参数])直接显示和隐藏效果参数：毫秒（比如1500）“show”“normal”“fast”toggle([参数])滑动slideDown([参数])向下滑动出现slideUp([参数])向上滑动隐藏需要将display为none隐藏参数为’show’,‘fast’，毫秒数slideToggle()淡入淡出fadein([参数])淡入：原本为display为none的元素出现fadeOut([参数])淡出：原本为显示的元素隐藏原创 2020-10-07 00:15:40 · 123 阅读 · 0 评论 -
JQuery节点操作-创建、插入、删除与克隆
新建jquery(html)插入内部1、尾部插入：jquery(obj).append(jquery(obj)) //jquery(obj).appendTo(jquery(obj))2、头部插入：jquery(obj).prepend(jquery(obj)) //jquery(obj).prependTo(jquery(obj))外部1、尾部插入：jquery(obj).after(jquery(obj)) //jquery(obj).insertAfter(jquery(obj))2原创 2020-10-06 19:09:44 · 481 阅读 · 1 评论 -
JQuery事件绑定、解除、委托、触发
绑定事件jquery(obj.事件名(function(){…}))jquery(obj.on(事件名字符串, function(){…}))jquery(obj.one(事件名字符串, function(){…}))解除绑定jquery(obj.off([事件名字符串])事件委托监听元素的长辈的事件，给该元素动态添加事件jquery(obj.on(事件名字符串, 选择器, function(){…}))触发事件jquery(obj.trigger(事件名字符串))实例<原创 2020-10-06 17:50:44 · 707 阅读 · 2 评论 -
JQuery中查找、过滤和链式调用
JQ节点的查找与过滤操作查找和过滤操作都属于“筛选”操作，按照筛选的对象相对于原节点的位置，可分为筛选出长辈、晚辈、自身、兄弟这几种长辈：parent([选择器])、parents([选择器])、offsetParent()晚辈：children([选择器])、find(选择器)自身：first()、last()、not(选择器|obj)、has(选择器|obj)、filter([选择器])、eq(index)兄弟：next([选择器])、nextAll([选择器])、prev([选择器])、pr原创 2020-10-05 17:55:10 · 397 阅读 · 0 评论 -
jQuery样式、大小与位置操作
样式操作1、属性操作2、常规操作add、remove、has（判断是否存在该属性节点）3、样式直接操作4、获取、设置单个样式：jquery(obj.css(样式属性名,[值]))5、设置多个样式：jquery(obj.css(样式对象))大小与位置操作位置：offset([obj])：设置或获取在页面中的位置position()：获取的位置相对与最近的定位祖先的位置大小：均可添加数值作为参数，有参数时为设置，无参数是获取获取设置conten的width与heightwidth()、h原创 2020-10-05 16:53:37 · 154 阅读 · 0 评论 -
JQuery属性操作
属性操作JQ中不能单独创建属性节点，而只能在元素节点中进行属性操作html标记中的属性操作：查、增、改：jQuery(obj.attr(属性名,[属性值]))删：jQuery(obj.removeAttr(属性名))元素节点的属性操作：查、增、改：jQuery(obj.prop(属性名,[属性值]))删：jQuery(obj.removeProp(属性名))因为JQ节点是一组包含多个节点的数组，所以在增、改时可以同时对多个html元素进行操作，但是查询时只会查询第一个节点的属性。实例&l原创 2020-10-05 14:37:29 · 106 阅读 · 0 评论 -
JQuery中JQ与JS节点转换与节点内容
JQ与JS节点转换实例<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.4.1.min.js"></script></head><style> ul{ list-sty原创 2020-10-05 12:49:31 · 556 阅读 · 0 评论 -
JQuery节点与选择器使用
JQ的DOM节点1、jquery(选择器字符串)获取JQ的dom的元素节点（注意不是原生js的dom节点）例如：jquery(“li”)将获得所有li标记的JQDOM节点2、JQ的dom节点本质上就是原生dom节点的集合+jQ在原型上定义的若干方法和属性实例1、元素选择器2、类选择器<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2020-10-05 11:49:43 · 432 阅读 · 0 评论 -
JQuery简介与使用
JQuery官网下载地址不过由于JQuery已经停止版本的更新，所以很有必要学习其他JS库如VueJQuery简介1、是JS库（就是一个JS文件）2、主要用于前端开发，DOM操作3、方便、简单、实用、兼容性高，链式调用检测是否引入JQuery文件<script> console.log($);</script>DOM树加载完后加载JQueryJQuyery在加载DOM树完成后加载JQuery与原生不同在于，JQuery在请求加载图片完成前执行，而JS会在原创 2020-10-05 11:16:40 · 1237 阅读 · 0 评论 -
JavaScript中键盘事件和样式操作
键盘事件节点属性中有以下几个事件用于键盘事件keyDown：按下键盘，长按叠加keyUp：抬起键盘keyPress：按下键盘的过程，发生在keyUp之前(无法识别功能键)相关属性：keyCode：键盘值A:65a:970:48（数字键盘上为96）四个方法向从左开始顺时针为：37-40样式操作1，单独样式：节点.style.样式名 = “样式值”例：p.style.color = “red”;//将p节点的文字改为红色2，多个样式：（1）节点.className=“类名”；（原创 2020-10-05 00:20:34 · 351 阅读 · 0 评论 -
JavaScript中window对象及open和close使用
Window对象是一个顶级对象，不是任何对象的属性，所以可以不写window.xxx而直接使用内部的属性和方法。实际上，在web前端开发时，所有的全局变量都自动成为window对象的属性Window对象的属性ScreenHistoryLocationNavigatorDocument（DOM)Window对象的方法alertconfirmpromptsetIntervelsetTimeoutclearInterval()openClose(只能关闭使用js打开的浏览器窗口）原创 2020-10-05 00:17:57 · 2137 阅读 · 0 评论 -
JavaScript冒泡与捕获
冒泡与捕获冒泡现象：自底向上执行事件函数阻止冒泡：1，window.event.cancelBubble = true //window.event存在时2，event.stopPropagation();//window.event不存在时，使用event参数捕获：和冒泡正好相反，但是捕获事件实际上是浏览器的真正执行顺序。若使用捕获则可在事件监听将第3个参数设为true。<!DOCTYPE html><html lang="en"><head>原创 2020-10-05 00:10:21 · 163 阅读 · 0 评论 -
JavaScript中event事件对象使用
Event对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态 在IE/Opera中，是window.event，而在Firefox中，是event，谷歌则是两者都可以；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，而在Opera中则两者都支持。考虑到兼容性，Event需要在监听事件函数中作为参数显示调用var e = e||window.event;<!DOCTYPE原创 2020-10-05 00:05:01 · 298 阅读 · 0 评论 -
JavaScript动态监听事件使用
1、冒泡事件原理，由里到外依次执行2、addEventListener动态绑定监听事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-10-04 16:39:46 · 1112 阅读 · 0 评论 -
JavaScript中添加标准属性节点操作方法
属性节点获取属性节点：元素节点.getAttributeNode(属性名字符串)可使用nodeType查看属性类型修改：使用nodeValue设置和获取属性值创建属性节点（例）：var atr=document.createAttribute(“class”); atr.nodeValue=“democlass”;元素节点. setAttributeNode(atr)注：其实这种方法就是操作html上的attribute添加属性节点setAttributeNode(myclass);原创 2020-10-04 14:24:47 · 1042 阅读 · 0 评论 -
JavaScript中property与attribute对属性操作的异同
属性操作1，元素节点的属性（property）2，html标记的属性（attribute）3，属性节点注：html标记中的属性其实是attribute，而js中节点的属性是property，这2种属性新增属性时并不通用（除非是html标准属性）1，属性节点操作属性（property）获取节点后，可以直接对节点对象进行js对象的属性操作增删（对已有初始值的标准属性无效）改标准属性：id,title,href,style,class(实际为className)等html标记自带的属性，可直原创 2020-10-04 13:59:18 · 209 阅读 · 0 评论 -
JavaScript关系属性获取节点
parentNode父节点childNodes所有类型节点，children 元素类型节点(children更常用)firstChild第一个所有类型节点(不常用)lastChild最后一个所有类型节点(不常用)nextSibling获取下一个所有类型节点，nextElementSibling获取下一个html元素节点previousSibling获取上一个所有类型节点，previousElementSibling获取上一个html元素节点<!DOCTYPE html><ht原创 2020-10-04 12:10:00 · 104 阅读 · 0 评论 -
JavaScript中document对象获取节点
获取节点1，通过document对象中的方法获取指定节点2，通过节点元素本身的位置获取父、子、兄弟节点document.getElementById();//id名document.getElementsByTagName();//标签名document.getElementsByClassName();//类名document.getElementsByName();//namedocument.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元原创 2020-10-04 11:31:08 · 1171 阅读 · 0 评论 -
JavaScript中DOM基础概念
DOM（对象文档模型（Document Object Model）），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM技术是用户页面可以动态的变化，从而大大使页面的交互性增强。document 对象是 HTMLDocument 的一个实例，表示整个 HTML 页面。而且 document 是 window 对象的一个属性。因此可以作为全局对象来访问。节点分类(nodeType)实例：<!doctype html原创 2020-10-04 10:57:46 · 164 阅读 · 0 评论 -
JavaScript引用类型与原始类型函数使用
//函数的引用//var a = 1;// var f1 = function(){// a++;// alert("正在执行f1")// }// var f2 = f1;// f1();// f2();// console.log(a)// var f3 = function(){// return f1;// }// //--------------// //f3();//没有执行f1,相当于f3获取了f1的这个函数的首地址原创 2020-10-04 00:10:15 · 103 阅读 · 0 评论 -
JavaScript自启函数的使用
//自启动函数// var f = function(){// a = 1;// }// console.log(a);//如果不执行f()这条语句，则这里会报错，提示a没有定义//-------// var a;// function f(){// a = 1;// }// console.log(a);//----------函数名后面必须加上（）后才会被执行// (function(){//自启动函数的函数名没有意义// a = 1;// a原创 2020-10-04 00:08:37 · 1274 阅读 · 0 评论 -
JavaScript处理字符串常见方法
<script>//js字符串常见方法var str = prompt("请输入字符串");//1,toUpperCase(),toLowerCase()，将字符串的字符全部转为大写,小写// var re = str.toUpperCase();// console.log("转为大写"+re);//2,charAt(Number),将会返回这个序号所在的字符// var re = str.charAt(3);// console.log("显示第3位的字符"+re);//3原创 2020-10-04 00:04:30 · 451 阅读 · 0 评论 -
JavaScript预编译与暗示全局变量在函数中的使用
1、理解什么是暗示全局变量（在函数中未var声明的为暗示全局变量）2、预编译与函数使用<script>//暗示全局变量,预编译//暗示全局变量，如果函数中定义的变量，没有使用var关键字，则这个变量暗示为全局变量//在传统js中只有全局变量和函数域变量// function f(){// var a = 1;//a为函数域中的变量，这个变量只能在函数中使用// b = 2; //b暗示为了全局变量// }// f();// //console.log(a)原创 2020-10-04 00:03:15 · 180 阅读 · 0 评论 -
JavaScript中函数arguments与剩余参数使用
1、arguments在函数中的使用2、…c剩余参数在函数中的使用//--------------------函数的参数，1，arguments获得实参;2，剩余参数--------------//arguments// function aa(){// for(var i = 0; i< arguments.length; i++)// alert(arguments[i]);// }// aa(1,2,"你好",null,undefined)//剩余参数,最后一个原创 2020-10-03 21:01:58 · 539 阅读 · 0 评论 -
JavaScript中函数的定义与使用
1、实参与形参的概念2、定义函数有2种方法，1，直接定义函数名;2，字面量的方式将函数作为一个变量使用。<script>//定义函数有2种方法，1，直接定义函数名;2，字面量的方式将函数作为一个变量使用。//1，直接定义// var a = 2,b = 3;// function plusaddnum(aa,bb){//定义函数,aa和bb是形参// var c = aa * aa + bb * bb;// console.log("结果为："+c);// }原创 2020-10-03 20:38:48 · 267 阅读 · 0 评论 -
JavaScript中引用类型与原始数组
1、理解组数栈内存与栈内存的关系2、引用类型在数组的使用<script> var a = 3,b; b = a; console.log(b,a);//结果为3，3 b = 4; console.log(b,a);//结果为4，3 var arr = [1,2,3]; var arr1 = arr; console.log(arr1,arr);//结果为[1,2,3]和[1,2,3] arr1[0] = 4; c原创 2020-10-03 15:54:32 · 121 阅读 · 0 评论