John_Wick___-CSDN博客

原创 sass、sass的编译、sass语法

概念css不是编程语言(逻辑性)，sass是一种css的开发工具，让css通过代码编程的方式来实现。sass扩展了css3，增加了规划、变量、混合、选择器、继承等等特性，可以生成易组织和维护的css文件编译1、文件后缀为scss ...

2021-08-15 12:16:19 205

原创 jQuery进阶

jQuery中的Ajax在JQuery中，$Ajax方法属于最底层方法第二层是load（），$.get()和$.post, 第三层是$.getScript()和$.getJSON()方法一、load（）方法结构load(url,[data],[callback])通过案例来了解 <body> <div id="box"> </div></body

2021-08-14 15:13:30 169

原创 jQuery可见性选择器语法、jQuery遍历语法、jQuery文本语法、jQuery事件语法、jQuery简单动画、

jQuery可见性选择器案例<body> <table> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> </table> </body> <script src="jQuery.js">&lt

2021-08-07 17:11:50 90

原创 jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、

jQuery和源生DOM的转化案例<body><p id="test">123</p><p>456</p></body><script src="jQuery.js"></script><script>$(document).ready(function(){ let op=document.getElementById("test"); console.log(op.innerH

2021-08-07 13:06:44 134

jQuery：顾名思义，也就是javaScript和查询（Query），即是辅助Javascript开发的库jQuery的特点JQuery是一个快速简洁的javaScript框架，可以简化查询DOM对象、处理事件、制作动画、处理AJAX交互过程。具体如下： 1、提供了强大的功能函数； 2、解决浏览器兼容性问题； 3、纠正错误的脚本知识； 4、体积小，使用灵巧(只需引入一个js文件)； 5、易扩展，插件丰富；##jQu

2021-08-06 17:51:25 2163

原创用JS编写ajax插件并检验、类比jquery

Ajax插件html<script src="ajax.js"></script><script>new AjaxClass({type:"get",url:"ajax.text",isAsyn:true,data:"",callBack:fun}).ajax();function fun(resText){console.log(resText)}</script>ajax.jsclass AjaxClass{ construc

2021-08-05 21:27:41 47

原创观察者模式、用js编写放大镜插件并检验类比jQuery、

案例//观察者中写函数(消息)定义let sub1={ "name":"sub1", "update":function(what){ console.log(this.name=what) }}let sub2={ "name":"sub2", "update":function(what){ console.log(this.name=what) }}let sub3={ "name":"sub3", "upda

2021-08-05 20:43:18 99

原创函数是一个对象、自运行、闭包、闭包的作用、使用闭包的注意事项。

函数的三种定义方式函数声明: 声明的方式有函数的提升function test(ord){alert('亲'+ord+'!')}函数表达式： (匿名函数)var test= function(ord){alert('亲'+ord+'!')} 对象的方式：let test=new Function(参数1，参数2...,"函数体")；案例test();function test(){//有变量提升console.log("heihei")};test();let

2021-08-04 21:26:00 75

原创继承、原型继承、prototype、call和apply的继承、原型链继承、原型继承中的注意事项、深浅拷贝、

prototypeprototype属性：对于类而言，prototype保存着所有实例的方法，即所有的实例方法都是在prototype中保存着，平时我们在使用实例方法时，虽然用对象直接调用，但是真正的保存是在prototype中。在继承中prototype的作用更加明显；我们创建的每个函数都有一个属性是prototype(原型)，这是属性是一个指针，指向一个对象，该对象的用途是包含所有实例共享的属性和方法。案例fun

2021-08-04 13:03:31 136

原创用form表单、ajax两种方法验证用户名是否存在

表单(表名：res.html)<form action="res.php" method="get">id:<input type="text" name="userId"><br>name:<input type="text" name="userName"><br><input type="submit" value="注册"></form>表单对应的php（res.php）<?phpheade

2021-07-31 16:53:59 487

原创 Ajax的初步认识

Ajax的概念和优势*什么是Ajax*Ajax(异步 JavaScript 和XML)，中文名：阿贾克斯。是一种创建异步交互式网页应用的网页开发技术。*Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。*前端通过与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下，对网页的某部分进行更新。为什么要使用Ajax1、更自然、流畅的用户体验，对用户操作即时响应2、在不中断用户操作的影响下与WEB服务器进行通信3、通过局部更新页

2021-07-28 20:30:43 100

原创 http与cookie

httphttp(超文本传输协议)是一个基于‘请求’与‘响应’的应用层协议。url请求资源的地址 http：//host[":"port][abs_path]url（ip+端口号+文件名）host:主机名，对应ip地址的一个点或一段;port 端口号；abs——path 主机上的资源路径；get请求：将请求数据作为url一部分发送，不安全，传输数据量小，方便易用；post请求：传输数据量大，安全，一般做表单提交常见响应状态码200 OK表示响应成功404 NotFoun

2021-07-28 16:40:11 96

原创面向对象编程（基础篇）

面向对象和面向过程的区别面向过程：强调步骤面向对象：强调对象分析：比如围棋程序面向过程：1、黑棋落子2、绘制棋盘3、判断输赢4、白起落子5、绘制棋盘6、判断输赢7、黑棋落子而面向对象：1、棋子2、棋盘3、规则对象的初步概念：看到的、想到的、有形的、无形的事物都是对象。概括来说就是万物皆为对象。类与对象的概念类：是具有相同属性和行为的对象的集合(模板)；对象：根据类的属性和实例创建的实例化类：定义了对象的属性和方法通过类可以实例化多个该类的对象，每个对

2021-07-22 14:53:31 127

原创 DOM高级：运动原理-＞匀速运动-＞加减速运动-＞缓冲运动

运动原理运动原理：javaScript实现运动的原理，就是通过定时器不断改变元素的位置，直至达到目标点后停止活动。通常，要让元素动起来，我们会通过改变元素的left 和top值来改变元素的相对位置。方法1、运动的物体使用绝对定位2、通过改变定位物体的属性(right/left/top/bottom)值来使物体移动，如:向右或者向左移动可以使用offsetleft（offsetright）来控制左右移动步骤1、开始运动前清除已有定时器。(因为，连续点击按钮，物体会运动越来越快，造成

2021-07-17 14:06:10 143

原创事件、鼠标事件的对象属性、键盘事件、事件流、组织事件冒泡、组织默认事件、阻止超链接；

事件对象事件：对某个事件的某种操作；事件对象：当某个事件触发时产生的对象，就是事件对象。event：使用前提必须有事件事件对象的兼容:var e=evt||event;eg:让图片跳一跳<style>div{backgroun:url(../img.01png)}</style><div></div><script>var div=document.querySelector("div");document.oncli

2021-07-12 19:47:45 122

原创节点操作、offset、client；

childNodes/过滤空白节点childNodes：返回的是所有孩子节点，但是实际的孩子节点的长度并不是我们想要的那样如：<ul> <li>1</li> <li>2</li> <li>3</li> </ul> childNodes返回了文本节点，长度为7，空格也属于文本节点过滤空白节点的方法var e=document.getElementByTagName("ul");var

2021-07-12 15:12:45 85

原创 BOM AND DOM

1、BOMwindow为BOM的顶级对象，其顶级对象下的document和evet在HTML中经常用到window对象常用的属性和方法：三个弹出框:alert("内容") ：弹出框confirm（“提示信息”）：确认框确定返回ture，取消返回falseprompt（“提示信息”，“默认值”）：输入框返回数值为字符串两个定时器：setInterval（执行任务，间隔时间）：连续执行定时器clearInterval（）为取消定时器setTimeout（执行任务，间

2021-07-08 20:29:15 119 1

原创用对象的方法统计字符串中字符的个数

对象用 for in 来遍历//先var一个字符串var str=‘fsfskdfsdkfjsd’//在 var 一个空的对象；var obj={}; //目的是把字母作为键，出现的次数作为值//在var 一个数组；var arr；//遍历一下这个字符串；for(var i=0;i<str.length;i++){ key=arr[i] //obj[key] if(obj[key]){ obj[key]++;//如果obj对象里有这个值了则+

2021-07-06 21:19:14 219

原创关于ES6新增中的 let和const、严格模式、箭头函数、解构赋值、set和map、剩余参数和解构赋值结合、

let特点@1：不存在变量提升（）声明提升；@2：块级作用域eg: for(let i=0;i<9;i++){块级作用域 } 外部不能访问到循环内的变量@3：暂时性死区eg：如果用let来声明变量，声明的变量将被绑定的 {块级作用域中}，不在受外部变量的影响；@4：不能重复定义变量eg： let a=10； let b=20；console.log（a）；则报错 const特点const.

2021-07-02 02:03:07 127

原创正则表达式中的方法、检测、特殊字符、敏感词替换等等

正则表达式方法正则中相关字符串的方法@1: search()var str=“fghGjklfg0h1jf4gh3jh”search() :返回与正则表达式查找内容匹配的第一个子字符串的位置；//语法： str.search(reg)console.log(str.search(/g/)) //子字符串第二个位置：1@2: match()var str=“fghGjklfg0h1jf4gh3jh”march方法：使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数

2021-07-01 00:55:07 803

原创事件流、事件冒泡、事件委托、事件默认行为等。

事件流和DOM事件流事件流：页面接受事件的顺寻DOM事件流：事件在元素的节点之间按照特定的顺寻进行传播IE公司提出：冒泡，事件触发时，是从最具体的（触发元素）的元素向上逐层传播，直到最顶层元素。网景公司提出：捕获，事件触发时，是从顶层逐级向下传播直到最具体元素w3c：DOM事件流的标准*w3c是计算机委员会，制定标准的@1：捕获阶段@2：目标阶段@3：冒泡阶段DOM0级和IE事件处理都不支持捕获；DOM0级也不支持冒泡DOM

2021-06-30 00:39:13 124

原创 offset、事件、拖拽等、

offset、事件、offsetWidth:占位宽元素的宽度(包括border和padding)clientWidth：可视宽高 (不包括border)offsetleft：获取距离具有定位的父级元素的left的值，没有定位的父级元素就以浏览器窗口为准事件什么是事件：onclick onmouseover onmouseout onblur onload等等事件的组成：@1事件源：触发的元素（点击的元素）

2021-06-29 19:50:10 166

原创节点的类型、关系与操作

节点的类型、关系与操作@1元素节点 @2属性节点 @3文本节点@4注释节点 @5文档节点eg:元素节点 nodeType的值为1<ul><li class="a">123</li><li>456</li><li>789</li></ul>var oul=document.querySelector("ul")//querySelet

2021-06-28 00:03:54 262

原创 BOM对象与DOM对象

BOM对象与DOM对象一、BOM的概念：浏览器对象模型(包括：地址栏、历史记录、屏幕、滚动条，关闭。) *windows：为BOM的顶级对象 windows的5个子对象： 1、document：文档对象 2、history：历史记录对象 3、location：地址栏对象 4、screen：屏幕对

2021-06-27 21:41:17 633

原创数组与字符串方法概括

一、数组与字符串方法概括（一）改变原数组的：pop()删除数组最后一个元素。返回值值为删除的元素。push()在数组最后增加一个元素。返回值为新长度。shift()删除数组第一个元素。返回值为删除的元素。unshift()数组第一个元素前增加一个元素。返回值为新长度。sort("回调函数") :排序。降序排列为：arr.sort(function(a,b){return b-a})reverse():反转splice(1):删除从1开始到最后的元素（包括一）splice(1，3)：从一开

2021-06-24 01:02:12 67

原创基本循环语句

循环（1）循环语句1、循环语句：当满足一个条件时一直执行，当条件不满足时，停止执行。eg：`for(var a = 1;a<10;a++){document.write("*")}`这就是一个循环语句。eg：`for(var b = 1;b>1;b++){document.write("*")}`这是一个死循环语句，因为大于1的整数有无数个，"*"会无限出现先去，电脑可能会崩溃。(2)for的循环嵌套for(var a = 1;a<=10;a++){for(var b =

2021-06-09 20:44:39 118

原创 js与h5的关系

（一）js与h5的关系：H5指的的是WEB开发所有技术（html、css、js、nodejs、vue、react）。JS注重的是浏览器、客户端（二）JS的组成：ECMAScript（语法）DOM(document object modle文档对象模型)BOM（browser object modle）;JS的本质：可以通过JS代码操作文档、浏览器（三）JS的输入输出语句：console.log()控制台输出、alert（）弹框输出、document.write（）页面输出、var a =pro

2021-06-08 08:44:47 958

John_Wick___的博客

原创【无标题】