jquery-ZhiMap思维导图

jquery
进入思维导图模式
- 什么是jquery
  - - jQuery是js的一个库，封装了常用的一些功能，方便调用，提高开发效率官网： http://jquery.com/
      - jquery库包含的功能
        1. HTML元素选取
        2. HTML元素操作
        3. CSS操作
        4. HTML事件函数
        5. JavaScript的特效和动画
        6. HTML DOM遍历和修改
        7. AJAX和Utilities 实用工具
      - jquery的两大特点
        链式编程
        .show（）和.html（）也可以写成.show（）. html（）
        链式编程原理：return this。
        隐式迭代
        在方法的内部会为匹配到的所有进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便调用。
      - 使用步骤
        1.引包
        <script src = "jquery-1.11.1.min.js"><script>
        2.入口函数
        例如：$（文档）.reday（函数（）{“功能实现代码”}）；
        有三种写法
        1.文档加载完毕，图片不加载的时候，就可以执行这个函数 $(document).ready(function(){ alert(1); });
        2.文档加载完毕，图片加载的时候，就可以执行这个函数 $(fuunction(){ alert(1); });
        3.文档加载完毕，图片也加载完毕的时候，在执行这个函数 $(window).ready( function(){ alert(1); });
        jQuery入口函数与js入口函数的区别：
        区别一：书写个数不同
        JS的入口函数只能出现一次，出现多次会发生事件覆盖的问题。
        jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
        区别二：执行时机不同：
        jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
        Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js 文件、外部的css文件、图片等。
        3.功能实现代码（事件处理）
        $（“＃demo”）。单击（函数（）{alert（“ jquery的处理函数”）}））；此部分写在入口函数里面
      - jquery 的核心方法
        $（）
        jquery ()
      - JS中的DOM对象和jquery中的对象比较
        两者的区别
        通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象
        jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
        两者的相互转换
        DOM 对象转为 jQuery对象：$(js对象);
        jQuery对象转为DOM对象：jquery对象[index];和jquery对象.get（index）;推荐后者
- jquery选择器
  - 基本选择器
    - #id
    - .class
    - *
    - Element
    - selector1,selector2,selectorN
  - 层级关系
    - ancestor descendant 后代选择器
    - parent > child
    - prev + next
    - prev ~ siblings
  - 基本筛选选择器
    - :last 匹配到的最后一个元素 :even（单数） :odd（双数） :eq(index) :gt(index) :lt(index) :not(selector) :animated（动画） :focus（聚焦） :first 匹配到的第一个元素
    - 可见性筛选
      - :hidden（隐藏） :visible（显示）
    - 内容筛选
      - :contains(text)（包含给定文本） :empty(删除) :has(selector) (保留包含特定后代的元素) :parent (含有子元素或者文本的元素)
  - 筛选选择器
    - fand（selector）查找指定元素的所有后代元素
      - 用法：$（"#wrad"）.find("li").css("color", "red");
    - children（）查找指定元素的直接亲儿子
      - 用法：$("#wrad").children("ul").css("color", "red");
    - sibling()查找所有兄弟元素（不包括自己）
      - $("#litem").siblings().css("color", "red")
    - parent（）查找父元素（最亲的）
      - $("#litem").parent("ul").css("color", "red");
    - eq（index）查找指定元素的第index个元素，从0开始
      - $("#li").eq(2).css("color"， “red”)；
  - 属性选择器
    - [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN]
    - 子元素
      - :first-child :first-of-type 1.9+ :last-child :last-of-type 1.9+ :nth-child :nth-last-child() 1.9+ :nth-last-of-type() 1.9+ :nth-of-type() 1.9+ :only-child :only-of-type 1.9+
    - 表单
      - :input :text :password :radio (匹配所有单选按钮) :checkbox (匹配所有复选框) :submit :image :reset :button :file
    - 表单对象属性
      - :enabled :disabled :checked :selecte
- jQuery节点样式和属性操作
  - 1.样式操作
    - css(name|pro|[,lva|fn]) 访问和设置元素样式
  - 类操作（className）
    - addClass(class|fn) 为每个匹配的元素添加指定的类名。
    - removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
    - hasClass("liItem") 是否包含指定类名,只要有一个带有指定类名的就是true，所有都不带才是 false。
    - toggleClass(“liItem”) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
  - 样式操作和类操作的比较
    - 1. 操作的样式非常少，那么可以通过 .css() 实现。2. 操作的样式很多，建议通过使用类 class 的方式来操作。 3. 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
  - jQuery 设置和获取属性
    - attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。 removeAttr(name) 移除指定属性 form表单中的 prop() 方法
    - val()方法和 text()方法和 html()
      - html([val]) html内容 text([val]) 内容 val([val]) 值
      - 注意：text（）不识别标签 html（）识别标签
