1、关于使用:invalid伪类来实现验证不通过样式设置
<style>
input[type=email]:invalid + .next-step{
display: none
}
</style>
</head>
<body>
<form action="">
<input type="email">
<span class="next-step">Next</span>
</form>
2、实现title效果
<style>
span[data-title]{
position: relative;
}
span[data-title]:hover:before {
content: attr(data-title);
position: absolute;
top: -150%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background-color: aqua;
}
</style>
<span>hello, <span data-title="FDSDSLKDJLSJKLJWWOIonosdfs">FED</span></span>
<form action="/s" id="reg">
<input type="text" name="username" value="123">
<input type="text" name="password" value="456">
</form>
<script>
var form = document.forms.namedItem("reg");
// var form = document.getElementById('reg');
console.log(form['username'].value);
console.log(form.password.value);
</script>
4、获取fomr值的方法，jquery改版
<form action="/s" id="reg">
<input type="text" name="username" value="123">
<input type="text" name="username" value="333">
<input type="text" name="password" value="456">
</form>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script>
$.fn.serializeForm = function () {
var o = {},
a = this.serializeArray();
$.each(a, function () {
// 如果存在两个input的name相同，则转成一个数组
if (o[this.name] !== undefined) {
if (!o[this.name].push) { // 当前name是不是数组
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
})
return o;
}
var userdata = $('#reg').serializeForm();
console.log(userdata);
5、一个标签指向
<style>
.chat-msg {
300px;
height: 80px;
border: 1px solid #ccc;
position: relative;
border-radius: 5px;
filter: drop-shadow(0 0 2px #999);
background-color: #fff;
}
.chat-msg:before{
content: '';
position: absolute;
left: -10px;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #ccc;
}
.chat-msg:after {
content: '';
position: absolute;
left: -8px;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #fff;
}
</style>
<div style="margin: 100px 100px;">
<div class="chat-msg">hi 你好呀</div>
</div>
6、利用伪元素
<style>
.or {
text-align: center;
}
.or:before,
.or:after {
content: '';
position: absolute;
line-height: 1;
200px;
height: 1px;
background-color: #ccc;
}
.or:before {
left: 0;
}
.or:after {
right: 0;
}
</style>
</head>
<body>
<p class="or">OR</p>