JavaScript - 测验 jQuery


测验 JavaScript 结构库 - jQuery


引证 jQuery

如需测验 JavaScript 库,您需求在网页中引证它。

为了引证某个库,请运用 <script> 标签,其 src 特点设置为库的 URL:

引证 jQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>


jQuery 描绘

首要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 目标,它会回来 jQuery 目标,带有向其增加的 jQuery 功用。

jQuery 答应您经过 CSS 选择器来选取元素。

在 JavaScript 中,您能够分配一个函数以处理窗口加载事情:

JavaScript 办法:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价的 jQuery 是不同的:

jQuery 办法:

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最终一行,HTML DOM 文档目标被传递到 jQuery :$(document)。

当您向 jQuery 传递 DOM 目标时,jQuery 会回来以 HTML DOM 目标包装的 jQuery 目标。

jQuery 函数会回来新的 jQuery 目标,其间的 ready() 是一个办法。

因为在 JavaScript 中函数便是变量,因而能够把 myFunction 作为变量传递给 jQuery 的 ready 办法。

lamp jQuery 回来 jQuery 目标,与已传递的 DOM 目标不同。
jQuery 目标具有的特点和办法,与 DOM 目标的不同。
您不能在 jQuery 目标上运用 HTML DOM 的特点和办法。


测验 jQuery

请试一下下面这个比如:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

测验一下 »

请再试一下这个比如:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

测验一下 »

正如您在上面的比如中看到的,jQuery 答应链接(链式语法)。

链接(Chaining)是一种在同一目标上履行多个使命的方便办法。

需求学习更多内容吗?W3School 为您供给了十分棒的 jQuery 教程