- jQuery 尺寸与位置
  - width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）
  - height([val|fn]) 取得匹配元素当前计算的高度值（px）
  - innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
  - innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）此方法对可见和隐藏元素均有效。
  - outerWidth([options]) 获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
  - outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
- jQuery 的坐标操作
  - offset([coordinates])获取匹配元素在当前可视视口的相对偏移。
    $(selector).offset(); $(selector).offset({left:100, top: 150}); 注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative ，参数建议使用 number 数值类型
  - position() 获取匹配元素相对父元素的偏移。
    - 作用：获取相对于其最近的带有定位的父元素的位置。返回值为对象： {left:num, top:num} 。
    - 注意：只能获取，不能设置。没有绝对定位，父盒子的padding, 已定位，读取left,top值
  - scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
    - 无参数：表示获取偏移。有参数：表示设置偏移，参数为数值类型。
    - 例：scrollTop(); $(selector).scrollTop(100);
  - scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效
    - 无参数：表示获取偏移。有参数：表示设置偏移，参数为数值类型。
    - 例：scrollLeft(); $(selector).scrollLeft(100);
- jQuery 节点筛选
  - 过滤：
    - eq(index|-index) 获取当前链式操作中第N个jQuery对象
    - first() 获取第一个元素,返回 jQuery对象
    - last（）获取最后的元素，返回jquery对象
    - hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。
    - is(expr|obj|ele|fn) 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
    - has(expr|ele) 保留包含特定后代的元素，
    - not(expr|ele|fn) 从匹配元素的集合中删除与指定表达式匹配的元素
  - jquery对象的两个方法：
    - map（callback）
    - slice(start, [end])
  - 查找
    - children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
    - find(e|o|e) 搜索所有与指定表达式匹配的元素
  - 相邻兄弟
    - next([expr]) 取得一个包含匹配的元素集合中每一个元素的相邻兄弟
    - parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
    - prev([expr]) 获得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
    - siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
- jQuery 的节点操作
  - 动态创建元素
    - 方式一：
      - var $spanNode1 = $("<span>我是一个span元素</span>")
    - 方式二：(推荐)
      - var node = $("#box").html("<li>我是li<li>")
  - 添加元素
    - content类型: String, Element, jQuery
      - 父子关系:
        append(content|fn) 向每个匹配的元素内部尾部追加内容。（A.parentTo(B)把A追加到B中）
        prepend(content) 向每个匹配的元素内部前置内容。（A.parentTo(B)把A前置到B中）
      - 兄弟关系
        $(A).before(content|fn) 在匹配的元素之前插入内容 . $(content).insertBefore(A) 的操作，把content插入到A前面。 $(A).after(content|fn) 在每个匹配的元素之后插入内容。 $(content).insertAfter(A)
        注意：：insertAfter() / insertBefore() content只能是 htmlstring 和 jQuery对象
  - 元素替换
    - replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
  - 移动节点：
    - $('.box').prepend($('.fg')); $('.box').append($('.fg'));
  - 克隆节点（clone）
    - clone([Even[,deepEven]]) , 不会移动当前节点
      - $（'.msg').clone(false).insertBefore($('.box'))
  - 删除/清空元素
    - remove() 从DOM中删除所有匹配的元素。 detach([expr]) ,与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来 empty() 删除匹配的元素集合中所有的子节点。
  - 其它操作
    - wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。 unwrap() 这个方法将移出元素的父元素
      - $('.msg').wrap('<div class="w2"></div>'); $('.msg').unwrap();
