JavaScript - 库 jQuery
测试 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教程。
JavaScript - 库 jQuery的更多相关文章
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
- 流行的JavaScript库 ——jQuery
1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...
- 最流行的JavaScript库jQuery不再支持旧版IE
直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...
- [Web 前端] 流行的JavaScript库 ——jQuery
cp : https://www.cnblogs.com/zhoushihui/p/5141767.html 1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. ...
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- JQuery是继prototype之后又一个优秀的Javascript库
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...
- jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...
- JavaScript(14)jQuery(JavaScript 库)
JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
随机推荐
- 先定个小目标, 使用C# 开发的千万级应用
dotNET跨平台 微信号 opendotnet 功能介绍 在这里你可以谈微软.NET,Mono的跨平台开发技术,也可以谈谈其他的跨平台技术.在这里可以让你的.NET项目有新的思路,不局限于微软的技术 ...
- 【补充】docker基础学习
docker 基础知识 之前写了一篇docker未授权访问的文章,现在来补充一下docker基础知识,以便更好的学习docker上的漏洞. docker是一款轻量级的虚拟化的产品,它属于层级化的架构. ...
- ping过程详解
原出处:http://wanicy.blog.51cto.com/509018/335207/ PS:这里只是给出了ping ip地址的例子,没有给出ping域名的例子. ping 域名还有域名转换成 ...
- intellijidea课程 intellijidea神器使用技巧 5-2 localhistory
Ctrl shift A ==>localhistory ==> show history 查看文件本地历史记录(idea每次修改在本地会生成历史记录) Ctrl shift A == ...
- 获取iframe子页面节点,响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- <Android 基础(十三)> shape
介绍 简单来说,shape就是用来在xml文件中定义形状,代码解析之后就可以当做Drawable一样使用 官方说明 关于shape定义的drawable 文件位置:res/drawable/filen ...
- 模拟Chrome皮肤
话不多说,先验货: (原始状态) (最大化状态) (对比图) 为自己鼓掌!!! 哈哈,捣鼓2天终于把这个搞出来了!虽然代码一团糟,但是不难理解! 要实现这个功能需要几个组件:DWM,GDI+ 在实现这 ...
- Android 极光推送JPush---自定义提示音
极光推送提供三种方法实现Notification通知 三方开发平台发送普通消息,客户端设置PushNotificationBuilder,实现基础的Notification通知 三方开放平台发送普通消 ...
- u-boot分析(八)----串口初始化
u-boot分析(八) 上篇博文我们按照210的启动流程,分析到了内存初始化,今天我们继续按照u-boot的启动流程对串口的初始化进行分析. 今天我们会用到的文档: 1. 2440芯片手 ...
- jQuery-prepend、append、before、after的区别
举例说明,原始html代码如下: <ol> <li>List item 1</li> <li>List item 2</li> <li ...