jQuery学习教程

  • jQuery API文档
  • 安装jQuery
  • 引用jquery
  • 查看jQuery版本信息
  • jQuery语法
  • jQuery选择器
  • 元素选择器
  • #id 选择器
  • .class 选择器
  • jQuery事件
  • $(document).ready()
  • $(document).click()
  • $(document).dblclick()
  • $(document).mouseenter()
  • $(document).mouseleave()
  • $(document).mousedown()
  • $(document).mouseup()
  • $(document).hover()
  • $(document).focus()
  • $(document).blur()
  • jQuery效果
  • 隐藏/显示
  • 淡入淡出
  • fadeIn() 用于淡入已隐藏的元素
  • fadeOut() 用于淡出可见元素
  • fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  • fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
  • fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
  • 滑动
  • slideDown() 方法用于向下滑动元素。
  • slideUp() 方法用于向上滑动元素。
  • slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。
  • 动画
  • animate() 方法允许创建自定义的动画
  • 停止动画
  • 链（Chaining）
  • jQuery HTML
  • 获取/设置内容
  • 获取/设置属性
  • 添加新元素
  • 删除元素
  • 操作CSS
  • CSS()
  • jQuery尺寸
  • jQuery遍历
  • 祖先
  • 后代
  • 过滤
  • AJAX
  • load()
  • get()
  • post()
  • noConflict()
  • JSONP 教程


jQuery API文档

https://www.runoob.com/manual/jquery/

安装jQuery

1、 jQuery库下载地址 ：https://jquery.com/download/
2、 从 CDN 中载入 jQuery

引用jquery

<head>
  <script  src = “路径（相对路径、绝对路径或者cdn线上路径）”></script>
</head>

查看jQuery版本信息

F12 调用浏览器的Console窗口中使用 $.fn.jquery 命令查看 jQuery使用版本；

jQuery语法

基础语法： $(selector).action()
选择符(selector) “查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

jQuery入口函数

$(document).ready(function(){
   //jQuery代码。。。。
});

可以简写为：

$(function(){
     //jQuery代码。。。
});

jQuery入口函数 是在 html所有标签（DOM）都加载之后，就回去执行。

javaScript 入口函数

window.onload = function(){
   //执行代码
};

javaScript 的window.onlaod事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。在页面中选取所有

元素: $(“p”)；

#id 选择器

jQuery #id选择器通过HTML元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法：$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。$(".test")

jQuery事件

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

常用的jQuery事件方法

$(document).ready()

jquery操作手册下载 jquery教程.chm_jQuery(function(){});

$(document).click()

click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。$(“p”).click(function(){});

$(document).dblclick()

当双击元素时，会发生 dblclick 事件。

$(document).mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

$(document).mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

$(document).mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

$(document).mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

$(document).hover()

hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$(document).focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

$(document).blur()

当元素失去焦点时，发生 blur 事件。

jQuery效果

隐藏/显示

隐藏：

$(document).hide(
速度("slow"、"fast" 或毫秒),
function(){ //回调函数：隐藏/显示之后执行的sql }
);

显示

$(document).show(
速度("slow"、"fast" 或毫秒),
function(){ //回调函数：隐藏/显示之后执行的sql }
);

显示/隐藏

$(document).toggle(
速度("slow"、"fast" 或毫秒),
function(){ //回调函数：隐藏/显示之后执行的sql }
);

淡入淡出

fadeIn() 用于淡入已隐藏的元素

语法: $(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeOut() 用于淡出可见元素

语法: $(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法: $(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

注意：
一、注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
二、fadeTo() 没有默认参数，必须加上 slow/fast/Time

滑动

slideDown() 方法用于向下滑动元素。

语法:$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

slideUp() 方法用于向上滑动元素。

语法:$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

动画

animate() 方法允许创建自定义的动画

语法：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
注意：
1、 animate() 几乎可以操作所有css 属性
2、 必须使用Camel标记书写所有的属性名。如：paddingLeft而不是padding-left
3、 色彩动画需要下载颜色动画插件，下载地址：https://plugins.jquery.com/color/
4、 使用相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=：

$("button").click(function(){
   $("div").animate({ height:'+=150px',  });
});

5、 使用预定义的值 ，把属性的动画值设置为“show”,“hide”,“toggle”
6、 使用队列功能

停止动画

stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

链（Chaining）

可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

jQuery HTML

获取/设置内容

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

获取/设置属性

attr() 方法用于获取属性值。

注意：text()、html()、val() 以及 attr()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

添加新元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

CSS()

返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：css(“propertyname”);
设置 CSS 属性
css(“propertyname”,“value”);
设置多个 CSS 属性
css({“propertyname”:“value”,“propertyname”:“value”,…});

jQuery尺寸

jquery操作手册下载 jquery教程.chm_jQuery_02

jQuery遍历

祖先

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


元素之间的所有祖先元素：$(“span”).parentsUntil(“div”);


后代

children()方法返回被选元素的所有直接子元素。
find()方法返回被选元素的后代元素，一路向下直到最后一个后代。
同胞（水平遍历）
siblings()方法返回被选元素的所有同胞元素。

next()方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

nextAll()方法返回被选元素的所有跟随的同胞元素。

nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。
返回介于

与

元素之间的所有同胞元素： $(“h2”).nextUntil(“h6”);

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

过滤

first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）： $(“p”).eq(1);
filter()
方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(“p”).filter(".url");
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。

AJAX

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

$.ajax({
   async :(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行,
   type: “post” //规定请求的类型（GET 或 POST）
   url:” 规定发送请求的 URL。默认是当前页面”,
   data: ” 规定要发送到服务器的数据(实例：{“action”:”get”,”id”,2})”
   dataType:”json”, //预期的服务器响应的数据类型。
   beforeSend:function(){ // 发送请求前运行的函数。},
   success(result,status,xhr),	//当请求成功时运行的函数,
   error(xhr,status,error), //如果请求失败要运行的函数,
   complete(xhr,status) //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）
});

load()

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

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

扩展：
$(document).load();

当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。
常用于检测页面（及其附带资源）是否加载完毕。

$(document).ready();
当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。如果你想尽快执行JS，可以使用此方法。[在html的头部的script标签中的，不处于ready()中的JS代码将早于ready()执行]

$(document).unload();
此事件在停止浏览页面的时候触发，此操作可能存在于刷新操作/F5，单击上一页按钮，进入其他页面或关闭整个tab或窗口。

总而言之，他们的调用顺序是 ready() >> load() >> unload() 。

get()

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

语法：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

post()

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

语法:
$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

noConflict()

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。

实例

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

JSONP 教程

jsonp 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。