任务2学习感悟

最新推荐文章于 2021-02-23 09:48:48 发布

原创最新推荐文章于 2021-02-23 09:48:48 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

ife 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript数据类型、数组操作、函数判断、深拷贝、数组去重、字符串处理、DOM元素操作、事件处理等基础知识，并通过示例代码演示了如何在网页中应用这些概念。

/**
 *  2. JavaScript数据类型及语言基础
 */

// 判断是否数组的函数
function isArray(arr) {
    // 利用Object.prototype.toString会返回各种内置类型，来判断返回的是不是'[object Array]'这里o小写
    return Object.prototype.toString.call(arr) == '[object Array]';
}

// 判断是否函数的函数
function isFunction(fn) {
    // 注意typeof()返回的是6个字符串
    return typeof(fn) == 'function';
}

// 深拷贝的函数
function cloneObject(src) {
    // 只有object和array里，for-in才能获取到参数
    // 注意返回的是'[object Array]'后面大写
    if (Object.prototype.toString.call(src).slice(8, -1) === 'Object'
        || Object.prototype.toString.call(src).slice(8, -1) === 'Array') {
        // 判断是Object还是Array
        var result = src instanceof Object ? {} : [];
        for (var i in src) {
            if (src.hasOwnProperty(i)) {
                // 对象或数组里面，继续遍历来获取，直到属性值为非Object或Array
                result[i] = cloneObject(src[i]);
            }
        }
        return result;
    }
    // 原始类型和Date, Boolean等对象类型直接返回就好了
    else {
        return src;
    }
}


// 数组去重，返回去重后的数组
function uniqArray(arr) {
    var array = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i]);
        }
    }
    return array;
}


// 对字符串首尾进行空格字符的去除，返回去除后的字符串
function trim(str) {
    var pattern = String('\t\r\n');
    if (pattern.indexOf(str.charAt(0)) != -1) {
        return trim(str.substring(1));
    }
    else {
        return str.substring(0);
    }
}
var s = '   hi';
console.log(trim(s));

function trim(str) {
    return str.replace(/^(\s)*(\s$)*/, '');
}
console.log(trim('   hi   '));


function each(arr, fn) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn(arr[i], i);
    }
}
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html


// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {
    var count = 0;
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            count++;
        }
    }
    return count;
}
// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3


// 判断是否为邮箱地址
function isEmail(emailStr) {
    // 邮箱可以为[数字,字母,-,_]
    return emailStr.match(/^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+[.a-zA-Z0-9-_]/g)===-1?false:true;
}
// 使用示例
isEmail('18810544291@163.com');


// 判断是否为手机号
function isMobilePhone(phone) {
    return phone.search(/^1\d{10}/g)===-1?false:true;
}
// 使用示例
isMobilePhone('18810544291');


/**
 * 3.DOM
 */
// 为element增加一个样式名为newClassName的新样式
function addClass(element, newClassName) {
    // document.querySelector(selecttor) 返回第一个匹配css选择器的对象
    // document.querySelectorAll(selectors) 返回一组匹配css选择器的对象
    // element有个className属性
    document.querySelector(element).className += ' ' + newClassName;
}
// 使用示例
var element = '.first';
addClass(element, 'newClass');// 注意newClass前面的空格


// 移除element中的样式oldClassName
function removeClass(element, oldClassName) {
    // 由于replace不改变原字符串,而是返回改变后的字符串,所以要重新赋值
    document.querySelector(element).className = document.querySelector(element).className.replace(oldClassName, '');
}

// ife中xyc的方法,有classList和remove两个新方法
// 其中remove方法并不是数组里的,好像是DOM的
function removeClass(element, oldClassName) {
    document.querySelector(element).classList.remove(oldClassName);
}

// 判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值
function isSiblingNode(element, siblingNode) {
    var isSiblingNode = false;
    // 利用parentNode和childNodes来获得其父元素的全部子元素
    var parent = document.querySelector(element).parentNode.childNodes;
    var sib = document.querySelector(siblingNode);
    for (var i = 0, len = parent.length; i < len; i++) {
        if (sib=== parent[i]) {
            isSiblingNode = true;
        }
    }
    return isSiblingNode;
}
// 参考xyc的方法,虽然return false放在后面,好像总会返回false.但是在for中返回true就直接退出了
function isSiblingNode(element, siblingNode) {
    // 利用parentNode和childNodes来获得其父元素的全部子元素
    var parent = document.querySelector(element).parentNode.childNodes;
    var sib = document.querySelector(siblingNode);
    for (var i = 0, len = parent.length; i < len; i++) {
        if (sib=== parent[i]) {
            return true;
        }
    }
    return false;
}


// 获取element相对于浏览器窗口的位置，返回一个对象{x, y}
function getPosition(element) {
    var position = {};
    position.x = document.querySelector(element).offsetLeft;
    position.y = document.querySelector(element).offsetTop;
    return position;
}


// 实现一个简单的Query
// getElementById不用#
function $(selector) {
    // 如果里面包含空格,则是组合查找
    if (selector.indexOf(' ') !== -1) {
        var parent = $(selector.split(' ')[0]);
        var child = $(selector.split(' ')[1]);
        for (var i = 0; i < parent.childNodes.length; i++) {
            if (child === parent.childNodes[i]) {
                return parent.childNodes[i];
            }
        }
    }
    // id查找
    if (selector.charAt(0) === '#') {
        return document.getElementById(selector.slice(1));
    }
    // 类查找
    else if (selector.charAt(0) === '.') {
        var className = selector.slice(1);
        var tags = document.getElementsByTagName('*');
        for (var i in tags) {
            if (tags[i].nodeType === 1) {
                if (tags[i].className.search(className) !== -1) {
                    return tags[i];
                }
            }
        }
    }
    // 属性查找
    else if (selector.charAt(0) === '[') {
        var attr = selector.slice(1, -1);
        var tags = document.getElementsByTagName('*');
        // 找有值的属性的元素
        if (attr.indexOf('=') !== -1) {
            var name = attr.split('=')[0];
            var value = attr.split('=')[1];
            for (var i in tags) {
                if (tags[i].nodeType === 1) {
                    if (tags[i].getAttribute(name) === value) {
                        return tags[i];
                    }
                }
            }
            return false;
        }
        // 找包含某属性的元素
        else {
            for (var i in tags) {
                if (tags[i].nodeType === 1) {
                    if (tags[i].getAttribute(attr) !== null) {
                        return tags[i];
                    }
                }
            }
            return false;
        }
    }
    else {
        return document.getElementsByTagName(selector)[0];
    }
}

/**
 * 4.事件
 */

1. JS居然有原生的document.querySelector(selector)和document.querySelectorAll(selector)两个原生的找DOM元素的方法

2. 谨记string.slice(from, to)方法

3. string.replace()不会修改原字符串

4. 用document.querySelector(selector).classList.remove()这个remove('className').这里的remove()方法能移除classList数组中对应class.但不是数组提供的方法.应该是DOM的