jQuery学习笔记总结

bpmh

已于 2022-05-14 16:38:42 修改

阅读量1.6k

点赞数 1

文章标签： jquery 学习 javascript

于 2022-05-13 20:34:50 首次发布

本文链接：https://blog.csdn.net/lyj15012351173/article/details/124759437

版权

jQuery

注：前段时间在菜鸟教程自学了一下jQuery，记录一下笔记，如有错误，望多多指正，感谢感谢。
1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette

基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

引用jQuery方式有两种，一种是通过src指定到项目的js，

<script src="../js/jquery-3.5.1.min.js"></script>

另一种是通过CDN（内容分发网络）指定jquery，建议使用第二种

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

//完整代码
<!--<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>-->
<!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="../js/jquery-3.5.1.min.js"></script>-->
<script>
    if(typeof jQuery=="undefined"){// 判断jQuery是否定义。
        window.alert("jquery未引入");//弹出弹窗
    }else{
        window.alert("jQuery已成功引入");
    }
</script>

2.jQuery 语法

jQuery语法是通过选取html元素，并对选取元素进行某些操作。

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

$:美元符号定义jQuery
(selector):选择符（selector）选择和查找html元素
action(): jquery 的action()执行对元素的操作

<body>
<p>点我1</p>
<p id="t1">点我2</p>
<p class="button">点我3</p>
<a>hello</a>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("p.button").hide();//隐藏class为button的元素
    $("#t1").hide();//隐藏id为t1的元素
    $("a").hide();//隐藏所有a标签
</script>

文档就绪事件

//也是jQuery入口函数
$(document).ready(function(){
//开始写jQuery代码。。。
});

／／简写
    ＄(function(){
    //开始写jQuery代码。。。
    })

//JavaScript入口函数
window.οnlοad=function(){
//执行代码
};

作用：防止文档在完全加载之前运行jQuery代码，即在DOM完全加载之后才可以对DOM进行操作。

如果在文档没有完全加载完成之前运行函数，操作可能失败。如：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

JS和jQuery入口函数的区别：

jQuery的入口函数是在html所有标签（DOM）都加载之后，才会去执行。
js里的window.onload事件是等到所有内容，包括图片之类的文件都加载完之后，才会去执行

jQuery选择器

允许对单个元素或组件进行操作

jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”或选择HTML元素，它基于已经存在的css选择器，此外，还有一些它自定义的选择器。

jQuery中的所有选择器都以美元符号开头：$()

元素选择器

基于元素名选取元素：

$(“p”):选取页面上所有

元素

<body>

<p>广告</p>
<p>广告1</p>
<p>广告2</p>
<p>广告3</p>
<button class="button">点我关闭广告</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>-->
<script>
/*$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
})*/
    $(function(){
        $("button").click(function(){ // 用户点击按钮后，关闭广告。
            $("p").hide();
        });
    });
</script>

在这里插入图片描述

jQuery事件

jQuery是为事件处理而特别设计的。

事件：页面对不同访问者的响应叫做事件。

事件中经常使用的术语“触发”（或激发），e：当您按下按键时触发keypress事件。

常见DOM事件：

click dblclick单击双击事件

mouseenter：当指针进入被选元素时，会发生mouseenter事件 e：当鼠标指针进入p元素时，设置背景色为红色且长度变成200px。

$(function(){
    $("p").mouseenter(function(){
        $("p").css("background-color","blue")
        $("p").css("width","200px")
    });
    $("p").mouseleave(function(){
        $("p").css("background-color","lightgray")
        $("p").css("width","1000px")
	});
});

mouseenter通常和mouseleave一起使用，鼠标移动到区域内变颜色，鼠标离开区域恢复颜色。

hover():鼠标悬停事件

 $("p").hover(function () {
        $("p").css("background-color","red");
    },function(){
        $("p").css("background-color","pink");
    });
//语法：
$(selector).hover(inFunction,outFunction)
//调用
$(selector).hover(handlerIn,handlerOut)
//同
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

记录键盘事件：keypress（）

<body>
请输入:<input type="text">
<p>按键次数：<span>0</span></p>
</body>
<script>
    i=0;
    $(function(){
        $("input").keypress(
            function () {
                $("span").text(i+=1);
            });
    });
</script>

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

keydown 键按下的过程
keypress 键被按下
keyup 键被松开

keypress事件不会触发所有的键（ALT，CTRL，SHIFT、ESC），若需要统计全部的按键，需要使用keydown();

提交：dosubmit();

<body>
<form>
    账号：<input type="text"><br>
    密码：<input type="text"><br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    $(function(){
     $("form").submit(function(){
         alert("提交成功！");
     });
    })

change()方法

 $("form").change(function(){
         alert("输入框内容变化了！");
     });

当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

focus()方法和change相反，该方法是获得焦点时发生。，如点击输入框或图片才会显示提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        span{
            display:none;
        }
    </style>
</head>
<body>
<input type="text">
<span>请输入您的电话号码？</span>
<p>点击输入获取焦点。</p>
</body>
<script>
    $(function(){
        $("input").focus(function () {
            $("span").css("display","inline").fadeOut(2000);
        });
    });
</script>
</html>

focus（）：焦点的意思通常和blur（）连用；前者是获取到焦点时触发，后者是失去焦点时触发。 blur（）模糊的意思。

鼠标悬停事件：hover();

$(function(){
$(#name).hover(function1(){},function2(){})
})

jQuery 隐藏/显示

$(function(){
    $("#button").click(function(){
        $("p").hide();  //隐藏
    });
    $("#show").click(function(){
        $("p").show();   //显示
    });
});

语法：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值，“slow","fast"或毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称

    $("#button").click(function(){
        $("p").hide(1500);
    });
    $("#show").click(function(){
        $("p").show(1500,function(){
            $("p").css("background-color","pink")
        });
    });

toggle（）

作用：用于切换hide（）和show（）；显示被隐藏的元素，并隐藏已显示的元素

语法：

$(selector).toggle(speed,callback);

   $("button").click(function(){
        $("p").toggle(1500);
    });

jQuery淡入淡出

jQuery Fading方法

通过jQuery ,可以实现元素的淡入淡出效果。

fadeln（）：用于淡入已隐藏的元素
fadeOut（）：用于淡出可见元素
fadeToggle（）：可在fadeIn（）和fadeOut（）之间来回切换；
fadeTo（）：允许渐变为给定的不透明度。

jQuery fadeln（）方法缓慢显示出模块

<body>
<div id="div1"  style="width:100px;height:100px;display:none;background-color: aqua"></div>
<div id="div2"  style="width:100px;height:100px;display:none;background-color: #2dbf22"></div>
<div id="div3"  style="width:100px;height:100px;display:none;background-color: #bf51cb"></div>
<div id="div4"  style="width:100px;height:100px;display:none;background-color: #e72f35"></div>
<button>点击淡入div盒子</button>
</body>
<script>
    $(function(){
        $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(2000);
            $("#div4").fadeIn(1500);
        });
    });
</script>

fadeOut(): 缓慢隐藏元素

fadeTo():允许渐变为设定的不透明度 slow：缓慢的，低速的

            $("#div1").fadeTo("slow");
            $("#div2").fadeTo("slow",0.5);
            $("#div3").fadeTo("slow",0.2);

jQuery 效果滑动

滑动方法： slide :滑动

slideDown()：用于向下滑动元素
slideUp()：向上
slideToggle()：切换

语法：

$(selector).slideDown(speed,callback);

例子同上面

jQuery 效果- 动画

animate()方法

语法：

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

必须的参数定义形成动画的CSS属性

 $("#div2").animate({left:'300px'});
 //前提：div的style得设置成   position:absolute; position属性定义元素的定位类型，absolute：绝对定位，相当于static定位以外的第一个父元素进行定位
fixed：绝对定位，相对于浏览器窗口进行定位，
relative： 生成相对定位的元素，
static：默认值，没有定位
inherit： 继承position属性的值。

默认情况下，所有html元素都有一个静态位置，且无法移动。

如需对位置进行操作，需要先把元素的CSS position属性设置为relative、fixed或absolute。

