JavaScript

1.Javascript常用方法:

　　1.prompt()     用户可以在文本框中写入文本

　　运行结果：

　　2.alert()        将内容以浏览器弹窗的方式显示

　　运行结果:

　　3.console.log()    将内容输出在控制台,一般用于程序员的程序调试

　　运行结果:

　　4.document.write()    直接将内容打印在浏览器的页面上

　　运行结果:

 　　5.parseInt()        将其他数据类型转换为int数据类型

2.javascrip常用知识点

　　1.B/S   : browser/server   采用浏览器访问服务器

　　2.C/S   :client/server    采用下载的客户端来访问服务器

　　3. 浏览器是由排版引擎和JavaScript引擎构成的

　　4.JavaScript是严格区分大小写的,结尾的分号是可有可无的,但是为了代码的阅读性还是加上分号比较好

3.字符串的常用方法

　　1. replace() 替换字符串中的某个字符

　　2. split() 使用分隔符，对字符串进行分割成一个字符串数组

　　3. toLowerCase() 将字符串全部转换为小写

　　4. toUpperCase() 将字符串全部转换为大写

　　5. search() 只是返回搜索到的第一个结果，查找字符串中的某个字符的缩影

　　6. substring(start, end) 对一段字符串进行截取， 参数不可以使用负缩影

　　7. slice(start, end) 对一段字符串进行截取，参数可以使用负索引

　　8. substr(start, length) 参数为开始位置的缩影，和需要截取的子字符串的长度

　　9. lastIndexof() 参数是某个字符的缩影，但是这个函数只返回匹配到的最后一个缩影

　　10. indexof() 参数是字符，返回匹配到的第一个结果的缩影

　　11. charAT() 参数是某个字符的索引，返回对应位置的字符

　　12. charCodeAt() 参数是某个字符的缩影，返回的是对应位置的字符的unicode

　　13. string 对象下的方法
　　tring.fromcharcode() 参数为某个字符的unicode，返回相应unicode的字符

4.数组的方法

　　1.arr.length()    返回值为数组的长度,也就是数组中元素的个数

　　2.arr.indexOf()   参数是数组中的元素,返回该元素在数组中的索引

　　3.arr.slice(start, end)   参数是两个索引,可以截取出来一个新的子数组

　　　　　　　　　　　　如果是只有第一个参数,那么就从start索引开始截取到最后一个元素

　　　　　　　　　　　　如果没有参数,那就相当于对这个数组进行了一个copy的操作

　　4.arr.push()       用push添加元素的时候,总是从数组的末尾进行添加

　　5.arr.pop()         用pop将元素进行弹出的时候,也总是从末尾进行弹出的操作

　　6.arr.unshift()     用unshift进行添加元素的时候,总是从数组的开头进行添加

　　7.arr.shift()         用shift进行弹出的元素的时候,总是从数组的开头进行弹出

　　8.arr.reverse()    对数组进行反转,也就是将数组进行倒序

　　9.arr.sort()           对数组进行排序,但是这种排序方法,只能根据Unicode进行排序,就算是数值型也不能依据数值的大小来排序

　　　　　　　　　　如果,需要对数组按照数值的大小来排序,那么就需要使用排序函数作为sort()函数的参数

　　举例:

　　　　

        var test_arr = [1,2,3,5,6,7,4];
        test_arr.sort(ascending_sort);       // 对数组进行数值大小的排序
        console.log(test_arr);
        function ascending_sort(value1, value2){        //  升序排序的函数
            if(value1 > value2)
            {
                return 1;
            }
            else if(value2 > value1)
            {
                return -1;
            }
            else
            {
                return 0;
            }
        }

　　10.arr.splice(需要修改的第一项索引, 项数, 插入新项)      可以删除旧项,并且可以插入新项

　　11.arr1.concat(arr2)       这个函数的功能是将两个数组进行合并,合并为一个全新的数组

　　12.arr.join()               参数为分隔符,将一个数组的里面的所有元素,通过指定的分隔符进行连接为一个字符串

　

2018.11.2（实例练习）

def classes(req):
    user = req.COOKIES.get('user')
    # models.Classes.objects.create(name='一班')
    # models.Classes.objects.create(name='二班')
    # models.Classes.objects.create(name='三班')
    # models.Classes.objects.create(name='四班')

    # if req.method == 'POST':
    #     class_name = req.POST.get('class_name')
    #     # print(class_name)
    #     models.Classes.objects.create(name=class_name)

    if req.method == 'GET':
        # print(req.GET.get('p'))
        start_page = (int(req.GET.get('p', 1))-1)*10
        end_page = int(req.GET.get('p', 1))*10
        now_page = int(req.GET.get('p', 1))

        classes_list = models.Classes.objects.all()
        # print(type(classes_list))
        now_show_classes_list = classes_list[start_page: end_page]
        return render(req, 'classes.html', {'classes_list': now_show_classes_list, 'now_page': now_page, 'name': user})
    elif req.method == 'POST':
        response_dict = {'status': True, 'error': None, 'data': None}

        class_name = req.POST.get('caption', None)

        if class_name:
            obj = models.Classes.objects.create(name=class_name)
            response_dict['data'] = {'id': obj.id, 'name': obj.name}
            # print(obj.id)
            # print(obj.name)
        else:
            response_dict['status'] = False
            response_dict['error'] = '标题不能为空'

        return HttpResponse(json.dumps(response_dict))

