什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的 “写的少，做的多” 的 JavaScript 库。
jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，Jquery 还提供了大量的插件。

基础jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行 “操作”（actions）。
基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询” 和 “查找” HTML 元素
jQuery 的 action () 执行对元素的操作

所有 jQuery 函数位于一个 document ready 函数中：

    $(document).ready(function(){// 开始写 jQuery 代码...});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
提示：简洁写法（与以上写法效果相同）:

$(function(){//这是jQuery的入口函数// 开始写 jQuery 代码...});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

#id 选择器
当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
实例

$(document).ready(function(){$("button").click(function(){$("#test").hide();});
});

.class 选择器
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
实例

$(document).ready(function(){$("button").click(function(){$(".test").hide();});
});

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

三个简单实用的用于 DOM 操作的 jQuery 方法：

text () - 设置或返回所选元素的文本内容
html () - 设置或返回所选元素的内容（包括 HTML 标记）
val () - 设置或返回表单字段的值

实例：

//获得内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){alert("HTML: " + $("#test").html());
});//设置内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){$("#test3").val("RUNOOB");
});

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass () - 向被选元素添加一个或多个类
removeClass () - 从被选元素删除一个或多个类
toggleClass () - 对被选元素进行添加 / 删除类的切换操作
css () - 设置或返回样式属性

实例

$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");
});//使用此方法，某些标签会增添class这个属性，如果此时在配合css样式

例如：


.blue
{color:blue;
}
//就可以让标签达到变色的效果。

jQuery 遍历

什么是遍历？
jQuery 遍历，意为 “移动”，用于根据其相对于其他元素的关系来 “查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

遍历 DOM 树
这些 jQuery 方法很有用，它们用于遍历 DOM 树：

parent() ：方法返回被选元素的直接父元素。
parents()：方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素。
children () 方法返回被选元素的所有直接子元素。
find () 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回介于 <span>与<div> 元素之间的所有祖先元素：
实例

$(document).ready(function(){$("span").parentsUntil("div");
});

下面的例子返回属于 <div>后代的所有 <span>元素：
实例

$(document).ready(function(){$("div").find("span");
});

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

jQuery load () 方法

jQuery load () 方法是简单但强大的 AJAX 方法。
load () 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键 / 值对集合。
可选的 callback 参数是 load () 方法完成后所执行的函数名称。

可选的data (Map) 是发送至服务器的 key/value 数据。
实例：

$("#box").load("testa.html",{name:"bingo",sex:"man"});

可选的 callback 参数规定当 load () 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load () 方法完成后显示一个提示框。如果 load () 方法已成功，则显示 “外部内容加载成功！”，而如果失败，则显示错误消息：

实例

$("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert(" 外部内容加载成功！");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);});
});

jQuery - AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求 - 响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get () 方法

$.get () 方法通过 HTTP GET 请求从服务器上请求数据。
语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get () 方法从服务器上的一个文件中取回数据：
实例

$("button").click(function(){$.get("demo_test.php",function(data,status){alert(" 数据: " + data + "\n 状态: " + status);});
});

jQuery $.post () 方法

$.post () 方法通过 HTTP POST 请求向服务器提交数据。
语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post () 连同请求一起发送数据：
实例

$("button").click(function(){$.post("/try/ajax/demo_test_post.php",{name:" 菜鸟教程 ",url:"http://www.runoob.com"},function(data,status){alert(" 数据: \n" + data + "\n 状态: " + status);});
});

$.post函数会从页面传信息到php页面，PHP页面通过
$.get () 和 $.post () 方法是 jQuery 中的全局函数，而在此之前讲的 load () 是对 jQuery 对象进行操作的。

jQuery 杂项方法

data() 向被选元素附加数据，或者从被选元素获取数据
each() 为每个匹配元素执行函数
get() 获取由选择器指定的 DOM 元素
index() 从匹配元素中搜索给定元素
$.noConflict() 释放变量 $ 的 jQuery 控制权
$.param() 创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
removeData() 移除之前存放的数据
size() 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
pushStack() 将一个 DOM 元素集合加入到 jQuery 栈
$.when() 提供一种方法来执行一个或多个对象的回调函数

jQuery教程——jQuery的快速入门相关推荐

Swift教程Swift语言快速入门(内部资料)
Swift语言快速入门(内部资料) 试读下载地址:http://pan.baidu.com/s/1eQCGRHw 前言Swift教程Swift语言快速入门(内部资料)Swift教程Swift语言快速入 ...
OpenAI API及ChatGPT系列教程1：快速入门
系列文章目录: OpenAI API及ChatGPT系列教程1:快速入门 OpenAI API及ChatGPT系列教程2:使用手册 OpenAI API及ChatGPT系列教程3:API参考(Pyth ...
android java教程_[Java教程]Android开发快速入门
[Java教程]Android开发快速入门 0 2020-12-22 18:01:40 Xamarin.Android 应用程序剖析以下屏幕截图列出了解决方案的内容. 下面是一个解决方案资源管理器, ...
Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
mybatis select count(*) 一直返回0 mysql_Mybatis教程1:MyBatis快速入门
点击上方"Java技术前线",选择"置顶或者星标" 与你一起成长一.Mybatis介绍 MyBatis是一个支持普通*SQL*查询,存储过程和高级映射的优秀持 ...
【MATLAB Image Processing Toolbox 入门教程三】快速入门之“在多光谱图像中寻找植被”
[MATLAB Image Processing Toolbox 入门教程三] 本篇摘要一.从多光谱图像文件导入彩色红外通道二.构建近红外光谱散射图三.计算植被系数并显示其定位四.综合实例部分 ...
蓝桥杯嵌入式史上最全最详细教程教你快速入门
文章目录前言一.入门篇二.进阶篇三.实战篇总结前言从现在开始我将为大家持续更新STM32快速入门的教程,大家参加蓝桥杯或者学习STM32都可以关注我这一套教程,希望大家多多留言,我尽量写 ...
易百教程Oracle,SQLite快速入门教程
这个SQLite快速入门教程教你如何有效地开始学习并使用SQLite.通过本教程的实践操作学习之后,相信你应该可以了解并能够熟练地使用SQLite了. 如果您一直在使用其他关系数据库管理系统,例如:M ...
Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...
06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...

jQuery教程——jQuery的快速入门

目录