JQuery DOM元素操作

移除 添加 元素 和响应事件

 $(document).ready(function(){

      var price=$('<P>From $399,99</P>');          //要添加的元素

  $('button').on('click',function(){                           //$('button').on(<event,eventhandle)

     $('.classname').before(price);     

     price.insertbefore($('#id'));      //在某id的前面添加 (两种表达效果一致)

     $('button').remove();  //移除       
        // 上面会操作会在所有的.classname前加入price  并且会把所有的button 移走所以需要this,jquery的this对象为$(this)

     $(this).closest('.classname').before(price);  //距离该元素最近的

     $(this).remove();       });

});

同理 .append(<element>)   .appendTo(<element>)   

        .prepend(<element>)   .prependTo(<element>)   

        .after(<element>)   .insertAfter(<element>)   

Jquery 可把 Data-XXX 元素加到任何可加的元素 

eg:<li class="vaction onsale" data-price="399.99" />

jquery 对象方法 .data(<name>)   .data(<name>,<value>)

var  amount  = $(this).closest('.vacation').data('price');//取得不同元素的price

按钮，如果选择 $('button') 会触发所有的button ,需要选择具体的button 如下：（事件委托）

filter() 方法

   

如上图所示，选择在售按钮，显示onsale 的li 不在not 高亮后两个

$('.vacation').filter('.onsale');选择元素

 $('#filters '). on('click', '.onsale-filter', function () {    //高亮按钮

    $('.highlighted'). removeClass('highlighted');     //移除当前高亮
    $('.vacation'). filter('.onsale').addClass('highlighted');  //选择onsale的元素  高亮
});