Jquery学习笔记

owofile Lv5
  2023-12-11 10:33:08 2023-12-11 10:33:08 Created   2025-04-11 21:18:26 2025-04-11 21:18:26 Updated    

Jquery学习笔记

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma_inlink)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

[TOC]

1.基础选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入</title>
</head>
<body>
<button id="btn">ID点击</button>
<button class="btn">类点击</button>
<p>标签点击</p>
</body>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function () {//加载函数
alert("hello world");
});
$(function () {
$("#btn").click(function () {
alert("这是用ID选中的")
});
$(".btn").click(function () {
alert("这是用类选中的")
});
$("p").click(function () {
alert("这是用标签选中的")
});
$("\*").ready(function () {
alert("这是选择所有的")
});
$("#btn,.btn,p").click(function () {
alert("这是并集选择器")
})
}
);
</script>
</html>

2.层级选择器

JQuery的层次选择器可以帮助我们更精确地选择DOM元素。下面是一些常见的层次选择器的例子，希望能帮助新手更容易理解：

  1. 子元素选择器（child selector）：选择某个元素的直接子元素。 例如：$("ul > li") 选择ul元素下的所有直接子元素li。
  2. 后代元素选择器（descendant selector）：选择某个元素的所有后代元素。 例如：$("div span") 选择div元素下的所有后代元素span。
  3. 相邻兄弟元素选择器（adjacent sibling selector）：选择某个元素的下一个相邻兄弟元素。 例如：$("h1 + p") 选择h1元素后面的第一个相邻兄弟元素p。
  4. 兄弟元素选择器（general sibling selector）：选择某个元素的所有兄弟元素。 例如：$("h1 ~ p") 选择h1元素后面的所有兄弟元素p。
  5. 父元素选择器（parent selector）：选择某个元素的父元素。 例如：$("li").parent() 选择所有li元素的父元素。
  6. 祖先元素选择器（ancestor selector）：选择某个元素的所有祖先元素。 例如：$("span").parents() 选择所有span元素的祖先元素。

这些层次选择器可以根据具体的DOM结构和需求进行灵活的组合使用，帮助我们更准确地选择和操作DOM元素

例子:

1.子元素选择器（child selector）

选择指定父元素下的直接子元素。

1
2
// 选择id为parent的元素下的所有直接子元素为p的元素
$("#parent > p")

2.后代元素选择器（descendant selector）

选择指定父元素下的所有后代元素。

1
2
//选择id为parent的元素下的所有后代元素为p的元素
$("#parent p")

3.相邻兄弟元素选择器（adjacent sibling selector）

选择指定元素后面紧邻的兄弟元素。

1
2
// 选择id为sibling1的元素后面紧邻的兄弟元素为sibling2的元素
$("#sibling1 + #sibling2")

4.全部兄弟元素选择器（general sibling selector）：

选择指定元素后面的所有兄弟元素。

1
2
// 选择id为sibling1的元素后面的所有兄弟元素为sibling2的元素
$("#sibling1 ~ #sibling2")

5.父元素选择器（parent selector）

选择指定元素的父元素。

1
2
// 选择class为child的元素的父元素
$(".child").parent()

6.祖先元素选择器（ancestor selector）：

选择指定元素的所有祖先元素。

1
2
// 选择class为child的元素的所有祖先元素
$(".child").parents()

3.过滤选择器

JQuery是一个流行的JavaScript库，它提供了一种简化DOM操作的方式。JQuery选择器允许你使用类似CSS选择器的语法来选择DOM元素，并且可以根据需要组合使用多个选择器，以实现更精确的选择。

下面是一些常见的JQuery过滤选择器及其用法示例：

  1. 元素选择器：通过元素名称来选择特定的DOM元素。
1
2
$('p') // 选择所有的<p>元素
$('input') // 选择所有的<input>元素
  1. 类选择器：通过类名来选择具有特定类的DOM元素。
1
2
$('.myClass') // 选择所有具有类名为"myClass"的元素
$('#myId') // 选择ID为"myId"的元素
  1. 属性选择器：通过元素的属性值来选择元素。
