前端学习笔记

最新推荐文章于 2024-03-06 09:26:30 发布
最新推荐文章于 2024-03-06 09:26:30 发布
阅读量772 收藏 3
点赞数
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52402506/article/details/122000209
版权

CSS

选择器

优先级：id选择器 > class选择器 > 标签选择器

后代选择器
		 body p{
			 background:red;
		 }
子选择器一代
		 body>p{
			 background:#3cbda6;
		 }
相邻兄弟选择器同辈,只有一个，相邻（向下）
		 .active + p{
			 background:yello;
		 }
通用选择器当前选中元素的向下所有兄弟元素
		 .active~p{
			 background:#02ff00；
		 } 

结构伪类选择器
		 ul的第一个子元素
		 ul li:first-child{
			 background:#02ff00；
		 }
		 ul的最后一个子元素
		 ul li:last-child{
		 	background:#02ff00；
		 }
属性选择器
		/*存在id属性的*/
		a[id]{background:yellow}
		/**id=first的元素*/
		a[id=first]{background:red}
		属性名 = 属性值（正则）
		= 绝对等于
		*= 包含这个元素
		^=以这个开头
		$=以这个结尾

背景

背景图片
		 background-repeat:no-repeat 不平铺
		 background-position：   定位

圆角

div{
			width: 100px;
			height: 100px;
			margin: 30px;
			background-color: red;
			border-radius: 50px;/* 圆角 */
			}

display

块级元素：独占一行
    h1~h6 p  div 列表
行内元素:不独占一行
    span a img strong...
行内元素 可以包含在块级元素中，反之，则不可以~
  display：
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联在一行
    none 隐藏

浮动

/*float*/
    right  右浮动
    left  左浮动
   
/*clear*/
   right 右侧不允许右浮动元素
   left  左侧不允许有浮动元素
   both  两侧不允许右浮动元素
   none
/*父级边框塌陷问题：*/
    1.增加父级元素的高度
        #father{
           border:1px #000 solid;
           height:800px;
        }
    2.增加一个空的div标签，清除浮动
    <div class="clear"></div>
    .clear{
       clear:both;
       margin:0;
       padding:0;
    }
    3.在父级元素中增加一个overflow属性
    overflow:hidden;
    4.在父类中添加一个伪类:after(推荐)
     #father:after{
        content:'';
        display:block;
        clear:both;
     }
/*display 对比 float*/
        display方向不可控制
        float浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

相对定位

相对于自己原来的位置进行偏移

position: relative;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
<style>
    div{
        margin:10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px solid #666;
        background-color: aliceblue;
    }
    #first{
        border: 1px solid #864646;
        background-color: #177ad0;
        position: relative;/*相对定位：上下左右*/
        top:-20px;
        left:20px;
    }
    #second{
        border: 1px solid #2fa6cd;
        background-color: #ce77c9;
    }
    #third{
        border: 1px solid #bf1677;
        background-color: #8a3efd;
    }
</style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>
</body>
</html>

绝对定位

position:absolute;
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
<style>
    div{
        margin:10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px solid #666;
        background-color: aliceblue;
		position: relative;
    }
    #first{
        border: 1px solid #864646;
        background-color: #177ad0;
        position: absolute;/*绝对定位：上下左右*/
        top:20px;
        left:20px;
    }
    #second{
        border: 1px solid #2fa6cd;
        background-color: #ce77c9;
    }
    #third{
        border: 1px solid #bf1677;
        background-color: #8a3efd;
    }
</style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
			body{
				height:1000px;
			}
			div:nth-of-type(1){
				width: 100px;
				height:100px;
				background:#BF1677;
				position: absolute;
				right: 0;
				bottom:0;
			}
			div:nth-of-type(2){
				width: 50px;
				height: 50px;
				background:#2FA6CD;
				position: fixed;	/* 固定定位 */
				right: 0;
				bottom:0;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
	</body>
</html>

背景透明度、图层

opacity:0.5  背景透明度
z-index：999 图层

layui

jQuery 完整 ajax示例

$(function(){
    //请求参数
    var list = {};
    //
    $.ajax({
        //请求方式
        type : "POST",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url : "http://127.0.0.1/admin/list/",
        //数据，json字符串
        data : JSON.stringify(list),
        //请求头
        beforeSend: function(XHR) {
			XHR.setRequestHeader('timestamp', new Date().getTime());
			XHR.setRequestHeader('Authorization', 'bearer ' + sessionStorage.ACCESS_TOKEN);
		},
        //请求成功
        success : function(result) {
            console.log(result);
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });
});

table

表格异步请求

数据的异步请求由以下几个参数组成：

参数名功能
url接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
method接口http请求类型，默认：get
where接口的其它参数。如：where: {token: ‘sasasas’, id: 123}
contentType发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json’
headers接口的请求头。如：headers: {token: ‘sasasas’}

parseData

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});

