测试 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 方法。

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 教程

JavaScript - 测试 jQuery的更多相关文章

  1. JavaScript测试工具

    大家都知道Javascript的测试比较麻烦,一般是开发使用一些浏览器的插件比如IE develop bar或是firebug来调试,而测试往往需要通过页面展示后的js错误提示来定位.那么还有其他比较 ...

  2. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  4. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  5. JavaScript - 库 jQuery

    测试 JavaScript 框架库 - jQuery 引用JQuery 如需测试JavaScript库,您需要在网页中引用它. 为了引用某个库,请使用<script>标签,其src属性设置 ...

  6. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  7. Error: Bootstrap's JavaScript requires jQuery错误

    引入bootstrap时会出现的问题:boostrap下拉菜单无效,浏览器报Uncaught Error: Bootstrap's JavaScript requires jQuery错误, 解决办法 ...

  8. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  9. Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别

    Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...

随机推荐

  1. UVA 11624 Fire!(二次BFS)

    先对火BFS一次,求出每个点的最小着火时间. 再对人BFS一次,求出走到边界的最少时间. #include <iostream> #include <queue> #inclu ...

  2. 【HDOJ】1754 I Hate It

    线段树. #include <iostream> #include <cstdio> #include <cstring> using namespace std; ...

  3. “ORA-12545: 因目标主机或对象不存在,连接失败”怎么办?

    大概知道是因为主机名或者IP地址的原因引起的,但是不知道究竟,就去百度上查了查,然后就根据几种答案做出了以下就该: 1.E:\oracle\product\10.2.0\db_1\NETWORK\AD ...

  4. (转载)mysql书籍

    (转载)http://blog.csdn.net/symdfbb/article/details/7636332 MySQL技术内幕 mysql使用大全,可以说方方面面都包括了.认真研读大概一本就差不 ...

  5. HDOJ 1312题Red and Black

    Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  6. UVa 10917 A Walk Through the Forest

    A Walk Through the Forest Time Limit:1000MS  Memory Limit:65536K Total Submit:48 Accepted:15 Descrip ...

  7. 1‘b0 什么意思

    在看datasheet 中有类似表达式如下: 3'b000, 1'b1, 1'b0; 3'b000这个表示:b代表二進制.3代表位元數. 1'b1:宣告為一位元二進制之值為1,一般除了可以宣告b外,也 ...

  8. 高清摄像头MIPI接口与ARM处理器的连接

    MIPI摄像头常见于手机.平板中,支持500万像素以上高清分辨率.它的全称为“Mobile Industry Processor Interface”,分为MIPI DSI 和MIPI CSI,分别对 ...

  9. ACM1228_STL的应用

    #include<iostream> #include<string> #include<map> using namespace std; map<stri ...

  10. 通过代码来执行testng.xml

    大多数时候,我们都是通过Eclipse IDE上的操作命令来执行testng 框架下的case 运行.那如果我们不想通过这种方式,而是想通过代码调用来实现执行该怎么办?下面是我搜集的两种方式供大家参考 ...