DOM 相关 - 表单

博客分类: 江河计划

DOM 相关 - 表单

算法

双向链表

interface Node {
    element: any,
    next: any,
    prev: any
}

class LinkedList {
    private length: number = 0;
    private list: any = null;
    getNode(element:any):Node{
        return {
            element,
            next: null,
            prev: null
        }
    }
    append(element:any){
        var currentNode = this.list,
            node = this.getNode(element);
        if(!this.list){
            this.list = node;
        }else{
            while(currentNode.next){
                currentNode = currentNode.next
            }
            currentNode.next = node;
            node.prev = currentNode;
        }
        ++this.length;
    }
    insert(position: number, element: any){
        if(this.length > position && position >= 0){
            var node = this.getNode(element);
            var current = this.list;
            if(position === 0){
                current.prev = node;
                node.next = this.list;
            }else{
                for(var i=1; i<position; i++){
                    current = current.next
                }
                var next = current.next;
                current.next = node;
                node.prev = current;
                node.next = next;
                next.prev = node;
            }
            ++this.length;
        }else{
            this.append(element)
        }
    }
    removeAt(position: number){
        if(this.length >= position && position >= 0){
            if(position === 0){
                this.list = this.list.next;
                this.list.prev = null;
            }else{
                var current = this.list;
                for(var i=1;i<=position;i++){
                    current = current.next;
                }
                var prev = current.prev,
                    next = current.next;
                prev && (prev.next = next);
                next && (next.prev = prev);
            }
        }
        --this.length;
    }
    remove(element: any){
        this.removeAt(this.indexOf(element));
    }
    indexOf(element: any):number{
        var current = this.list;
        for(var i=0; i<this.length;i++){
            if(current.element === element){
                return i
            }
            current = current.next;
        }
        return -1;
    }
    isEmpty():boolean{
        return this.length === 0;
    }
    size():number{
        return this.length;
    }
    getHead():any{
        return this.list
    }
    toString():string{
        var string:string = '',
            current = this.list;
        if(current){
            string += current.element;
            while(current.next){
                current = current.next;
                string += current.element;
            }
        }
        return string;
    }
    print(){
        console.log(this.toString());
    }
}

var linkedList = new LinkedList();
linkedList.print();
linkedList.append(1);
linkedList.print();
linkedList.append(2);
linkedList.print();
linkedList.append(3);
linkedList.print();
linkedList.append(5);
linkedList.print();
linkedList.insert(3, 4);
linkedList.print();
console.log(linkedList.indexOf(4));
linkedList.remove(4);
linkedList.print();
linkedList.removeAt(3);
linkedList.print();
console.log(linkedList.size());
linkedList.getHead();

集合

class Set{
    private items: any = {};
    private length: number = 0;
    add(value:any): boolean{
        if(!this.has(value)){
            this.items[value] = value;
            ++this.length;
            return true;
        }
        return true;
    }
    has(value:any): boolean{
        return this.items.hasOwnProperty(value);
    }
    remove(value){
        if(this.has(value)){
            delete this.items[value];
            --this.length;
            return true;
        }
        return false;
    }
    clear(){
        this.items = {};
        this.length = 0;
    }
    size():number{
        return this.length;
    }
    values(){
        var arr = [];
        Object.keys(this.items).map(item => {
            arr.push(this.items[item]);
        })
        return arr
    }
    union(set):any[]{
        var arr = this.values();
        set.values().map(item => {
            if(!this.has(item)){
                arr.push(item)
            }
        });
        return arr
    }
    intersectionSet(set):any[]{
        var arr = [];
        set.values().map(item => {
            if(this.has(item)){
                arr.push(item)
            }
        });
        return arr;
    }
    difference(set):any[]{
        var arr = [];
        this.values().map(item => {
            if(!set.has(item)){
                arr.push(item)
            }
        });
        return arr;
    }
    subset(set){
        return set.values().every(item => {
            return this.has(item)
        })
    }
}

var set = new Set();
set.add(1);
console.log(set.values());
console.log(set.has(1));
console.log(set.size());
set.add(2);
console.log(set.values());
set.add(1);
console.log(set.values());
set.remove(1);
console.log(set.values());
set.remove(2);
console.log(set.values());

var set1 = new Set();
set1.add(1);
set1.add(2);
var set2 = new Set();
set2.add(2);
set2.add(3);
var set3 = new Set();
set3.add(2);
console.log(set1.union(set2))
console.log(set1.intersectionSet(set2))
console.log(set1.difference(set2))
console.log(set2.difference(set1))
console.log(set1.subset(set2))
console.log(set1.subset(set3))

表单

表单类型

// 单选输入框
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="text" name="firstname">
// 单选按钮 name 相同
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
// 多选
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car 
// 下拉筛选
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
// 输入文本框
<textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
</textarea>
// 提交按钮
<input type="submit" value="Submit">

通用属性

<form>表单属性

<input>通用属性:

通用事件,

剪贴板操作

验证约束