jQuery

jQuery 是一个非常经典的 js 库 $是表达符号

常用

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

jQuery对象DOM操作

jQuery对象css操作

//jQuery对象有“批量操作”的特点可调用css对象方便修改对象的CSS
$('#test').css('background-color', 'black').css('color', 'red');
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性
//css()方法将作用于DOM节点的style属性，具有最高优先级

jQ 动画

jQ 事件绑定

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);
使用off('click')一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数

a.on('click', function () {
    alert('Hello!');
})
// 两者等价(常用下一种)
a.click(function () {
    alert('Hello!');
})
//事件委托用法
$( '#id-div-cont' ).on( 'click', '.del', Event )
// 绑定 父元素 #id-div-cont 监听.del(如果点击的是.del则发生)

jQ Ajax

var request = {
    url: '/uploads/tags.json',
    type: 'get',
    success: function(r) {
        console.log(r)
    },
    error: function() {
        console.log(arguments)
    }
}
$.ajax(request)

//基础的jq ajax方法
$.ajax({name:value, name:value, ... })

// jq get方法
$.get("test.php", function(data){
console.log(data);
})
//jq post 方法
$.post(URL,{name:'小明'},function(data,status,xhr),dataType)

lodash

lodash 是一个非常实用的 js 工具库 _是表达符号

lodash 函数

each

_.each(list(数组或对象), (v, k) => {
        // each 方法的两个参数
        // 如果 list 是 列表，那么 v 和 k 分别是指 list 的 element/index
        // 如果 list 是 对象（字典），那么 v 和 k 分别是指 object 的 value/key
        console.log('element and index', v, k)
    })

map (旧数组/对象生成一个新数组)

    const list2(新数组) = _.map(list1(旧数组), (v, k) => {
        const r = v * v
        return r
    })
    console.log('list2', list2)

filter (遍历数组/对象，返回符合判断函数中的元素)

var u(符合条件的新数组) =
_.filter(us(数组可包含对象), (e) => {
        var b = e.score > 70(bool值)
        return b
    })
    console.log('filter u', u)

orderBy (按照条件排序,先按score升序,如果有score一样的,再按 name降序)

    var users = _.orderBy(us, ['score', 'name'], ['asc'(升序), 'desc'(降序)])
    console.log('order by users', users)   

flatten (减少一层嵌套数组(只减少一层),也就是可以将二维数组拍成一维数组)

    var l = [
        1,
        [2],
        [3, [4]],
        [5, [6], [7]],
    ]
    var f = _.flatten(l)
    console.log('flatten result', f)

compact 剔除数组中的假值元素(js 中假值元素分别为false null 0 NaN '' undefined)

    var result = _.compact(l(包含假值元素的数组))
    console.log('compact result', result)
**isEqual**  isEqual比较两个对象或者数组是否相等
    var o1 = {
        'key': 1,
    }
    var o2 = {
        'key': 1,
    }
    var result = _.isEqual(o1, o2)
    console.log('isEqual result', result)

result (获取嵌套对象的值)

    var o = {
        'k1': {
            'k2': {
                'k3': {
                    'k4': 'value in nested dict'
                }
            }
        }
    }

    var path = 'k1.k2.k3.k4'
    var result = _.result(o, path)
    console.log('result nested result', result)

cloneDeep 深拷贝(改变赋值不影响原函数的拷贝)

        var o = {
        'a': [1],
        'b': [2],
        }
    var deep = _.cloneDeep(o)
    console.log('deep', deep)

random (返回给定范围的随机值)

    var a = 10      var b = 20
    // 返回 a 和 b 之间的一个整数
    var r1 = _.random(a, b)
    console.log('random r1', r1)
//如果指定第三个参数为 true，这个参数的意思是指 floating ,那么返回的就是一个浮点数
    var r2 = _.random(a, b, true)
    console.log('random r2', r2(浮点数))

shuffle (返回打乱顺序后的数组)

    var l = [1, 2, 3, 4,]
    const s = _.shuffle(l)
    console.log('shuffle l', s)