xibozi-CSDN博客

原创 find 和 filter 的区别

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。他们的都是一个查找回调函数。查找函数有三个参数。value：每一次迭代查找的数组元素。index：每一次

2020-12-16 14:11:50 4666

原创 ES6中的Promise对象

Promise的含义promise是异步编程的一种解决方法。所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果

2020-12-15 20:32:09 98

原创 MongoDB是什么

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。官方给出了以上的解释,那么综上所述,马德 F U C K ! 有效信息太少了(完全没用)那么让我来用人类的语言讲述一下MongoDB吧它和我们使用的关系型数据库最大的区别就是约束性,可以说文件型数据库几乎不存在约束性,理论上没有主外键约束,没有存储的数据类型约束等等

2020-12-09 14:59:13 297

原创 node.JS一些简单的知识点

Node.js 是一个 JavaScript 运行时环境。听起来还不错，不过这究竟意味着什么？它又是如何运作的？Node 运行时环境包含执行 JavaScript 程序所需要的一切。JavaScript 原来是只能在浏览器中运行的，当把它扩展成为可以在你的计算机上作为独立的程序运行时，Node.js 就出现了。现在你可以用 JavaScript 做更多的事情，而不仅仅是用在网站的互动和特效上。JavaScript 现在能够去做其他脚本语言（如Python）可以执行的操作。你 Chrome 浏览器中

2020-12-08 20:44:41 87

原创 es6一些面试题

es5和es6的区别，说一下你所知道的es6ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明2）箭头函数ES6中的函数定义不

2020-12-01 23:19:24 56

原创 ajax常用知识点

Ajax的原理AJAX指的是异步的JavaScript及XML(Asynchronous JavaScript And XML)，是一种创建快速动态的技术，通过在后台与服务器进行少量的数据交互，实现页面的异步更新，在不重新加载整个页面的情况下做到页面的部分刷新。//创建全平台兼容的xhr对象function getXHR(){ var xhr = null; if( window.XMLHttpRequest ){ //兼容IE7+ FireFox

2020-12-01 22:41:07 94 1

原创 this指向理解

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象例子1：function a(){ var user = "耗子尾子"; console.log(this.user); //undefined console.log(this); //Window}a();按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可

2020-11-24 20:02:32 101

原创 XML是什么怎么用?

什么是XML?xml是可扩展标记语言（Extensible Markup Language)xml是一种标记语言，类似于HTMLxml的设计宗旨是传输数据，而非显示数据标签没有被预定义。需要自定义标签W3C推荐（XHTML）XML语法文件以XML后缀结尾，XML文件需要使用XML解析器去解析，浏览器内置了XML解析器标签<student> //开始标签， <name>码卡吧卡</name></student> //结束标签，xm

2020-11-17 20:42:11 213

原创 ajax的作用与用法

Ajax入门与应用从http协议开始http协议是超文本传输协议，是简单可靠的互联网文件传输协议输入网址并敲下回车浏览器发出HTTP请求，请求服务器上的资源服务器上的资源通过HTTP协议传输到本地，在浏览器中进行渲染一次HTTP请求，分为请求和响应（请求：上行报文，响应：下行报文）一张网页，可以产生多个HTTP请求HTTP请求触发的条件用户输入新的网址敲下回车点击了超链接，使页面跳转输入新的网址并敲下回车会使页面全部刷新页面跳转也会使页面全部刷新Ajax介绍Ajax初体验获取文

2020-11-17 20:36:15 210

原创 Bootstrap栅格系统理解

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。class前缀这一项，以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、c

2020-11-11 18:33:02 388

原创 jQuery noConflict() 方法

在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库，我们可以通过调用 $.noConflict() 向该库返回控制权。如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？1、该方法释放 jQuery 对 $ 变量的控制。2、该方法也可用于为 jQuery 变量规定新的自定义名称将 $ 引用的对象映射回原始的对象：定义和用法noConflict() 方法让渡变量 $ 的

2020-11-11 18:17:00 760

原创 jquery动画

动画用JavaScript实现动画，原理非常简单：我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了。但是要用JavaScript手动实现动画效果，需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用，那考虑的事情就更多了。使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码！让我们先来看看jQuery内置的几种动画样式：show/hide 显示／隐藏直接以无参数形式调用show()和hide

2020-11-10 20:51:34 183

