bootstrap的js代码是依赖于jQuery的，也就意味着你在开发项目时，使用Bootstrap动态效果的时候，一定要导入jQuery
jQuery绑定事件 以及 事件应用举例
// 第一种
$(‘#d1‘).click(function () {
alert(‘你好呀‘)
});
// 第二种(功能更加强大 还支持事件委托)
$(‘#d2‘).on(‘click‘,function () {
alert(‘好嗨哟‘)
})
左侧菜单（有显隐效果）
<script>
$(‘.title‘).click(function () {
// 先给所有的items加hide
$(‘.items‘).addClass(‘hide‘)
// 然后将被点击标签内部的hide移除
$(this).children().removeClass(‘hide‘)
})
</script>
返回顶部
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$(‘#d1‘).removeClass(‘hide‘)
}else{
$(‘#d1‘).addClass(‘hide‘)
}
})
</script>
自定义登录校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName = $(‘#username‘)
let $passWord = $(‘#password‘)
$(‘#d1‘).click(function () {
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text(‘密码不能为空‘)
}
})
$(‘input‘).focus(function () {
$(this).next().text(‘‘)
})
</script>
input实时监控
<input type="text" id="d1">
<script>
$(‘#d1‘).on(‘input‘,function () {
console.log(this.value)
})
</script>
hover事件
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$(‘#d1‘).hover(
function () {
alert(‘我来了‘) // 悬浮
},
function () {
alert(‘我溜了‘) // 移开
}
)
</script>
页面加载（等待页面加载完毕再执行代码）
# js 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
【 浏览器console 里的操作】
$(‘#d1‘).hide(5000) w.fn.init [div#d1] $(‘#d1‘).show(5000) w.fn.init [div#d1] $(‘#d1‘).slideUp(5000) w.fn.init [div#d1] $(‘#d1‘).slideDown(5000) w.fn.init [div#d1] $(‘#d1‘).fadeOut(5000) w.fn.init [div#d1] $(‘#d1‘).fadeIn(5000) w.fn.init [div#d1] $(‘#d1‘).fadeTo(5000,0.4) w.fn.init [div#d1]
Bootstrap框架查看菜鸟教程
https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html