1
2
$('input[type="text"]') // 选择所有类型为"text"的<input>元素
$('a[href^="https"]') // 选择所有以"https"开头的<a>元素
  1. 子元素选择器：通过父元素来选择其子元素。
1
2
$('ul li') // 选择所有<ul>下的<li>元素
$('.myClass > span') // 选择具有类名为"myClass"的元素下的<span>元素
  1. 过滤选择器：通过特定条件来选择元素。
1
2
3
4
$('p:first') // 选择第一个<p>元素
$('li:last') // 选择最后一个<li>元素
$('tr:even') // 选择所有偶数行的<tr>元素
$('div:animated') // 选择正在执行动画的<div>元素
  1. 内容过滤选择器：通过元素的文本内容来选择元素。
1
2
3
$('p:contains("Hello")') // 选择包含文本"Hello"的<p>元素
$('p:empty') // 选择没有子元素或文本内容的<p>元素
$('p:has(span)') // 选择包含<span>元素的<p>元素

这些只是JQuery选择器的一小部分，但是它们代表了一些常见的选择器用法。希望这些示例能够帮助新手更好地理解和使用JQuery选择器。

4.JQueryDOM操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
$(function () {
//查找节点
console.log($("ul li"));
//创建节点
var li1 = $("<li>大头儿子</li>");
var li2 = $("<li>小魔仙</li>");
//插入节点
$("ul").after(li1);
$("ul").before(li2);
//删除元素
// $("ul li:eq(1)").remove();
// $("ul li").remove(":eq(1)");
//为li绑定点击事件
$("ul li").click(function () {
alert("li");
})
//代码段1：使用remove()方法删除
// var delli1 = $("ul li:eq(1)").remove(); //删除指定元素
// $("ul").append(delli1); //恢复元素，click事件不存在
//代码段2：使用detach()方法删除
// var delli2 = $("ul li:eq(1)").detach(); //删除指定元素
// $("ul").append(delli2); //恢复元素,click事件仍存在
// $("ul li:eq(2)").empty();
//复制节点
$("ul li:eq(0)").clone(true).appendTo(".animationList");
$("ul li:eq(0)").clone(false).appendTo(".animationList");
})
</script>

1.删除

1
2
3
4
5
6
7
$(function () {
$("ul li").click(function () {
alert("哈哈");
});
let dt = $("#a").remove(); //删除但是会保留事件
$(".animationList").append(dt); //追加
})

2.追加，移除样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<h2>热门动画排行</h2>
<ul class="animationList">
<li id="c">名侦探柯南</li>
<li id="a">阿拉蕾</li>
<li id="b">海贼王</li>
</ul>
</body>
<script>
$("#a").siblings().css("color","blue");
$("#b").parents().css("color","red");
$("#c").parent().css("color","yellow");
$("#c").parent().css("font-size",5);
</script>

Query是一个JavaScript库，提供了方便操作HTML元素和属性的方法。在JQuery中，属性值操作可以通过以下方法进行：

  1. attr()方法：用于获取或设置元素的属性值。如果传递一个参数，该方法返回匹配元素的属性值；如果传递两个参数，第一个参数表示属性名，第二个参数表示要设置的属性值。例如：

    1
    2
    3
    4
    // 获取src属性的值
    var srcValue = $('img').attr('src');
    // 设置src属性的值
    $('img').attr('src', 'new-image.jpg');

  2. prop()方法：用于获取或设置元素的属性值。与attr()方法不同的是，prop()方法用于处理元素自身的属性，如checked、disabled等。用法与attr()方法类似。例如：

    1
    2
    3
    4
    // 获取checkbox是否选中
    var isChecked = $('#myCheckbox').prop('checked');
    // 设置checkbox为选中
    $('#myCheckbox').prop('checked', true);

  3. val()方法：用于获取或设置表单元素的值（如input、select、textarea）。用法与attr()方法类似。例如：

    1
    2
    3
    4
    // 获取文本框的值
    var inputValue = $('#myInput').val();
    // 设置文本框的值
    $('#myInput').val('New value');

