07 2021 档案
摘要：一、模板字符串 1）定义 为ES6新增的创建字符串的方式，使用反引号``定义 2）特点 模板字符串中可以解析变量 <script> let name = `张三`; //可以解析变量 let sayHello = `sayhell0,my name is ${name}`; console.log(
阅读全文
摘要：选择符 简介 选择元素的方式 E:nth-child(n) 匹配父元素中第n个子元素E 查找兄弟元素中某个绝对位置的元素 p:ntn-child(2)选择某父元素的子元素p,并且p是父元素的第二个子元素 E:nth-type-of(n) 指定类型E的第n个 查找同类型元素中某个绝对位置的元素 p:n
阅读全文
摘要：一、遍历元素 jquery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历 语法一：each方法 $("div").each(function(index,domEle){ //回调函数第一个参数（index）一定是索引号 //回调函数第二个参数(domEle)
阅读全文
摘要：一、事件被触发在，就会有事件对象的产生 event.on(events,[selector],function(event){ event.stopPropagation(); //阻止事件向上冒泡 event.preventDefault(); //阻止默认行为 …… }) 二、举例 <body>
阅读全文
摘要：一、自动触发事件的3种模式 有些事件希望自动触发，比如轮播图自动播放的功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。有3种自动触发模式如下 1、元素.事件（） 2、元素.trigger(“事件”) 3、元素.triggerHandler("事件")，就是不会触发元
阅读全文
摘要：一、总结 2种本地存储方式 生命周期 数据共享 存储形式 方法 window.sessionStorage 关闭浏览器 同一个窗口(页面) 键值对 存储数据sessionStorage.setItem(key,value) 获取数据sessionStorage.setItem(key) 删除数据se
阅读全文
摘要：【语法】 element.on(events,[selector],fn) 1、events一个或多个用空格隔开的事件类型，如“click”或“click keydown” 2、selector：元素的子元素选择器。如ul里面的li 3、fn：回调函数，即绑定在元素身上的倾听函数 作用一：绑定一个或
阅读全文
摘要：【要求】 点击加号或减号、修改文本框，对应小计发生变换 【思路】 1、核心思路：每次点击+号或者-号，根据“文本框的值*当前商品的单价”就是商品的小计 2、注意1：只能增加本商品的小计，就是当前商品的小计模块 3、修改普通元素的内容是text()方法 4、注意：当前商品的价格要把￥符号去掉再相乘，否
阅读全文
摘要：【要求】 点击加号或减号相应文本框值中数量发生变化 【分析】 1、核心思路:首先声明一个变量,当我们点击+号，就让这个值++，然后重新赋值给文本框 2、注意1：只能增加本商品的数量，就是当前+号的兄弟文本框itxt的值。所以必须从$(this)出发去找 3、修改表单的值是val()方法 4、注意2：
阅读全文
摘要：【思路分析】 1、全选与不选块模块 给全选按钮添加change事件 就是将全选按钮（checkall）的状态赋值给三个小的按钮（checkitem）即可 2、小复选框模块 给小复选框添加change事件， 每点击一次就去判断此时总共被选中的小复选框的个数，如果“小复选框被选中的个数=小复选框总个数”
阅读全文
摘要：css3 box-sizing属性 box-sizing:content-box|border-box|inherit; 值 描述 content-box border和padding不计算入width之内 border-box padding计算入width内 inherit 规定应从父元素继承
阅读全文
摘要：原生js实现动画函数的封装及核心原理 一、动画实现原理 核心原理：通过定时器setInterval()不断移动盒子的位置 二、实现步骤 1、获得盒子当前的位置 2、让盒子在当前位置加上移动的距离（步长） 3、注意元素需要添加定位，才能使用element.style.left 4、利用定时器不断重复这
阅读全文
摘要：立即执行函数的用法 1、定义 是定义函数以后立即执行该函数 2、写法（2种） 第一种：用小括号把整个函数定义和调用包裹起来 (function() { // function body }()) 第二种：用括号把函数定义包裹起来，后面加一对小括号 (function( // function bod
阅读全文
摘要：js无缝滚动实现及原理详解 【案例分析】 ①点击左(右)按钮一次，就让图片滚动一次 ②声明一个变量i, 每点击一次右侧按钮，自增1，让这个变量*图片的宽度，即为ul移动的距离 每点击一次左侧按钮，自减1，让这个变量*图片的宽度，即为ul移动的距离 ③图片无缝滚动原理 将ul中第一张图片所在的li复制
阅读全文
摘要：js入口函数（窗口加载事件） 第一种:当文档内容完全加载完成后触发的事件（包括图像、脚本文件、CSS文件等），就调用的处理函数 window.onload = function() {}//推荐使用 或者 window.addEventListener("load", function() {})
阅读全文
摘要：几种检测浏览器大小方法 方法一:媒体查询（css3的新语法） 媒体查询可以用于检测很多东西：自动检测viewpoint（视窗）的宽度和高度；设备的宽度和高度；旋转方向（智能手机横屏或竖屏）；分辨率大小。 （一）直接写在css样式中 使用@media查询，可以针对不同的媒体类型类型定义不同的样式 使用
阅读全文
摘要：表格隔行变色 一、案例分析 1、用到新的鼠标事件。鼠标经过onmouseover 鼠标离开onmouseout 2、核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开当前行去掉当前的背景颜色 3、注意：第一行（thead里面的行）不需要改变颜色，因此我们获取的是tbody里面的行 二、代码实现
阅读全文
摘要：发送短信 一、案例分析 1、按钮点击后， ①需禁用按钮diaabled为true ②同时按钮里面的内容会发生变化 2、按钮里面的倒计时秒数会发生变化，此时需要用到定时器，定义一个变量，在定时器里不断递减 3、需要设置一个判断条件，如果变量为0，说明到了时间，此时需要 ①停止定时器（清除定时器） ②复
阅读全文
摘要：如何实现单线边框 一、导入 table表格添加边框后，它的默认效果如下： table { width: 400px; } table, table td, table th { border: 1px solid #000000; } 二、解决方案（3种方法） 【方法一】 核心思想： 1、设置BOR
阅读全文
摘要：css的背景总结 属性 作用 值 background-color 背景颜色 预定义的颜色值/十六进制/RGB代码 background-image 背景图片 none（无背景图，默认的） url（）使用绝对或相对地址指定背景图像 background-repeat 背景平铺 background-
阅读全文
摘要：页面换肤效果 一、要求：点击相应图片，将页面背景设置为相应图片 考察知识点： ①利用for循环注册事件 ②利用js修改样式属性 二、效果展示： 三、代码实现： 1、html结构： <body> <div class="box"> <ul> <li><img src="images/1.jpg" al
阅读全文
摘要：查询商品案例 要求： 1、把数据渲染到页面中（forEach） 2、根据价格显示数据(filter) 3、根据商品名称显示数据（some） 》》页面html结构如下 <style> table { width: 400px; border: 1px solid #000; border-collap
阅读全文
摘要：1、题目要求：如下数组输入相应的id号，就可以返回数据对象 var data = [{ id: 1, name: '家电', goods: [{ id: 11, gname: '冰箱' }, { id: 12, gname: '服饰' }] }, { id: 2, name: '服饰' }]; 代码
阅读全文
摘要：应用一：点击li输出当前li的索引号 <ul class="nav"> <li>星辰</li> <li>大海</li> <li>春暖</li> <li>花开</li> </ul> 步骤： 》》第1步：获取所有的小li // 获取所有小li var lis = document.querySelect
阅读全文
摘要：一、函数内部的this指向 函数内this的指向，是当我们调用函数的时候才能确定，调用方式的不同决定了this的指向不同 调用方式 this指向 普通函数调用 window 构造函数调用 实例对象，原型对象里面的方法也执行实例对象 对象方法调用 该方法所属的对象 事件绑定方法调用 绑定事件对象 定时
阅读全文
摘要：6种函数调用方式： 1、普通函数 function fn() { console.log('one day!'); } 调用方式‘： fn(); 或 fn.call(); 2、对象的方法 var o={ fn:function(){ console.log('one day!'); } } 调用方式
阅读全文
摘要：写出下列代码的运行结果 1、使用var关键字声明循环变量i var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); arr[1](); 运行结果：2 2 2、使用l
阅读全文