JS的学习
关注
分享
扫一扫
文章平均质量分 53
F2E_YoverL1221
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
v-if与v-for联合使用
通过计算属性filteredItems来过滤掉那些isActive为false的项，然后再使用v-for进行迭代。这种方法避免了对所有项进行渲染检查，从而提高了性能。如果v-if放在v-for的内部，那么即使条件为false，v-for仍然会对整个循环体进行渲染，只是最后不会将其插入到 DOM 中。使用了v-show而非v-if。虽然这种方式不会移除 DOM 元素，但可以避免每次渲染时都进行条件判断，适用于频繁切换的情况。，因为这样可以避免不必要的渲染操作。同时使用v-if和v-for时，原创 2025-06-05 11:22:48 · 590 阅读 · 0 评论 -
轮播图案例总
1.DOM及正则<style> .maxbox{ width: 400px; height: 400px; /* border: 1px solid #000; */ } .maxtbox{ width: 400px; height: 400px; /* border: 1px solid #000; */ position: absolute;原创 2021-04-17 10:12:40 · 63 阅读 · 0 评论 -
DOM练习
1.表格动态添加删除<button>添加表格</button><script>//表格的动态添加，删除//创建元素节点，标签为tablevar tab = document.createElement('table')//添加属性 属性名border 值1tab.border = 1//将table添加到父节点body下document.body.appendChild(tab)var id =1//获取按钮，判定事件document.queryS原创 2021-04-17 09:16:42 · 259 阅读 · 0 评论 -
轮播图合集及相关案例
tab切换案例HTML代码：图片可以不给，盒子改个背景颜色就行<style> .tab{ width: 500px; height: 400px; border: 3px solid #000; margin: 50px auto; } ul,ol{ list-style-type: none; pa原创 2021-04-15 21:35:49 · 484 阅读 · 0 评论 -
面向对象放大镜
html代码：<style> .enlarge{ width: 400px; height: 502px; border: 1px solid #000; position: relative; } .middle{ width: 400px; height: 400px; border-bottom: 1px solid #000; posi原创 2021-04-15 20:46:33 · 252 阅读 · 0 评论 -
面向对象放烟花
全程JS写法，无HTML代码代码有注释，助于理解function Fire(){ //创建个夜空 this.nightSky = document.createElement('div') //给夜空设置样式 this.setStyle(this.nightSky,{ width:'800px', height:'500px', backgroundColor:'#ccc', position:'relati原创 2021-04-15 20:42:55 · 264 阅读 · 0 评论 -
面向对象贪吃蛇
没有HTML代码，全程有JS写有些代码有注释，助于理解贪吃蛇游戏：主要三部分地图随机生成食物蛇及身体创建3.1-蛇的移动3.2-蛇的吃食物3.3-蛇的死亡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-04-15 20:34:59 · 148 阅读 · 0 评论 -
分页插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-04-13 21:35:53 · 256 阅读 · 2 评论 -
js兼容问题
兼容问题总结获取标签问题document.getElementsByClassName('类名')在低版本e中不兼容。解决document.getElementById('id名')document.getElementsByTagName('标签名')document.getElementsByName('name属性值')document.querySelector('css选择器')document.querySelectorAll('css选择器')卷去的高度问题//原创 2021-04-06 16:45:48 · 130 阅读 · 0 评论 -
字符串
ES5的语法严格模式由于JS的作用域和隐式声明变量等语法会造成很多预想不到的错误，所以ES5中新增了一个严格模式的语法，用语言个规范代码的书写适用语法：“use strict”使用说明：1.要放在代码的最前面，也就是在script标签中的第一行或者某个函数中的第一行，否则会失效2.严格模式可以规范当前script标签或者当前函数中的代码，不能闺房别的script标签中的代码和别的函数规范的语法：1.不允许隐式声明变量2.禁止函数中的参数重名3.禁止函数中的this代表window为原创 2021-03-29 19:13:37 · 341 阅读 · 0 评论 -
第六天数组
数组引入我们知道一个变量存储一个值，一个变量是一个容器，如果给很多容器中都放入商品的话，我们就可以开超市了。我们都去超市买过东西，超市的东西都整齐的摆放在货架上，而不是所有的东西都堆在一起。为什么呢？因为便于管理商品。咱们代码中也有一个货架，叫数组，为了便于管理多个值的。假设，我们现在要存一个班的所有学生姓名，如果每个姓名都存在一个变量中，就跟所有商品随便的堆在一起一样，不好管理，所以我们会存到数组中。概念内存中的多个容器排列起来...原创 2021-03-27 17:37:17 · 223 阅读 · 0 评论 -
函数，事件及对象
函数及事件作用域函数外边的变量是全局变量，可以在函数里面与外面使用var num = 1;function test(){num++;console.log(num);}console.log(num); // 2函数内部的变量叫做局部变量，只能在局部(函数内部)使用function test(){var num1 = 10;num1++;console.log(num1);}test(); // 11console.log(num1); // 报错，num1未定义原创 2021-03-26 22:24:21 · 231 阅读 · 0 评论 -
学习JS第三天
学习JS第三天原创 2021-03-25 16:27:48 · 377 阅读 · 0 评论 -
逻辑分支练习
逻辑分支练习判断整数的范围<script type="text/javascript">// 判断一个整数，属于哪个范围：大于0；小于0；等于0var num = prompt("请输入一个数字");if(num > 0){ document.write(num+"属于大于0");}else if(num < 0){ document.write(num+"属于小于0");}else { document.write(num+"属于等于0")原创 2021-03-23 17:55:00 · 156 阅读 · 0 评论 -
学习JS的第二天
学习JS的第二天if语句语法：单分支if(条件){ 当条件为true时执行的代码段}双分支if(条件){ 当条件为真时，执行的代码块}else{ 当上述条件不满足时，执行的代码块}双分支简写：三元运算语法： 条件？条件成立时运行的代码 : 条件不成立时运行的代码多分支if(条件1){ 当条件为true时执行的代码段}else if(条件2){ 当条件为true时执行的代码段}....else{ 当上述条件不满足时，执行的代码块}...原创 2021-03-23 16:59:31 · 156 阅读 · 0 评论 -
学JS的第一天
学JS的第一天JS概念支持面向对象的跨平台脚本语言理解：-脚本语言：依赖别的语言才能运行HTML必须在浏览器中才能运行，js嵌套在HTML中才能运行- 跨平台：可以在不同的平台上运行Windows，Linux，安卓。。。- 支持面向对象使用面向对象的思想编程JS的组成ECMAScript：基础语法BOM：提供了操作浏览器对象的一套方法DOM：核心内容，提供了操作文档对象的方法js注释单行注释—//注释内容多行注释—/* 注释内容 */js输出弹窗形式-ale原创 2021-03-22 23:28:32 · 139 阅读 · 0 评论