介绍
当前最新版本: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
- 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) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
参考资料: