JavaScript
打代码的西瓜
这个作者很懒,什么都没留下…
展开
-
2021-03-22
脱离标准流的浮动到指定位置浮动的盒子不再保留原先的位置浮动的元素是互相靠在一起的 如果父元素宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐,浮动的元素会具有行内块元素的特性。块元素 在浮动后会在一行显示 脱离文档流。行元素 在浮动后在一行显示 可设置宽高 脱离文档流文档流: 标签在文档中正常显示的顺序清除浮动造成的影响如果父元素本身有高度则不需要清除浮动 ,清楚浮动后浮动的元素会自动检测高度,父元素有了高度 就不会影响下面的标准流。给最后一个浮动元素后加入块标签 设置清除浮动 可清楚浮原创 2021-03-22 08:53:05 · 128 阅读 · 0 评论 -
2021-03-22
让盒子定在某个位置 多以定位也是摆放盒子 用定位的方式。定位模式和边偏移决定该元素的最终位置。position的值 static(静态定位);relative(相对定位);absolute(绝对定位);fixed(固定定位)。通过 top ,right ,left,bottom来控制。相对定位 :以自身的原点进行定位。绝对定位:脱离文档流 选取最近一个有定位属性的父元素 作为参考进行定位如果该对象的父级没有设置定位 将以bady为原点进行定位。固定定位:脱离文档流 以浏览器窗口原点为参照 进行定原创 2021-03-22 08:52:33 · 124 阅读 · 0 评论 -
对象
1- 内置对象由es标准提供的对象Math String Number Boolean Function2- 宿主对象计数运行环境提供的对象,主要指浏览器提供的对象Bom Dom3- 自定义对象由开发人员自己定义创建的对象创建对象使用new关键字来调用函数,相当于构造函数 var obj = new Object() console.log(obj) console.log(typeof obj)...原创 2021-03-13 20:57:56 · 121 阅读 · 0 评论 -
while操作案例
<script type="text/javascript"> //循环输出1-10的偶数 var n = 1; while(n <= 10){ if(n % 2 == 0){console.log(n);} n++; } //循环输出1-10的累加和 var a = 1; var sum = 0; while(a <= 10){ sum+=a; a++; } console.log.原创 2021-03-06 20:38:44 · 338 阅读 · 0 评论 -
嵌套循环
<table border=1 width="300" height="400"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </.原创 2021-03-04 21:17:56 · 169 阅读 · 1 评论 -
一元运算符
一元运算符:只有一个操作数+-自增 ++通过自增可以使变量在自身基础上+1对于一个变量自增以后,原变量的值会立即+1自增分为两种 前++(++a) 后++(a++)无论先++还是后++,最终变量的结果都自增1a++ 的值等于原变量的值(自增前的值)++a 的值等于新值(自增后的值)自减 –通过自减可以使变量在自身基础上-1对于一个变量自减以后,原变量的值会立即-1自减分为两种 前–(--a) 后–(a–)无论先–还是后–,最终变量的结果都自减1a-- 的值等于原变量的值(自增原创 2021-03-02 21:43:21 · 469 阅读 · 0 评论 -
2021-03-01
在调用函数的时候,浏览器传递进来两个参数1- 连接上下文的this2- 封装实参的对象 argumentsarguments 是一个类数组对象可以通过索引操作数据,并且可以获取长度 实参callee 这个属性对应的是一个对象,当前函数 <script type="text/javascript"> function fun(){ console.log(arguments) console.log(Array.isArray(arguments)) co原创 2021-03-01 19:50:11 · 62 阅读 · 0 评论 -
正则方法
split() 方法用于把一个字符串分割成字符串数组。传递一个正则表达式作为参数,使这个方法根据正则表达式进行拆分不使用全局匹配依然全部拆分replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。参数1:被替换的内容参数2:新内容注意:如果不进行全局匹配只替换第一个search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。 <script type="text/javascript"> var str原创 2021-02-28 20:38:19 · 120 阅读 · 0 评论 -
2021-02-27
1- 获取字符串的长度 lengthconsole.log("str变量中字符串的长度为:"+str.length)2- 在字符串中,每个字符是可以通过下标指定以0开始的,可以通过下标的方式获取字符串中的值,但是不能进行更改console.log(str[1])3- charAt()方法可返回指定位置的字符var str1 = str.charAt(3)console.log("通过charAt()方法指定下标返回字符为:"+str1)4- charcodeAt() 方法可返回指定位置原创 2021-02-27 18:57:22 · 68 阅读 · 0 评论 -
2021-02-25
鼠标事件onclick 鼠标点击左键触发onmouseover 鼠标经过触发onmouseout 鼠标离开触发onfocus 获得鼠标焦点事件onmousemove 鼠标移动触发onmouseup 鼠标弹起触发onmousedown 鼠标按下触发MathMath.PI 圆周率Math.floor() 向下取整Math.ceil() 向上取整Math.round()原创 2021-02-25 18:35:00 · 72 阅读 · 0 评论 -
数组方法
1- filter() 过滤此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回 源数组不变条件为true时返回到新数组中存储2- map() 变更数组元素的值map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变源数组3- forEach()此方法是将数组中的每个元素执行传进提供的函数,没有返回值4- reduce()此方法是所有元素调用返回函数,返回值为最后结果,传原创 2021-02-24 21:12:00 · 63 阅读 · 0 评论 -
对象
对象的种类 1- 内置对象 由es标准提供的对象 Math String Number Boolean Function 2- 宿主对象 计数运行环境提供的对象,主要指浏览器提供的对象 Bom Dom 3- 自定义对象 由开发人员自己定义创建的对象创建对象使用new关键字来调用函数,相当于构造函数在对象中保存的值 称为属性向obj对象中添加属性语法:对象.属性名=属性值 <script> // 向obj对象添加了一原创 2021-02-22 21:29:48 · 80 阅读 · 0 评论 -
强制转换类型
<script type="text/javascript"> /* 将其他数据类型转为 String * * * 方式1: * 调用被转换数据类型toString()方法 * 此方法不会影响到原变量,将转换的结果返回 * 注意:null与undefined,这两个值没有toString(),报错 * 方式2: * 调用String()函数 并将转换为的数据作为参数传递给函数 * 对于 numb.原创 2021-02-21 20:29:19 · 124 阅读 · 0 评论 -
2021-02-20
基本数据类型booleannumberstringnullundefined引用数据类型objectjs中提供了三个包装类,都是通过基本数据类型转为对象String()可以将基本数据类型字符串转为String对象Number()可以将基本数据类型数字转为Number对象Boolean()可以将基本数据类型boolean转为Boolean对象 <script type="text/javascript"> // 创建一个number对象 var num =原创 2021-02-20 18:13:19 · 68 阅读 · 0 评论 -
循环输出表格---99乘法表
<script type="text/javascript"> //for循环输出 5行5列表格 document.write("<table border=1 width=300 height=400>") //外层循环行 for(var row=1;row<=5;row++){ //1 //2 //3 document.write("<tr>"); //内层循环列 for(var col=1;col<=ro.原创 2021-02-18 23:16:52 · 222 阅读 · 0 评论 -
js的三种表格写法
<script type="text/javascript"> //for循环输出 5行5列表格 document.write("<table border=1 width=300 height=400>") //外层循环行 for(var row=0;row<=4;row++){ document.write("<tr>"); //内层循环列 for(var col=0;col<=4;col++){ .原创 2021-02-17 23:22:06 · 3901 阅读 · 0 评论 -
循环输出表格-----三角形
<table border=1 width="300" height="400"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </.原创 2021-02-16 19:29:49 · 111 阅读 · 0 评论 -
Math函数
Math 和其他对象不同,他不是一个构造函数他属于一个工具类不需要创建对象,但是里面封装许多运算的属性和方法 <script type="text/javascript"> // 圆周率 console.log("圆周率:"+Math.PI) // abs()绝对值 var num = -1; console.log("求绝对值:"+Math.abs(-1)) // ceil()向上取整 var a = 3.1; console原创 2021-02-15 19:07:37 · 3944 阅读 · 1 评论 -
输出表格
<script type="text/javascript"> /* 输出表格 */ var stus = [ {sid:1, name:'朱钦楠', sex:'男', age:18}, {sid:2, name:'董晓真', sex:'女', age:17}, {sid:3, name:'王勇春', sex:'男', age:19}, {sid:4, name:'毕江林', sex:'女', age:16} ] var trsHtml = .原创 2021-02-13 20:31:56 · 216 阅读 · 0 评论 -
对象访问和对象添加属性
1.对象访问<script type="text/javascript"> var stu1 = { name:'王三', sex: '男', age: 18, say: function(){alert('我是楠楠他哥')} } // 对象.属性 stu1.name = '王春春' console.log( stu1.name ) // 调用对象的成员方法 stu1.say() // stu1['say']()原创 2021-02-09 19:01:37 · 177 阅读 · 0 评论 -
包装类
基本数据类型booleannumberstringnullundefined引用数据类型objectjs中提供了三个包装类,都是通过基本数据类型转为对象String()可以将基本数据类型字符串转为String对象Number()可以将基本数据类型数字转为Number对象Boolean()可以将基本数据类型boolean转为Boolean对象 <script type="text/javascript"> // 创建一个number对象 var num =原创 2021-02-06 17:31:37 · 56 阅读 · 0 评论 -
array的基础操作
array 数组【一组数据】 - 数组其实也是一个对象, - 它与普通对象功能相似,都是用来存储数据的, 对象: 键:字符串 数组:键:以0开头整数 也称为索引 - 数组元素:就是指数组中的每一个元素 - 数组下标:又称为索引,是以0开头的整数,也称为键 - 数组长度:获取数组长度 数组名.length - 数组最后一个下标的值:数组.length-1如果过创建了数组并且制定了数组长度没有进行赋值,则值为undefined<script type="text/原创 2021-02-04 18:22:26 · 265 阅读 · 0 评论 -
2021-02-03
1-split() 方法用于把一个字符串分割成字符串数组。 传递一个正则表达式作为参数,使这个方法根据正则表达式进行拆分 不使用全局匹配依然全部拆分 2-replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 参数1:被替换的内容 参数2:新内容 注意:如果不进行全局匹配只替换第一个 3-search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。 <script type="text/java原创 2021-02-03 20:56:51 · 77 阅读 · 0 评论 -
数组的方法
1- filter() 过滤此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回 源数组不变条件为true时返回到新数组中存储2- map()map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变源数组3- forEach()此方法是将数组中的每个元素执行传进提供的函数,没有返回值4- reduce()此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型原创 2021-02-02 14:22:38 · 53 阅读 · 0 评论 -
作用域
作用域:是指变量的作用范围- 直接编写在script中的代码我们称它为全局作用域- 全局作用域下的代码在什么时候销毁?- 在页面打开时创建- 在关闭页面时销毁- 全局作用域下也有一个全局对象 。 window- 创建的变量,我们把它当做window的属性- 创建的函数,我们把它当做window的方法- 在全局作用域中定义的变量,我们称他为全局变量,在页面的任何位置都可以使用变量:全局变量作用于整个页面script中当页面关闭时销毁局部变量作用于【函数】内部在函数调用结束时销毁原创 2021-02-01 18:31:25 · 63 阅读 · 0 评论 -
定时器类
<script type="text/javascript"> /* 用class定义类,然后创建不同的定时器对象 */ class Time{ // 属性 timeId // 定时器编号 interval // 间隔时间 msg // 要输出的信息 // 构造方法 constructor(sec, str){ this.interval = sec this.msg = str }原创 2021-01-30 20:21:35 · 99 阅读 · 0 评论 -
循环结构
循环结构的分类1循环结构:重复执行的操作2计数循环:for条件循环while格式:定义初始值;while(条件表达式){循环语句自增,自减【变更初始值的值】}3do…while<script type="text/javascript">// 循环 1-10个数字// 初始值 条件限制语句 自增、自减 //定义本地变量a 赋值为1 作为循环的初始条件 var a = 1; //通过while循环来进行判断 a是否小于等于10 条件为真执原创 2021-01-28 19:41:37 · 158 阅读 · 0 评论 -
数组方法
1push()该方法向指定数组末尾添加一个或者多个数组元素返回给我们新数组的长度此方法会改变源数组的值<script> var arr = ["张三","李四","王五","赵六"] console.log(arr) var result = arr.push("田七","王八") console.log(result) console.log(arr) console.log("======"+arr.length)</script>2 pop()该原创 2021-01-25 21:35:30 · 84 阅读 · 0 评论 -
流程控制
数据类型类型转换变量,字面量,常量运算符 流程控制 顺序结构 自上而下,自左而右 起床 -- 上厕所 -- 洗脸 --吃饭 -- 上课 起床 -- 上厕所 -- 洗脸 ---- 上课 分支结构【条件判断语句】 如果(迟到了){ 不吃饭了 }否则{ 吃饭 } 循环结构 周一到周五 每天都得来上课 每个月都有月考 单分支结构: if(条件表达式){ 代码块儿 }原创 2021-01-24 22:04:58 · 67 阅读 · 0 评论 -
js算术运算符
1.表达式<script> // 有数字 运算符 变量组成的式子 var a = 12; var b = 13; var c = a + b; // a + b = c 结果的 过程就是表达式 console.log(c); // c 是 a+b 的结果,在我们JS 里面称为 返回值</script>2.前置递进<script> var c = 1; var d = ++c; //d= 1+c v原创 2021-01-21 20:39:43 · 211 阅读 · 0 评论 -
2021-01-20
1.js表格添加删除的写法 <script type="text/javascript"> // 1.选表单,绑提交事件 document.stu.onsubmit = function(e){ // 2.获取表单中的信息 var sname = document.stu.sname.value var sex = document.stu.sex.value var age = document.stu.age.value var hom原创 2021-01-20 19:09:13 · 71 阅读 · 0 评论 -
2021-01-19
1.js节点的创建与插入 <script type="text/javascript"> // 选中父元素节点 var nodeUl = document.querySelector('ul') // 1.创建元素节点 var nodeLi1 = document.createElement('li') nodeLi1.innerHTML = 'aaaa' // 2.在父元素节点尾部 插入新节点 nodeUl.append( nodeLi1 ) // 1.原创 2021-01-19 18:36:35 · 68 阅读 · 0 评论 -
2021-01-18
1.逻辑运算符与 && 并且的意思,同时的意思或 || 或者的意思,只要有一个条件满足就行非 ! 真变成假,假变成真案例<script> // 与 真真为真,一边为假,就是假 console.log(false && false) // false console.log(true && false) // false console.log(false && true) // false原创 2021-01-18 22:39:12 · 58 阅读 · 0 评论 -
JavaScript-正则方法
1.split() 方法用于把一个字符串分割成字符串数组。2.传递一个正则表达式作为参数,使这个方法根据正则表达式进行拆分不使用全局匹配依然全部拆分3.replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。参数1:被替换的内容参数2:新内容注意:如果不进行全局匹配只替换第一个4.search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。var str = "1a2b3c4d5e6f7g"var ret = str.s原创 2020-11-03 08:40:07 · 75 阅读 · 0 评论 -
JavaScript-正则3
/([0-9]+)([a-z]+)/gi 元字符:([0-9]+)([a-z]+) () 子表达式 [0-9] 一个0-9的数值 [a-z] 一个a-z的字符 + 一个以上 模式修正符:gi g 全局匹配 i 不区分大小写数字var str = "123abcdefGh4abcdeFgh"// 匹配一个数字var patt = /[0-9]/// 全局匹配一个数字var patt = /[0-9]/g字符// 匹配一个字符var patt = /[a-z]///原创 2020-11-03 08:30:00 · 104 阅读 · 0 评论 -
JavaScript基础Marh函数
js–mathmath 和其他对象不同,他不是一个构造函数,他属于一个工具类不需要创建对象,但是里面封装许多运算的属性和方法1-圆周率PI//PI-圆周率console.log("圆周率:"+math.PI)2-绝对值abs()//abs()绝对值console.log("求绝对值:"+Math.abs(-1))3-向上取整ceil()// ceil()向上取整var a = 3.1;console.log("ceil(3.1)向上取整"+Math.ceil(a))var a原创 2020-10-27 17:01:28 · 595 阅读 · 0 评论