jq的dom操作符

• 内部插入的方法

  1. 内部后插

        var p=$('<P>我是子元素</P>')
        $('jq对象').append(p);//--->父.append(子)
        var m=$('<mark>我是appendTo</mark>')
        m.appendTo('div');//--->子.appendTo('父')
  

  2. 内部前插

         var p=$('<P>我是子元素</P>')
         $('jq对象').prepend(p);//--->父.prepend(子)
         var m=$('<mark>我是appendTo</mark>')
         m.prependTo('div');//--->子.prependTo('父')
  

  3. 外部插入（方法同上）

  a. 某节点 . after（新增的该节点的下一个兄弟节点）
  b. 新增的下一个兄弟节点 . insertAfter（某节点）
  c. 某节点 . before（新增的该节点的上一个兄弟节点）
  d. 新增的该节点的上一个兄弟节点 . insertBefore（某节点）

  4. 删除的方法

  a. 要删除的元素 . empty()====清除所选元素的内容（内容没了，标签还在）
  b. 要删除的元素 . remove()===清除所选元素的内容（内容没了，标签也没了）
  c. 要删除的元素 . detach()===清除所选元素的内容（内容没了，标签也没了）

  5. 包裹节点（给节点添加元素）
     需要包裹的子元素 . wrap（父元素）

     $('p').wrap('del');//<del> 我是父包裹<p>我是子元素</p> </del>
  

  6. 替换节点
     替换之前的元素 . replaceWith（替换之后的元素）

    //-->p 为 <p>我是父元素</p>
    $('p').replaceWith('<mark>我是替换之后的元素</mark>')
  

  7. attr和prop的区别

  a. 设置和获取
  获取：jq对象.attr('checked') ====jq对象.prop('checked')
  设置：jq对象.attr('checked',true)====jq对象.prop('checked',false)
  注：用attr获取属性的时候要先在标签中写出来
  b. 区别：attr可以操作固有属性（本身自带的一些属性），自定义属性。prop只能操作固有属性

  8.动画效果
  show()显示
  hide()隐藏
  toggle()切换
  slideDown()滑出
  slideUp()滑入
  fadeIn()淡入
  fadeOut()淡出
  fadeToggle()切换淡入/淡出
  delay()延迟时间
  stop()停止动画

       //$('div').animate(css样式对象,动画时间，回调函数）；
       //$('div').show(动画时间，回调函数）;
        $('jq对象').click(function () {
           $('div').animate({height:'0'},2000);//相当于隐藏display:none;
           $('div').animate({height:'0'},2000, function () {
              alert('隐藏')
            });//相当于隐藏display:none;
            $('div').animate({height:'toggle',opacity:'toggle'},2000, function () {
                alert('切换高度和透明度的')
            });//相当于隐藏display:none;
        })

欢迎指正不足之处！！！