group_add使用ajax

connect.py

@@ -259,6 +259,7 @@ def verify_connect(username, part_ip):
         color_print('No Permission or No host.', 'red')
     else:
         username, password, host, port = get_connect_item(username, ip_matched[0])
+        print username, password, host, port
         connect(username, password, host, port, LOGIN_NAME)
 
 

jumpserver/templatetags/mytags.py

@@ -33,7 +33,7 @@ def get_role(user_id):
 def groups_str(username):
     groups = []
     user = User.objects.get(username=username)
-    for group in user.user_group.filter(Q(type='A') | Q(type='M')):
+    for group in user.user_group.filter(type='A'):
         groups.append(group.name)
     if len(groups) < 4:
         return ' '.join(groups)
@@ -41,6 +41,16 @@ def groups_str(username):
         return "%s ..." % ' '.join(groups[0:3])
 
 
+@register.filter(name='group_manage_str')
+def group_manage_str(username):
+    user = User.objects.get(username=username)
+    group = user.user_group.filter(type='M')
+    if group:
+        return group[0].name
+    else:
+        return ''
+
+
 @register.filter(name='get_item')
 def get_item(dictionary, key):
     return dictionary.get(key)
@@ -70,8 +80,8 @@ def perm_count(group_id):
 def group_type_to_str(type_name):
     group_types = {
         'P': '绉佹湁缁�',
-        'M': '绠＄悊缁�',
+        'M': '閮ㄩ棬',
-        'A': '鎺堟潈缁�',
+        'A': '鐢ㄦ埛缁�',
     }
     return group_types.get(type_name)
 

jumpserver/urls.py

@@ -14,4 +14,5 @@ urlpatterns = patterns('',
     (r'^jasset/', include('jasset.urls')),
     (r'^jlog/', include('jlog.urls')),
     (r'^jperm/', include('jperm.urls')),
+
 )

juser/urls.py