这些方法可以帮助新手轻松地操作和修改元素的属性值。通过选择元素并使用适当的方法，可以实现各种属性值的操作。

3.读取

1
2
3
4
5
6
7
8
9
<script>
let name = $("#name").val();
let val = $("#password").val();
if (name =="admin" && val=="admin"){
alert("登录成功");
}else {
alert("登录失败");
}
</script>

5.事件和动画

1.鼠标事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#phone").mouseover(function () {
$("#ul01").css("display","block");
}).mouseout(function () {
$("#ul01").css("display","none");
});
$("#home").mouseenter(function () {
$("#ul02").css("display","block");
}).mouseleave(function () {
$("#ul02").css("display","none");
});
$("#outer").mouseenter(function () {
$("#ul03").css("display","block");
}).mouseleave(function () {
$("#ul03").css("display","none");
});

JQuery是一个流行的JavaScript库，它简化了JavaScript代码的编写过程。JQuery提供了许多内置的方法和事件来处理用户与网页之间的交互，其中包括鼠标事件。

下面是一些常用的JQuery鼠标事件及其说明：

  1. click事件：当用户点击（单击）元素时触发。例如，下面的代码会在用户单击按钮时显示一个提示框：
1
2
3
$("button").click(function(){
alert("Button clicked!");
});
  1. dblclick事件：当用户双击元素时触发。例如，下面的代码会在用户双击图片时显示一个提示框：
1
2
3
$("img").dblclick(function(){
alert("Image double-clicked!");
});
  1. mouseenter事件：当鼠标进入元素时触发。例如，下面的代码会在鼠标进入指定区域时改变其背景颜色：
1
2
3
$("#myDiv").mouseenter(function(){
$(this).css("background-color", "yellow");
});
  1. mouseleave事件：当鼠标离开元素时触发。例如，下面的代码会在鼠标离开指定区域时还原其背景颜色：
1
2
3
$("#myDiv").mouseleave(function(){
$(this).css("background-color", "white");
});
  1. mouseover事件：当鼠标移动到元素上方时触发。例如，下面的代码会在鼠标移动到图片上方时显示一个提示框：
1
2
3
$("img").mouseover(function(){
alert("Mouse over image!");
});

这些只是JQuery鼠标事件的一小部分，JQuery还提供了许多其他鼠标事件，如mousedown、mouseup、mousemove等。通过使用这些事件，你可以对用户与网页的交互进行更精确的控制。

2.键盘事件

1
2
3
4
5
6
7
8
$(function () {
$("#message").keydown(function () {
console.log("按下键盘");
}).keyup(function () {
console.log("释放键盘")
}).keypress(function () {
console.log("产生可打印的字符")
});

JQuery是一个流行的JavaScript库，提供了许多实用的功能和方法，其中包括处理键盘事件。键盘事件是在用户与网页交互时触发的事件，例如按下键盘上的按键或释放按键。

JQuery提供了多个键盘事件，下面是一些常用的键盘事件及其说明：

  • keydown: 当用户按下键盘上的任意键时触发。
  • keyup: 当用户释放键盘上的任意键时触发。
  • keypress: 当用户按下并释放键盘上的任意字符键时触发。注意，这个事件不会在按下非字符键时触发，例如Shift、Ctrl等键。
  • keypress和keydown的区别是keydown事件能够触发非字符键的按下事件。

以下是一个简单的例子，展示如何使用JQuery处理键盘事件：

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$(document).keydown(function(event) {
// 获取按下的键码
var keyCode = event.keyCode;
// 如果按下的是Enter键
if (keyCode === 13) {
alert("You pressed Enter key!");
}
});
});

在这个例子中，我们使用keydown事件来监听整个文档上的键盘按下事件。当按下任意键时，会触发函数内的代码。在函数中，我们获取按下的键码，并检查是否是Enter键（键码为13）。如果是Enter键，就弹出一个提示框。

这只是一个简单的例子，你可以根据需要使用其他键码或结合其他事件来编写更复杂的键盘事件处理逻辑。JQuery的键盘事件提供了很多灵活的选项，可以帮助你创建交互性强的网页应用程序。

