jQuery速览（一）

一、简介

jQuery 是一个 JavaScript 库，可以通过一行简单的标记被添加到网页中。

1、jQuery 安装：

（1）从 jquery.com 中下载，将下载的文件放在网页的同一目录下，就可以使用jQuery：

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

（2）如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它：

百度 CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

2、jQuery 语法：

（1）基础语法： $(selector).action()

通过选取 HTML 元素，并对选取的元素执行某些操作：

美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

（2）文档就绪事件：

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，所有 jQuery 函数位于一个 document ready 函数中，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败：

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

3、jQuery 选择器：

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作，它基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

（1）元素选择器：

$(“p”)
实例：用户点击按钮后，所有

元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

（2）#id 选择器

通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

$(“#test”)
实例：当用户点击按钮后，有 id=”test” 属性的元素将被隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>

（3）.class 选择器：

jQuery 类选择器可以通过指定的 class 查找元素，语法如下：

$(".test")

实例：用户点击按钮后所有带有 class=”test” 属性的元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

（4）更多实例：

（5）独立文件中使用 jQuery 函数：

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

4、jQuery 事件：

（1）什么是事件？

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：

在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。常见 DOM 事件：

（2）jQuery 事件方法语法：

页面中指定一个点击事件，页面中指定一个点击事件：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

（3）常用的 jQuery 事件方法：

A、$(document).ready()

允许我们在文档完全加载完后执行函数。

B、click()

当按钮点击事件被触发时会调用一个函数，该函数在用户点击 HTML 元素时执行。

C、dblclick()

当双击元素时，会发生 dblclick 事件。

D、mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

E、mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

F、mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

G、mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

H、hover()

hover()方法用于模拟光标悬停事件。

I、focus()

当元素获得焦点时，发生 focus 事件。

J、blur()

当元素失去焦点时，发生 blur 事件。

二、jQuery 效果

1、隐藏和显示：

（1）jQuery hide() 和 show()：

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，语法如下：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

（2）jQuery toggle()：

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法，语法如下：

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实例：显示被隐藏的元素，并隐藏已显示的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

2、淡入淡出：

（1）jQuery fadeIn() 方法：

用于淡入已隐藏的元素，语法为：

$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

（2）jQuery fadeOut() 方法：

用于淡出可见元素，语法如下：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
（3）jQuery fadeToggle() 方法：

可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。语法如下：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
（4）jQuery fadeTo() 方法：

允许渐变为给定的不透明度（值介于 0 与 1 之间），语法如下：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

3、滑动：

（1）jQuery slideDown() 方法：

用于向下滑动元素，语法如下：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>

<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

（2）jQuery slideUp() 方法：

用于向上滑动元素，语法如下：

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
（3）jQuery slideToggle() 方法：

可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们；如果元素向上滑动，则 slideToggle() 可向下滑动它们。语法如下：

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

4、动画：

jQuery animate() 方法用于创建自定义动画，语法如下：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把

元素往右边移动了 250

 <!DOCTYPE<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
<body>tton>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - 使用相对值：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

（2）jQuery animate() - 使用预定义的值：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

（3）jQuery animate() - 使用队列功能：

默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

（4）jQuery 停止动画：

用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。语法如下：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

5、jQuery Callback 方法：

Callback 函数在当前动画 100% 完成之后执行。许多 jQuery 函数涉及动画，这些函数也许会将 speed 或 duration 作为可选参数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

6、jQuery - 链(Chaining)

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>

</body>
</html>

三、jQuery HTML

1、jQuery - 获取内容和属性：

（1）DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：”W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

（2）获得内容 - text()、html() 以及 val()：

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>

（3）获取属性 - attr()：

jQuery attr() 方法用于获取属性值，下面的例子演示如何获得链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

2、jQuery - 设置内容和属性：

（1）设置内容 - text()、html() 以及 val()：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

（2）text()、html() 以及 val() 的回调函数：

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。下面的例子演示带有回调函数的 text() 和 html()：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>
<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

（3）设置属性 - attr()：

jQuery attr() 方法也用于设置/改变属性值：

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

（4）attr() 的回调函数：

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

3、jQuery - 添加元素：

（1）jQuery append() 方法：

在被选元素的结尾插入内容，示例：

$(“p”).append(“追加文本”);
（2）jQuery prepend() 方法：

在被选元素的开头插入内容，示例：

$("p").prepend("在开头追加文本");
（3）jQuery after() 和 before() 方法：

jQuery after() 方法在被选元素之后插入内容，jQuery before() 方法在被选元素之前插入内容：

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

4、jQuery - 删除元素：

（1）jQuery remove() 方法：

用于删除被选元素及其子元素：

$("#div1").remove();

（2）jQuery empty() 方法：

用于删除被选元素的子元素：

$("#div1").empty();

5、jQuery - 获取并设置 CSS 类：

下面的样式表将用于本页的所有例子：

.important
{
     font-weight:bold;
     font-size:xx-large;
}

.blue
{
     color:blue;
}

（1）jQuery addClass() 方法：

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
    font-weight:bold;
    font-size:xx-large;
}
.blue
{
    color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>

</body>
</html>

（2）jQuery removeClass() 方法：

下面的例子演示如何在不同的元素中class $(“button”).click(function(){$ (“h1,h2,p”).removeClass(“blue”);
}); toggleClass() 方法：

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

6、jQuery css() 方法：

（1）返回 CSS 属性：

如需返回指定的 CSS 属性的值，请使用如下语法：

css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>
</html>

（2）设置 CSS 属性：

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

（3）设置多个 CSS 属性：

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

7、jQuery 尺寸：

（1）jQuery width() 和 height() 方法：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距），height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。下面的例子返回指定的

元素的宽度和高度：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>

（2）jQuery innerWidth() 和 innerHeight() 方法：

innerWidth() 方法返回元素的宽度（包括内边距），innerHeight() 方法返回元素的高度（包括内边距）。下面的例子返回指定的

元素的 inner-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

（3）jQuery outerWidth() 和 outerHeight() 方法：

outerWidth() 方法返回元素的宽度（包括内边距和边框），outerHeight() 方法返回元素的高度（包括内边距和边框）。下面的例子返回指定的

元素的 outer-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

一、简介

二、jQuery 效果

三、jQuery HTML

猜你喜欢