测试 JQuery
声明
该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明
测试 JQuery
该部分内容学习如何测试 JavaScript 框架库 - jQuery
1、引用 JQuery
如需测试 JavaScript 库,需要在网页中引用它。引用某个库需要使用 < script > 标签,其 src 属性设置为库的 URL
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
2、JQuery 描述
主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。
jQuery 允许通过 CSS 选择器来选取元素。
举个例子来看一下 JavaScript 函数和 JQuery 函数的不同
-
在 JavaScript 中,可以分配一个函数以处理窗口加载事件:
function myFunction() { var obj=document.getElementById("demo"); obj.innerHTML="Hello jQuery"; } onload=myFunction;
-
与上边的 JavaScript 函数等价的 JQuery 函数是这样的
function myFunction() { $("#demo").html("Hello jQuery"); } $(document).ready(myFunction);
-
上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)。
向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。
由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。
-
jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
3、测试 JQuery
直接上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery测试</title>
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
$("#demo").attr("style","color:red;font-weight:lighter").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="demo"></h1>
</body>
</html>
很明显 jQuery 允许链接(链式语法),链接(Chaining)是一种在同一对象上执行多个任务的便捷方法
可以看一下详细的 JQuery 教程,了解一下 JQuery 的具体使用方法
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战