测试 JQuery

声明

该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明

链接https://www.runoob.com/

测试 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 的具体使用方法

jQuery 教程

posted @   无关风月7707  阅读(84)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示