jQuery基础使用与样式篇

开发工具与关键技术：Adobe Dreamweaver jQuery
作者：李哲定
撰写时间：2020年4月29日

jQuery对象与DOM对象
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

jQuery对象转化成DOM对象
jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

基础样式
1.只需要在 table 元素上应用.table 样式即可制作出比较漂亮的表格。示例如下：

...

2…table 样式的主要作用有 3 个：增加单元格的内边距、在 thead 的底部设置一条 2 像素的粗线，以及在每行记录的顶部都有 1 条 1 个像素的细线。主要源码如下：
// 源码 1401 行
table { max-width: 100%； background-color: transparent；}
th { text-align: left；}
.table { width: 100%； margin-bottom: 20px；}
.table > thead > tr > th，
.table > tbody > tr > th，
.table > tfoot > tr > th，
.table > thead > tr > td，
.table > tbody > tr > td，
.table > tfoot > tr > td {
padding: 8px； /设置单元格的内边距/
line-height: 1.428571429；
vertical-align: top；
border-top: 1px solid #ddd； /* 每行记录的顶部都有 1 条 1 个像素宽的横线 /
}
.table > thead > tr > th {
vertical-align: bottom；
border-bottom: 2px solid #ddd； / thead 有 1 条 2 个像素宽的横线 /
}
/省略部分样式/
.table > tbody + tbody {
border-top: 2px solid #ddd；
/ 如果表格里有 2 个 tbody，两者之间也会有 1 条 2 个像素宽的横线 */
}