- jquery的事件机制
  - 常见的事件类型
    - ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
    - 鼠标事件
      - click
      - dbclick
      - hover
      - mousover
      - mousout
    - 键盘事件
      - keyup
      - keydown
      - keypress
    - 表单事件
      - change
      - submit
      - fouse
      - blur
    - 窗口事件
      - load
      - scoll
      - resize
      - unload
  - 如何绑定事件
    - on方式绑定事件
      - on (events,[selector],[data],fn)
        events:一个或多个用空格分隔的事件类型和可选的命名空间，
        selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代
        data:当一个事件被触发时要传递event.data给事件处理函数。
        fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false
    - one（type， [data], fn）
      - 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
      - $('.deg').one('click', function (event) { })
    - off方式解绑事件
      - off(events,[selector],[fn])
        $(selector).off(); // 解绑匹配元素的所有事件
        $(selector).off( "click", "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑
        $(selector).off("click"); // 解绑匹配元素的所有click事件
  - jQuery的事件对象
    - event.data 传递给事件处理程序的额外数据
    - event.currentTarget 等同于this，当前DOM对象
    - event.pageX 鼠标相对于文档左部边缘的位置
    - event.target 触发事件源，不一定===this
    - event.type 事件类型：click，dbclick…
    - event.which 鼠标的按键类型：左1 中2 右3
    - event.keyCode 键盘按键代码
    - 两个方法
      - event.stopPropagation()；阻止事件冒泡
      - event.preventDefault(); 阻止默认行为
- jquery动画详解
  - 显示与隐藏
    - 1.显示动画show([speed,[easing],[fn]])
      - $("div").show() 或。show（1000）或.show（“slow/fast”）
    - 2.隐藏动画hide([speed,[easing],[fn]])
      - $(selector).hide()或 .hide（1000）或。hide（“slow”/“fast”）再或 .hide（1000， function（）{ }）
    - 切换toggle([speed],[easing],[fn]) 显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
  - 滑入，滑出
    - 1.滑入slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
      - $(selector).slideDown(speed, 回调函数)；
    - 2.滑出slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
      - $(selector).slideUp(speed, 回调函数)；
    - 切换slideToggle([speed],[easing],[fn]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
      - $(selector).slideToggle(speed, 回调函数)；
  - 淡入淡出
    - 1.淡入 fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
      - $(selector).fadeIn(speed, callback);
    - 2.淡出 fadeOut([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
      - $(selector).fadeOut(1000);
    - 切换 fadeToggle([speed,[easing],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
      - $(selector).fadeToggle('fast', callback);
  - 自定义动画
    - animate(params, [speed], [easing], [fn])
      - 参数
        params:一组包含作为动画属性和终值的样式属性和及其值的集合
        speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如： 1000)
        easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
        fn:在动画完成时执行的函数，每个元素执行一次。
    - 停止动画
      - $(selector).stop(true, false);
        参数
        参数一：true：后续动画不执行。 false：后续动画会执行。
        参数二：true：立即执行完成当前动画。 false：立即停止当前动画。
        参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
      - stop方法的总结
        当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行
        发生动画叠加时，可以考虑使用stop()方法
    - 延时执行
      - delay(duration, [queueName]) 设置一个延时来推迟执行队列中之后的项目
      - $('#foo').slideUp(300).delay(800).fadeIn(400);
- each的用法
  - 要对每个元素做不同的处理，这时候就用到了each方法
  - 格式：$(selector).each(function(index, element){ });
    - 参数
      - 参数一：表示当前元素在所有匹配元素中的索引
      - 参数二：表示当前元素（是js 中的DOM对象，而不是jQuery对象
- Ajax
  - 参看我的博客：https://blog.csdn.net/bigpatten
- jquery常用插件
  - 轮播图 swiper https://www.swiper.com.cn/
  - 弹层插件: layer.js
  - 分页插件: layPage.js
  - 树形图插件: zTree.js

jquery

什么是jquery

jQuery是js的一个库，封装了常用的一些功能，方便调用，提高开发效率官网： http://jquery.com/

​jquery库包含的功能

1. HTML元素选取

2. HTML元素操作

3. CSS操作

4. HTML事件函数

5. JavaScript的特效和动画

6. HTML DOM遍历和修改

7. AJAX和Utilities 实用工具

​jquery的两大特点

​链式编程

.show（）和.html（）也可以写成.show（）. html（）

​链式编程原理：return this。

​隐式迭代

​在方法的内部会为匹配到的所有进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便调用。

​使用步骤

1.引包

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

​2.入口函数

例如：$（文档）.reday（函数（）{“功能实现代码”}）；

​有三种写法

1.文档加载完毕，图片不加载的时候，就可以执行这个函数 $(document).ready(function(){ alert(1); });

​2.文档加载完毕，图片加载的时候，就可以执行这个函数 $(fuunction(){ alert(1); });

​3.文档加载完毕，图片也加载完毕的时候，在执行这个函数 $(window).ready( function(){ alert(1); });

​jQuery入口函数与js入口函数的区别：

区别一：书写个数不同

​JS的入口函数只能出现一次，出现多次会发生事件覆盖的问题。

​jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

​区别二：执行时机不同：

​jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后， 就可以操作DOM了，不用等到所有的外部资源都加载完成。

​Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js 文件、外部的css文件、图片等。

​3.功能实现代码（事件处理）

$（“＃demo”）。单击（函数（）{alert（“ jquery的处理函数”）}））； 此部分写在入口函数里面

​jquery 的核心方法

​$（）

​jquery ()

​JS中的DOM对象和jquery中的对象比较

​两者的区别

​通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象

​jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

​两者的相互转换

​ DOM 对象 转为 jQuery对象 ：$(js对象);

jQuery对象转为DOM对象：jquery对象[index];和jquery对象.get（index）;推荐后者

​jquery选择器

​基本选择器

​#id

​.class

​*

​Element

​selector1,selector2,selectorN

层级关系

​ancestor descendant 后代选择器

​parent > child

​prev + next

​prev ~ siblings

​基本筛选选择器

​:last 匹配到的最后一个元素 :even（单数） :odd（双数） :eq(index) :gt(index) :lt(index) :not(selector) :animated（动画） :focus（聚焦） :first 匹配到的第一个元素

​可见性筛选

​:hidden（隐藏） :visible（显示）

​内容筛选

​:contains(text)（包含给定文本） :empty(删除) :has(selector) (保留包含特定后代的元素) :parent (含有子元素或者文本的元素)

​筛选选择器

​fand（selector）查找指定元素的所有后代元素

​用法：$（"#wrad"）.find("li").css("color", "red");

​children（）查找指定元素的直接亲儿子

​用法：$("#wrad").children("ul").css("color", "red");

​sibling()查找所有兄弟元素（不包括自己）

​$("#litem").siblings().css("color", "red")

​parent（）查找父元素（最亲的）

​$("#litem").parent("ul").css("color", "red");

​eq（index）查找指定元素的第index个元素，从0开始

​$("#li").eq(2).css("color"， “red”)；

属性选择器

​[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN]

​子元素

​:first-child :first-of-type 1.9+ :last-child :last-of-type 1.9+ :nth-child :nth-last-child() 1.9+ :nth-last-of-type() 1.9+ :nth-of-type() 1.9+ :only-child :only-of-type 1.9+

​表单

​:input :text :password :radio (匹配所有单选按钮) :checkbox (匹配所有复选框) :submit :image :reset :button :file

jquery库包含的功能

jquery的两大特点

链式编程

链式编程原理：return this。

隐式迭代

在方法的内部会为匹配到的所有进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便调用。

使用步骤

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

2.入口函数

有三种写法

2.文档加载完毕，图片加载的时候，就可以执行这个函数 $(fuunction(){ alert(1); });

3.文档加载完毕，图片也加载完毕的时候，在执行这个函数 $(window).ready( function(){ alert(1); });

jQuery入口函数与js入口函数的区别：

JS的入口函数只能出现一次，出现多次会发生事件覆盖的问题。

jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js 文件、外部的css文件、图片等。

3.功能实现代码（事件处理）

$（“＃demo”）。单击（函数（）{alert（“ jquery的处理函数”）}））；此部分写在入口函数里面

jquery 的核心方法

$（）

jquery ()

JS中的DOM对象和jquery中的对象比较

两者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象

jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

两者的相互转换

DOM 对象转为 jQuery对象：$(js对象);

jquery选择器

基本选择器

#id

.class

*

Element

selector1,selector2,selectorN

ancestor descendant 后代选择器

parent > child

prev + next

prev ~ siblings

基本筛选选择器

:last 匹配到的最后一个元素 :even（单数） :odd（双数） :eq(index) :gt(index) :lt(index) :not(selector) :animated（动画） :focus（聚焦） :first 匹配到的第一个元素

可见性筛选

:hidden（隐藏） :visible（显示）

内容筛选

:contains(text)（包含给定文本） :empty(删除) :has(selector) (保留包含特定后代的元素) :parent (含有子元素或者文本的元素)

筛选选择器

fand（selector）查找指定元素的所有后代元素

用法：$（"#wrad"）.find("li").css("color", "red");

children（）查找指定元素的直接亲儿子

用法：$("#wrad").children("ul").css("color", "red");

sibling()查找所有兄弟元素（不包括自己）

$("#litem").siblings().css("color", "red")

parent（）查找父元素（最亲的）

$("#litem").parent("ul").css("color", "red");

eq（index）查找指定元素的第index个元素，从0开始

$("#li").eq(2).css("color"， “red”)；

[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN]

子元素

:first-child :first-of-type 1.9+ :last-child :last-of-type 1.9+ :nth-child :nth-last-child() 1.9+ :nth-last-of-type() 1.9+ :nth-of-type() 1.9+ :only-child :only-of-type 1.9+

表单

:input :text :password :radio (匹配所有单选按钮) :checkbox (匹配所有复选框) :submit :image :reset :button :file

表单对象属性

:enabled :disabled :checked :selecte

1.样式操作

css(name|pro|[,lva|fn]) 访问和设置元素样式

类操作（className）

addClass(class|fn) 为每个匹配的元素添加指定的类名。

removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。

hasClass("liItem") 是否包含指定类名,只要有一个带有指定类名的就是true，所有都不带才是 false。

toggleClass(“liItem”) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。

1. 操作的样式非常少，那么可以通过 .css() 实现。2. 操作的样式很多，建议通过使用类 class 的方式来操作。 3. 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。

jQuery 设置和获取属性

attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。 removeAttr(name) 移除指定属性 form表单中的 prop() 方法

val()方法和 text()方法和 html()

html([val]) html内容 text([val]) 内容 val([val]) 值

注意：text（）不识别标签 html（）识别标签

jQuery 尺寸与位置

width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）

height([val|fn]) 取得匹配元素当前计算的高度值（px）