后台管理系统的部分ajax实现代码

{% extends 'index.html' %}


{% block css %}

{% endblock %}



{% block content %}
    <div><h1>班级管理</h1></div>

    <div class="modal hide">
        <form action="/classes/" method="post">
                <div><input id="class_name" name="class_name" type="text"></div>
            <div>
                <input id="cancel" type="button" value="取消">
               <!-- <input id="yes" type="submit" value="确定"> -->
                <input id="ajax_submit" type="button" value="ajax提交">
            </div>
        </form>
    </div>
    <div class="shade hide"></div>

    <div><input id="add_class" type="button" value="添加"></div>
    <table border="1px">
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
        {% for classes in classes_list %}
            <tr>
                <td>{{ classes.id }}</td>
                <td>{{ classes.name }}</td>
                <td><a class="change_event">编辑</a> | <a class="del_event">删除</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <div><a id="next_page">下一页</a></div>
{% endblock %}


{% block javasript %}
    <script>
        $(
            function(){
                $('#item_class').addClass('active');
                addClass();
                cancel_event();
                del_event();
                change_event();
                bind_submit();
            }
        );

        function addClass(){
            $('#add_class').click(function(){
            $('.modal, .shade').removeClass('hide');
        })
        }
        function cancel_event(){
            $('#cancel').click(function(){
                $('.modal, .shade').addClass('hide');
            })
        }

        function del_event(){
            $('tbody').on('click', '.del_event', function(){
                alert('删除功能有待完善！');
            })
        }
        function change_event(){
            $('tbody').on('click', '.change_event', function(){
                alert('编辑功能有待完善！');
            })
        }

        function bind_submit(){
            $('#ajax_submit').click(function(){
                var value = $('#class_name').val();
{#                console.log(value);#}
                $.ajax({
                    url:'/classes/',
                    type:'POST',
                    dataType:'JSON',
                    data:{caption: value},
                    success:function(req){
                        if(!req.status){
                            alert(req.error);
                        }else{
                            //location.reload();
                            var tr = document.createElement('tr');
                            var td1 = document.createElement('td');
                            td1.innerText = req.data.id;
                            var td2 = document.createElement('td');
                            td2.innerText = req.data.name;
                            var td3 = document.createElement('td');
                            td3.innerText = ' | ';
                            var a1 = document.createElement('a');
                            var a2 = document.createElement('a');
                            a1.innerText = '编辑';
                            a1.className = 'change_event';
                            a2.innerText = '删除';
                            a2.className = 'del_event';
                            $(td3).prepend(a1);
                            $(td3).append(a2);
                            $(tr).append(td1);
                            $(tr).append(td2);
                            $(tr).append(td3);
                            $('table tbody').append(tr);

                            $('.modal, .shade').addClass('hide');
                        }
                    }
                })
            })
        }

    </script>
{% endblock %}

 11.4（实例练习）

        function changeContent(){   // 点击编辑按钮出现相应的模态对话框，当使用ajax局部添加标签的时候也可以将相应的事件同时绑定
            $('table').on('click', '.change-content', function(){
                $('.shade, .change-modal').removeClass('hide');
                var tds = $(this).parent().prevAll(); // 当前行的全部td标签
                // console.log(tds);
                // console.log(tds[0].innerText);
                var current_line_id = tds[1].innerText;  // 当前行id
                $('#change_modal_confirm').click(function test(){
                    var new_class_name = $('#new_class_name').val();  // 新className
                    return new_class_name
                });
                var new_class_name =
                console.log(new_class_name);
                $.ajax({
                    url: '/classes/',
                    type: 'post',
                    dataType: 'json',
                    data: {line_id: current_line_id, title: 'change', new_name: new_class_name},
                    success: function(req){
                        console.log(req.status);
                        if(req.status){
                            var current_id = req.data.id;
                            var test = $('td').val(current_id).prev();
                            console.log(test);
                        }
                        else{

                        }
                    }
                })

            })
        }






        elif req_title == 'change':
            # print('change')
            response_dict = {'status': True, 'Error': '', 'data': None}

            current_line_id = req.POST.get('line_id')  # 拿到需要修改的行的id
            new_class_name = req.POST.get('new_name')  # 拿到新的class name

            if new_class_name:
                models.Classes.objects.filter(id=current_line_id).update(name=new_class_name)   # 更新数据库中的数据
                obj = models.Classes.objects.filter(id=current_line_id)
                response_dict['data'] = {'id': obj.id, 'name': obj.name}
            else:
                response_dict['status'] = False
                response_dict['error'] = '您的输入有误，请重新输入！'
            return HttpResponse(json.dumps(response_dict))