前端中关于标签，表格，jquery的补充 3/30

div 和 span

div

<div> 是⼀个块级元素，通常与 css 配合使⽤，⽤于布局。

<div> 标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关 联。

<div> 是⼀个块级元素。这意味着它的内容⾃动地开始⼀个新⾏。实际上，换⾏是 <div> 固有的唯⼀格式表现。可以通过 <div> 的 class 或 id 应⽤额外的样式。

值

描述

align

left 、 right 、 center

规定 div 元素中的内容的对⻬⽅式，以后可以⽤样式取代它

常⽤属性

 span

<span> 标签被⽤来组合⽂档中的⾏内元素 ， span 没有固定的格式表现。当对它应⽤样式时，它才会产⽣视觉上的变化 

  表格

<table></table> 标签定义 HTML 表格。

<tr></tr> 标签定义表格的⾏。 tr 元素包含⼀个或多个 th 或 td 元素

<td></td> 标签定义 HTML 表格中的标准单元格。

<th></th> 定义表格内的表头单元格。 th 元素内部的⽂本通常会呈现为居中的粗体⽂本，⽽ td 元素内的⽂本通

常是左对⻬的普通⽂本。

简单的 HTML 表格由 table 元素以及⼀个或多个 tr 、 th 、或 td 元素组成。

理解： table 相当于⼀个表格的外框， tr 为⾏， td 为⼀个⼀个单元格， th 为有标题作⽤的单元格， th 中的内容同时

有加粗的效果 

列表   ⽆序列表

由 <ul></ul> 和 <li></li> 标签组成。

<ul>
 <li></li>
 <li></li>
 ......
</ul>
<ul>
 <li>好好学习</li>
 <li>天天向上</li>
</ul>

表格写法示例：

<table id="tab" align="center" border="1" width="70%" style="border-collapse: collapse;">
			 <!-- 表头 thead -->
			 <thead>
				 <tr>
					 <th>编号</th>
					 <th>分类名称</th>
					 <th>分类描述</th>
					 <th>操作</th>
				 </tr>
			 </thead>
			 <!-- 表体 tbody -->
			 <tbody>
				 <tr>
					 <td>1</td>
					 <td>手机数码</td>
					 <td>手机数码</td>
					 <td><button>修改</button><button>删除</button></td>
				 </tr>
				 <tr>
					 <td>3</td>
					 <td>电脑办公</td>
					 <td>电脑办公</td>
					 <td><button>修改</button><button>删除</button></td>
				 </tr>
				 <tr>
					 <td>4</td>
					 <td>手机数码</td>
					 <td>手机数码</td>
					 <td><button>修改</button><button>删除</button></td>
				 </tr>
				 <tr>
					 <td>2</td>
					 <td>电脑办公</td>
					 <td>电脑办公</td>
					 <td><button>修改</button><button>删除</button></td>
				 </tr>
			 </tbody>
		 </table>

table标签：

thead 表头 里面的标签用th

tbody 表身 里面的标签用td 

===================================================

ready加载事件

$(document).ready(function()等价于$(function(){})

文档载入便触发ready方法

<script type="text/javascript">
 // 文档载入完便触发ready方法
     $(document).ready(function(){
         $("div").html("ready go...");
     })
 // $(document).ready(function(){})== $(function(){})
     $(function(){
         $("p").click( function () {
             $(this).hide();
         });
     });

     $(function(){
        $("#btntest").bind("click",function(){
         $("div").html("剁吧...");
         });
     });
 </script>

Jquery Ajax

异步无刷新技术

同步 修改完提交

异步 你用你的 我提交我的

比如微博这页看完了 想往下继续 并不会刷新页面 而是紧接着这个页面往下加载 

jquery调用ajax方法：

格式：$.ajax({});

参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

$.ajax的用法

 $.get

    $.get();
            语法：
                $.get("请求地址","请求参数",function(形参){
                    
                });
        $.post();
            语法：
                $.post("请求地址","请求参数",function(形参){
                    
                });

$getJSON

 语法：
                $.getJSON("请求地址","请求参数",function(形参){
           
                });
            注：getJSON方式要求返回的数据格式满足json格式（json字符串

 ajax

是从服务器或者某文件获取到需要的值 放到客户端 可以不用刷新