控制多元素 $(“#div2”).animate({left:‘300px’,width:‘200px’,height:‘170px’,opacity:‘0.5’});

animate() 使用相对值

只需要在值前面加上+=或-=；

$("#div2").animate({left:'300px',width:'+=100px',height:'+=100px',opacity:'0.5'});

animate() 使用预定义的值

可以把属性的动画值设置为“show”、“hide”,“Toggle”

animate（） -使用队列功能

jQuery提供针对动画的队列功能

同时创建多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列，然后注意运行这些animate调用。

            $("#div2").animate({left:'300px',width:'200px',height:'100px',opacity:'0.2'},1500);
            $("#div2").animate({left:'300px',width:'300px',height:'400px',opacity:'0.3'},1500);
            $("#div2").animate({left:'300px',width:'200px',height:'100px',opacity:'0.4'},1500);
            $("#div2").animate({left:'300px',width:'300px',height:'500px',opacity:'0.6'},1500);
            $("#div2").animate({fontSize:'3em',opacity:'0.2'},"slow");

jQuery 停止动画

stop():用于在动画或效果完成前对它们进行停止

stop（）方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画

语法：

$(selector).stop(stapAll,goToEnd);

两参数都为可选，且默认为false

因此，默认的，stop（）会清除被选中元素上指定的当前动画。

jQuery Callback方法回调

Callback函数在当前动画100%完成之后执行。

       $("button").click(function(){
            $("#div2").hide("slow",function () {
                alert("隐藏成功");
            });
            )};

用了CallBack函数之后，动画会在隐藏后再打开弹窗，否则会先跳出弹窗。

jQuery 链（Chaining）

通过jQuery，可以把动作/方法链接在一起

Chaining允许我们在一条语句中运行多个jQuery方法（在相同元素上）

jQuery 方法链接

优点：浏览器不用多次查找相同的元素。如需链接一个新动作，您只需把该动作追加到之前的动作上。

 $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
  //字体先变红，再向上滑动，再向下滑动。

如果需要，也可以添加多个方法调用。

当进行链接时，代码行会变得很长，不过jQuery语法不是很严格，可按照希望的格式来写，比如换行和缩进

jQuery HTML

jQuery 捕获

DOM操作

jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易。

DOM=Document Object Model（文档对象模型）

DOM定义访问HTML和ＸＭＬ文档的标准

获得内容　text（），html()以及val（）

text（）：设置或返回所选元素的文本内容
html（）：设置或返回所选元素的内容（包括HTML标记）
val(): 设置或返回表单字段的值（可以获得输入框的值）

  $("button").click(function(){
    alert("值为: " + $("#test").val());//属性值为用户输入的内容。（代码外的值）
 alert("属性值为："+$("#test").attr("id"));// 属性值为元素后的test（代码里的值）
 });

<p>姓名：<input type="text" id ="test" value="gift"></p>
<button>点我获取输入框内容</button>

获取属性 attr（）

attr()用于获取属性值；

attr和prop的区别：

attr：我们自己定义的DOM属性，如action

prop：HTML元素本身就带有的固有属性，如 id，class ，href

对于具有true和false两个属性的属性，比如checked，selected或者disabled使用prop（）

<a href="https://www.baidu.com" target="_self" class="btn">百度一下</a>
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

prop（）函数的结果

若没有相应的属性，返回值是空字符串

arre（）函数的结果

若没有相应的属性，返回值是undefined

jQuery 设置内容和属性

就是再text（），html（），val（）里填想要的值即可

如
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});

允许同时设置多个值。

attr()的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值，然后以函数新值返回你希望使用的字符串。

  $("button").click(function(){
            $("#runoob").attr("href",function (i,o) {
                return o+"/jquery";
            });
        });

jQuery 添加元素

添加新的HTML内容

append（）：在被选元素的结尾插入内容
prepend():…开头…
after（）：在被选元素之后插入内容
before（）:…之前…

append（）方法

 $("ul").append("<li>hello gift</li>");

prepend() 方法


  $("ul").prepend("<li>hello gift</li>");

