您的位置：首页 > Web前端 > CSS

css class中加空格的效果

2016-03-21 09:18 656 查看

class中的空格是为了给html标签同时赋予多个class类名，如下面这段代码，假设不给class为“formtips Error”和“formtips Ok”添加空格的吧，就没办法实现remove()的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery表格</title>

<style type="text/css">

.high{

color:red;}

.Error{

color:#0FF;}

.Ok{

color:#33F;}

</style>

</head>

<body>

<form method="get" action="">

<div class="int">

<label for="username">用户名:</label>

<input type="text" id="username" class="require" />

</div>

<div class="int">

<label for="email">邮箱:</label>

<input type="text" id="email" class="require" />

</div>

<div class="sub">

<input type="submit" value="提交" id="send" />

<input type="reset" id="res" />

</div>

</form>

</body>

<script type="text/javascript" src="../jquery-1.12.1.js"></script>

<script type="text/javascript">

$('form :input.require').each(function(){

var $require = $("<strong class='high'>*</strong>");

$(this).parent().append($require);

//console.log($(this)); //带有require类型的元素

//console.log($(this).parent()); //parent()获得当前匹配元素集合中每个元素的父元素,这里获得了class='int'的元素

});

$('form :input').blur(function(){

var $parent = $(this).parent();

$parent.find(".formtips").remove();

console.log($('.formtips'));

//用户名验证

if($(this).is('#username')){

if(this.value == '' || this.value.length<6){

var errorMsg="输入至少六位用户名";

$parent.append("<span class='formtips Error'>"+errorMsg+'</span>');

}else{

var okMsg = '输入正确';

$parent.append("<span class='formtips Ok'>"+okMsg+'</span>');

}

}

//邮箱验证

if($(this).is('#email')){

if(this.value == '' || (this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){

var errorMsg="输入正确的邮箱地址";

$parent.append("<span class='formtips Error'>"+errorMsg+'</span>');

}else{

var okMsg = '输入正确';

$parent.append("<span class='formtips Ok'>"+okMsg+'</span>');

}

}

});

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航