Web前端（五）：Bootstrap+JQuery

通过之前的学习，差不多掌握了原生的HTML+CSS+JavaScript的我们，基本上已经能够做到很大程度上的网页开发了，虽然开发过程中必然会遇到很多困难，但是在不断的努力下一定都是能够解决的。不过仅仅依靠原生手段进行开发实在是有点累，今天我就简单介绍一下两个能够提高我们开发效率的工具：Bootstrap和JQuery。

Bootstrap是最一款使用最广泛的Web前端UI框架，Bootstrap提供了多种我们经常需要使用的元素样式，如各式各样的表格、表单等等，通过更改class就能够十分便捷地帮我们搭建起一个网页的样式。Bootstrap还使用了栅格系统式的响应式布局，将屏幕横向分为12列，用户只需要选择栅格数量，就能快速完成网页的大部分布局。Bootstrap所提供的所有元素和布局方式都是符合响应式布局的，可以帮助用户解决多端适配的麻烦问题。

具体的使用方法十分简单，只需要在官网上选择相应的版本，然后下载已经编译过的代码的压缩包或者通过npm等方式下载，最后再根据文档中的指引修改元素的class就可以了应用了。

https://v3.bootcss.com/css

JQuery是一个JavaScript库，它把常用的一些JS语法与函数进行了封装，我们只需要下载引入，就可以直接使用了。

比如我们之前是通过document.getElementById()的方式获取到DOM的，但是在引入JQuery之后就可以直接$()，像CSS选择器一般进行选择。
比如$("#btn")，就是选择id为htn的元素，
再比如$(".btn")就等同于document.getElementsByClassName()，是不是方便了很多呢！

还有很多鼠标事件和实现动画效果的方法，原来都得通过JS控制DOM，再控制CSS样式来实现，现在都封装成一个函数来便捷地供我们使用了。

还有就是之前通过Ajax实现前后台数据交互，还得先创建XMLHttpRequest对象，再规定请求形式，然后加上请求头和参数，最后再根据服务器返回的状态码判断是否成功，十分地繁琐，但是引用了JQuery之后，就能直接通过一个方法，再填写相应的参数就能够实现了！

$.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

当然，JQuery还有很多很多能够帮助我们提升效率的函数，虽说实质上都是对函数进行了封装，我们也可以通过手动封装来实现，但是真的能够极大地帮助我们提升效率。

总结一下：BootStrap和JQuery是两个十分简单、常用的前端工具库，通过对HTML、CSS、JavaScript的封装，能够帮助我们极大地提升效率，快速完成网站设计。

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog