前言：JQ…被时代淘汰的三分前端库，也曾一度封神

JQuery是什么

JQuery是轻量级、快速、简洁的脚本库，它对Js进行了封装，简单来说就是可以用更少的代码做更多的事情。

中文API手册：https://jqueryapi.net/

速查表：https://www.bejson.com/apidoc/jquery/

JQuery的下载和安装

下载 JQuery

有两个版本的 JQuery 可供下载：

  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

Juery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

1
2
3
<head>
	<script src="jquery-1.10.2.min.js"></script>
</head>

通过 CDN引用JQ

  1. Staticfile CDN:
1
2
3
<head>
	<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
  1. 百度 CDN:
1
2
3
<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
  1. 又拍云 CDN:
1
2
3
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>

JQuery对象

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(*selector*).*action*()

  • 美元符号定义 JQuery
  • 选择符（selector）”查询”和”查找” HTML 元素，类似于querySelector()
  • selector为选择器，比如我要选择id=”test”的元素，那么我可以这样操作，$(“#test”)，又或者我选择class=”wrap”的元素，那么就是$(“.wrap”)
  • JQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素
  • $(“div”).hide() - 隐藏所有 <div> 元素
  • $(“div.test”).hide() - 隐藏所有 class=”test” 的 <div> 元素
  • $(“#test”).hide() - 隐藏 id=”test” 的元素

JQuery 入口函数：

1
2
3
4
5
6
7
$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数：

1
2
3
window.onload = function () {
    // 执行代码
}

JQuery 入口函数与 JavaScript 入口函数的区别：

  • JQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

JQuery选择器

  • JQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。
  • 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
  • JQuery 中所有选择器都以美元符号开头：$()。

基础选择器

JQuery 使用 CSS 选择器来选取 HTML 元素。

语法 描述
$(“*”) 选取所有元素
$(“#test”) 选择id值为test的元素，id值是唯一的所以返回单个元素
$(“div”) 选择所有 <div> 元素
$(“.myclass”) 选择使用myclass类的css的所有元素
$(“#test,div,.myclass”) 选取多个元素
$(“p.intro”) 选取所有 class=”intro”的<p>元素
$(“p#demo”) 选取所有 id=”demo”的<p>元素

实例1：

当用户点击按钮后，有 id=”test” 属性的元素将被隐藏：

1
2
3
4
5
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

实例2：

用户点击按钮后所有带有 class=”test” 属性的元素都隐藏：

1
2
3
4
5
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

层次选择器

语法 描述
$(“div span”) 选取<div>里的所有<span>元素
$(“div >span”) 选取<div>元素下元素名是<span>的子元素
$(“#one +div”) 选取id为one的元素的下一个<div>同辈元素，等同于$(“#one”).next(“div”)
$(“#one~div”) 选取id为one的元素的元素后面的所有<div>同辈元素，等同于$(“#one”).nextAll(“div”)
$(“#one”).siblings(“div”) 获取id为one的元素的所有<div>同辈元素（不管前后）
$(“#one”).prev(“div”) 获取id为one的元素的前面紧邻的同辈<div>元素

获取元素范围大小顺序依次为：

$(“#one”).siblings(“div”) > $(“#one~div”) > $(“#one +div”)

或是

$(“#one”).siblings(“div”) > $(“#one”).nextAll(“div”) > $(“#one”).next(“div”)

表单选择器

语法 描述
$(“:input”) 选取所有<input>，<textarea>，<select> 和 <button>元素
$(“:text”) 选取所有的单行文本框
$(“:password”) 选取所有的密码框
$(“:radio”) 选取所有单的选框
$(“:checkbox”) 选取所有的多选框
$(“:submit”) 选取所有的提交按钮
$(“:image”) 选取所有的图像按钮
$(“:reset”) 选取所有的重置按钮
$(“:button”) 选取所有的按钮
$(“:file”) 选取所有的上传域
$(“:hidden”) 选取所有不可见元素

基本过滤选择器

语法 描述
$(“div:first”) 选取所有<div>元素中第1个<div>元素
$(“div:last”) 选取所有<div>元素中最后一个<div>元素
$(“input:not(.myClass)”) 选取class不是myClass的<input>元素
$(“input:even”) 选取索引是偶数的<input>元素(索引从0开始)
$(“input:odd”) 选取索引是基数的<input>元素(索引从0开始)
$(“input:eq(2)”) 选取索引等于2的<input>元素
$(“input:gt(4)”) 选取索引大于4的<input>元素
$(“input:lt(4)”) 选取索引小于4的<input>元素
$(“:header”) 过滤掉所有标题元素，例如：h1、h2、h3等
$(“div:animated”) 选取正在执行动画的<div>元素
$(“:focus”) 选取当前获取焦点的元素

更多选择器

除了上述几个选择器外，JQuery还有其他常用的选择器和过滤选择器，下面列举几个。

语法 描述
$(this) 当前 HTML 元素
$(“[href]”) 选取带有 href 属性的元素
$(“[href$=’.jpg’]”) 所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”) id=”intro” 的 <div> 元素中的所有 class=”head” 的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(“tr:even”) 选取偶数位置的 <tr> 元素
$(“tr:odd”) 选取奇数位置的 <tr> 元素

JQuery事件

JQuery 事件处理方法是 jQuery 中的核心函数。

常用事件

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

1
2
3
4
// 当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
$("p").click(function(){
  $(this).hide();
});

dblclick()

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

1
2
3
4
// 当双击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

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

1
2
3
4
// mouseenter() 方法触发 mouseenter 事件
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseleave()

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

1
2
3
4
// mouseleave() 方法触发 mouseleave 事件
$("#p1").mouseleave(function(){
    alert("您的鼠标离开了 id="p1" 的元素上!");
});

mousedown()

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

1
2
3
4
// 鼠标按下了id为p1的元素
$("#p1").mousedown(function(){
    alert("鼠标在 id="p1" 的元素上按下！");
});

mouseup()

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

1
2
3
4
// 鼠标按下了id为p1的元素之后，松开了鼠标触发事件
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

1
2
// 调用方法
$( selector ).hover( handlerIn, handlerOut )
参数 描述
inFunction 必需。规定 mouseenter 事件发生时运行的函数。
outFunction 可选。规定 mouseleave 事件发生时运行的函数。 
1
2
3
4
5
6
7
8
9
// 实例，鼠标进入触发第一个函数，离开触发第二个函数
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()

当元素获得焦点时，发生 focus 事件。

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

1
2
3
4
// 输入框获取焦点，发生focus事件
$("input").focus(function(){
  $(this).css("background-color","blue");
});

blur()

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

1
2
3
4
// 输入框失去焦点，发生blur事件
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

keypress()

与 keypress 事件相关的事件顺序：

  1. keydown- 键按下的过程
  2. keypress - 键被按下
  3. keyup - 键被松开
1
2
3
4
5
// 触发被选元素的 keypress 事件
$(selector).keypress()

// 添加函数到 keypress 事件
$(selector).keypress(function)
参数 描述
function 可选。规定 keypress 事件触发时运行的函数。

keydown()

当键盘键被按下时发生 keydown 事件。

1
$(selector).keydown(function)

keyup()

当键盘键被松开时发生 keyup 事件。

1
$(selector).keyup(function)