自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(29)
  • 资源 (1)
  • 收藏
  • 关注

原创 实例——分页器

分页器的简单封装

2022-01-11 10:51:13 180

原创 实例——切换轮播

透明度过渡的切换轮播的简单封装

2022-01-11 10:49:49 340

原创 实例——滑动验证

滑动验证功能的简单封装

2022-01-11 10:47:32 959

原创 实例——电商网站放大镜的简单封装

针对电商网站的放大镜功能进行简单的封装

2022-01-11 10:41:57 291

原创 第23课——面向对象简单探究2

constructor 补1.在原型上添加内容的时候只能追加属性,如果是覆盖式,那么要把固有属性constructor补回来2.constructor可以判断对象的出处例: let arr = [1,2,3,4] if ( arr.prototype.constructor === Array ){ console.log("是一个数组"); } 在这里,我们用typeof检测不出的复杂数据类型可以查看它的原型 同理

2021-12-12 19:39:55 195

原创 第22课——面向对象简单探究与类1

面向对象简单探究面向对象是一种变成的思维或者说思想,谈及面向对象,首先我们要了解面向过程。 在面向过程中,我们会注重事物发展的逻辑顺序,按照顺序一步一步的执行。但是 在面向对象中,会注重事物发展的对象,研究对象的特征和行为,最后组织对象间的 逻辑关系。 1.研究和需求相关的对象 2.研究对象的特征和行为

2021-12-12 14:57:09 216

原创 第21课——ES6新增1

ES6let 与 const1.let作用 : 申明一个变量与var区别: a、let不会挂载在window上 例:let a = 10 ; console.log(a); //10 console.log(window.a); //undefined b、拥有块级作用域 例: { var b = 20 ; let

2021-12-08 11:12:23 102

原创 第20课——正则表达式

正则表达式一、概念 正则表达式是处理字符串,查找符合规则的字符串的式子,也叫规则表达式二、创建方式 1.符号创建 var reg = /a/ ; 2.内置构造函数创建 var reg = new RegExp("a");三、修饰符 i 执行对大小写不敏感的匹配。 例: var reg = /a/i ; //可以匹配大写A或者小写a g 全局匹配,直到查完为止 m 当字符串多行,执行多行

2021-12-07 09:11:50 192

原创 兼容性——待完善

/**1.卷去高度*///ievar scrollTop = document.documentElement.scrollTop ; //有没有文档声明都可以var scrollTop = document.body.scrollTop ; //有文档声明//chromevar scrollTop = document.documentElement.scrollTop ; //有文档声明var scrollTop = document.body.scrollTop ; //没文档声明/

2021-12-05 16:22:10 596

原创 第19课——事件冒泡和事件委托

事件冒泡和捕获```css<style> .out { width: 300px; height: 300px; background-color: cadetblue; } .center { width: 200px; height: 200px; background-color:burlywood; } .inner { width:

2021-12-05 15:54:29 570

原创 第18课——事件与事件监听

鼠标事件补充 mouseover / mouseout 与 区别: mouseover / mouseout 会在子元素上触发,用的较少。虽然子元素会触发,但是事件的主体还是由父元素承受mouseenter / mouseleave 不会在子元素上触发,只在作用源上起效果浏览器事件 onload 加载 onscroll 滚动条滚动 onresize 浏览器窗口发生改变表单事件 1.表单内容改变 onchange 当表单内容发生改变并且鼠标在表单内数去焦

2021-12-05 14:29:29 745

原创 第17课——轮播图小案例

小案例轮播图1.透明度方法轮播 透明度轮播原理就是通过透明度为0的元素是完全透明,透明度为1的元素的元素是完全呈现在页面上 然后通过setInterval间隔改变这一张图片与下一张图片透明度的轮换,然后通过transition属性在 转换过程中显现出动画的效果,具体实现过程是以下的代码:```css<style> .container { width: 520px; margin: 0 auto; } .i

2021-12-04 22:38:57 251

原创 第16课——元素尺寸 与 事件1

获取元素尺寸<style> .box { width:100px; height:100px; padding:10px; border:5px solid black; margin:20px; }</style>若页面有一个div标签,上面的就是该标签的样式。我们可以通过js获取样式var boxEle = document.querySelector(".box");1.

2021-11-30 11:26:54 349

原创 js——className专题

className在JS中,我们可以通过 元素名.className 来获取和设置类名。但是,当className中类名较多,我们需要删除其中一个类名时,就需要先将获取到的类名字符串通过空格转成数组,然后用indexOf判断类名的索引值,最后通过splice方法删除例: 点击删除div中box的class名 <body> <div class="a b c box d e f"> </div> &l

2021-11-29 11:10:25 689

原创 第15课——元素的增删改及非行内样式的获取