可通过append（）和prepend（）方法添加若干新元素

   function appendText(){
        var txt1="<p>文本1</p>"; //使用html创建文本
        var txt2=$("<p></p>").text("文本2"); //使用jQuery创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本三";   // 使用DOM创建text　with　ＤＯＭ
        $("body").append(txt1,txt2,txt3);//追加新元素
    }
</script>
<body>
<button onclick="appendText()">添加文本</button>

append、prepend 是在元素内部嵌入。

after、before是在元素外面追加。
在这里插入图片描述

jQuery删除元素

如需删除元素和内容，一般可以使用以下两个jQuery方法；

remove（）- 删除被选元素（及其子元素）会把DIV一并删除
empty（）从被选元素中删除子元素 div会保留

过滤被删除的元素

remove（）方法也可以接受一个参数，允许对被删除元素进行过滤。

该参数可以是任何jQuery选择器的语法。

例如：移除所有class=“test”的p元素

$("p").remove(".italic");

获取并设置CSS类

jQuery操作css

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

css属性可以设置多个

css({"propertyname":"value","propertyname":"value",...});

jQuery尺寸

jQuery提供多个处理尺寸的重要方法：

width（）:设置或返回元素的宽度（不包括内边距、边框或外边距）
height（）
innerWidth（）：包括内边距
innerHeight（）
outerWidth()：包括内边距和边框
outerHeight()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6fYPZIeh-1652445213654)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317203144720.png)]

jQuery遍历

用于其相对于其他元素的关系来“查找”或选取HTML元素，以某项选择开始，并沿着这个选择移动，直到抵达您期望的那个元素位置

家族树：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgzrWryF-1652445213655)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317204316968.png)]

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

祖先是父，祖父，曾祖父等等，后代是子，孙，曾孙等等，同胞拥有相同的父。

遍历DOM中最大的种类是树遍历（tree-traversal）

jQuery遍历-祖先

向上遍历DOM树：

parent() : 返回被选元素的直接父类
parents():返回被选元素的所有祖先元素，它一路向上直到文档的根元素body
parentaUntil() ：返回介于两个给定元素之间的所有祖先元素[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSOFh6rB-1652445213655)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317210419866.png)]

jQuery遍历 -后代

后代是子，孙，曾孙等等

方法：

children():返回被选元素的所有直接子元素，该方法只会向下一级对DOM树进行遍历
find():返回被选元素的后代元素，一路向下直到最后一个后代。
```
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
```
需要注意的是，find（“*”）括号里必须加星号，不然读取不到元素

jQuery 遍历-同胞（siblings）

同胞拥有相同的父元素

水平遍历的方法：

siblings() ：返回被选元素的所有同胞元素
next()：返回被选元素的下一个同胞元素
nextAll()：返回被选元素的所有跟随其后的同胞元素
nextUntil()：返回介于两个参数之间的所有同胞元素 $(“h2”).nextUntil(“h6”);
prev()
prevAll()
prevUntil（）

后三个方法与前面三个相似，方向相反，他们返回的是前面的同胞元素（在DOM树中沿着同胞之前元素遍历，而不是之后元素遍历）

jQuery遍历－过滤

缩小搜索元素的范围

三个最基本的过滤元素的方法是：

first()：第一个
last()：最后
eq() ：索引，从0开始，因此首个元素的索引号是0不是1 $(“p”).eq(1);

他们允许基于在一组元素中的位置来选择一个特定的元素

其他过滤方法，比如filter（）和not（）允许选取匹配或不匹配某项指标的元素。

first（）方法

返回被选元素的首个元素。

filter()方法允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

  $("div").filter("p").css("background-color","yellow");

jQuery -AJAX简介

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

什么是AJAX？

AJAX = 异步Javascript和XML（Asynchronous JavaScript and XML);

简言：在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

案例：谷歌地图、腾讯微博、优酷视频、人人网等

通过jQuery AJAX方法，能够使用HTTP Get 和HTTP Post 从远程服务器上请求文本，HTML、xml或JSON，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery AJAX load（）方法

