18.12.27 jQuery与bootstrap框架

bootstrap和jquery区别

Bootstrap以及jQuery主要以Web Site场景为主 也就是网站的页面展示层 能够提供很多艳丽的效果

Bootstrap是一个前台框架包含css和一些jquery插件，依赖与jquery，所以必须一起使用

bootstrap是依赖jquery写的扩展，你要使用bootstrap，必须要先引入juqery你不引入jquery，bootstrap的功能你还不能用

bootstrap定义了布局、间距等，还提供了less进行管理，可以看作是css规范、框架。

利用他提供的样式随意组合，基本上能满足了一些页面的样式需求。

用Jquery 的话， 如果要做一个网站，PC 端用jQuery-ui 手机端用jQuery mobile【需要做两套网站】

如果用bootstrap的话，【只需要一套就够了】。

因为bootstrap 是响应式布局，根据你的浏览设备不同，给你显示页面的效果也不同。当然如果你需要 支持IE 6—IE7 最好还是用 jQuery 低版本吧。

现在比较流行的前端框架有bootstrap + angularJS

jQuery是JavaScript的工具集，说白了jQuery就是JavaScript。
而Bootstrap是一个开发框架，集成了很多现成的网页格式和网页布局，封装了很多CSS样式和JS代码，可以拿来直接用，只需要把里面想换成自己的内容替换掉。
jquery是js脚本库，主要是通过简化js操作html元素及前端数据的。
bootstrap是前端页面设计数据显示框架，主要是它的UI部分，显示效果很不错。
bootstrap = 样式库 + 一堆jQuery插件
顺便解释一句，如果你只需要bootstrap的样式，你完全不用引入jQuery和bootstrap的js文件

jQuery创建表格的俩种写法

var stus = [{
    no: 1,
    name: "徐伟",
    score: 70
}, {
    no: 2,
    name: "程朱伟",
    score: 80
}, {
    no: 3,
    name: "陈浩栋",
    score: 90
}];
第一种
	var result = "";
	    $.each(stus, function (i, item) {
	        result += "<tr>" +
	            "<td>" + item.no + "</td>" +
	            "<td>" + item.name + "</td>" +
	            "<td>" + item.score + "</td>" +
	            "</tr>"
	    });

    $("#tb").html(result);

第二种
// $.each(stus,function (i,item) {
//         var noTd = $("<td></td>").append(item.no);
//         var nameTd = $("<td></td>").append(item.name);
//         var scoreTd = $("<td></td>").append(item.score);

//         var tr = $("<tr></tr>").append(noTd)
//             .append(nameTd)
//             .append(scoreTd);

//         $("#tb").append(tr);

//     });