css class中加空格的效果

最新推荐文章于 2024-04-22 15:22:18 发布

yi_an

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量2.1k

点赞数

文章标签： css 前端 jquery

本文链接：https://blog.csdn.net/yi_an/article/details/50942452

版权

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>

yi_an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css class中加空格的效果

class中的空格是为了给html标签同时赋予多个class类名，如下面这段代码，假设不给class为“formtips Error”和“formtips Ok”添加空格的吧，就没办法实现remove()的方法。jQuery表格 .high{ color:red;} .Error{ color:#
复制链接

扫一扫