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>
1205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
