jQuery中的dom操作

    <div class="mydiv">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li class="a">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    let li_1 = $('<li class="b">9</li>')
    $('.mydiv [id]').append(li_1)
    //创建添加节点

// 插入节点
$('div[class=mydiv] [id] [class=a]').prepend(li_1)
  //插入到内部 成为了子元素
$('div[class=mydiv] [id] [class=a]').after(li_1)
  //之后插入 成为了同级元素
$('div[class=mydiv] [id] [class=a]').before(li_1)



remove('div[class=a]')
//移除掉符合条件的元素
detach()
//以后如果还可能用删除掉的元素，就用这个，他的事件都还会保留下来
empty()
//清空节点
clone(true)
//复制节点，true表示也复制事件



            // 属性操作
//attr可以添加属性
$('div[class=mydiv]').attr({"id":"test"})  //设置一个id值为test
 // 移除属性
removeAttr('title')

// 例如使用 $('div[class=mydiv]').attr({"class":"test"})
//会将原有的class替换掉
$('div[class=mydiv]').addClass('test')  //addClass 追加样式
$('div').removeClass('test')  //移除样式
hasClass('test') 看是否有某个类名




html()方法 相当于js里的innerhtml方法
// console.log($('.a').html()) //输出内容
$('.a').html('<span>88888</span>')

text() 相当于innerText方法


val()用于input框、下拉框等value，亦可以设置
// console.log($('input[class=myinput]').val('888'))



// 遍历节点
/* 
children子节点
next 紧邻着的同辈元素
 prev 前边紧邻着的同辈元素
siblings 前后所有的同辈元素
 */
$('#list li').mousemove(function(){
$(this).addClass('active').siblings().removeClass('active')
             })


// parent()  parents() 
 //取得父元素   第一个只返回一个父元素 
 //  第二个还会再往上找，返回多个父节点  直到html
// console.log($('li[class=a]').parents())




// height() width()得到高度   不带单位  便于计算
 $('li[class=a]').offset()  //相对于视口位置
 $('li[class=a]').position() //相对于最近的开了position的父级元素
 $('li[class=a]').offset() //滚轮的top与left