元素的增删改之前我们学了元素的创建,createElement();学了将元素添加到父元素的最后面父元素.appendChild(要添加的元素对象);1.将元素添加到指定元素前 insertBefore();书写样式: 父元素.insertBefore(要添加的元素对象,插入的元素对象前);例: var divEle = document.createElement("div"); var container = document.insertBefore( d

2021-11-28 14:07:13 103

原创 js第14课——元素与节点

dom 数节点(换行、空格、制表符)元素—>元素节点元素:element;节点 node ;nodejs一、 节点或者元素之间的各种关系子关系;var containerEle = document.querySelector(".container");1.获取子元素 父元素.childrenvar childrens = containerEle.children;console.log(childrens);2.获取子节点var nodes = c

2021-11-25 22:08:58 533

原创 第13课——元素属性的获取与设置及简单DOM操作2.0

弹框 总结弹框:会阻止后面的程序执行1.alert(); 弹出框,提示框2.prompt("输入");提示输入框3.confirm("");询问框 一般有两个按钮,点击确定会返回true;点击取消会返回false。元素的获取1.操作类名className a.获取类名 例: var divEle = document.querySelector("div") ; console.log(divEle.className);//打印

2021-11-25 09:36:45 160

原创 js第12课——BOM模型以及地址栏相关的方法

BOM 浏览器对象模型1.浏览器窗口的宽和高 innerWidth innerHight 视口的宽和高2.浏览器的相关信息 window.navigator 需要了解: appname:"Netscape" appVersion:浏览器版本 platform:系统的版本浏览器地址栏1.打开一个页面 window.open();例: var btnEle = document.queryS

2021-11-25 09:31:35 292

原创 js第11课——一些常见的方法以及简单DOM操作

BOM 浏览器对象模型1.浏览器窗口的宽和高 innerWidth innerHight 视口的宽和高2.浏览器的相关信息 window.navigator 需要了解: appname:"Netscape" appVersion:浏览器版本 platform:系统的版本浏览器地址栏1.打开一个页面 window.open();例: var btnEle = document.queryS

2021-11-25 09:29:06 163

原创 js第10课——数组3.0

了解 ES3:ECMAScript3,是一种命令式结构,强调过程,如何做; ES5:ECMAScript5,是一种声明式结构,强调结果,做什么; 在ES5中,方法封装内部,如同一个黑盒子,我们只需要传递参数或者调用函数,就会得到结果新的循环①forEach循环 例: var arr = ["张三","李四","王五"] ; arr.forEach(function( item , key , arr ){

2021-11-24 10:01:06 223

原创 js第九课——排序与简单认识对象

排序补充冒泡排序例: var arr = [1,4,7,2,123,45,78,23,59,5,176,13]; // 冒泡排序 比较相邻两项大小,交换位置 { for ( let i = 0 ; i < arr.length ; i ++ ) { for ( let j = 0 ; j < arr.length ; j ++ ) { //升序,从小到大排列

2021-11-24 10:00:01 53

原创 js第八课——数组3.0

数组去重的三种方法<script> // 方法1 数组方法 利用indexOf索引返回值 { let arr1 = [1,2,1,3,4,5,6,3,3,1,2] ; let arr2 = [] ; for ( let i = 0 ; i < arr1.length ; i ++ ){//循环出数组的每一个元素 if (arr2.indexOf(arr1[i]) == -1 ) {//判断这个

2021-11-24 09:47:05 63

原创 js第7课——数组2.0

补充函数提升与变量提升 例: function fun(fn){ console.log(fn); function fn(){ console.log("fn"); } fn(); var fn = 10; console.log(fn);

2021-11-24 09:46:19 154

原创 js第六课——数组1.0

数组定义:各种数据的集合数组的组成:键名和键值组成例: var arr = [10,20,30]; console.log(arr);//打印的结果为(3)[10,20,30] 展开为: 0:10 1:20 2:20 prototype array(0); length:3;数组作用: 1.通过键名可以获取具体数组里的值

2021-11-24 09:43:24 50

原创 js第五课——多层循环与函数

双层循环执行顺序例如: for(var i = 0 ; i < 3 ; i ++ ) { console.log(i + "外层循环打印"); for(var j = 0 ; j < 3 ; j ++ ) { console.log(j + "内层循环打印"); } }执行结果: 0外层循环打印 0内层循环打印 1内层循环打印 2内层循环打印

2021-11-24 09:41:00 567

原创 js第四课——简单的循环

三元运算符样式:true?console.log("执行true的代码"):console.log("执行其他情况");所有的三目运算符都可以转换为if...else...语句例:true?console.log("执行true的代码"):console.log("执行其他情况"); if (true){ console.log("执行true的代码"); } else if () { console.log("执行其他情况"); }--注--

2021-11-24 09:39:56 53

原创 js第三课——条件分支

条件分支条件分支中,代码会根据条件是否执行在js中,js是单线程语言,即一个时间只能执行或者做某一件事并且,任务是按顺序执行的,JS执行任务是从上到下的if条件语句第一种 只含if书写样式: if (条件为真) { 执行这一段语句 } if (条件为假) { 不执行这一段代码 }例1: if ( true ) { console.log("执行");

2021-11-24 09:37:02 328

原创 js入门第二课

第一天笔记补充1.“+”号左右全部是数字时,会做加法运算,只要有一个时候字符串,就会做拼接###第二天笔记一.布尔类型转换1.数字转换为Boolean类型 `var a = Boolean(0)` `console.log(a); `打印的结果为false -Boolean会把非零的数字转换成true,将0转换为false2.字符串转换为Boolean类型 `var str = '0';` `console.log(Boolean(str));`打印的结果

2021-11-24 09:35:13 37

原创 js入门第一课

1.js发展94年网景公司netscape开始时,名为livescript -》 蹭java热度更名为javascript,其实与java关系不大,最后发展为ecmascript,也就是我们常说的esECMA,欧洲电脑厂商联合会2.js组成javascript由BOM,DOM,EVENT,组成BOM全称为bower object modelDOM全称为document object model3.js在程序中的加载方式a.内联 类似于css的内联样式表,在标签中直接写js

2021-11-24 09:33:59 72

search解析与重组方法

对于js初学者

2021-11-24

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除