测试 JavaScript 框架库 - jQuery

引用JQuery

如需测试JavaScript库,您需要在网页中引用它。

为了引用某个库,请使用<script>标签,其src属性设置为库的URL:

引用:JQuery

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">

Jquery描述

主要的Jquery函数是$()函数(JQuery函数)。如果您想该函数传递DOM对象,它会返回JQuery对象,带有向其添加的JQuery功能。

JQuery允许您通过css选择器来选取元素。

在JavaScript中,您可以分配一个函数已处理窗口加载事件:

JavaScript方式:

function(){

    var  obj=document.getElementById("h01");

    obj.innerhtml="Hello   Jquery";

}

onload=myFunction;

扥假的JQuery是不同的:

JQuery方式:

function(){

    $("#h01").html("Hello  Jquery");

}

$(document).ready(myFunction);

上面代码的最后一行HTML DOM文档对象传递到JQuery: $(document).

当您向JQuery传递DOM对象时,JQuery会返回以HTML DOM对象包装的JQuery对象。

JQuery 函数会返回新的JQuery对象,其中的ready()是一个方法。

由于在JavaScript中函数就是变量,因此可以把Function作为变量传递给,JQuery的ready方法。

JQuery返回JQuery对象,与以传递的对象不同。

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)是一种在对象上执行多个任务的便捷方法。

需要学习更多内容吗?菜鸟教程为您提供了非常棒的JQuery教程。

 

posted on 2019-01-29 15:53  Strong-stone  阅读(118)  评论(0编辑  收藏  举报