JQuery快速入门-简介

作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/9102858.html

目录

一、什么是JQuery？
二、jQuery 的功能和优势
三、JQuery版本选择
四、JQuery初体验
五、JQuery代码风格

一、什么是JQuery？

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大a功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

二、jQuery 的功能和优势

jQuery 作为JavaScript 封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：

  • 像CSS 那样访问和操作DOM
  • 修改CSS 控制页面外观
  • 简化JavaScript 代码操作
  • 事件处理更加容易
  • 各种动画效果使用方便
  • 让Ajax 技术更加完美
  • 基于jQuery 大量插件
  • 自行扩展功能插件

jQuery 最大的优势，就是特别的方便。比如模仿CSS 获取DOM，比原生的JavaScript要方便太多。并且在多个CSS 设置上的集中处理非常舒服，而最常用的CSS 功能又封装到单独的方法，感觉非常有心。

最重要的是jQuery 的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。

 

三、JQuery版本选择

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

各版本地址：https://code.jquery.com/jquery/

 

四、JQuery初体验

1、从https://code.jquery.com/jquery/下载1.12.4版本，导入html

2、编写第一个程序

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title> 第一个简单的jQuery 程序</title>
<style type="text/css">
div{padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}
</style>
<script src="jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html(" Hello，welcome to JQuery's world！");
});
</script>
</head>
<body>
<div></div>
</body>
</html>

　　

注意：

$(document).ready(function(){
// 程序段
})
// 等价于
$(function(){
// 程序段
})   //在页面框架下载完成后就执行

 

五、JQuery代码风格

1、$  

$符表JQuery

var div1=JQuery('#myid')  //等价于var div1=$('#myid')

2、链式书写法

$(".title").click(function() {

　　$(this).addClass("curcol").next(".content").css("display", "block");

});

//获取class=title的元素，点击事件时，对当前这个标签添加curcol类，同时下一个类为content的元素添加样式，进行显示为block。

3、JQuery获取DOM对象

var tDiv=document.getElementById("Tmp"); // 获取DOM 对象：获取id为Tmp的对象
var oDiv=document.getElementById("Out"); // 获取DOM 对象：获取id为Out的对象
var cDiv=tDiv.innerHTML; // 获取DOM 对象中的内容 ：Tmp对象的内容赋值给cDiv
oDiv.innerHTML=cDiv; // 设置DOM 对象中的内容：将cDiv赋值给Out对象

说明：以上四行代码的意思就是：将ID为Tmp对象的内容赋值给ID为Out对象。

使用JQuery实现：

var tDiv=$("#Tmp"); // 获取jQuery 对象
var oDiv=$("#Out"); // 获取jQuery 对象
var cDiv=tDiv.html(); // 获取jQuery 对象中的内容
oDiv.html(cDiv); // 设置jQuery 对象中的内容

 

4、JQuery控制DOM对象

JavaScript实现：

　　

JQuery实现：

　　

5、JQuery控制页面CSS

?
1
2
3
4
5
6
7
<script type="text/javascript">//页面框架加载完成后，找到class=defcol的标签，当标签有点击事件发生时，给当前标签添加/删除class curcol。
$(function() {
　$(".defcol").click(function() {
　　$(this).toggleClass("curcol");
});
});
</script>

　　

参考自《JQuery权威指南（第二版）》

 

posted @   skyflask  阅读(281)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示