• jQuery 方法只能 jQ 对象或者 jQ($ 或者 jQuery)调用，同样原生对象的方法也只能原生对象调用
    1. let $tabBox = $('.tabBox');
    2. console.log($tabBox);
    3. // 1. height() 不传参时时获取元素对象的高度，传参是设置高度
    4. console.log($tabBox.height());
    6. // 2. width() 不传参获取元素对象的宽度、传参是设置宽度
    7. console.log($tabBox.width());
    9. // 3. offset() 获取当前元素距离 body 顶部和左侧的距离，返回一个对象
    10. console.log($tabBox.offset());
    12. // 4. scrollTop() / scrollLeft() 获取纵向/横向滚动条卷曲的距离
    13. $(document.body).scrollTop(100); // 传参设置，不传参获取
    15. // 5. innerHeight() / innerWidth() 获取当前元素的 clientHeight/clientWidth
    16. console.log($tabBox.innerHeight());
    17. console.log($tabBox.innerWidth());
    19. // 6. outerWidth()/outerHeight() 获取/设置当前元素的包含边框的高度，等价于 offsetWidth/offsetHeight.
    20. console.log($tabBox.outerHeight());
    21. console.log($tabBox.outerWidth());
    22. console.log($tabBox.outerWidth(true)); // 传递参数true表示获取时需要加上 margin 值
    24. // 7. hasClass() 当前元素是否有某个类名
    25. console.log($tabBox.hasClass('tabBox')); // true
    27. // 8. addClass()  为当前 jQ 元素追加类名
    28. $tabBox.addClass('classByJQ');
    30. // 9. removeClass() 从当前 jQ 对象中移除类名
    31. setTimeout(() => $tabBox.removeClass('classByJQ'), 2000);
    33. // 10. append() 向元素末尾添加一个元素，容器.append(元素)
    34. $('#contextFilter').append('<p>这是一个追加的元素</p>');
    36. // 11. 元素.remove() 把元素移除
    37. // $('#fields').remove();
    39. // 12. next 获取下一个弟弟; nextAll 获取所有的弟弟
    40. console.log($('.tabBox').next());
    41. console.log($('.tabBox').nextAll());
    43. // 13. prev 上一个哥哥; prevAll 所有的哥哥
    44. console.log($('#contextFilter').prev());
    45. console.log($('#contextFilter').prevAll());
    47. // 14. children(selector) 把元素下满足 selector 的元素获取到
    48. console.log($('ul.header').children('.active'));
    50. // 15. siblings(selector) 获取当前元素的所有兄弟元素
    51. console.log($('ul.header').siblings());
    53. // 16. css('width') 获取宽度； css('width', '200px') 设置宽度；css({width: '200px', height: '200px', color: 'red'); // 批量设置
    55. console.log($('ul').css('width'));
    56. $('ul').css('width', '300px');
    57. $('ul').css({height: '100px', color: 'red'});
    59. // 17. text() 不传递是获取元素的 innerText，传参是设置元素的 innerText
    60. console.log($('.header li.active').text())
    61. $('.header li.active').text('哈哈哈哈哈')
    63. // 17. html() 不传递是获取元素的 innerHTML，传参是设置元素的 innerHTML
    64. console.log($('.header li.active').HTML())
    65. $('.header li.active').HTML('<i>hajhahahh</i>')