Web前端(五):Bootstrap+JQuery

施学
2023-12-01

通过之前的学习,差不多掌握了原生的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
 类似资料: