整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
双引号
在js代码中
在js中单、双引号引起来的是字符串，如果我们要在字符串中使用单、双引号，需要反斜杠进行转义
let str='user\'s name'; // or let str=" user's name"; // or let str="she said:\"...\".";
如果在字符串中输出反斜杠，仍然是用反斜杠转义，即2个反斜杠输出1个反斜杠
在html代码中
html标签中，属性值通常用双引号引起来，也可以使用单引号或不用引号。
<input name=user /> <input name="user" /> <input name='user' />
这3种写法都正确，不过通常我们是选择用双引号引起来。
如果我们要在属性值中使用单、双绰号，我们不能直接写成下面这样
<input name=user'name /> <input name="user"name" /> <input name='user'name' />
这些全部是错误的。我们要像在js中对单、双引号转义一样，对属性中的单、双引号转义
在html中输出预留符号，可以使用字符实体转义的形式，这里有简单介绍：http://www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用"的形式，
<input name="user"name" />
除此之外，html还支持十进制与十六进制编码的形式输出字符，如我们知道字符a的ascii码的十进制是97 十六进制是61
所以我们在页面body中输出一个字符a，有以下3种形式
<body> a<!--直接输出--> a<!--十进制输出--> a<!--十六进制输出--> </body>
同样，单双引号也有十进制(单：39，双：34)与十六进制（单：27，双：22），所以我们在属性中输出一个单引号有2种选择，十进制与十六进制
<input name='user'name' /><!--十进制--> <input name='user'name' /><!--十六进制-->
而输出一个双引号则有3种选择
<input name="user"name" /><!--实体--> <input name="user"name" /><!--十进制--> <input name="user"name" /><!--十六进制-->
当js代码遇上实体编码
我们可以通过dom节点提供的事件写上调用js的代码，如点击body弹出hello这个字符串，我们可以写成
<body onclick="alert('hello')">
click here
</body>
如果我们的需求是就弹出一个双引号呢？
根据前述规则，我们要写成：
<body onclick="alert('"')"><!--这里用十进制或十六进制都可以-->
click here
</body>
当然，alert里的单引号也可以使用十进制或十六进制编码
<body onclick="alert("'")"><!--"单引号 '双引号-->
click here
</body>
这样也是可以的。
是不是有点xss的感觉?
如果我们把弹双引号的需求改成单引号呢？
<body onclick="alert(''')"><!--这样html中是合法的，但js中并不合法，因为在js中，中间的单引号并没有转义-->
click here
</body>
如果我们用十进制或十六进制编码呢？
<body onclick="alert('"')"><!--这样可以吗-->
click here
</body>
这样仍然是不可以的
我们要对js字符串中的单引号进行转义，如
<body onclick="alert('\'')"><!--转义后可正确弹出-->
click here
</body>
或
<body onclick="alert('\"')"><!--转义后可正确弹出-->
click here
</body>
前面的onclick="alert('\'')"看起来还正常，后面的这个onclick="alert('\"')"就有点不直观了。因为后面这个看上去反斜杠像在转义&这1个字符，而&在js的字符串中并不需要转义的。
动态输出
如前述的alert弹出的消息，如果是一个变量控制，动态输出呢？
<body onclick="alert('${msg}')">
click here
</body>
那我们这个msg字符串就得注意了，从这个示例来看，这个动态的msg即出现在属性onclick中，也出现在alert的单引号开始的字符串中。
我们要对msg中的双引号转成"或"或"，并对msg中单引号的前面加上一个反斜杠\ ?
题外话：对msg中的反斜杠需要做double处理，因为反斜杠在html属性中并不是特殊的，但在js的字符串中是特殊的。因此正确的做法是对反斜杠及单引号前面各加上一个反斜杠
然而，你并不能保证属性是用双引号，alert中的字符串用的是单引号，因为可以写成下面这样
<body onclick='alert("${msg}")'>
click here
</body>
?
这种情况我们要对msg中的单引号转成'或'，并对msg中双引号前面加上一个反斜杠\
题外话：同上
看上去要根据不同的情况做不同的处理，其实也不需要
我们只需要对单、双引号前面加上一个反斜杠\然后再对单、双引号实体编码即可。
在js中如果反斜杠后面跟的不需要反斜杠转义的字符，那么这个反斜杠是被丢弃的，因此像
var str="user\'s name";
单引号前面多加一个反斜杠也不要紧的。
自动化处理与识别提醒
在magix项目中，由于magix-combine的支持，可识别出属性中js代码的部分，并自动化处理，如
<button mx-click="showName({name:'<%=name%>'})">click here</button>
name这个变量可包含任意的单、双引号及反斜杠。工具自动识别并处理，开发者不需要做任何事情。
而对于这样的写法：
<button mx-click="showName({name:'"'})">click here</button>
<!-- or-->
<button mx-click="showName({name:'\"'})">click here</button>
第一种写法其实并不正确，但第二种情况看上去又怪怪的。magix-combine工具能识别出来是否需要添加反斜杠，并自动添加处理。
第一种需要添加反斜杠，工具会自动加上，并提醒开发者这里的写法是不正确的。
第二种说明开发者意识到了问题所在，自己处理了，工具就不再处理也不再提醒开发者。
作中有个需求需要使用一个双下拉框，该插件大体已经满足了基本的应用，但是对于我需要的需求还有一些区别，在实现过程遇到一些问题，在网上查找关于该方面的介绍，基本没有，完全靠着琢磨源码最终实现，因此记录下。
插件下载地址：https://download.csdn.net/download/l1994m/10919972
样式如图：
导入 jquery.js
bootstrap.js
doublebox-bootstrap.js
导入 bootstrap.css
doublebox-bootstrap.css
使用的js代码：
var doublefox;
$(function() {
var realNameCode;
var selectedLabelList;
$.ajax({
url:"../uniset/labelList",
async:false,
type:"post",
dataType : "json",
contentType:"application/json",
success: function (data) {
realNameCode = JSON.parse(data); // JOSN.parse(data)；将 字符串换转成JSON对象
},
error:function(data){
console.log("弹窗标签所有列表获取异常");
}
});
//获取选择列表
$.ajax({
url:"../uniset/dynWordsList",
async:false,
type:"post",
dataType : "json",
contentType:"application/json",
success: function (data) {
selectedLabelList = data; //由于返回本来就是Json对象无需进行转换
},
error:function(data){
console.log("已选择标签列表获取异常");
}
});
doublefox = $('.labelSelect').doublebox({
nonSelectedListLabel: '可展示基本信息字段', //左边栏lableName
selectedListLabel: '已展示基本信息字段', //右边栏lableName
preserveSelectionOnMove: 'moved',
moveOnSelect: false,
nonSelectedList:realNameCode, //左边栏列表
selectedList:selectedLabelList, //右边栏已选择列表
optionValue:"fieldCode", //option的选项值
optionText:"memo", // option的文本值
doubleMove:true, //控制全部选择和移除的显示
});
});
在使用过程中，对于插件源码进行修改，犹豫源码是压缩格式，将源码Js复制到notapade++中格式化查看
需求1：右边至多选择9个标签，也就是当选择第10个时进行弹出提示；进行全部选择时，左侧下拉数量大于9或者右侧已经9个时，进行提示。
解决：如果对于选择数量进行显示，需要改动的就是每次选择时触发的函数，对其进行已选择数量判断，查看源码找到对应方法 move，moveAll。
需求2：要求对于鼠标移动上去是中文提示，源码是中文提示；
通过对源码查看：该部分通过这里赋值，因此只要修改源码中对于按钮的提示就好
修改如下
需求3：对于全部移除要进行警告提示操作，
红框中的代码是原来的代码，在外面加了一层警告判断
效果如图：
下面列出了相关修改布局用到的id，方便使用，css文件中或者jsp中直接添加，修改相应的布局
.bootstrap-duallistbox-container .settingUp-btns{
float: left;
margin-left: 20px;
position:relative;
}
/*控制整体select的宽度*/
.col-md-5{
width: 32%;
}
/*控制多选框左边*/
.box1{
margin-left: 80px;
padding-left:40px;
}
/*多选框中间样式*/
.btn-box{
margin-left: 25px;
}
/*控制右半部分select*/
.box2{
padding-left:40px;
}
/*控制两个下拉高度*/
select.labelSelect{
height: 144px;
}
至此所有用到的都进行了说明，希望有所帮助
版权声明：本文为原创文章，转载请注明本页地址。
本人博客连接：https://blog.csdn.net/l1994m/article/details/81709767
order 盒子边框
复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色
语法：border: border-width | border-style | border-color ;
边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。
边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可为盒子边框设置样式，以下示例为实线
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代码
如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓
使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代码
如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。
比如说下面这段代码，上下2px，右2px，左5px。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接输入
颜色的英文名称
rgb值
十六进制
使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代码
上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。
如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。
例如：
/* CSS代码 */
div{
border-top: 5px solid red;
}这段代码指定了上边框的三个属性：粗细、样式、颜色
border-top 包含了：
其他同理
先来看一个示例
/* CSS代码 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
细心的你，一定发现了 border 的边框四条边交接处是斜角。
此刻我们把盒子的宽高设置为 0
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四个三角形一样。
我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。
为 border-color 指定 transparent 值，使盒子边框颜色变透明
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三条边透明之后，就只剩一个三角形了。
完
部分资料引用自：
*请认真填写需求信息，我们会在24小时内与您取得联系。