request

用于对分页请求的参数：page、limit重新设定名称，如：

table.render({
  elem: '#demp'
  ,url: ''
  ,request: {
    pageName: 'curr' //页码的参数名称，默认：page
    ,limitName: 'nums' //每页数据量的参数名，默认：limit
  }
  //,…… //其他参数
});

response

您还可以借助 response 参数来重新设定返回的数据格式，如：

table.render({
  elem: '#demp'
  ,url: ''
  ,response: {
    statusName: 'status' //规定数据状态的字段名称，默认：code
    ,statusCode: 200 //规定成功的状态码，默认：0
    ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
    ,countName: 'total' //规定数据总数的字段名称，默认：count
    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
  } 
  //,…… //其他参数
});

重新规定的数据格式

{
  "status": 200,
  "hint": "",
  "total": 1000,
  "rows": []
}

done - 数据渲染完的回调

无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。

table.render({ //其它参数在此省略
  done: function(res, curr, count){
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);
    
    //得到当前页码
    console.log(curr); 
    
    //得到数据总量
    console.log(count);
  }
});

defaultToolbar - 头部工具栏右侧图标

类型：Array，默认值：[“filter”,“exports”,“print”]

该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：

  • filter: 显示筛选图标
  • exports: 显示导出图标
  • print: 显示打印图标

可根据值的顺序显示排版图标，如：

defaultToolbar: [‘filter’, ‘print’, ‘exports’]

另外你还可以无限扩展图标按钮

table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});

text - 自定义文本

table 模块会内置一些默认的文本信息，如果想修改，你可以设置以下参数达到目的。

table.render({ //其它参数在此省略
  text: {
    none: '暂无相关数据' //默认：无数据。
  }
});

initSort - 初始排序

用于在数据表格渲染完毕时，默认按某个字段排序。

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  initSort: {
    field: 'id' //排序字段，对应 cols 设定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
  }
});
 
等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>

height - 设定容器高度

可选值说明示例
不填写默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条-
固定值设定一个数字，用于定义容器高度，当容器中的内容超出了该高度时，会自动出现纵向滚动条height: 315
full-差值高度将始终铺满，无论浏览器尺寸如何。这是一个特定的语法格式，其中 full 是固定的，而 差值 则是一个数值，这需要你来预估，比如：表格容器距离浏览器顶部和底部的距离“和”height: ‘full-20’

设定表格外观

参数名可选值备注
skinline （行边框风格） row （列边框风格） nob （无边框风格）用于设定表格风格，若使用默认风格不设置该属性即可
eventrue/false若不开启隔行背景，不设置该参数即可
sizesm （小尺寸） lg （大尺寸）用于设定表格尺寸，若使用默认尺寸不设置该属性即可
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  skin: 'line' //行边框风格
  ,even: true //开启隔行背景
  ,size: 'sm' //小尺寸的表格
}); 
 
等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>

基础方法

 table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
> table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
> table.reload(id, options, deep); //表格重载
> table.resize(id); //重置表格尺寸
> table.exportFile(id, data, type); //导出数据
> table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）

获取选中行

该方法可获取到表格所有的选中行相关数据

语法：table.checkStatus(‘ID’)，其中 ID 为基础参数 id 对应的值

【自动化渲染】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【方法渲染】
table.render({ //其它参数省略
  id: 'idTest'
});

var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
 
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

重置表格尺寸

该方法可重置表格尺寸和结构，其内部完成了：固定列高度平铺、动态分配列宽、容器滚动条宽高补丁 等操作。它一般用于特殊情况下（如“非窗口 resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能友好展示。

