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

Posted 2023-03-30 白鹿0820

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

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

前端相关内容补充

原生JS ：原生态js是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言，jquery是在原生态的js上集成的框架资源，使用jquery并不代表代码就不是你写的，区别在于使用jquery只是使用了它的语法，更利于兼容以及实现，jquery已经将常规的js兼容问题解决，所以使用起来出现不兼容的情况会更少，更利于开发，但同时，要使用jquery等框架也需要去学习相关的语法，拥有js基础的同学学习jquery时会发现很轻松，在使用时也会发现很方便。

常见的块级元素有：div form p h1-6 ul ol dl table
常见的内联元素有: span a strong em lable input select textarea img br

text_align 文字水平居中
line_height 行内元素垂直居中
vertical_align 所有元素的位置相对于行内第一个元素的基线来调整

position :top left right left 绝对定位是元素左上方的点相对于body左上方的点进行定位

z-index ：当两个div盒子都设置为display:fixed时，通过设置z-index 层级级别来决定哪个在最上面显示

margin：是元素正中心的点相对于父级元素正中心的点进行定位

float 相当于dispaly: inline-block
float脱离文档流，但inline-bloak 半脱离文档流

3种情况下元素会脱离文档流：
float：left
position:absolute
position:fixed

 

表格的边框属性放在html中会自动显示内边框
放在css代码中只会显示外边框

select标签下的option被选中 属性selected = true
input标签中的checkbox radio标签被选中 属性checked = true
button div span 纯净标签

阻止继承： onmouseout : onmouseleave
onsubmit：return false ; event.preventdefault
事件传播 :event.stoppropagation

 

撞库：
某公司的数据库被泄露，那被哈希之后的用户名和密码就会流传到网上，不法分子将一些简单的用户名，密码（张三，123456）等一系列值进行哈希之后与泄露的哈希值进行比对，总能恰巧碰对一两个，然后就可以用撞出来的用户名密码进行登录

另：用户在与客户端正常的通信时（time waiting）黑客进入用户的客户端，窃取用户向服务端发送的用户名密码包

哈希过程放在服务端的原因： 如果放在客户端，黑客就会破解客户端源代码，从而知道信息
一个相对安全的做法是服务端在对密码进行哈希过后，将哈希值加盐再次做哈希算法，将最后结果放入数据库，这样即使数据库泄露，也很难撞库