jq操作节点

1. 节点增加

• 需要先创建节点，可以直接创建节点，并且为节点输入内容；
• 父节点.append(要插入的节点)：在父节点内部末尾插入节点
• prepend()：在父节点的内部开始插入节点
• before()：在某节点的前面插入节点
• after()：在某节点的后面插入节点

`

    $('.h').click(function () {
        var i = Math.floor(Math.random() * (2 - 0 + 1)) + 0;
        let img1 = $('<img src="' + arr[i] + '" class="img1">')
        $('div').append(img1)
    })
    $('.q').click(function () {
        var i = Math.floor(Math.random() * (2 - 0 + 1)) + 0;
        let img1 = $('<img src="' + arr[i] + '" class="img1">')
        $('div').prepend(img1)
    })
</script>`

2. 节点删除

• 节点.remove()：删除该节点
• 节点.empty()：清空节点内的所有内容

`

    $('div').hover(function(){
        $(this).toggleClass('a')
    })
    // $('div').mouseover(function(){
    //     $(this).addClass('a')
    // })
    // $('div').mouseout(function(){
    //     $(this).removeClass('a')
    // })
    $('div').click(function(){
        $('input').val($('div').text().trim())
    })
</script>`

3. 操作html、text、value html ,text,val---->相当于原生js的innerHTML和innerText和设置value

`

   // jq创建节点
    let h1 = $('<h1 style="color:red">我爱h1</h1>')
    // $('div').html(h1)
    // 原生方法创建
    $('div').html(h1)
    let h1 = document.createElement('h1')
    h1.innerText = '我爱中国'
    document.querySelector('div').innerHTML = h1.innerHTML
</script>`