Yhaomin-CSDN博客

原创 ES6中的类

关于类/class类是一种对象的模板，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。特点：面向对象，具备属性与方法写法：ES5原型写法：// ES5写法 // 构造函数=》创建属性 function Person(name,age){ this.name=name; this.age=age; /* this.showName=function(){

2021-11-12 19:04:38 1898

原创 ES6模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块export的用法在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）比如：1.基本语法/*

2021-11-08 18:59:51 154

原创 Promise

PromisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。作用解决异步回调问题语法结构let promise=new Promise(function(resolve,reject){ // re

2021-11-04 15:39:56 158

原创扩展运算符

扩展运算符又称剩余运算符，三个点运算符扩展运算符的作用1.将数组转换为字符串 -->扩展(展开数组)let arr=[1,2,3,4,5]; console.log(arr.join(" ")); console.log(...arr); console.log(1,...[2,3,4],5); console.log(...document.querySelectorAll("div"));2.克隆数组const a1=[1,2]; // 写法一 /

2021-10-28 18:47:44 374

原创模板字符串

模板字符串模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串的优点1.字符串新写法加强版的引号console.log(`好好学习 \n 天天向上`);2.内容中可以直接出现换行符console.log(`好好学习天天向上`);3.字符串中嵌入变量let name=`黄天霸`; let skill=`杀富济贫`; document.write(`&

2021-10-27 16:10:06 9349

原创 ES6解构赋值

解构赋值ES6允许按照一定模式从数组和对象中提取，对变量进行赋值，这被称为解构赋值未赋值的会返回undefined解构赋值的分类1.数组的解构赋值如果解构不成功，变量的值就等于undefined。// 01 完全解构 // let [a,b,c]=[1,2,3]; // [a,b,c]=[c,b,a]; // console.log(a,b,c); // let [foo,[[bar],baz]]=[1,[[2],3]]; // console.log(fo

2021-10-26 15:44:34 68

原创 ES6数组新增循环

ES6数组新增的一些循环arr.forEach() let arr=['apple','banana','orange','tomato']; arr.forEach(function(val,index,arr){ console.log(this,val,index,); },123); // 123为改变this的值 let arr1=['apple','banana','orange','tomato']; arr1.forEach((val,inde

2021-10-25 18:42:14 139

原创 ES6数组新增功能

Array.fromArray.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。所谓类数组对象，最基本的要求就是具有length属性的对象要将一个类数组对象转换为一个真正的数组，必须具备以下条件：1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。2、该类数组对象的属性名必须为数值型或字符串型的数字该类数组对象的属性名可以加引号，也可以不加引号let json={ //类数组对象 0:'tom'

2021-10-19 16:13:18 147 1

原创 jQuery是什么

jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。团队中有3个核心人物: John Resig、 Brandon Aaron和JomZaefferer.jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的

2021-07-20 16:30:41 605

原创 jquery节点

#节点操作操作节点有：查找节点、创建节点、插入节点、清空节点、删除节点、克隆节点、替换节点、包裹节点、综合案例 <script> $(function(){ var $li1=$("<li>西瓜</li>"); //创建一个文本节点 $('ul').append($li1); //找到父节点并插入 $('li:last').empty(); //清空最后一个li节点 $('li:last').rem

2021-07-14 19:55:51 88 1

原创 jQuery选择器

一、基本选择器1、ID选择器：$("#id");选择一个具有给定id属性的单个元素2、class选择器：$(".class");选择给定样式类名的所有元素3、标签/元素选择器：$(“element”);根据给定（html）标记名称选择所有的元素4、通用选择器：$("*");匹配所有元素5、群组选择器：$(“selector1,selector2”)您可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素二、层次选择器1、descendant s

2021-07-06 11:24:07 117 3

转载 Ajax请求的五个步骤

Ajax请求的五个步骤一、定义1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。2、同步与异步的区别同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。异步提交：当用户发送请求时，当前页

2021-06-30 20:15:04 378

原创 Open——操作窗口

Open:弹出窗口1.最基本的弹出窗口代码：window.open(‘page.html’);2.经过设置后的弹出窗口：window.open(‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no’)参数：window.open 弹出新窗口的命令；‘page.html’

2021-06-28 19:22:28 140

原创事件冒泡与解决

事件流事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。事件冒泡是从下到上执行的（从小到大）。例如：点击一个按钮会把它的父级、上几级都给弹出来。解决方法 var oEvent=ev || window.even; //兼容IE alert("this is div1"); oEvent.cancelBubble=true;//IE oEvent.stopPropagation()

2021-06-07 15:28:16 119

原创 DOM方法

获取元素getElementById() 返回带有指定 ID 的元素getElementsByTagName() 返回指定标签名的元素getElementsByClassName() 返回指定类名的元素DOM节点appendChild() 把新的子节点添加到指定节点。 function add(){ var aObj=document.createElement("a"); aObj.href="http://sohu.com"; aObj.target="_blan

2021-05-26 19:20:27 109 1

原创 DOM的常规操作

DOM简称Document Objdct Medio（文档对象模型）DOM的常规操作一、操作属性1.href属性 <a href="http://souhu.com" title="souhu" id="link">搜狐</a> <script> window.onload=function(){ var linkObj=document.getElementById("link"); linkObj.innerHTML="百度";

2021-05-19 18:52:13 147

原创倒计时——js

节日限时抢购倒计时 <style type="text/css"> b{color: #FF0000;} </style> <p align="center">距端午节6月12日12:00:00还有<b id="date"></b>天<b id="house"></b>小时<b id="minute"></b>分钟<b id="second"></b>秒&l

2021-05-18 18:49:43 80

原创 js去重

当前项和后面每一项比较1.indexOf 配合splice var arr = [1, 2, 3, 4, 2, 3] for (var i = 0; i < arr.length; i++) { var item = arr[i] console.log(item); //123423 var args = arr.slice(i + 1) // 去掉当前要比较的项，方便下一步indexOf进行判断 if (args.indexOf(item) >

2021-05-12 20:08:14 74

原创 js数组的常用方法

length设置或返回数组中元素的数目 var arr=[0,1,2,3,4,5] document.write(arr.length); //6prototype向对象添加属性 function employee(name, job, born) { this.name = name; this.job = job; this.born = born; } var bill = new employee("Bill Gates", "Eng

2021-05-08 19:33:16 96

转载 js闭包的用途

我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变

2021-05-07 20:12:43 345 1

原创 js的形参和实参

形参定义函数时候的参数，用来接受调用的时候传过来的实际参数。实参在调用函数时，传给函数的值。案例一：//无参函数 (function show() { alert("无参函数！"); })();案例二：//有参函数function show(i){ //i在这里是形参 if(i==1){ document.body.bgColor="red"; }else if(i==2){ document.body.bgColor="yell

2021-04-28 19:24:37 474

原创 js字面量与变量

一、字面量字面量：都是一些不可改变的值：比如：1 2 3 4 5 字面量都是可以直接使用的,但是我们一般都不会直接使用字面量。二、变量变量：变量可以用来保存字面量，而且变量的值是可以任意改变的。变量更加方便使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量，可以通过变量对字面量进行描述在js中使用var关键字来声明一个变量//声明变量 //在js中使用var关键字来声明一个变量 var a;//为变量赋值a = 1234569789;//

2021-04-28 19:02:42 267

原创 js随机函数（点名器）

随机数random() 返回 0 到 1 之间的随机数。案例（点名器） <div class="container"> <h2 align="center">点名器</h2> <form action="" method="" name="form"> <p><input type="text" name="username1" value=""> <input type="text" nam

2021-04-27 10:51:31 263 2

原创 js编写位置

一、可以将js代码编写的外部js文件中然后通过script标签引入写到外部文件中可以在不同的页面中同时引用，也可以利用浏览器的缓存机制推荐使用的方式。<script src="js/02script.js" type="text/javascript" charset="utf-8"></script>script标签一旦用于引入外部js文件了，就不能在编写代码了，即使编写了浏览器也会忽略如果需要则可以在创建一个新的script标签，用于编写内部代码。二、可以将js编

2021-04-25 19:29:42 133 1

原创 JS改变this指向的方法

this是什么this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。this的指向this就是谁调用我我指向谁1、以函数形式调用时，this是window；2、以方法的形式调用时，this是调用方法的那个对象；3、以构造函数的形式调用时，this是创建的那个对象；4、使用call和apply调用时，this是指定的那个对象。改变this指向的方法一、call function Animal(){ thi

2021-04-25 19:06:10 222 1

原创 js——构造函数的简单应用

和普通函数的区别1.普通函数的调用方式：直接调用 person();2.构造函数的调用方式：需要使用new关键字来调用 new Person();这里的Person()既是函数名，也是这个对象的类名构造函数书写方式有很多，比如：一、 function Play(){ // 必须先自己构造一个函数，以后将这个函数名最为对象名 } // 实例化函数 var p=new Play(); // 属性 p.width=300; p.height=200;

2021-04-23 19:18:28 656

原创 JS中的递归和案例

一、递归函数递归是一种在程序设计语言里面被广泛使用的算法，通过直接或间接来调用自身，将大型的复杂问题层层转化为一个与原问题相似但规模较小的问题来求解，这就是递归。而在JavaScript中，函数直接或间接的调用自己，则该函数便称为递归函数。二、使用递归函数的条件一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。如果说没有边界条件的话就可能出现死循环，比如：function fn(){ alert(41); fn();

2021-04-22 19:10:36 332 1

原创等分布局

<ul> <li></li> <li></li> <li></li> </ul>等分布局的方法：例如：1、弹性盒子 *{ margin: 0; padding: 0; } ul{ width: 100%; height..

2021-04-19 20:12:49 110 1

原创 return和break的区别

一、break：用在for,while,do…while循环中，打破/结束循环，但不会跳出函数二、return ：是使整个函数返回的，后面的不管是循环里面还是循环外面的都不执行1、有返回值的叫函数，无的叫过程2、即使函数确实有值，也不必明确地声明它。该函数只需要使用 return 运算符后跟要返回的值即可。3、函数遇到return就不往下执行了，不要在return后写任何代码function 函数名(形参1，形参2，形参n) { …… return true / false;

2021-04-19 19:56:39 7629

原创 JS-回调函数

回调函数在JavaScript中一个函数可以作为另一个函数的参数，这个作为参数的函数就叫回调函数，以回调函数作为参数的函数叫做主函数function main (a,b,hui) {//主函数 return a+b+hui(); } function hui(){//回调函数 return 100;//函数遇到return就不往下执行了，会将值返回调用它的函数 } alert(main(10,12,hui)); //说明：函数名不加括号是，代表他本身，加括号

2021-04-19 19:20:56 212

转载 JavaScript 基础

JavaScript 基础1、 JavaScript简介JavaScript 简称 JS 是用于制作网页的动态效果的，如：页面的弹出广告、浮动广告、下拉菜单、表单验证等功能都由 JavaScript 完成;JS 是嵌入在网页中的一个脚本语言;它不像 Java 一样庞大，但它的灵活度高；JavaScript 它是目前所有前端框架的基础;在前端框架中，底层都是使用HTML+CSS+JavaScript 实现的;JavaScript 是基于对象的编程需要,写在页面中，由浏览器运行的一个脚本语言；但JavaSc

2021-04-16 19:47:43 93 2

空空如也

空空如也