js入门级
のdestiny
码界小白
展开
-
第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 阅读 · 0 评论 -
第22课——面向对象简单探究与类1
面向对象简单探究面向对象是一种变成的思维或者说思想,谈及面向对象,首先我们要了解面向过程。 在面向过程中,我们会注重事物发展的逻辑顺序,按照顺序一步一步的执行。但是 在面向对象中,会注重事物发展的对象,研究对象的特征和行为,最后组织对象间的 逻辑关系。 1.研究和需求相关的对象 2.研究对象的特征和行为原创 2021-12-12 14:57:09 · 217 阅读 · 0 评论 -
第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 阅读 · 0 评论 -
第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 · 196 阅读 · 0 评论 -
第17课——轮播图小案例
小案例轮播图1.透明度方法轮播 透明度轮播原理就是通过透明度为0的元素是完全透明,透明度为1的元素的元素是完全呈现在页面上 然后通过setInterval间隔改变这一张图片与下一张图片透明度的轮换,然后通过transition属性在 转换过程中显现出动画的效果,具体实现过程是以下的代码:```css<style> .container { width: 520px; margin: 0 auto; } .i原创 2021-12-04 22:38:57 · 251 阅读 · 0 评论 -
第18课——事件与事件监听
鼠标事件补充 mouseover / mouseout 与 区别: mouseover / mouseout 会在子元素上触发,用的较少。虽然子元素会触发,但是事件的主体还是由父元素承受mouseenter / mouseleave 不会在子元素上触发,只在作用源上起效果浏览器事件 onload 加载 onscroll 滚动条滚动 onresize 浏览器窗口发生改变表单事件 1.表单内容改变 onchange 当表单内容发生改变并且鼠标在表单内数去焦原创 2021-12-05 14:29:29 · 746 阅读 · 0 评论 -
第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 · 575 阅读 · 0 评论 -
第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 · 351 阅读 · 0 评论 -
第15课——元素的增删改及非行内样式的获取
元素的增删改之前我们学了元素的创建,createElement();学了将元素添加到父元素的最后面父元素.appendChild(要添加的元素对象);1.将元素添加到指定元素前 insertBefore();书写样式: 父元素.insertBefore(要添加的元素对象,插入的元素对象前);例: var divEle = document.createElement("div"); var container = document.insertBefore( d原创 2021-11-28 14:07:13 · 103 阅读 · 0 评论 -
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 阅读 · 0 评论 -
第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 · 161 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 54 阅读 · 0 评论 -
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 · 573 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 74 阅读 · 0 评论 -
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 · 64 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 155 阅读 · 0 评论 -
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 阅读 · 0 评论 -
js第三课——条件分支
条件分支条件分支中,代码会根据条件是否执行在js中,js是单线程语言,即一个时间只能执行或者做某一件事并且,任务是按顺序执行的,JS执行任务是从上到下的if条件语句第一种 只含if书写样式: if (条件为真) { 执行这一段语句 } if (条件为假) { 不执行这一段代码 }例1: if ( true ) { console.log("执行");原创 2021-11-24 09:37:02 · 333 阅读 · 0 评论 -
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 阅读 · 0 评论