jQuery 对HTML的页面尺寸操作

jQuery 对 HTML 的页面尺寸操作

    1、width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

       2、innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。    ---clientWidth

innerHeight() 方法返回元素的高度（包括内边距）。        ---clientHeight

        3、outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。    ---offsetWidth

outerHeight() 方法返回元素的高度（包括内边距和边框）。    ---offsetHeight

    

        4、scrollTop() 和 scrollLeft() 方法

scrollTop () 方法设置或者返回滚动条被卷去的元素的高度

  scrollLeft () 方法设置或者返回滚动条被卷去的元素的宽度

jQuery添加元素和删除元素

    1、append()方法

                      append() 方法在被选元素的结尾插入内容（仍然在该元素的内部） 

    2、prepend () 方法

                prepend() 方法在被选元素的开头插入内容。 （仍然在该元素的内部）

    3、after() 和 before() 方法

    jQuery after() 方法在被选元素之后插入内容。

    jQuery before() 方法在被选元素之前插入内容。

       4、删除元素/内容 （考点）

    remove() - 删除被选元素（及其子元素）

     remove()把自己和子元素都删除掉了。本身已删除掉。所以不占位置

    empty() - 从被选元素中删除子元素

    empty()把子元素删除掉了。本身没有删除掉。所以本身占位置

插件

jquery.color.js 的使用

    引入js文件

jquery中的animate动画本身不支持变色，但是jquery.color.js弥补了这一缺陷。

.color.js 依赖于 jQuery. 所以需要先引用jqueryjs：

<script src="jquery.min.js"></script>

<script src="jquery.color.js"></script>

jquery.lazyload.js 的使用

<script src="jquery.min.js"></script>

<script src="jquery.lazyload.js"></script>

示例

<img alt="" width="640" height="480" data-original="img/test.jpg" />

$(function() {

    $("img").lazyload();

});

jquery.ui.js 的使用

引入

下载zip包并解压，通常情况下，您需要在页面中引用这三个文件，以便使用 jQuery  UI 的窗体小部件和交互部件：

          <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />

          <script src="js/jquery-1.11.1.min.js"></script>

          <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>