【零基础小白的华丽蜕变】项目中引入 Bootstrap 和 jQuery
[catalog]
1. 了解 Bootstrap
2. Bootstrap下载及安装
3. 了解 jQuery
4. jQuery下载及安装
5. 引入Bootstrap 和 jQuery(附案例)
6.【每日一面】JS 中 attribute 和 property 的区别
1. 了解 Bootstrap
Bootstrap(辅助程序,解靴带)是美国 Twitter 公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap 4 正式版已经从 Less 迁移到 Sass。
Less(辅助程序,解靴带)Leaner Style Sheets 是一门 CSS 预处理语言(编译器),Less里面的变量都是以@作为变量的起始标识,变量名由字母、数字、_和-组成,扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端,引入Less.js即可使用,赋予了CSS逻辑运算的能力。
Sass(果脯蜜饯)Syntactically Awesome Stylesheets 是一门 CSS 预处理语言(编译器),是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!完全兼容所有版本的CSS。Sass里面的变量都是以$作为变量的起始标识,基于Ruby,需要安装Ruby(一种面向对象程序设计的脚本语言)。
2. Bootstrap下载及安装
解压后可以看到CSS,字体文件和JavaScript已经下载好了。
3. 了解 jQuery
jQuery 是一个快速,小型且功能丰富的JavaScript库。通过易于使用的API(可在多种浏览器中使用),它使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性。具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
4. jQuery下载及安装
Ctrl+S 保存到本地
5. 引入Bootstrap 和 jQuery
学习更多 Bootstrap 知识 → Bootstrap菜鸟教程
学习更多 jQuery 知识 → jQuery API 中文文档
直接复制粘贴到项目里就可以使用了!代码规约都放在 plugin 文件夹里。
【每日一面】
JS 中 attribute 和 property 的区别
Property (属性):是DOM中的属性,是JavaScript里的对象。DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方法,例如childNodes、firstChild、clientHeight等。property的值可以是任何的数据类型,对大小写敏感,自定义的property不会出现在html代码中,只存在js中。
Attribute (特性):attribute是HTML标签上的特性,例如html中常用的id、class、title、align等,它的值只能够是字符串,大小写不敏感,出现在innerHTML中,通过类数组attributes可以罗列所有的attribute。attributes属于property的一个子集,即DOM标签(html代码)中出现的属性(id、class、title、align、classname),它保存了HTML标签上自定义的属性,是一个Attr类型的对象,拥有NodeType、NodeName等属性。常用的Attribute已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute不行。
Attention!!!
setAttribute(“key”,“value”)的两个参数,都必须是字符串;属性取值很简单,取任何属性的值,用"."就可以;attribute可以同步property,property不能同步attribute;建议大家用setAttribute()和getAttribute()来操作。
1.“class”变成Property之后叫做“className”,因为“class”是ECMA的关键字。
2.getAttribute获取的是href的实际值,而点号获取的是完整的url,存在浏览器差异。
本文地址:https://blog.csdn.net/weixin_44598507/article/details/110194471