语法：table.resize(‘ID’)，其中 ID 为基础参数 id 对应的值

table.render({ //其它参数省略
  ,elem: '#demo'
  //,…… //其它参数
  ,id: 'idTest'
});
 
//执行表格“尺寸结构”的重置，一般写在对应的事件中
table.resize('idTest');

表格重载

很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。

语法说明适用场景
table.reload(ID, options, deep)参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false 注意：deep 参数为 layui 2.6.0 开始新增。所有渲染方式
tableIns.reload(options, deep)参数同上 tableIns 可通过 var tableIns = table.render() 得到仅限方法级渲染
//由于 2.6.0 之前的版本是采用深重载，
//所以如果您之前真实采用了深重载机制，那么建议将以下代码放入您的全局位置，从而可对老项目起到兼容作用
var tableReload = table.reload;
table.reload = function(){
  var args = [];
  layui.each(arguments, function(index, item){
    args.push(item);
  });
  args[2] === undefined && (args[2] = true);
  return tableReload.apply(null, args);
};
//但如果你之前没有采用深重载机制，也可以不放。不放甚至可以解决你之前因为多次 reload 而带来的各种参数重叠问题

导出任意数据

尽管 table 的工具栏内置了数据导出按钮，但有时你可能需要通过方法去导出任意数据，那么可以借助以下方法：
语法：table.exportFile(id, data, type)

var ins1 = table.render({
  elem: '#demo'
  ,id: 'test'
  //,…… //其它参数
})      
      
//将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据

事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：

table.exportFile(['名字','性别','年龄'], [
  ['张三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls

事件

语法：table.on(‘event(filter)’, callback);
注：event 为内置事件名，filter 为容器 lay-filter 设定的值
目前所支持的所有事件见下文

默认情况下，事件所触发的是全部的table模块容器，但如果你只想触发某一个容器，使用事件过滤器即可。
假设原始容器为：

那么你的事件写法如下： 

//以复选框事件为例
table.on('checkbox(test)', function(obj){
  console.log(obj)
});
触发头部工具栏事件

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发

原始容器
<table id="demo" lay-filter="test"></table>
 
工具栏模板：
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
 
<script;>
//JS 调用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他参数
});
 
//触发事件
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
</script>
触发复选框选择
table.on('checkbox(test)', function(obj){
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
触发单选框选择

点击表格单选框时触发，回调函数返回一个 object 参数，携带的成员如下：

table.on('radio(test)', function(obj){ //test 是 table 标签对应的 lay-filter 属性
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
});
触发单元格编辑

单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.value); //得到修改后的值
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.data); //所在行的所有相关数据  
});
触发行单双击事件

点击或双击行时触发。

//触发行单击事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});
 
//触发行双击事件
table.on('rowDouble(test)', function(obj){
  //obj 同上
});
触发行中工具条点击事件

下述是 toolbar 对应的模板，它可以存放在页面的任意位置：

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
 
注意：属性 lay-event="" 是模板的关键所在，值可随意定义。

接下来我们可以借助 table模块的工具条事件，完成不同的操作功能：

//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});
触发排序切换

点击表头排序时触发，它通用在基础参数中设置 autoSort: false 时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个 object 参数，携带的成员如下：

//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
  elem: '#id'
  ,autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
  //,… //其它参数省略
});
 
//触发排序事件 
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
 
  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
  table.reload('idTest', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field //排序字段
      ,order: obj.type //排序方式
    }
  });
  
  layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

vue

组件路由传参

// 页面跳转
this.$router.push('/goods/' + this.searchForm.keywords);

//router
{
  path: '/goods/:keywords',
  name:'goods',
  component: Goods,
  children:[
  ]
}

//取参
this.searchForm.keywords = this.$route.params.keywords;

路由拦截

router.beforeEach((to, from, next) => {
  if (window.sessionStorage.getItem('tokenStr')) {
    next();
  }
  else if(to.path==='/registry'){
    next();}
  else {
    next();
    next({path:'/'});
  }
})

后端接口代理跨域

let proxyObj = {} // 代理对象

