JS基础第四课、JQ基础第一课（BOM、JQuery框架）
原创JS基础第四课、JQ基础第一课（BOM、JQuery框架）
原创
注意：
使用JQuery一定要记得引入，否则会$报错
回忆：
outline: none; //去掉输入框默认的边框
decodeURI(arr[1]) //解码中文
str.split('&')
BOM
一、location对象：解析URL
1、url：proticol://host:post/pash/pash?query#fragment
（1）proticol：通信协议（http、https）
（2）host：主机域名
（3）post：端口号
（4）path：路径，文件在服务器上的地址
（5）query：参数，一般以键值对的形式提交
（6）fragment：锚点#
2、属性
（1）获取整个url：location.href
（2）获取主机：location.host
（3）获取端口号：location.post
（4）获取路径：location.path
（5）获取参数：location.search
（6）获取片段（锚点）：location.hash
3、跳转获取
（1）获取url参数
①登录框
<body>
<form action="./try.html">
<input type="text" name="user">
<br>
<input type="password" name="password">
<br>
<button>登录</button>
</form>
</body>
②登录后跳转页面
<h1>欢迎您，xxx</h1>
<script>
console.log(location.search);
var str = location.search
str = str.substr(1)
var arr = str.split('&')
arr = arr[0].split('=')
console.log(arr[1]);
var h1 = document.querySelector('h1')
h1.innerHTML = '欢迎您，'+decodeURI(arr[1])
</script>
（2）location的方法
①跳转页面：location.assign(href)
②代替页面（没有历史记录）：location.replace()
③重新加载页面（f5）：location.reload()
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function(){
// location.assign('https://www.baidu.com/') //跳转页面
// location.replace('https://www.baidu.com/') //代替页面
location.reload('https://www.baidu.com/') //刷新加载页面
}
</script>
</body>二、navigator对象：监听设备对象
<body>
<script>
console.log(navigator);
if(/Android|webOS|iPhone|BlackBerry/i.test(navigator.userAgent)){
console.log('手机');
}
else{
console.log('电脑');
}
</script>
</body>
三、history对象：与浏览器历史进行交互，修改对象包含用户（在浏览器窗口）访问过的url
1、后退：back()
2、前进：forward()
3、前进和后退：go()
（1）前进一页：go(1)
（2）后退两页：go(-2)
代码例子：三个文件，效果后续发表相关视频给小伙伴看🧐
<body>
<h1>1</h1>
<a href="./try2(1).html">去2</a>
<a href="./try2(2).html">去3</a>
<div>
<button class="add">前进</button>
<button class="back">后退</button>
<button class="go">前进2页</button>
</div>
<script>
var go = document.querySelector('.go')
var add = document.querySelector('.add')
var back = document.querySelector('.back')
add.onclick = function(){
history.forward()
}
back.onclick = function(){
history.back()
}
go.onclick = function(){
history.go(2)
}
</script>
</body>
四、本地存储：数据存储在浏览器中，设置、读取方便，甚至页面刷新也不会消失
1、容器较大
（1）sessionStorage 5M
（2）localStorage 20M
值存储字符串，可以编码json.stringify编码字符串来存储对象
2、window.sessionStorge
（1）生命周期：关闭浏览器
（2）在同一个页面，数据共享，以键值对的形式存储
3、window.localStorage
（1）生命周期：永久有效，除非手动删除，关闭也会存在
（2）可以多个窗口共享，以键值对的形式存储
（3）删除removeItem
代码例子：效果后续发表相关视频给小伙伴看🧐
<script>
sessionStorage.setItem('index',123);//仅在同一个页面
console.log(sessionStorage.getItem('index'));
localStorage.setItem('name','小明')//可以多个窗口共享
console.log(localStorage.getItem('name'));
localStorage.removeItem('name')//删除
console.log(localStorage.getItem('name'));
</script>JQuery
一、JQuery：一个快速、简洁的JavaScript库，设计的宗旨"write less,Do More"
1、简介
（1）JavaScript库：一个封装好的特定的集合（方法和函数），该库里封装了很多定义好的函数，支持js的常规操作以及一些扩展
（2）学习JQuery本质：学习调用函数（方法）
2、jq的引入及输出
<script src="../jquery-3.6.0.js"></script>
console.log(jQuery);二、入口函数（类似于onload）
1、文档加载完毕，图片不加载时候就可以执行函数
（1）写法一：
<body>
<script>
$(document).ready(function(){
var div = document.querySelector('div')
console.log(div);
})
</script>
<div></div>
</body>（2）写法二
<body>
<script>
$(function(){
var div = document.querySelector('div')
console.log(div);
})
</script>
<div></div>
</body>2、文档加载完毕，图片加载完毕的时候执行该函数
<body>
<script>
$(window).ready(function(){
var div = document.querySelector('div')
console.log(div);
})
</script>
<div></div>
</body>3、顶级对象$，JQuery的别称
console.log($);//相当于console.log(jQuery);需要用jq的方法必须把元素对象包裹成jq对象
$(标签对象)变成jq的对象【单独的标签对象不可以用jq方法，只有用$包裹变成jq的对象才可以用方法】
三、常用API（jQuery 选择器 | 菜鸟教程）
1、选择器
原生js获取方法有很多，且具有兼容性，jq来给封装，获取元素方法统一标准【放到肚子里面去】
（1）格式
$('选择器')（2）方法：和CSS样式获取选择器元素的方法一致
<body>
<button>点击</button>
<div id="box">
<p>你好</p>
</div>
<p>外部你好</p>
<script>
console.log($('button'));
$('button').click(function(){
alert('点击成功')
})
console.log($('#box p'));
</script>
</body>
2、隐式迭代
遍历内部的DOM元素（伪数组的形式存储）的过程【给匹配的元素进行循环遍历，方便调用】
（１）获取当前点击下标：$(this).index()
（２）获取指定元素：$('元素').eq(index)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('li').click(function(){
console.log($(this).index());
})
$('li').eq(1).click(function(){
alert('点击成功')
})
</script>
</body>
3、样式操作：CSS()方法修改
（1）获取：参数只写属性名，返回值
（2）设置：参数是属性名和属性值
（3）参数是对象，键值对的形式【注意：属性名为复合属性时，写成驼峰的形式】
4、排他思想
当前元素设置样式，其他兄弟清除样式
（１）sibings()：返回其他同级元素对象
（２）结合第3点的样式操作：css('样式属性名','属性值') //修改样式方法
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('li').click(function(){
$(this).css('background','red')
$(this).siblings().css('background','')
console.log($(this).siblings());
})
</script>
</body>
5、链式编程
<script>
$('li').click(function(){
$(this).css('background','red').siblings().css('background','')//链式
console.log($(this).siblings());
})
</script>6、类的样式操作：添加类、删除类、切换类
代码例子：效果后续发表相关视频给小伙伴看🧐
<body>
<div class="box"></div>
<div>
<button>添加</button>
<button>删除</button>
<button>切换</button>
</div>
<script>
$('button').eq(0).click(function(){
$('.box').addClass('active')
})
$('button').eq(1).click(function(){
$('.box').removeClass('active')
})
$('button').eq(2).click(function(){
$('.box').toggleClass('active')
})
</script>
</body>7、动画
（1）显示隐藏
①显示：show(speed,callback) ②隐藏：hide(speed,callback) ③切换：toggle(speed,callback) speed：时间 callback：回调函数，显示隐藏之后去做的事情
代码例子：效果后续发表相关视频给小伙伴看🧐
<script>
$('button').eq(0).click(function(){
$('.box').show(2000,function(){
console.log('显示');
})
})
$('button').eq(1).click(function(){
$('.box').hide(2000,function(){
console.log('隐藏');
})
})
$('button').eq(2).click(function(){
$('.box').toggle(2000,function(){
console.log('切换');
})
})
</script>（2）滑动
①滑下：sildeDown(speed,callback) //显示 ②滑上：sildeUp(speed,callback) //隐藏 ③切换sildetoggle(speed,callback) speed：时间 callback：回调函数，显示隐藏之后去做的事情
（3）stop方法：
stop()：停止正在执行的动画
代码例子：效果后续发表相关视频给小伙伴看🧐
<body>
<div class="box"></div>
<div>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<button>停止</button>
</div>
<script>
$('button').eq(0).click(function(){
$('.box').slideDown(2000,function(){
console.log('显示');
})
})
$('button').eq(1).click(function(){
$('.box').slideUp(2000,function(){
console.log('隐藏');
})
})
$('button').eq(2).click(function(){
$('.box').slideToggle(2000,function(){
console.log('切换');
})
})
$('button').eq(3).click(function(){
$('.box').stop()
})
</script>
</body>（4）淡入淡出
①fadeIn(speed,callback) ②fadeOut(speed,callback) ③fadetoggle(speed,callback) speed：时间 callback：回调函数，显示隐藏之后去做的事情 ④fadeTo(时间,透明度,callback)
代码例子：效果后续发表相关视频给小伙伴看🧐
<script>
$('button').eq(0).click(function(){
$('.box').fadeIn(2000,function(){
console.log('淡入');
})
})
$('button').eq(1).click(function(){
$('.box').fadeOut(2000,function(){
console.log('淡出');
})
})
$('button').eq(2).click(function(){
$('.box').fadeToggle(2000,function(){
console.log('切换');
})
})
$('button').eq(3).click(function(){
$('.box').fadeTo(200,'0.3',function(){})
})
</script>（5）自定义动画：通过css样式将元素从一个状态改变成另一个状态，css属性值是逐渐改变的，这样就可以创建动画效果
①只有数字值可以创建动画（eg：width，margin），背景不会变
②animate(params,speed,easing,callback)
param：最终样式 easing：是否匀速，linear,swing callback：回调函数，动画做完然后执行的事件
代码例子：效果后续发表相关视频给小伙伴看🧐
<body>
<div class="box"></div>
<button>点击</button>
<script>
//注意animate()无法修改背景颜色
$('button').click(function(){
$('div').animate({height:'500px',background:'red'},1000,'linear',function(){
console.log('执行完成');
})
})
</script>
</body>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。