jQuery_Bootstrap

1.jQuery

jQuery是前端开发中非常著名的开源框架

  • 下载的话 我们下载压缩版本即可 体积较小 节省流量
  • JavaScript作为脚本语言 他是一句一句自上而下运行渲染的 一旦某一条语句中出现了之前未出现过的标识符 那么就执行失败 从而停止继续执行 所以一般定义js代码的script标签都是放置在body元素的最后(导入js文件的script标签也建议如此) 但是css并非如此 他不会因为语句中出现不认识的标识符而使得样式失效 即使不认识 他依然会为指定元素设置样式
  • script标签导入js文件和script编辑js代码需要分离 这是一种规范 就像css中的外部样式表和文档样式表分离一样
  • 利用jQuery可以提高开发效率
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function remove(){
            $('ul li')[0].remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • 以下案例中 运行到script内容时 由于事先未声明ul、li 导致结果删除按钮失效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $('ul li').remove()
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • 解决方法除了说将script标签移至body结尾以外 还可以让script标签延迟执行 待到浏览器窗口加载完毕(即浏览器的内容展示完毕)之后再行执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        window.onload = function(){
            $('ul li').remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • $()可以达到和window.onload类似的效果 在窗口加载完毕以后执行js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $('ul li').remove()
        })
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • $()是一个函数 他的返回值是一个DOM节点封装以后的结果 和js中原生的DOM节点不一样 如此的目的在于兼容不同的浏览器 避免他们的DOM操作不一致引发问题(不同的浏览器对于同一个DOM操作可能会有自己的理解 比如同样的删除操作 chrome可能为remove1 而firefox可能为remove2)
  • 绑定点击事件
    • 方式一(其中 fadeOut方法是jQuery框架提供的)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>  
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button onclick="remove()">删除</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function remove(){
            $('ul li').fadeOut()
        }
    </script>
    </body>
    </html>	
    
    • 方式二
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button>删除</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        document.querySelector('button').onclick = function(){
            document.querySelector('ul li').remove()
        }
    </script>
    </body>
    </html>	
    
    • 方式三
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button>删除</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $('button').on('click', function(){
            $('ul li').fadeOut()
        })
    </script>
    </body>
    </html>
    
    • 方式四
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button>删除</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $('button').click(function(){
            $('ul li').fadeOut()
        })
    </script>
    </body>
    </html>
    
    • 当然 上述四种方式中的匿名函数也可以通过箭头函数代替
    • $函数源自于jquery 因此先导入文件 在编辑js代码

2.基于jQuery的各种插件

  • jQuery UI
    • 你可以利用它提供的draggable函数实现拖拽效果(导入min压缩文件 一般包括js和css文件)
    • 注意:先导入jquery 在导入jquery-ui 因为后者中使用到了前者定义的$函数
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <style>
            div {
                border: 1px red solid;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    <div>我是一个div</div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $('div').draggable()
    </script>
    </body>
    </html>
    
  • jQuery Validation Plugin
    • 我们可以利用该框架完成表单验证
    • 使用时 请导入该框架目录中dist目录的min文件 如果你想要提示信息为中文或者其他非英文语言的话 那么你就需要导入和dist目录下的localization目录
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="/crm/list" method="get" id="loginForm">
        <div>用户名 <input type="text" required></div>
        <div>密码 <input type="text" requied></div>
        <div><button type="submit">登录</button></div>
    </form>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/localization/messages_zh.min.js"></script>
    <script>
        $('#loginForm').valid()
    </script>
    </body>
    </html>
    

3.bootstrap

bootstrap是非常强大的前端库 他可以帮助开发者开发处简洁、美观、响应式(所谓响应式 其实就是自适应设备屏幕)的页面

  • 如何应用
    • 其实就是查看文档 模仿他的示例 其实就很容易上手了
  • 示例一(美观的按钮)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 比如 你可以利用bootstrap框架实现按钮的美观效果 -->
<button class="btn btn-success">登录</button>
</body>
</html>
  • 示例二(栅格系统 即实现响应式网页的关键点)
    • 将网页宽度均分成12个格子 你可以自己设置所占据的格子数 以及每个组件之间相隔的格子数 即偏移量 同时你也可以设置不同场景下占据的格子数(大屏幕、中等屏幕、小屏幕等等)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            div {
                border: 1px red solid
            }
        </style>
    </head>
    <body>
    <!-- 你可以利用bootstrap实现栅格系统 -->
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-12">哈哈</div>
        <div class="col-lg-3 col-md-6 col-sm-12">呵呵</div>
        <div class="col-lg-3 col-md-6 col-sm-12">嘻嘻</div>
        <div class="col-lg-3 col-md-6 col-sm-12">嗨嗨</div>
    </div>
    </body>
    </html>	
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            div {
                border: 1px red solid
            }
        </style>
    </head>
    <body>
    <!-- 你可以利用bootstrap实现栅格系统 -->
    <div class="row">
        <div class="col-3">哈哈</div>
        <div class="col-3">呵呵</div>
        <div class="col-3 offset-3">嘻嘻</div>
    </div>
    </body>
    </html>
    
  • 示例三(下拉框 bootstrap.js需要依赖于jquery.js以及popper.js两个框架 但是其实bootstrap框架中内置的bootstrap-bundle.js已经内置了boostrap.js和popper.js 实际上 只需要导入jquery.js和bootstrap-bundle.js即可)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 你可以通过bootstrap实现下拉框效果 -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
  • 28
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

axihaihai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值