jQuery load（）方法是简单但强大的AJAX方法

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

语法：

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

必须的URL参数：规定希望加载的URL

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

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

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

$("button").click(function(){
        $("#div1").load("text.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt="success"){
                alert("外部数据加载正确");
            }
            if(statusTxt="error"){
                alert("Error:"+xhr.status+":"+xhr.statusTxt);
            }
        });
    });

避免多页面情形下的代码重复，可以利用load()方法，将重复代码放入单独的文件，用下列方法进行导入（这一段看不懂，回头看）

//1.当前文件中要插入的地方使用此结构：
<div class="include" file="***.html"></div>

//2.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。。

//3.代码：
$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});
或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~

jQuery AJAX get（）和 post（）方法

作用：用于通过HTTP　GET 或POST请求从服务器请求数据

get ：从指定的资源请求数据（从服务器取回数据，注：get方法可能返回缓存数据）
post：向指定的资源提交要处理的数据（也可用于服务器获取数据，不会缓存数据，并且常用于连同请求一起发送数据。

$.get() 方法

语法

$.get(URL,callback);

可选的callback参数是请求成功后所执行的函数名

    $("button").click(function(){
        $.get("attr.html",function(data,status){
            alert("数据："+data+"\n状态："+status);
        });
    });

jQuery noConflict()方法

释放对 $标识符的控制，其他脚本就可以使用$ 标识符。

$.noConflict();
//也可以通过全名来代替简写，继续使用jQuery
jQuery(document).ready(function(){
	jQuery("button").click(function(){
	
	})
})

也可以创建自己的简写，noConflict（）可返回对jQuery的引用，可以存入变量，供以后使用

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

JSONP（JSON　with　Padding）可以让网页从别的网址获取数据，即跨域读取数据。

jQuery 实例

几乎包含了所有语法和用法。

https://www.runoob.com/jquery/jquery-examples.html

jQuery选择器

＄（＂.intro,.demo＂）:class 为.intro,.demo的所有元素

$(“div>p”)div元素的直接子元素的所有

元素间接的不行

$(“div p”) div元素的后代的所有p元素

$(“div +p”) 每一个div相邻的下一个p元素

$(“div~p”)div元素同级的所有p元素

1.基本选择器
$("#id") //id选择器
$("div") //元素选择器
$(".classname") //类选择器
$("#id,.classname1,div") //组合选择器

2.层次选择器
$("#id>.classname")//直属子元素选择器
$("#id .classname")   //后代元素选择器
$("#id + .classname") //相邻下一个元素选择器
$("#id ~ .classname") //兄弟元素选择器

3.过滤选择器（重点）
$("li:first")  //第一个li
$("li:last")  //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd")  //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li （第五个li元素）
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除了id=runoob以外的所有li
3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

上线策略 ：各个系统之间的网络交互。

jQuery 插件

jQuery Validate

作用：为表单提供强大的验证功能，让客户端表单验证变得简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括URL和电子邮件验证，同时提供一个用来编写用户自定义方法的API。

导入js库

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

引入中文信息提示

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

中文信息提示包

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

使用方法

将校验规则写到控件中

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

2.将校验规则写到js代码中

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字符组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

交表单
$(“#signupForm”).validate({
rules: {
firstname: “required”,
lastname: “required”,
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: “#password”
},
email: {
required: true,
email: true
},
topic: {
required: “#newsletter:checked”,
minlength: 2
},
agree: “required”
},
messages: {
firstname: “请输入您的名字”,
lastname: “请输入您的姓氏”,
username: {
required: “请输入用户名”,
minlength: “用户名必需由两个字符组成”
},
password: {
required: “请输入密码”,
minlength: “密码长度不能小于 5 个字符”
},
confirm_password: {
required: “请输入密码”,
minlength: “密码长度不能小于 5 个字符”,
equalTo: “两次密码输入不一致”
},
email: “请输入一个正确的邮箱”,
agree: “请接受我们的声明”,
topic: “请选择两个主题”
}
})
});

bpmh

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记总结

jQuery1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnAZpDhU-1652445213644)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220
复制链接

扫一扫