3.绑定事件和移除事件

JQuery是一个广泛应用于网页开发中的JavaScript库，它提供了许多简化DOM操作和处理事件的方法。绑定事件和移除事件是JQuery中常用的方法之一，可以用于在特定条件下执行相应的JavaScript代码。

绑定事件

绑定事件是指将一个特定的JavaScript函数与一个HTML元素的事件关联起来。当该事件被触发时，绑定的函数将被执行。JQuery通过on()方法来实现事件绑定。

语法：

1
$(selector).on(event, function)
  • selector表示要绑定事件的元素。可以是任何有效的CSS选择器，例如元素名、类名或ID。
  • event表示要绑定的事件的名称，例如click、mouseover等。
  • function是一个回调函数，当事件被触发时将执行其中的代码。

示例：

1
2
3
4
5
6
7
8
// 绑定一个按钮的点击事件
$('#myButton').on('click', function() {
alert('按钮被点击了！');
});
// 绑定多个元素的同一事件
$('.myClass').on('mouseover', function() {
$(this).css('background-color', 'yellow');
});
移除事件

移除事件是指取消之前绑定的事件。JQuery提供了off()方法来移除已经绑定的事件。

语法：

1
$(selector).off(event)
  • selector表示要移除事件的元素，与绑定事件时的选择器相同。
  • event表示要移除的事件的名称。

示例：

1
2
3
4
// 移除一个按钮的点击事件
$('#myButton').off('click');
// 移除所有元素的同一事件
$('.myClass').off('mouseover');

通过绑定事件和移除事件，你可以方便地在网页中管理各种交互行为，并根据需要动态地添加或移除事件处理程序。这些方法在JQuery中非常常用且易于理解，适合新手入门。

4.复合事件

JQuery复合事件是指将多个事件绑定到同一个元素上，以便在特定的条件下执行多个操作。通过复合事件，可以简化代码并提高交互性。下面是一个例子来说明如何使用JQuery复合事件。

假设我们有一个按钮，当用户点击按钮时，会触发一个事件，同时按住Shift键并点击按钮时，会触发另一个事件。我们可以使用JQuery的on()方法来绑定这两个事件，并使用shiftKey属性来检查Shift键是否按下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
// 获取按钮元素
var button = $("#myButton");
// 绑定点击事件
button.on("click", function() {
alert("点击事件被触发！");
});
// 绑定复合事件
button.on("click", function(event) {
if (event.shiftKey) {
alert("Shift键 + 点击事件被触发！");
}
});
});

在这个例子中，我们先使用on()方法将点击事件绑定到按钮上。然后，我们再次使用on()方法来绑定一个复合事件。当用户点击按钮时，第一个事件会触发并弹出一个提示框。当用户按住Shift键并点击按钮时，第二个事件会触发并弹出另一个提示框。

通过使用复合事件，我们可以根据不同的条件执行不同的操作，从而增强用户体验。这个例子展示了如何在按钮上实现不同事件的触发，但你可以根据自己的需求来定义和绑定复合事件。

5.常用动画方法

JQuery是一个流行的JavaScript库，提供了许多强大的动画方法，用于创建交互性丰富的网页。下面是一些常用的JQuery动画方法以及它们的示例。

  1. hide()和show(): 这些方法用于隐藏和显示元素。可以通过设置参数来指定动画的速度和完成后的回调函数。例如：
1
2
$(element).hide(1000); // 将元素以1秒的速度隐藏
$(element).show(2000); // 将元素以2秒的速度显示
  1. fadeIn()和fadeOut(): 这些方法通过渐变效果淡入和淡出元素。可以通过设置参数指定动画的速度和完成后的回调函数。例如：
1
2
$(element).fadeIn(1000); // 以1秒的速度淡入元素
$(element).fadeOut(2000); // 以2秒的速度淡出元素
  1. slideUp()和slideDown(): 这些方法通过滑动效果向上或向下折叠元素。可以通过设置参数指定动画的速度和完成后的回调函数。例如：
