jQuery框架总结

介绍

当前最新版本:jQuery 3.3.1

  • jQuery是一个JavaScript函数库。
  • jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
  • jQuery 极大地简化了 JavaScript 编程。

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。很多大公司都在使用 jQuery

jQuery下载 jQuery

有两个版本的 jQuery 可供下载:

1、Production version - 用于实际的网站中,已被精简和压缩。
2、Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 https://jquery.com/ 中下载。

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head>
<script src="jquery-3.3.1.min.js"></script>
</head>

jQuery对象和DOM对象

  • DOM对象,即是我们用传统的方法(javascript)获得的对象;
  • jQuery对象即是用jQuery类库的选择器获得的对象。

代码如下:

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。
如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例:

$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;
上面的那段代码等同于:
document.getElementById("foo").innerHTML;

jQuery对象和DOM对象的互相转换

  • jquery对象转换成 DOM对象
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //DOM对象 也可写成 var cr=$cr.get(0)
  • DOM对象转换成jquery对象
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

DOM Traversal and Manipulation

  1. Get the <button> element with the class ‘continue’ and change its HTML to ‘Next Step…’
$( "button.continue" ).html( "Next Step..." )

Event Handling
2. Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});

Ajax
3. Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp’s html with the returned text.

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

jQuery 选择器

  • 元素选择器
  • #id 选择器
  • .class 选择器

jQuery 事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

具体有:click、keyup、keydown、 focus、blur

DOM全称是Document Object Model,即文档对象模型。DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准。

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”


参考资料:

  1. http://www.runoob.com/jquery/jquery-events.html
  2. https://www.cnblogs.com/dong93/p/4673493.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery团队发布了jQuery 1.8.2版本。 该版本主要修复之前两个版本中的一些bug和性能衰退问题,包括: •Deferred:当typeof( target)=='object'时,Deferred.promise( target)才能正常工作 •Event:使用委托事件和伪类时的性能衰退问题 •Misc:修复了一些兼容问题,并进行了优化 •Offset:在BlackBerry5和iOS3上使用会抛出一个错误 •修复了选择器的多个bug 详细信息:JQUERY 1.8.2 CHANGE LOG •jquery-*.min.js(用于网站直接应用的压缩版本) •jquery-*.js(用于调试或学习研究的未压缩版本) 版本主要包括jquery1.32,jquery1.42,jquery 1.44,jquery 1.5,jquery1.6,jquery1.8.2版本。 Query1.5下载,包括:jquery-1.5.js, jquery-1.5.min.js, jquery-1.5-vsdoc.js 其中 jquery-jquery-1.5-vsdoc.js可以为Visual Studio提供jquery1.5的智能提示。 jQuery 1.5.1 发布,全面支持IE9 jQuery 1.5.1发布了!这是自jQuery1.5发布以来第一个小版本更新,并且解决了很多BUG。 据jQuery官方博客5月3日的最新消息,jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写,还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。 jquery1.6.4 此版本较jQuery 1.6.3进行了小幅改进,包括: Data:修复了用“-”所组成的数据属性名不能被采用骆驼式命名法(函数名中的每一个逻辑断点都有一个大写字母来标记)的函数所读取。 Event:修复了IE8中 $(“form”).live(“submit”, fn) 语句没有被<button type=”submit”>所激发的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值