JQ note -- dom操作与属性操作

1. $('#id')  $('.class')  $('div')  $('.class ul')  // 选择器
2. $(function(){...})  // DOM ready
3. var x = $('#id').get(0);  // jq对象 转 js原生
4. var x = document.get....;  console.log($(x));  // js转jq
5.  
6. $('#id').css(['color','height','width']);  // 获取多个css值（获取的是最终样式，不需要写在内联）
7. $('#id').css('color','red');  // 修改css（多个用对象方法）
8. $('#id').val();  // 获取value
9. $('#id').attr('id');  // 获取id属性值
10. $('#id').attr('id','box');  // 设置id属性值（多个用对象方法）
11. $('#id').removeAttr('id');  // 删除id属性
12. $('#id').addClass('box');  // 添加class类 名为box
13. $('#id').removeClass('box');  // 移除box类
14. $('#id').toggleClass('border')；  //对border类 进行设置与移除的切换

       $('#div').click(function(){
            $('#div').toggleClass(function(){
                return $('#div').hasClass('pick')?'red':'pink';
            })
        })
    //对 #div 进行class的切换

     

15.  
16. $('#id').find('p');  // 后代所有的 P
17. $('#id').next()--prev();  // 紧邻的 前--后 同级元素
18. $('#id').nextAll('p')--prevAll();  // 前面所有的P -- 后面所有的同级元素
19. $('#id').nextUntil('p')--prevUntil('p');  // 前--后 所有元素直到 P（不包括p）
20. $('#id').siblings()；  //前后所有 同级元素
21.  
22. $('main').append(" <b>Hello world!</b>");  // 插入节点到  main内部的最后面
23. ($("p")).appendTo($("#main"));  // 插入到
24. $('main').prepend(" <b>Hello world!</b>");  // 插入节点到  main内部的最前面
25. ($("p")).prependTo($("#main"));  // 插入到
26. $('main').after(" <b>Hello world!</b>");  // 插入节点到 main节点后面
27. ($("p")).inserAfter($("#main"));  // 插入到
28. $('main').before(" <b>Hello world!</b>");  // 插入节点到 main节点前面
29. $('span').wrap("<div></div>");  //  每一个span节点 都被 div 包裹起来
30. $('span').wrapAll("<div></div>");  //  所有span节点 被一个 div 包裹起来
31. $('span').unwrap();  // 移除最近的一层父元素
32. $('span').unwrap().unwrap().unwrap();  // 写几次就移除几层
33. $('span').clone();  // 克隆span节点 ==> 默认浅克隆（只复制节点与内容）
34. $('span').clone(true).appendTo($('#main'));  // 克隆span节点并添加到main节点内部的最后面 （true -- 深克隆 == 复制事件）
35. $('span').remove();  // 删除节点
36. $('span').replaceWith('<h1>.....</h1>');  // 用h1替换span