JavaScript - 测试 jQuery
测试 JavaScript 框架库 - jQuery
引用 jQuery
如需测试 JavaScript 库,您需要在网页中引用它。
为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:
引用 jQuery
<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 方式:
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
等价的 jQuery 是不同的:
jQuery 方式:
{
$("#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
请试一下下面这个例子:
实例
<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>
请再试一下这个例子:
实例
<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的更多相关文章
- JavaScript测试工具
大家都知道Javascript的测试比较麻烦,一般是开发使用一些浏览器的插件比如IE develop bar或是firebug来调试,而测试往往需要通过页面展示后的js错误提示来定位.那么还有其他比较 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- [转载]javascript+ajax+jquery教程11--正则表达式
原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...
- JavaScript - 库 jQuery
测试 JavaScript 框架库 - jQuery 引用JQuery 如需测试JavaScript库,您需要在网页中引用它. 为了引用某个库,请使用<script>标签,其src属性设置 ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- Error: Bootstrap's JavaScript requires jQuery错误
引入bootstrap时会出现的问题:boostrap下拉菜单无效,浏览器报Uncaught Error: Bootstrap's JavaScript requires jQuery错误, 解决办法 ...
- 【JavaScript与JQuery获取H2的内容】
撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...
- Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别
Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...
随机推荐
- uva 11731 - Ex-circles
题意:已知三角形ABC的3条边长,求三角形ABC 的面积,以及阴影部分的总面积. #include<iostream> #include<cstdio> #include< ...
- BZOJ3715: [PA2014]Lustra
3715: [PA2014]Lustra Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 237 Solved: 149[Submit][Status ...
- RAM和DDR
DDR内存现在渐渐成为内存市场中新的宠儿,因其合理的性价比从其诞生以来一直受到人们热烈的期望,希望这一新的内存产品全面提升系统的处理速度和带宽,就连对Rambus抱有无限希望的Intel公司也向外界宣 ...
- cf493A
Description Vasya has started watching football games. He has learned that for some fouls the player ...
- MySQL查询过程中出现lost connection to mysql server during query 的解决办法
window7 64位系统,MySQL5.7 问题:在使用shell进行数据表更新操作的过程,输入以下查询语句: ,; 被查询的表记录数达到500W条,在查询过程中出现如题目所示的问题,提示" ...
- hive UDAF源代码分析
sss /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license a ...
- IE浏览器中发送到onenote的选项没有调出来??
最近使用onenote 作为笔记本,发现这个比word好用很多,特别是还有一个功能很好用,发送到onenote,可以选中网页中的内容,发送到onenote.但是有一些IE浏览器这个选项没有调出来,还是 ...
- OfficePickers
OfficePickers http://www.codeproject.com/Articles/12327/Office-2003-Color-Picker 来自为知笔记(Wiz) 附件列 ...
- 数据库中存储日期的字段类型究竟应该用varchar还是datetime ?
背景: 前段时间在百度经验看到一篇文章<如何在电脑右下角显示你(爱人)的名字>,之前也听过这个小技巧,但没真正动手设置过.所以出于好奇就实践了一下. 设置完成后的效果例如以下.右下角的时间 ...
- [置顶] iptables 性能 测试
一直研究iptables 性能,这几天刚好有硬件资源,于是发始下手测试iptables NAT 性…… 硬件环境 : 服务器: IBM x3650 ( 4G E5645 6核 12线程) ESXi ...
