rem改变屏幕大小
let title = document.querySelector('title')
// 给window设置监听事件
window.addEventListener('resize',function(event){
为window设置 监听
document.documentElement.style.fontSize =
设置HTML根标签随着屏幕大小不同 再除以10，10rem等于整个屏幕的大小
document.body.offsetWidth/10 +'px'
let width = document.body.offsetWidth
把body 从左上角视口到整个屏幕的大小赋值给width
if(width > 1200){
进行判断，要是达到一定的条件，就会缩小页面大小
title.innerText = `大屏幕${width}`
}else if(width > 922){
title.innerText = `中屏幕${width}`
} else if(width > 768){
title.innerText = `小屏幕${width}`
}else{
title.innerText = `极小屏幕${width}`
}
})
本地储存
localStorage.seItem ('自定义属性'，要设置的值，必须是字符串格式)
存储一个本地数据 localStorage.setItem('key','123')
获取上面的自定义属性 let k = localStorage('key')
localStorage.getItem(k) 获取 当前本地存储
localStorage.removeItem(key) 删除当前本地存储
localStorage.clear() 情况本地存储
本地存储2
// 如果本地存储里面没有这个数据,那么打印出来的就是空值 null
let str = localStorage.getItem('fagag')
console.log(JSON.parse(str));
// 会输出个空值
/*
本地存储 存储数据类型 不管你传入什么类型都好，最终都被它转换成 字符串类型
本地存储 存储复杂类型 引用类型的数据 会出现数据丢失的问题 固定规则来着
（我们的菜篮子 只能用来装青菜 你用来装水 我不管--- */
// 数组 对象
// localStorage.setItem('aaa',123)
// 创建了一个本地存储
// let aaa = localStorage.getItem('aaa')
// 把创建的本地存储获取过来 ,然后输出 是个 string
// console.log(typeof aaa);
// console.log(aaa);
// 输出本地存储
// 获取本地存储
// const obj = {name : '路飞'}
// localStorage.setItem('obj',obj)
// 把对象数据存在本地存储
// let newObj = localStorage.getItem('obj')
// 把本地存储数据获取出来并赋值给newObj
// console.log(newObj);
// 输出本地存储,是一个对象
// 在行业中我们会这样做
// 1 还是正常定义对象
const objstr = {
name:'邓',
height: 155,
}
// 存储到本地存储当中
const objsr = JSON.stringify(objstr)
// 把 对象转换成一个字符串,
localStorage.setItem('objssr',objsr)
// 把对象转换成的字符串 存储到本地存储中
let objs = localStorage.getItem('objssr')
// 获取本地存储并赋值给objs
console.log(objs);
// 输出objs
const objsssr = JSON.parse(objs)
// 重新把这个字符串解析变成原来的obj类型
console.log(objsssr);
// 输出对象
// 1 本地存储无法存放 复杂类型的数据
// 2 复杂类型的数据 通过JSON对象 字符串 相互之间的转换
sessionStorage本地存储
本地存储的技术 sessionStorage 这个和本地存储不一样的是,只要我们关闭了
页面,这个本地存储就会自动删除 ,而本地存储是,只要我们不清除,就会一直存在
直至天荒地老
用法和localStorage 本地存储一样
存个数据
sessionStorage.setItem("key",3214)
创建一个本地存储
console.log(sessionStorage.getItem('key'));
取数据*
输出一个本地存储key 里面的 值 3214
sessionStorage.removeItem('key')
删除sessionStorage本地存储
sessionStorage.clear()
元素属性
a.href = 'http://www.qq.com'
// 修改 属性值
// a.id = 'bb'
// 修改id属性值
// 自定义属性 不能直接通过 元素. 属性 语法来获取和设置
// 获取 getAttribute ('属性名')
//console.log(a.hoee);
// 自定义属性不能直接 这样输出和设置 ,内置属性才可以 ,就是标签原有的属性 id href src
// 想要输出a . hoee 必须 向下面这样写法
// console.log(a.getAttribute('hoee'));
// 输出自定义hoee属性里面得值
// console.log(a.getAttribute('cc'));
// 这样子就成功输出了
// 设置 setAttribute (属性名,属性值)
// a.setAttribute('hoee','2313');
// setAttribute 是指定一个现有得自定义hoee属性 修改你想要得属性值
// 删除属性 remosveAttribute (属性名)
// a.removeAttribute('hoee')
// 已经删除调 a标签里面得 自定义属性 hoee了
/* 自定义属性 用h5建议的比较好
属性固定语法 data-自定义属性 = '自定义属性的值'
比前面两个方便,这个既可以获取,又可以修改属性值 */
// 获取自定义属性的值== a.dataset.xxx
// console.log(a.dataset.ssr);
// 修改自定义属性的值 a.dataset.自定义属性名 = '自定义属性值'
// a.dataset.ssr = '22222'
// 最大强的是 (getAttribute)这个功能,可以获取到我们自定义 或 内置属性的 值
// console.log(a.getAttribute('data-ssr'));
//console.log(a.getAttribute('id'));
//console.log(a.getAttribute('hoee'));
区分属性和方法
属性是带 = 号 不带括号的
document.body.style.backgroundColor = 'red'
方法是带() 不带等于号的*
document.body.push()
事件绑定-取消绑定
let button = document.querySelector('button')
function cc(){
console.log('I Love You');
}
function ii(){
console.log('我想要吃');
}
button.addEventListener('click',cc)
button.addEventListener('click',ii)
// 可以把函数直接调给绑定事件,我们触发事件,函数就会调用执行
// 一个元素可以绑定多个事件
setTimeout(function(){
// 取消这个事件绑定
// 设置了个延时器 ,设置了5秒 ,五秒这行 ,将会取消这个事件绑定
button.removeEventListener('click',ii)
},5000)
字符串方法
// let str = 'DFAFGAGGGMAMOLE'
// console.log(str.toUpperCase()); // toUpperCase 表示把字符串转大写
// console.log(str.toLowerCase()); // toLowerCase 表示把字符串转小写
let arr = '1236735'
console.log(arr.split(''))
/* console.log(arr.splice("")); 表示把字符串转成一个数组,splice() 括号里面表示
需要分隔的符号,那么我们字符串"" 号串起来的,括号里面填"" 即可分隔变成一个数组 */
let arr1 = '1-f-5-b-dc-s-gh-5'
console.log(arr1.split('-'));
// 把一个字符串 转换成 数组
/* 1 转大写 toUpperCase()
2 转小写 toLowerCase()
3 转数组 str.split('') 按照什么来分割你的字符串变成数组 */
正则语法
let sky = `青春 ,邓,你现在在哪里,喜欢你`
const ty = /邓/
console.log( ty.test(sky));
/* 变量1.test(其他变量2),判断变量2里面是否有变量1 符合的值 ,匹配上了为true
匹配不上则为false */
let i = `一辈子这么长,现在不努力什么时候才肯努力?`
const c = /努力/
console.log( c.test(i));
边界符
let str = '邓钰莹'
let sky = /^邓/
// 1 ^符号代表的是字符串 匹配第一个值 ,$符号是表示代表字符串匹配最后一个值
// 2 ^第一个字符配上上去,那么第二个字符也要相对应于你要匹配字符串的对应一模一样的值 ,才能返回true
// 3 ^如果你只是匹配第一个值,第一个值你和匹配的值相对应了 就会返回true
console.log( sky.test(str));
let i = '梁祺星'
let c = /梁祺星$/
console.log( c.test(i));
/* 边界符
开头 ^
结尾 $ */
量词
*// /[a-z]/表示从a - z 都循环了一遍 a 到 z之间所有的字母都可以匹配到*
• *// console.log(/[a-z]/.test('m'));*
• console.log(/[0-100]/.test(''));
字符
// const str="路飞";
// const reg=/路飞/;
// console.log(reg.test(str));
// * 表示 放在它前面那一个字符 可以出现0次或者多次
// /^路*$/ => ""， 路，路路，路路路
// console.log(/^路*$/.test('')); // true
// console.log(/^路*$/.test('路')); // true
// console.log(/^路*$/.test('路路')); // true
// console.log(/^路*$/.test('路路路')); // true
// + 表示 放在它前面那一个字符 可以出现1次或者多次
// console.log(/^路+$/.test(''));
// console.log(/^路+$/.test('路'));
// console.log(/^路+$/.test('路路'));
// console.log(/^路+$/.test('路路路'));
// ？ 表示出现0次或者1次
// console.log(/^路?$/.test(''));// true
// console.log(/^路?$/.test('路')); // true
// console.log(/^路?$/.test('路路')); // false
// console.log(/^路?$/.test('路路路')); // false
// {n} 放在它前面的那一个字符 出现n次
// console.log(/^路{2}$/.test('')); // false
// console.log(/^路{2}$/.test('路')); // false
// console.log(/^路{2}$/.test('路路')); // true
// console.log(/^路{2}$/.test('路路路')); // false
// {n,} 放在它前面的字符 最少出现n次
// console.log(/^路{2,}$/.test('')); // flase
// console.log(/^路{2,}$/.test('路')); // flase
// console.log(/^路{2,}$/.test('路路'));// true
// console.log(/^路{2,}$/.test('路路路')); // true
// {n,m} 放在它前面的字符 最少出现n次，最大是m次
console.log(/^路{2,3}$/.test('')); // false
console.log(/^路{2,3}$/.test('路')); // false
console.log(/^路{2,3}$/.test('路路')); // true
console.log(/^路{2,3}$/.test('路路路')); // true
\