proxyObj['/'] = {
    // websocket
    ws: false,
    // 代理目标地址
    target: 'http://localhost:8081',
    // 发送请求头 host 会被设置 target
    changeOrigin: true,
    // 不重写请求地址
    pathRewrite: {
        '^/': '/'
    }
}


// 访问的默认的路径和端口
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj // 代理
    },
       lintOnSave:false//关闭语法检测
}

请求响应API

import axios from "axios";
import {Message} from "element-ui";
import router from "@/router";

// 请求拦截器
axios.interceptors.request.use(config => {
    // 如果存在 token，请求携带这个 token( 登录的时候 把 token 存入了 sessionStorage ）
    if (window.sessionStorage.getItem("tokenStr")) {
        // token 的key : Authorization ; value: tokenStr
        config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr')
    }
    return config;
},error => {
    console.log(error)
})

// 响应拦截器 - 统一处理消息提示
axios.interceptors.response.use(success => {
    // 业务逻辑错误
    if (success.status && success.status === 200) { // 调到接口
        // 后端：500 业务逻辑错误，401 未登录，403 无权访问；
        if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) {
            Message.error({message: success.data.message})
            return
        }
        if (success.data.message) { // 输出后端 添加成功 之类的信息
            Message.success({message: success.data.message})
        }
    }
    return success.data
}, error => { // 没访问到后端接口
    if (error.response.code === 504 || error.response.code === 404) {
        Message.error({message: '服务器被吃掉了'})
    } else if (error.response.code === 403) {
        Message.error({message: '权限不足，请联系管理员！'})
    } else if (error.response.code === 401) {
        Message.error({message: '您还未登录，请登录！'})
        router.replace('/') // 路由替换
    } else {
        if (error.response.data.message) {
            Message.error({message: error.response.data.message});

        } else {
            Message.error({message: '未知错误！'})
        }
    }
    return error;
})

// 预备前置路径
let base = '';

// 传送 json 格式的 post 请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
    })
}

// 传送 json 格式的 get 请求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}

// 传送 json 格式的 put 请求
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}

// 传送 json 格式的 delete 请求
export const deleteRequest = (url, params) => {
    return axios({
        method: 'DELETE',
        url: `${base}${url}`,
        data: params
    })
}

页面跳转

window.open('decision.html','_self');

解析URL

var id = decodeURI(GetQueryString("id"));
function GetQueryString(name)
{
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return unescape(r[2]); return null;
}

解析HTML