@@ -9,6 +9,7 @@ urlpatterns = patterns('juser.views',
     (r'^user_add/$', 'user_add'),
     (r'^user_list/$', 'user_list'),
     (r'^group_add/$', 'group_add'),
+    (r'^group_add_ajax/$', 'group_add_ajax'),
     (r'^group_list/$', 'group_list'),
     (r'^user_detail/$', 'user_detail'),
     (r'^user_del/$', 'user_del'),

juser/views.py

@@ -4,7 +4,6 @@
 
 import time
 import os
-import hashlib
 import random
 import subprocess
 import ldap
@@ -17,12 +16,14 @@ from django.shortcuts import render_to_response
 from django.core.exceptions import ObjectDoesNotExist
 from django.db.models import Q
 from django.http import HttpResponse
+from django.core.paginator import Paginator, EmptyPage, InvalidPage
 
 from juser.models import UserGroup, User
 from connect import PyCrypt, KEY
 from connect import BASE_DIR
 from connect import CONF
-from django.core.paginator import Paginator, EmptyPage, InvalidPage
+from jumpserver.views import md5_crypt
+
 
 CRYPTOR = PyCrypt(KEY)
 LDAP_ENABLE = CONF.getint('ldap', 'ldap_enable')
@@ -253,16 +254,22 @@ def ldap_del_user(username):
     ldap_conn.delete(sudo_dn)
 
 
-def group_add(request):
+def group_add(request, group_type_select='A'):
     error = ''
     msg = ''
     header_title, path1, path2 = '娣诲姞灞炵粍 | Add Group', 'juser', 'group_add'
     group_types = {
         # 'P': '绉佹湁缁�',
-        'M': '绠＄悊缁�',
+        'M': '閮ㄩ棬',
-        'A': '鎺堟潈缁�',
+        'A': '鐢ㄦ埛缁�',
     }
-    users = User.objects.all()
+
+    users_all = User.objects.all()
+    if group_type_select == 'M':
+        users = [user for user in users_all if not user.user_group.filter(type='M')]
+    else:
+        users = users_all
+
     if request.method == 'POST':
         group_name = request.POST.get('group_name', '')
         group_type = request.POST.get('group_type', 'A')
@@ -287,9 +294,20 @@ def group_add(request):
     return render_to_response('juser/group_add.html', locals())
 
 
+def group_add_ajax(request):
+    group_type = request.POST.get('type', 'A')
+    users_all = User.objects.all()
+    if group_type == 'A':
+        users = users_all
+    else:
+        users = [user for user in users_all if not user.user_group.filter(type='M')]
+
+    return render_to_response('juser/group_add_ajax.html', locals())
+
+
 def group_list(request):
     header_title, path1, path2 = '鏌ョ湅灞炵粍 | Show Group', 'juser', 'group_list'
-    groups = contact_list = UserGroup.objects.filter(Q(type='M') | Q(type='A')).order_by('id')
+    groups = contact_list = UserGroup.objects.filter(Q(type='M') | Q(type='A')).order_by('type')
     p = paginator = Paginator(contact_list, 10)
 
     try:
@@ -328,8 +346,8 @@ def group_edit(request):
     header_title, path1, path2 = '淇敼灞炵粍 | Edit Group', 'juser', 'group_edit'
     group_types = {
         # 'P': '绉佹湁缁�',
-        'M': '绠＄悊缁�',
+        'M': '閮ㄩ棬',
-        'A': '鎺堟潈缁�',
+        'A': '鐢ㄦ埛缁�',
     }
     if request.method == 'GET':
         group_id = request.GET.get('id', None)
@@ -341,7 +359,7 @@ def group_edit(request):
         users_selected = group.user_set.all()
         users = [user for user in users_all if user not in users_selected]
 
-        return render_to_response('juser/group_add.html', locals())
+        return render_to_response('juser/group_edit.html', locals())
     else:
         group_id = request.POST.get('group_id', None)
         group_name = request.POST.get('group_name', None)
@@ -407,9 +425,10 @@ def user_edit(request):
         password = user.password
         ssh_key_pwd = user.ssh_key_pwd
         name = user.name
-        all_group = UserGroup.objects.filter(Q(type='M') | Q(type='A'))
+        manage_groups = UserGroup.objects.filter(type='M')
-        groups = user.user_group.filter(Q(type='M') | Q(type='A'))
+        auth_groups = UserGroup.objects.filter(type='A')
-        groups_str = ' '.join([str(group.id) for group in groups])
+        manage_group_id = user.user_group.get(type='M').id
+        groups_str = ' '.join([str(group.id) for group in auth_groups])
         user_role = {'SU': u'瓒呯骇绠＄悊鍛�', 'GA': u'缁勭鐞嗗憳', 'CU': u'鏅�氱敤鎴�'}
         role_post = user.role
         ssh_pwd = user.ssh_pwd
@@ -420,8 +439,11 @@ def user_edit(request):
         password = request.POST.get('password', None)
         name = request.POST.get('name', None)
         email = request.POST.get('email', '')
-        groups = request.POST.getlist('groups', None)
+        manage_group_id = request.POST.get('manage_group', '')
-        groups_str = ' '.join(groups)
+        auth_groups = request.POST.getlist('groups', None)
+        groups = auth_groups
+        groups.append(manage_group_id)
+        groups_str = ' '.join(auth_groups)
         role_post = request.POST.get('role', None)
         ssh_pwd = request.POST.get('ssh_pwd', None)
         ssh_key_pwd = request.POST.get('ssh_key_pwd', None)
@@ -464,14 +486,18 @@ def user_add(request):
     msg = ''
     header_title, path1, path2 = '娣诲姞鐢ㄦ埛 | Add User', 'juser', 'user_add'
     user_role = {'SU': u'瓒呯骇绠＄悊鍛�', 'GA': u'缁勭鐞嗗憳', 'CU': u'鏅�氱敤鎴�'}
-    all_group = UserGroup.objects.filter(Q(type='M') | Q(type='A')).order_by('-type')
+    manage_groups = UserGroup.objects.filter(type='M')
+    auth_groups = UserGroup.objects.filter(type='A')
     if request.method == 'POST':
         username = request.POST.get('username', None)
         password = request.POST.get('password', '')
         name = request.POST.get('name', None)
         email = request.POST.get('email', '')
-        groups = request.POST.getlist('groups', None)
+        manage_group_id = request.POST.get('manage_group')
-        groups_str = ' '.join(groups)
+        auth_groups = request.POST.getlist('groups', None)
+        groups = auth_groups
+        groups.append(manage_group_id)
+        groups_str = ' '.join(auth_groups)
         role_post = request.POST.get('role', 'CU')
         ssh_pwd = request.POST.get('ssh_pwd', '')
         ssh_key_pwd = request.POST.get('ssh_key_pwd', '')

templates/foot_script.html

@@ -1,5 +1,6 @@
 <!-- Mainly scripts -->
-
+<script src="/static/js/jquery-2.1.1.js"></script>
+<script src="/static/js/bootstrap.min.js"></script>
 <script src="/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
 <script src="/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
 <script src="/static/js/bootstrap-dialog.js"></script>
@@ -18,6 +19,10 @@
 <!-- Peity -->
 <script src="/static/js/demo/peity-demo.js"></script>
 
+<script src="/static/js/base.js"></script>
+
+
+
 <!-- active menu -->
 <script>
     var str = document.location.pathname.split("/")[1];

templates/head_script.html

@@ -1,13 +1,7 @@
 <script src="/static/js/jquery-2.1.1.js"></script>
 <script src="/static/js/bootstrap.min.js"></script>
-<script src="/static/js/base.js"></script>
+
 <script>
-    $(document).ready(function(){
-        $('.i-checks').iCheck({
-            checkboxClass: 'icheckbox_square-green',
-            radioClass: 'iradio_square-green'
-        });
-    });
 
     function selectAll(){
          var checklist = document.getElementsByName ("selected");
@@ -43,12 +37,12 @@
 
 </script>
 
-
+<!-- validator js -->
+<script src="/static/js/validator/jquery.validator.js"></script>
+<script src="/static/js/validator/zh_CN.js"></script>
 
 
 <!-- pop windows -->
 <script src="/static/js/jquery.colorbox.js"></script>
 
-<!-- validator js -->
+
-<script src="/static/js/validator/jquery.validator.js"></script>
-<script src="/static/js/validator/zh_CN.js"></script>

templates/juser/group_add.html

@@ -34,12 +34,6 @@
                             {% if msg %}
                                 <div class="alert alert-success text-center">{{ msg }}</div>
                             {% endif %}
-                            <div class="form-group hidden">
-                                <label for="group_id" class="col-sm-2 control-label">ID<span class="red-fonts">*</span></label>
-                                <div class="col-sm-8">
-                                    <input id="group_id" name="group_id" placeholder="Group name" type="text" class="form-control" value="{{ group_id }}">
-                                </div>
-                            </div>
                             <div class="form-group">
                                 <label for="group_name" class="col-sm-2 control-label">缁勫悕<span class="red-fonts">*</span></label>
                                 <div class="col-sm-8">
@@ -50,9 +44,9 @@
                             <div class="form-group">
                                 <label for="group_type" class="col-sm-2 control-label">绫诲瀷<span class="red-fonts">*</span></label>
                                 <div class="col-sm-8">
-                                    <select id="group_type" name="group_type" class="form-control m-b">
+                                    <select id="group_type" name="group_type" class="form-control m-b" onchange="change_type(this.value)">
                                         {% for t, type_name in group_types.items %}
-                                            {% ifequal t group_type %}
+                                            {% ifequal t group_type_select %}
                                                 <option value="{{ t }}" selected>{{ type_name }}</option>
                                             {% else %}
                                                 <option value="{{ t }}">{{ type_name }}</option>
@@ -63,7 +57,7 @@
                             </div>
                             <div class="hr-line-dashed"></div>
                             <div class="form-group">
-                                <label for="groups" class="col-lg-2 control-label">鐢ㄦ埛</label>
+                                <label for="users" class="col-lg-2 control-label">鐢ㄦ埛</label>
                                 <div class="col-sm-3">
                                     <select id="users" name="users" size="12" class="form-control m-b" multiple>
                                         {% for user in users %}
@@ -80,9 +74,6 @@
                                 <div class="col-sm-3">
                                     <div>
                                         <select id="users_selected" name="users_selected" class="form-control m-b" size="12"  multiple>
-                                            {% for user in users_selected %}
-                                            <option value="{{ user.id }}">{{ user.name }}</option>
-                                        {% endfor %}
                                         </select>
                                     </div>
                                 </div>
@@ -98,8 +89,8 @@
                             <div class="hr-line-dashed"></div>
                             <div class="form-group">
                                 <div class="col-sm-4 col-sm-offset-2">
-                                    <button class="btn btn-white" type="submit">鍙栨秷</button>
+                                    <button class="btn btn-white" type="reset">鍙栨秷</button>
-                                    <button class="btn btn-primary" type="submit" onclick="javascript: (function(){$('#users_selected option').each(function(){$(this).prop('selected', true)})})()">纭淇濆瓨</button>
+                                    <button id="submit_button" class="btn btn-primary" type="submit">纭淇濆瓨</button>
                                 </div>
                             </div>
                         </form>
@@ -131,5 +122,23 @@ $('#groupForm').validator({
         form.submit();
     }
 });
+
+function change_type(type){
+    $.post('/juser/group_add_ajax/',
+           {'type': type},
+           function(data){
+               $('#users').html(data)
+           })
+}
+
+$(document).ready(function(){
+    $("#submit_button").click(function(){
+        $('#users_selected option').each(function(){
+            $(this).prop('selected', true)
+        })
+    })
+})
+
+
 </script>
 {% endblock %}

templates/juser/group_add_ajax.html

@@ -0,0 +1,4 @@
+{% for user in users %}
+    <option value="{{ user.id }}">{{ user.name }}</option>
+{% endfor %}
+

templates/juser/group_edit.html

@@ -0,0 +1,133 @@
+{% extends 'base.html' %}
+{% load mytags %}
+{% block content %}
+    {% include 'nav_cat_bar.html' %}
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-lg-10">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>濉啓鍩烘湰淇℃伅  <small> Fill group info.</small></h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">鏈惎鐢� 1</a>
+                                </li>
+                                <li><a href="#">鏈惎鐢� 2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <form id="groupForm" method="post" class="form-horizontal" action="">
+                            {% if error %}
+                                <div class="alert alert-warning text-center">{{ error }}</div>
+                            {% endif %}
+                            {% if msg %}
+                                <div class="alert alert-success text-center">{{ msg }}</div>
+                            {% endif %}
+                            <div class="form-group">
+                                <label for="group_name" class="col-sm-2 control-label">缁勫悕<span class="red-fonts">*</span></label>
+                                <div class="col-sm-8">
+                                    <input id="group_name" name="group_name" placeholder="Group name" type="text" class="form-control" value="{{ group_name }}">
+                                    <input id="group_id" name="group_id" type="text" class="form-control" value="{{ group.id }}" style="display: none">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label for="group_type" class="col-sm-2 control-label">绫诲瀷<span class="red-fonts">*</span></label>
+                                <div class="col-sm-8">
+                                    <input class="form-control"  value="{{ group_type|group_type_to_str }}" readonly>
+                                    <input name="group_type" class="form-control" id="group_type" value="{{ group_type }}" style="display: none">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label for="users" class="col-lg-2 control-label">鐢ㄦ埛</label>
+                                <div class="col-sm-3">
+                                    <select id="users" name="users" size="12" class="form-control m-b" multiple>
+                                        {% for user in users %}
+                                            <option value="{{ user.id }}">{{ user.name }}</option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                                <div class="col-sm-1">
+                                    <div class="btn-group" style="margin-top: 50px;">
+                                        <button type="button" class="btn btn-white" onclick="move('users', 'users_selected')"><i class="fa fa-chevron-right"></i></button>
+                                        <button type="button" class="btn btn-white" onclick="move('users_selected', 'users')"><i class="fa fa-chevron-left"></i> </button>
+                                    </div>
+                                </div>
+                                <div class="col-sm-3">
+                                    <div>
+                                        <select id="users_selected" name="users_selected" class="form-control m-b" size="12"  multiple>
+                                            {% for user in users_selected %}
+                                                <option value="{{ user.id }}">{{ user.name }}</option>
+                                            {% endfor %}
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label for="comment" class="col-sm-2 control-label">澶囨敞</label>
+                                <div class="col-sm-8">
+                                    <input id="comment" name="comment" placeholder="Comment" type="text" class="form-control" value="{{ comment }}">
+                                </div>
+                            </div>
+
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <div class="col-sm-4 col-sm-offset-2">
+                                    <button class="btn btn-white" type="reset">鍙栨秷</button>
+                                    <button id="submit_button" class="btn btn-primary" type="submit">纭淇濆瓨</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+<script>
+$('#groupForm').validator({
+    timely: 2,
+    theme: "yellow_right_effect",
+    fields: {
+        "group_name": {
+            rule: "required",
+            tip: "杈撳叆缁勫悕",
+            ok: "",
+            msg: {required: "蹇呴』濉啓!"}
+        },
+        "group_type": {
+            rule: "checked",
+            tip: "閫夋嫨缁勭被鍨�",
+            ok: "",
+            msg: {required: "鑷冲皯閫夋嫨涓�涓粍!"}
+        }
+    },
+    valid: function(form) {
+        form.submit();
+    }
+});
+
+$(document).ready(function(){
+    $("#submit_button").click(function(){
+        $('#users_selected option').each(function(){
+            $(this).prop('selected', true)
+        })
+    })
+})
+
+
+</script>
+{% endblock %}

templates/juser/user_add.html

@@ -71,21 +71,36 @@
                             </div>
                             <div class="hr-line-dashed"></div>
                             <div class="form-group">
-                                <label for="groups" class="col-lg-2 control-label">灞炵粍<span class="red-fonts">*</span></label>
+                                <label for="manage_group" class="col-lg-2 control-label">閮ㄩ棬<span class="red-fonts">*</span></label>
                                 <div class="col-sm-8">
-                                    <select id="groups" name="groups" class="form-control m-b" multiple size="10">
+                                    <select id="manage_group" name="manage_group" class="form-control m-b">
-                                        {% for group in all_group %}
+                                        {% for group in manage_groups %}
+                                            {% ifequal group.id manage_group_id %}
+                                                <option value="{{ group.id }}" selected>{{ group.name }}</option>
+                                            {% else %}
+                                                <option value="{{ group.id }}">{{ group.name }}</option>
+                                            {% endifequal %}
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label for="groups" class="col-lg-2 control-label">鐢ㄦ埛缁�</label>
+                                <div class="col-sm-8">
+                                    <select id="groups" name="groups" class="form-control m-b" multiple size="12">
+                                        {% for group in auth_groups %}
                                             {% if groups_str %}
                                                 {% if group.id|int2str in groups_str %}
-                                                    <option value="{{ group.id }}" selected>{{ group.name }} --- {{ group.type|group_type_to_str }}</option>
+                                                    <option value="{{ group.id }}" selected>{{ group.name }}</option>
                                                 {% else %}
-                                                    <option value="{{ group.id }}">{{ group.name }} --- {{ group.type|group_type_to_str }}</option>
+                                                    <option value="{{ group.id }}">{{ group.name }}</option>
                                                 {% endif %}
                                             {% else %}
                                                 {% if forloop.first %}
-                                                    <option value="{{ group.id }}" selected>{{ group.name }} --- {{ group.type|group_type_to_str }}</option>
+                                                    <option value="{{ group.id }}" selected>{{ group.name }}</option>
                                                 {% else %}
-                                                    <option value="{{ group.id }}">{{ group.name }} --- {{ group.type|group_type_to_str }}</option>
+                                                    <option value="{{ group.id }}">{{ group.name }}</option>
                                                 {% endif %}
                                             {% endif %}
                                         {% endfor %}
@@ -179,11 +194,11 @@ $('#userForm').validator({
             ok: "",
             msg: {required: "蹇呴』濉啓"}
         },
-        "groups": {
+        "manage_group": {
             rule: "checked",
-            tip: "閫夋嫨鐢ㄦ埛缁�",
+            tip: "閫夋嫨閮ㄩ棬",
             ok: "",
-            msg: {checked: "鑷冲皯閫夋嫨涓�涓�缁�"}
+            msg: {checked: "鑷冲皯閫夋嫨涓�涓�閮ㄩ棬"}
         },
         "name": {
             rule: "required",

templates/juser/user_list.html

@@ -42,7 +42,8 @@
                                 <th class="text-center">ID</th>
                                 <th class="text-center">鐢ㄦ埛鍚�</th>
                                 <th class="text-center">濮撳悕</th>
-                                <th class="text-center">灞炵粍</th>
+                                <th class="text-center">閮ㄩ棬</th>
+                                <th class="text-center">鐢ㄦ埛缁�</th>
                                 <th class="text-center">瑙掕壊</th>
                                 <th class="text-center">婵�娲�</th>
                                 <th class="text-center">鎿嶄綔</th>
@@ -57,6 +58,7 @@
                                 <td class="text-center"> {{ user.id }} </td>
                                 <td class="text-center"> {{ user.username }} </td>
                                 <td class="text-center"> {{ user.name }} </td>
+                                <td class="text-center"> {{ user.username|group_manage_str }} </td>
                                 <td class="text-center"> {{ user.username|groups_str }}</td>
                                 <td class="text-center">{{ user.id|get_role }}</td>
                                 <td class="text-center">{{ user.is_active|bool2str }}</td>

templates/test.html

@@ -0,0 +1,74 @@
+
+<html>
+<head>
+	<meta charset='utf8'>
+<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
+<style type="text/css">
+
+	.blue
+	{
+		color: blue;
+	}
+</style>
+{#<script>#}
+{#$('html').ajaxSend(function(event, xhr, settings) {#}
+{#    function getCookie(name) {#}
+{#        var cookieValue = null;#}
+{#        if (document.cookie && document.cookie != '') {#}
+{#            var cookies = document.cookie.split(';');#}
+{#            for (var i = 0; i < cookies.length; i++) {#}
+{#                var cookie = jQuery.trim(cookies[i]);#}
+{#                // Does this cookie string begin with the name we want?#}
+{#                if (cookie.substring(0, name.length + 1) == (name + '=')) {#}
+{#                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));#}
+{#                    break;#}
+{#                }#}
+{#            }#}
+{#        }#}
+{#        return cookieValue;#}
+{#    }#}
+{#    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {#}
+{#        // Only send the token to relative URLs i.e. locally.#}
+{#        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));#}
+{#    }#}
+{#});#}
+{#</script>#}
+<script>
+$(document).ready(function(){
+  $("#btn1").click(function(){
+    $("#test").text(function(i,origText){
+    	return "Old text: " + origText + "New text: Hllo" + i
+    })
+  });
+
+  $("#btn2").click(function(){
+    $.post('/test_ajax/',
+          {'name': 'join', 'age': 10},
+          function(data, status){
+            $('#btn1').text(data)
+          })
+
+  });
+
+  $("#btn3").click(function(){
+  	$("p").toggleClass('blue')
+  	// $("p").addClass('blue')
+    // $("p").before("Some thine")
+  });
+})
+</script>
+</head>
+
+<body>
+<p id="test" class="blue">
+  杩欐槸娈佃惤涓殑<b>绮椾綋</b>鏂囨湰銆�
+  <p><span>hello</span></p>
+  
+</p>
+<!-- <input type="text" id="test2" name="nameaaaaaaaaaa" value="绫宠�侀紶"> -->
+<button id="btn1">鏄剧ず鏂囨湰</button>
+<button id="btn2">鏄剧ず HTML</button>
+<button id="btn3">鏄剧ず value</button>
+</body>
+
+</html>