1
2
$(element).slideUp(1000); // 以1秒的速度向上折叠元素
$(element).slideDown(2000); // 以2秒的速度向下展开元素
  1. animate(): 这个方法可以通过指定CSS属性的变化来创建自定义动画。可以设置动画的持续时间、缓动效果和完成后的回调函数。例如：
1
2
3
4
$(element).animate({
opacity: 0.5, // 将元素透明度设置为0.5
left: '+=100px' // 向右移动100像素
}, 1000); // 在1秒内完成动画
  1. toggleClass(): 这个方法可以切换元素的类。通过设置参数来指定动画的速度和完成后的回调函数。例如：
1
$(element).toggleClass('active', 1000); // 在1秒内切换元素的active类

这些是JQuery中常用的动画方法，可以根据需要选择适合的方法来创建各种交互效果。在示例中，可以根据具体情况自定义元素和动画效果。

6.自义定动画方法

JQuery是一个广泛使用的JavaScript库，它提供了许多内置的动画函数和效果，可以方便地创建各种动画效果。除了内置的动画函数外，JQuery还允许开发者自定义动画方法。

自定义动画方法允许您定义并使用自己的动画效果，将其与JQuery的其他功能结合使用。下面是一个简单的自定义动画方法的介绍和示例：

介绍

自定义动画方法是通过JQuery的$.fn.extend()函数来实现的。该函数允许我们向JQuery对象的原型（prototype）添加新的方法。

1
2
3
4
5
$.fn.extend({
customAnimation: function() {
// 在这里编写自定义动画的代码
}
});

在上面的代码中，我们使用customAnimation作为自定义动画方法的名称。使用$.fn.extend()函数可以向JQuery对象的原型添加任意数量的自定义方法。

示例

下面是一个简单的自定义动画方法的示例，它将元素平滑地从左到右移动：

1
2
3
4
5
6
7
8
9
$.fn.extend({
slideRight: function() {
return this.each(function() {
$(this).animate({
marginLeft: "+=200px"
}, 1000);
});
}
});

在上面的代码中，我们定义了一个名为slideRight的自定义动画方法。该方法使用animate()函数来实现动画效果。在这个例子中，我们将元素的marginLeft属性增加200像素，动画的持续时间为1秒。

要使用该自定义动画方法，您只需将其应用到一个JQuery对象上，就像使用内置的动画方法一样：

1
$("div").slideRight();

上述代码将应用slideRight动画效果到所有的<div>元素上。

自定义动画方法可以根据需求进行扩展，您可以使用JQuery的其他动画函数、属性或回调函数来创建更复杂的动画效果。

希望这个简单的例子能帮助您更好地理解JQuery自定义动画方法。您可以根据自己的需求扩展和修改这些方法，以满足您的动画效果要求。

6.表单校验

1.表单选择器

语法 描述 返回值
:input 匹配所有input，textarea，select和button元素 元素集合
:text 匹配所有的单行文本框 元素集合
:password 匹配所有密码框 元素集合
:radio 匹配所有单选按钮 元素集合
:checkbox 匹配所有复选框 元素集合
:submit 匹配所有提交按钮 元素集合
:reset 匹配许所有重置按钮 元素集合
:button 匹配所有按钮 元素集合
:image 匹配所有文件域 元素集合
:file 匹配所有文件域 元素集合

过滤选择器

语法 描述 返回值
:enabled 匹配所有可用元素 元素集合
:disabled 匹配所有不可元素 元素集合
:checked 匹配所有被选中元素(复选框，单选按钮，下拉列表) 元素集合
:selected 匹配select所选中的option元素 元素集合

2.表单校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let password = $("#password").val();
let email = $("#email").val();
let Se = $("#Semail");
let Sp = $("#Spassword");
// if (email == '' || email == null){
// alert("邮箱不能为空");
// Sp.html("邮箱不能为空");
// return false;
// }
// if (email.indexOf(".") == -1){
// alert("邮箱格式不正确");
// return false;
// }
// if (email.indexOf("@") == -1){
// alert("邮箱格式不正确");
// return false;
// }
// if (email.indexOf("@") == 0){
// alert("邮箱不能以@为开头");
// return false;
// }
// if (password == '' || password == null){
// alert("密码不能为空");
// return false;
// }
// if (password.length < 8){
// alert("密码不能小于八位");
// return false;
// }
})

