发表于： 2023-01-17 20:27:36
0 305
localStorage知识点加上小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地存储_localStorage</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click',function() {
//当我们点击了之后，就可以把表单里面的值存储起来
//localStorage 就算是关闭页面 或者 切换页面 也一样存在
//其他页面也能获取 localStorage 存储值
var val = ipt.value;
localStorage.setItem('username',val);
localStorage.setItem('pwd',val);
});
get.addEventListener('click',function() {
//当我们点击了之后，就可以把表单里面的值获取过来
console.log(localStorage.getItem('username'));
});
remove.addEventListener('click',function() {
//当我们点击了之后，就可以把表单里面的值删除
localStorage.removeItem('username');
});
del.addEventListener('click',function() {
//当我们点击了之后，清除所有的
localStorage.clear();
});
</script>
</body>
</html>
一个用户案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记住用户名案例</title>
</head>
<body>
<!-- checkbox 选中与未选中 效果-->
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if(localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if(this.checked) {
localStorage.setItem('username',username.value);
} else {
localStorage.removeItem('username');
}
});
</script>
</body>
</html>
关于jQery的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的基本使用</title>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!-- <script>-->
<!-- // $('div').hide();-->
<!-- //1、等着页面 DOM 加载完毕 再去执行 js 代码-->
<!-- // $(document).ready(function() {-->
<!-- // $('div').hide();-->
<!-- // })-->
<!-- //2、等着页面 DOM 加载完毕 再去执行 js 代码-->
<!-- // $(function() {-->
<!-- // $('div').hide();-->
<!-- // })-->
<!-- </script>-->
<div></div>
<span></span>
<script>
//1、DOM 对象： 用原生js 获取过来的对象就是DOM对象
var myDiv = document.querySelector('div');
var mySpan = document.querySelector('span');
console.dir(myDiv);
console.dir(mySpan);
//2、jQuery对象： 用jquery方式获取过来的对象是 jQuery对象。本质：通过$把DOM元素进行了包装
// $('div'); //$('div'); 是一个 jQuery 对象
console.dir($('div'));
console.dir($('span'));
//3、jQuery 对象只能使用 jQuery 方法：DOM 对象则使用原生的 JavaScript 属性和方法
myDiv.style.display = 'none';
// myDiv.hide(); myDiv是DOM元素对象 不能使用 jQuery 的方法
// $('div').style.display = 'none'; $('div')是jQuery对象 不能使用 原生的JavaScript 属性和方法
</script>
</body>
</html>
返回列表
评论