var HtmlUtil = {
    /*1.用浏览器内部转换器实现html转码*/
    htmlEncode:function (html){
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement ("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(旧版火狐，google支持)
        (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
        var output = temp.innerHTML;
        temp = null;
        return output;
    },
    /*2.用浏览器内部转换器实现html解码*/
    htmlDecode:function (text){
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
        temp.innerHTML = text;
        //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },
    /*3.用正则表达式实现html转码*/
    htmlEncodeByRegExp:function (str){
        var s = "";
        if(str.length == 0) return "";
        s = str.replace(/&/g,"&amp;");
        s = s.replace(/</g,"&lt;");
        s = s.replace(/>/g,"&gt;");
        s = s.replace(/\s/g,"&nbsp;");
        s = s.replace(/\'/g,"&#39;");
        s = s.replace(/\"/g,"&quot;");
        return s;
    },
    /*4.用正则表达式实现html解码*/
    htmlDecodeByRegExp:function (str){
        var s = "";
        if(str.length == 0) return "";
        s = str.replace(/&amp;/g,"&");
        s = s.replace(/&lt;/g,"<");
        s = s.replace(/&gt;/g,">");
        s = s.replace(/&nbsp;/g," ");
        s = s.replace(/&#39;/g,"\'");
        s = s.replace(/&quot;/g,"\"");
        return s;
    }
};
歪嘴战神~
关注
layui批量添加选中表格table的数据
jduksa的博客
01-28 1384
//批量添加 html界面 @{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-eq...
layui框架学习（39：数据表格_主要基础参数）
gc_2299的博客
08-24 722
学习layui的数据表格模块中主要基础参数的用法
element-ui框架table表格的列筛选 获取值传给后端
MISS_CJL的博客
10-21 3691
由于数据需要根据列筛选选中的值做特殊的处理，所以我要把选中值传到后端。 代码： <el-table :data="tableData" style="width: 100%" @filter-change="handleFilterChange"> <el-table-column prop="tag" label="标...
LayUI 问题汇总
ling1998的博客
05-16 1904
1、警告信息 前提条件：使用的是Chrome浏览器 警告信息（如下图所示）：DevTools failed to load source map: Could not load content for http://localhost:8088/js/lay-module/auth/jwt-decode.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE 解决：这个警告信息并不影响使用，如果不想显示这个警
实现layui筛选列后基于sheetjs导出
qq_48743087的博客
06-21 370
实现layui筛选列后基于sheetjs导出。
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端学习笔记(精华总结）.zip
11-14
前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习...
整理的前端 学习笔记资料
08-14
通常，前端学习笔记会包括HTML、CSS、JavaScript这三个基础核心技术，以及相关的框架和库，如React、Vue、Angular等。还可能涉及前端工程化，如模块化、构建工具（Webpack、Gulp）、状态管理（Redux、Vuex）以及响应...
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
漂亮头部工具栏切换
11-01
漂亮的头部工具栏切换 html页面 可自己修改
Layui 数据表格多条件查询与后端交互
z60015260的博客
06-15 5306
这里记录下layui数据表格多个查询条件数据提交查询,数据库返回对应数据，数据库使用第三方模块flask_sqlalchemy1.使用table.reload()方法对表格重载 2.html完整代码 1.flask完整代码 2.这里构建了一个查询参数对象ModelFilter，当查询条件不为空时，则增加到参数构建filters变量中，可以快速完成多种条件的查询，减少SQL代码3.支持分页查询......
若依表格默认选中并将选中的值传到后台
weixin_42159251的博客
08-04 1700
$(function () { var options = { url: prefix + "/distributionFactoryList", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "
多个下拉框循环显示 点保存时将下拉框字段数据传给后端
月影神社
10-20 1193
多个下拉框循环显示 点保存时将下拉框字段数据传给后端
layui table 的 筛选列，怎么实现记忆功能，刷新不丢失
Ant_yi的博客
03-06 816
后台加载给前端的table字段很多，一两百个，但是每个人关注的字段不同，有些人会设置这个defaultToolbar中的列字段，但是每次进去页面都得重新设置，很麻烦。想法是，defaultToolbar的filter这个功能中，用户自定义显示列时保存起来，下次进入页面默认加载用户的设置。
Layui表格头部工具栏取消默认的三个功能
qq_38152400的博客
12-28 4701
在toolbar开启的状态下，通过配置defaultToolbar: [] 可以取消默认的所有功能，默认开启的是所有的defaultToolbar: [ ‘filter’, ‘print’, ‘exports’] layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/zjjgx/getData'
layui-数据表格的实现
code袁的博客
12-30 3436
layui-数据表格的实现 手把手的教程 1. 下载layui的资源包 https://gitee.com/sentsin/layui?_from=gitee_search 2.导入到项目中 3.新建web项目 3.1 项目中layui的引入，主要引入两个东西分别是css和js css的引入 js的引入 3.2 建立json文件（前端展示不涉及数据库数据） { "code": 0, "msg": "", "count": 1000, "data": [ { "id": 10
LayUI的头部工具栏
热门推荐
刘学文的博客
06-27 1万+
layUI总如何显示头部工具栏 只需要在原始表格中加入如下代码即可 toolbar: ‘#toolbar0’, 加入之后的代码为这样，其中，#toolbar0是自定义的js代码块儿，如果无此js代码块儿，则默认显示layUI自带的头部按钮 table.render({ elem: ‘#commodity’, //指定原始表格元素选择器（推荐id选择器） url: ******, ...
layui自定义工具栏
weixin_44588946的博客
06-09 8323
layui自定义工具栏 给大家分享的功能是layui自定义工具栏 功能效果：开启数据表格头部工具栏区域 关键参数：toolbar 参数类型：String/DOM/Boolean 参数说明：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器 toolbar: ‘xxx’ //直接传入工具栏模板字符 toolbar: true //仅开启工具栏，不显示左侧模板 toolba...
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值