3.正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#form").submit(function () {
let password = $("#password").val();
let email = $("#email").val();
let Se = $("#Semail");
let Sp = $("#Spassword");
let emailExp = /^([a-zA-Z0-9\_\-\.]+)@([a-zA-Z0-9\_\-\.]+)\.([a-zA-Z]{2,5})$/;
if (emailExp.test(email) == false){
Se.html("邮箱错误");
}
let passwordExp = /^[0-9]{6,18}$/;
if (passwordExp.test(password) == false){
Sp.html("密码错误");
}
alert("登录成功");
return true;
})
})
元字符 描述
/…/ 代表一个模式的开始和结束
^ 匹配字符串开始的位置
$ 匹配字符串结束的位置
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除了数字之外的任何字符，等价于*[^0-9]
\w 匹配一个数字、下划线或字母字符，等价于**[A-Za-z0-9_]
\W 任何非单字字符，等价于*[^a-zA-z0-9_]
. 除了换行符之外的任意字符
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次。其中n和m均为非负整数，n<=m
***** 匹配前一项0次或多次，等价于{0,}
+ 匹配前一项1次或多次，等价于{1,}
？ 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
[] 定义匹配的字符串
() 用于提取匹配的字符串，表达式中有几个()就有几个相应匹配字符串
{} 用于匹配长度
** **

RegExp对象的方法

方法 描述
test(String) 用于检索一个字符串是否匹配某个模式。如果在字符串含有匹配的文本，则返回true；否则返回false
exec(String) 用于检索一个字符串是否匹配某个模式。如果在字符串含有匹配的文本，则返回匹配的结果；否则返回null

String对象的方法

方法 描述
match(RegExp) 检索字符串中一个或多个正则表达式匹配的值，返回一个存放匹配结果的数组
search(RegExp) 检索字符串中第一个与正则表达式相匹配的字符串的起始位置
replace(RegExp/String,replacement) 替换与正则表达式匹配的字符串
split(separator,n) 以separator为边界，将字符串分割为字符串数组，n为限制输出数组的个数

4.HTML5表单新增属性

属性 描述
placeholder 提供一种提示(hint),也就是输入框里的默认值，点击后会自动消失
required 规定输入域不能为空
pattern 规定用于验证输入域的正则表达式

5.validity属性应用

当表单元素添加验证属性required和pattern后，可以通过HTML5提供的validityState对象获取当前验证属性的验证状态

​ 语法：

1
var validityState=document.getElementById("user").validity

​ validityState对象属性

属性 描述
valueMissing 当表单元素设置required属性后，如果表单的值为空，则无法通过表单验证，****返回true；否则，返回false
typeMismatch 当用户输入的内容与表单类型不匹配时，返回true；否则，返回false
patternMismatch 当用户输入的内容与表单元素patterm特性的正则不匹配时，****返回true;否则，返回false
tooLong 当用户输入的内容超过了表单元素maxLength特性限定的字符长度时，****返回true;否则，返回false
rangeUnderflow 当用户输入的值小于min特性的值时，返回true；否则，返回false
rangeOverflow 当用户输入的值大于max特性的值时，返回true; 否则，返回false
stepMismatch 当用户输入的值不符合step特性所推算的规则时，返回true; 否则，返回false
customError 使用自定义的验证错误提示信息时，当存在自定义错误信息时，****返回true: 否则，返回false
  • Title: Jquery学习笔记
  • Author: owofile
  • Created at : 2023-12-11 10:33:08
  • Updated at : 2025-04-11 21:18:26
  • Link: https://owofile.github.io/blog/2023/12/11/JQuery/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
Jquery学习笔记
  1. Jquery学习笔记
    1. 1.基础选择器
    2. 2.层级选择器
    3. 3.过滤选择器
    4. 4.JQueryDOM操作
    5. 5.事件和动画
    6. 6.表单校验