jQueryとlodash($|)

jQuery
jQueryは非常に古典的なjsライブラリ$で表現記号です
よく使う
セレクタ
$( '.class' )
一致するすべての要素を一致させて配列を返す
$( ' #id, .class ,div ' )
グループ選択
.find( '#id' )
サブエレメントを下に検索
.closest( '.class' )
親要素の検索(上に表示されるまで)
.parent()
親要素の検索
.next()
次の要素
.prev()
前の要素
.children()
サブエレメントの検索
.parent().children()
親子要素の検索
.siblings()
親子要素の検索(自己を除く)
.first()
最初の要素
.last()
最後の要素
.slice( , )
配列slice()メソッドと一致

$('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操作
dom操作の変更
.text( )
値テキスト(パラメータがあれば付与)
.html( )
値文字列(パラメータがある場合は付与)
.show()
表示
.hide()
非表示
.toggle()
スイッチ
.hasClass( )
クエリーclassはtureまたはfalseを返します
.addClass('className')
classの追加
.removeClass( )
classの削除
.removeClass( )
classの削除
.data( )
dataプロパティの取得
.width()//.height()
クエリーの幅の高さ、入力パラメータは幅の高さを設定します
.attr( , )
1番目のパラメータ属性名、クエリー(2番目のパラメータ割り当て)
.removeAttr( )
パラメータを入力して属性を除去
.prop()
attrと似ていますが、checkedなどのbool属性を処理します.
.val()
フォーム要素固有取得と設定(パラメータを記入)に対応するvalueプロパティ
.append( )
最後尾
.prepend( )
先頭
.before( )
兄弟ノードの前
.after( )
兄弟ノードの後
.remove()
削除
.empty()
削除(自分以外)
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アニメーション
アニメーションアクション
.show('slow')
表示(パラメータ時間1000または時間説明)
.hide(3000)
同上
.toggle()
スイッチ
.slideUp()
カーテン効果のオフ(パラメータ同上)
.slideDown()
....開く
.slideToggle()
スイッチ
.fadeOut()
フェードイン(パラメータは上)
.fadeIn()
フェードアウト
.fadeToggle()
フェードアウト
.animate({opacity: 0.25,width: '256px'},3000,callback)
カスタムアニメーション、3つのパラメータ、1変化オブジェクト、2時間、3アニメーション終了コールバック関数
.delay(1000)
アニメーションを一時停止
.data('id')

data

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(ネスト配列を1層減らす(1層だけ減らす)、すなわち2次元配列を1次元配列に撮ることができる)

    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)

クローンディープコピー(元の関数のコピーに影響しない値を変更)

        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)