jQuery框架总结

最新推荐文章于 2025-04-10 21:46:12 发布

天明少侠

最新推荐文章于 2025-04-10 21:46:12 发布

阅读量946

点赞数

CC 4.0 BY-SA版权

分类专栏： Front-end frame 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/thebigdipperbdx/article/details/79887436

Front-end frame 专栏收录该内容

14 篇文章

订阅专栏

介绍

当前最新版本：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" );
  }
});