原创移动端布局

一、流式布局（百分比布局）使用非固定像素来定义网页内容，也就是百分比布局，(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。二、rem布局（局限条件：主要用来适配手机和ipad,除了手机和ipad，其他的都不能适配。）rem布局方案（用rem这个单位来做不同手机的适配）是现在做手机端页面最好的。首先说一下px、em、rem取用选择依据？

2020-11-10 20:42:17 84

原创 CSS3弹性盒子

弹性盒子（flex布局）flex 是 flexible Box 的缩写，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，任何一个容器都可以指定为 flex 布局当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex

2020-11-02 19:47:16 99

原创 JQuery文档操作

1.内部添加1.在指定元素内部底部添加// 在指定元素内部底部添加$('.parent').append($son);$son.appednTo('.parent'));2.在指定元素内部顶添加// 在指定元素内部顶添加$('.parent').prepend($son);$son.prependTo('.parent'));2.外部添加3.在指定元素外部的前面添加元素// 在指定元素外部的前面添加元素$('.parent').after($son);$son.insertAf

2020-11-02 19:29:22 160

原创 JQuery事件函数

$(“对象”).事件(function(){});$(document).ready(function(){})$(“p”).click(function(){})$(“input”).focus(function(){})$(“input”).blur(function(){})$("#div1").hover(function(){},function(){}) hover有2个函数，$(“input”).keypress(function(){})$(“div1”).hide()

2020-11-02 19:02:44 155

原创 Jquery中节点操作

Jquery中节点操作创建节点:$(‘html字符串’): 如$(‘<p>hello jquery</p>’);添加节点：append , appendTo 添加到元素内容的最后面$('.father').append($('p')); $('h2').appendTo($('.father'));prepend , prependTo 添加到元素内容的最前面$('.father').prepend($('p')); $('h2')

2020-10-28 20:29:07 99

原创 juqery选择器

id选择器：一个用来查找的ID，即元素的id属性$( "#id" )　　id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作　　DOM的获取上，如果能采用id的话尽然考虑用这个选择器　　值得注意：　　id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的i

2020-10-28 11:50:52 111

原创 Jquery盒子模型

width()获取或者设置元素的宽度，不包括内边距，边框，以及外边距innerWidth获取或者设置元素加上内边距的宽度outerWidth()获取或者设置元素本身加上内边距再加上边框的宽度outerWidth(true)获取或者设置元素本身加上内边距、边框以及外边距的宽度height()获取或者设置元素的高度，不包括内边距，边框，以及外边距innerHeight获取或者设置元素加上内边距的高度outerHeight()获取或者设置元素本身加上内边距再加上边框的高度outerH.

2020-10-28 11:04:38 184

原创 CSS3动画属性

2D效果属性要使用这些属性，需要通过 transform ，并且，为了保证兼容性，我们可能还需要添加带有浏览器内核前缀的属性，比如 -webkit-transform。位移属性 translate( x , y )旋转属性 rotate()比如rotate( n deg)，n是数字，deg是单位，可以理解为角度，0deg则不旋转。n为正时，顺时针旋转n度，反之，逆时针旋转。而rotateX和rotateY属性关键帧动画仅仅是上面的那些知识，是不能满足对动画效果的要求的，还有个关键的知识

2020-10-19 18:41:32 74

原创 H5拖拽事件

在H5中新增的标签事件中拖拽事件也是其中之一！H5拖拽的7个事件分别为：ondragstart 只能在这个事件的过程中支持dataTransfer通过setData来设置数据。ondrag 拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。ondragenter 拖动跨入了页面中新元素的时候触发，适用于设置拖放的放置反馈。ondragleave 恢复放置反馈，与上一事件相对。ondragover 不同于drag事件，此事件是在当前鼠标停留的目标上调用。ondrop 释放鼠标

2020-10-10 16:50:55 140

原创 H5api

Web存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。1、设置、读取方便2、容量较大，sessionStorage约5M、localStorage约20M3、只能存储字符串，可以将对象JSON.string

2020-10-08 20:34:41 111

原创 svg与Canvas的区别

说到H5我们不得不想到canvas 和SVG 他们区别如下canvas是html5提供的新元素。而svg存在的历史要比canvas久远,svg并不是html5专有的标签，最初svg是用xml技术描述二维图形的语言。Canvas描述：通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变，会重新进行绘制。Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最

2020-10-08 19:13:13 287

原创百度地图API

以下为核心代码:头文件引入当然要先有百度地图api的密钥//密钥进入百度地图api首页 http://lbsyun.baidu.com/ （首先要有个百度账号并登陆）拉到页面最下方会看到申请密钥，点击申请密钥后跳转到这个填写个人信息页面填写完后提交，等待邮件确认然后就可以注册密钥了//点击地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。//创建地图的实例然后再去获取坐标把坐标写在//添加控件map.addControl(new BMa

2020-10-08 13:42:17 97

原创 canvas简介

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。在绘制canvas前，要先定义一个矩形框，如果你的浏览器不支持canvas标签，则标签内的文字会被显示出来通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变，会重新进行绘制。

2020-09-27 20:40:21 177

原创 H5新增加标签和使用

video 表示一段视频并提供播放的用户界面<video src="xxx.ogg" controls="controls"></video>`在这里插入代码片`audio 表示音频canvas 表示位图区域svg 定义矢量图time 日期和时间值mark 高亮的引用文字还有一些语义化标签<header>头部</header><footer>尾部</footer><nav>导航栏</nav&

2020-09-21 20:45:42 339

原创浏览器对象模型

浏览器对象模型(BOM)使javascript有能力与浏览器对话window对象，所有浏览器都支持window对象，它表示浏览器窗口，所有javascript全局对象，函数以及变量均自动成为window对象的成员全局变量是window对象的属性，全局函数是window对象的方法,甚至html dom的document也是window对象的属性之一:window.document.getElementById("header");与此相同:document.getElementById("he

2020-09-20 18:12:34 118

原创防抖和节流

函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在每次移动鼠标时数字就会一直增加非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。使用防抖会在穿递的参数结束来执行节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函

2020-09-20 18:07:22 88

原创 BOM的定时器和小案例

setTimeout(code,millisec)；功能：在指定的毫秒后调用函数或计算表达式参数说明：1、code：要调用的函数或要执行的JavaScript代码串2、millisec：在执行代码前需等待的毫秒数说明：setTimeout()只执行code一次。如果要多次调用，请使用setInterval()或者让code自身再次调用setTimeout()<div> <button> 你好啊！ </bu

2020-09-11 16:23:23 103

原创 BOM的简介

BOM（browser object model）浏览器对象模型：核心是window对象，所有的全局变量和全局函数都被归在了window上BOM是Browser Object Model的缩写，是浏览器对象模型window.confirm(“message”)；显示一个带有指定消息和OK及取消按钮的对话框返回值：如果用户点击确认按钮，则confirm()返回true；如果用户点击取消按钮，则confirm()返回false；BOM的定时器是我们在页面中常见的定时器分两种setTime

2020-09-11 15:59:44 110

原创 2020-09-06

javascript的typeof返回哪些数据类型.答案：string,boolean,number,undefined,function,object例举3种强制类型转换和2种隐式类型转换?答案：强制（parseInt,parseFloat,number）隐式（== ===）split() join() 的区别答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串数组方法pop() push() unshift() shift()答案：push()尾部添加 pop()尾部删除un

2020-09-06 19:10:44 64

原创 this关键字的理解

js的this指向是不确定的，也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数，这样设计可以让代码更加灵活，复用性更高。<input id="test" type="button" value="按钮" onClick="test()"/> function test(){alert(this)}使用标签属性注册事件此时this 指向的是 window 对象使用 addEventListener 等注册。此时this 也是指向 inputdocume

2020-09-06 19:05:59 93

原创 DOM小基础知识

1.获取页面中的HTML元素2.获取或改变页面中的HTML元素内容3.获取或改变页面中的HTML属性4.获取或改变页面中的CSS样式5.为元素绑定事件6.创建HTML元素7.删除已有的HTML元素通过id查找HTML元素(唯一)var p=document.getElementById(‘unit’)通过class查找HTML元素(不唯一)var article=document.getElementByClass(‘shoppingInfo’)通过标签名查找HTML元素(不唯一)v

2020-08-30 23:03:47 110

原创 DOM的API

节点创建型API1 .createElementcreateElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签var div = document.createElement("div");使用createElement的时候：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到H

2020-08-29 15:14:04 176

空空如也

空空如也