美文网首页
4/10day30_jQuery

4/10day30_jQuery

作者: 蹦蹦跶跶的起床啊 | 来源:发表于2020-04-10 21:32 被阅读0次

day30_JQuery

jQuery.png

回顾

1. bom对象
    window对象
        三种弹框
            alert()
            confirm()
            prompt()
        二种定时器
            一次性:setTimout()   --- 通过递归实现循环性
            循环性:setInterval()
    location对象
        location.href="新地址"
        location.reload()

2. dom对象【重点】
    获取元素
        getElementById();
        querySelectorAll();
    操作内容
        innerText=纯文本
        innerHTML=超文本
    操作属性
        js对象.属性名
    操作样式
        js对象.className=css的类选择器  可实现解耦
    操作元素
        innerHTML=创建新的子标签

3. 正则表达式
    表单校验
    步骤
        let reg=/正则规则/;
        reg.test(用户输入的字符串);
            合法:true
            不合法:false

4. 综合案例

今日内容

1. 什么框架?

2. jquery基础语法
    js与jq区别【重点】
    
3. jquery选择器

4. jq的dom操作

5. jq的事件

6. 综合案例

JQuery概述

概述

  • 概述

    jQuery是一个优秀的javascript的轻量级框架之一,封装了dom操作、事件、页面动画、异步操
    作等功能。
    特别值得一提的是基于jquery的插件非常丰富,大多数前端业务场景都有其封装好的工具框架。

  • JQuery的下载和版本

    • jQuery-x.x.x.js为开发版本(有缩进和文档注释, 方便阅读)

    • jQuery-x.x.x.min.js为生产版本(体积小, 方便传输)

自定义JS框架

框架 是完成某种功能的半成品, 抽取重复繁杂的代码, 提供简介强大的方法实现

Jquery基本语法

Jquery的环境引入

<!--引入jquery脚本库-->
<script src="../js/jquery-1.11.3.js"></script>

Jquery和dom对象的区别

<!--
jquery对象与dom对象定义
    dom对象:使用js形式获取的元素对象 例如 document.querySelector() 或 
document.querySelectorAll()
    jquery对象: 使用 $()构造获得的元素对象  例如 $(selector)

使用注意:
  jquery对象只能使用jquery对象的属性和方法,不能使用dom对象的属性和方法
  dom对象只能使用dom对象的属性和方法,不能使用jquery对象的属性和方法

jquery对象与dom对象转换:
    dom对象 可以使用$构造 例如 $(dom对象)
    jquery对象 可以使用数组取索引值的形式 例如 $[index] 或 $.get(index)
-->

Jquery对象与js对象的相互转换

js --> jq
    $(js对象) 或者 jQuery(js对象)
jq --> js
    jq对象[索引] 或者 jq对象.get(索引)
<script>
    // 通过js方式修改文本内容
    let myDiv =  document.getElementById("myDiv");
       /* myDiv = "使用js方式修改内容";*/
    // 通过jq方式修改文本内容
    let $myDiv =  $("#myDiv")
     //   $myDiv.html("使用jq方式修改的文本内容");
    // js对象和jq对象的:属性和方法不同通用
    $(myDiv).html("js转为jq对象");

    console.log($myDiv.length);
    $myDiv[0].innerHTML = "jq转为js对象";

</script>

页面加载时间

  • js

        window.onload = function () {
            alert("js加载事件1");
    
        };
    
  • jq

        //jq页面加载事件
        $(function () {
            alert("jq加载事件1")
        });
        $(function () {
            alert("jq加载事件2")
        });
    
  • 区别

    js: 只能定义一次, 如果定义多次, 会被覆盖

    jq: 可以定义多次

Jquery选择器

基本选择器

  • 获取标签的jq对象

    $("标签名")

  • 获取class的jq对象

    $(.class)

  • 获取id的jq对象

    $(#ID)

层级关系选择器

<script >
    // E,F 并列 特点: 逗号
    console.log($("p,span").text());//获取所有的p,span的文本

    // E F 后代 特点: 空格
    console.log($("div span").text());//获取div的后代span的文本

</script>

属性选择器

  • 属性选择器

    $("input[type ='text']")

  • 复合属性选择器

    $("input[type='text'][name='nickname']")

<body>

<input type="text" name="username" value="用户名"/><br/>

<input type="text" name="nickname" value="昵称"/><br/>

<script>
    // 1.获取type='text'的input标签
    console.log($("input[type ='text']"));
    // 2.获取type='text' 且 name="nickname" 的input标签
    console.log($("input[type='text'][name='nickname']"));
</script>

过滤选择器

  • 首元素选择器

    :first

  • 尾元素选择器

    :last

  • 偶数选择器

    :even

  • 奇数选择器

    :odd

  • 指定索引选择器

    :eq()

<script>
    // 1.获取第一个元素
    console.log($("li:first").text());
    //最后一个元素
    console.log($("li:last").text());

    // 2.获取偶数索引元素
    console.log($("li:even").text());
    //奇数索引元素
    console.log($("li:odd").text());
    // 3.获取指定索引2的元素
    console.log($("li:eq(2)").text());
</script>

jq对象遍历

语法:
jq.each(function(index, element)){

}
<body>
<!--
jquery对象的遍历
    $.each() 用法示例
-->
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ul>

<script>
    let lis = document.querySelectorAll("li");

    //普通for
    for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    console.log("-----------------------");
    //增强for
    for (let li of lis) {
        console.log(li);
    }
    console.log("-----------------------");
    //jq的for循环
/*    $("li").each(function (index, element) {
        console.log(index);
        console.log(element);
        console.log(element.innerHTML);//element为js对象
        console.log($(element).html());//升级为jq对象
    });*/
    console.log("-----------------------");
    $("li").each(function () {
        console.log(this);
    });
</script>

Jquery的dom操作

Jq 操作内容

  • .text(): 获取对象的文本
  • .html(): 获取对象包含html标签的内容
<body>
<div id="myDiv"><p>天王盖地虎</p></div>

<script>
    // 1.text()操作内容
    console.log($("#myDiv").text());//获取纯文本
    $("#myDiv").text("<h1>设置文本</h1>");//设置纯文本,这里会显示h1
    // 2.html()操作内容
    console.log($("#myDiv").html());//获取包含p标签的html内容
    $("#myDiv").html("<h1>设置超文本</h1>")//设置超文本, 会展示h1效果
    $("#myDiv").html($("#myDiv").html()+"<h1>追加超文本</h1>")//追加超文本, 会展示h1效果
</script>
</body>

Jq操作属性

  • .attr("属性名")获取/设置jq对象的属性

    removeAttr("属性名") 删除属性

    相当于: js对象.setAttribute() / js对象.getAttribute()

  • .val() 是jq中 对attr("value")的简化,

    相当于: js对象.value

  • .prop() 获取/设置属性(如果是判断属性是否存在推荐用这个,别用attr())

    attr()方法中, 如果是对checked属性进行获取的话, 选中的返回checked 未选择

    prop()更适合于 如 checked, selected 这类属性进行获取,

jq操作属性最基本的是 attr() , 对value属性进行优化, 可以使用 val() 对布尔类型属性进行优化使用了 prop()

<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>

    爱好
    <input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>

    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>
</form>

<script>
    // 1.获取文本框value属性
    //value的方式一
    console.log($("#username").attr("value"));//获取
    console.log($("#username").attr("value","新属性值"));//设置
    // console.log($("#username").removeAttr("value"));//删除
    //value的方式二
    console.log($("#username").val());
    console.log($("#username").val("value的jq赋值方式"));//新增/修改


    // 2.获取爱好的checked属性
    //方式一 使用 attr()
    console.log($("#hobby").attr("checked"));
    //方式二 使用prop() 获取
    console.log($("#hobby").prop("checked"));

</script>

Jq操作样式

  • 直接修改jq对象样式属性

    jq对象.css()
    
      css(样式名) 获取
    
      css(样式名, 样式值) 设置
    
    支持css语法 如 font-size
    
  • 添加/删除jq对象样式

    jq对线.addClass()
    jq对象.removeClass()
    
  • 切换jq对象样式

    jq对象.toggleClass()  这个方法是 addClass() removeClass()这两个的封装判断
    
<head>
    <meta charset="UTF-8">
    <title>11-dom操作样式</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <style>
        #p1{ background-color: red;}
        .mp {
            color: green
        }

        .mpp {
            background-color: lightgray;
        }
    </style>

</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle">切换</button>class样式 </p>

<script>
    let $p1 = $('#p1');//获取p1
    let $p2 = $('#p2');//获取p2
    let $p3 = $('#p3');//获取p3
    let $p4 = $('#p4');//获取p4
    // 0. 获取第一个标签的背景色
    console.log($p1.css("background-color"));

    // 1. 设置一个css样式
    $p1.css("background-color","gray");
    // 2. 批量设置css样式
    $p2.css({"border":"1px solid red","font-size":"20px"});
    // 3. 通过class设置样式
    $p3.addClass("mp mpp");
    // $p3.removeClass("mpp");
    // 4. toggleClass() 切换一个class
    $("#toggle").click(function () {
        $p4.toggleClass("mp mpp");

    });
</script>

</body>

Jq操作元素

  • $(标签) 创建一个标签
  • $.prepend() 在父标签中将子标签放在第一个位置
  • $.append() 在父标签中将子标签放在最后一个位置
  • $.empty() 清空子元素
  • $.remove() 删除
<script>
    let $star = $('#star'); // 无序列表
    // 1.前面添加马尔扎哈
    $star.prepend($("<li>马尔扎哈</li>"));
    // 2.后面添加萨瓦迪卡
    $star.append($("<li>马尔扎哈</li>"));
    // 3.移出所有列表项
    $star.empty();
    // 4.删除无序列表
    // $star.remove();
</script>

Jquery 事件绑定

jQuery的事件与js的事件的功能和作用一样,只是在使用语法上稍微有些差异。

js对象.事件属性=function(){}

jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13-jq事件绑定</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>

<script>
    // js事件绑定
    document.getElementById('jsBtn').onclick=function () {
        alert('js事件绑定')
    }
    // jq事件绑定
    $('#jqBtn').click(function () {
        alert('jq事件绑定')
    })
</script>
</body>
</html>

常见事件

1. 点击事件:
        1. click():单击事件
        2. dblclick():双击事件
2. 焦点事件
        1. blur():失去焦点
        2. focus():元素获得焦点。

3. 鼠标事件:
        1. mousedown()  鼠标按钮被按下。
        2. mouseup()    鼠标按键被松开。
        3. mousemove()  鼠标被移动。
        4. mouseover()  鼠标移到某元素之上。
        5. mouseout()   鼠标从某元素移开。
        
4. 键盘事件:
        1. keydown()    某个键盘按键被按下。  
        2. keyup()      某个键盘按键被松开。
        3. keypress()   某个键盘按键被按下并松开。

5. 改变事件
        1. change() 域的内容被改变。

6. 表单事件:
        1. submit() 提交按钮被点击。

案例

隔行换色

<script>
    // 奇数行
    $('tr:even').css('background-color','lightgray');
    // 偶数行
    $('tr:odd').css('background-color','skyblue');
    
    // 课下作业 实现解耦合...
</script>

商品全选

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例-商品全选</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
    // 全选
    $('#btn1').click(function () {
        $('input[type="checkbox"]').prop('checked',true);
    })

    // 反选,必须遍历才能实现
    $('#btn2').click(function () {
        $('input[type="checkbox"]').each(function (index,element) { // 注意:element
            // js方式  推荐
           // element.checked = ! element.checked;
            // jq方式 比较麻烦 了解
            $(element).prop('checked',!$(element).prop('checked'))
        })
    })


    let str = '哈哈'+1+"呵呵";
    let str = '<p align="center"></p>'
</script>
</body>
</html>

QQ表情

  <script>
        // 给所有的图片绑定点击事件
        $('.emoji img').click(function () {
            // this 表示当前 img标签
            console.log(this);
            $('#word').append($(this).clone())
        })
    </script>

老师下午总结

1. Jquery

概述

引入Jquery库文件
    <script src="jquery文件地址"></script>


页面加载完成后执行脚本: $(匿名函数);
    $(function(){
        //代码;
    });


jquery对象与dom对象:
    区别:
    jquery对象只能使用jquery对象的属性和方法,不能使用dom对象的属性和方法
    dom对象只能使用dom对象的属性和方法,不能使用jquery对象的属性和方法

    转换:
    dom对象转jquery对象 : $(dom对象)
    jquery对象转dom对象: $[index] 或 $.get(index)

选择器

id选择器
    根据给定的ID匹配一个元素。
    $("#id值")

标签选择器
    根据给定的元素名匹配所有元素
    $("标签")

类选择器
    根据给定的类属性值匹配元素。
    $(".class属性值")
    
    
属性选择器
    $("[attr]") : 获取指定属性的所以元素。
    $("[attr='value']") : 获取指定属性名等于属性值的所以元素
    
表单选择器
    $(":input") : 匹配所有input元素
    $(":text") : 匹配所有text文本框
    $(":checkbox") : 匹配所有复选框
    $(":checked") : 匹配复选框和单选框中所有被选中的元素
    $(":checkbox:checked") : 匹配所有选中的复选框
    
过滤选择器
    $(":first") : 获取第一个元素
    $(":last") : 获取最后一个元素
    $(":odd") : 获取索引值为奇数的元素
    $(":even") : 获取索引值为偶数的元素
    $(":eq(index)") : 根据给定索引index,获取一个元素
    
并列选择器
    找到所有和任意选择器匹配的元素。
    $("选择器1, 选择器2, 选择器N")
    
层级选择器 
    找到父标签下的所有子标签,包括子孙标签。
    $("选择器 后代") 

遍历

1. jq对象.each()方法:
        each(function(i,e){})
        each((i,e)=>{})
        i : 索引值
        e : dom对象
    
        
        
2. fori 
    for(let i =0; i<jq对象.length; i++){
        let dom = jq对象[i]; //得到每一个dom对象
    }




3. forof $.toArray()把jquery对象转为dom对象数组
   for(let e of jq对象.toArray()){  //toArray()把jquery对象转为dom对象数组
        //每个e代表遍历出来的一个dom对象
   }

操作内容

1. text() 获取或设置标签的文本 //相当于innerText
2. html() 获取或设置标签的html //相当于innerHTML

操作属性

1. val()  获取或修改表单控件的value值,等于dom.value
2. prop() 获取或修改原生属性值,等于dom.properties
3. attr() 获取或修改自定义属性值 等于dom.setAttribute(),  dom.getAttribute()

建议:
    具有true和false值的属性,如checked,selected或disabled使用 prop()
    其他的使用attr()

操作样式

1.  css(样式名)    获取一个样式值
    css(样式名,样式值) 设置一个样式
    css({样式名:样式值,样式名:样式值}) 批量设置样式
    
2. addClass() 为元素添加class样式

3. removeClass() 移除一个class样式

4. toggleClass() 切换样式,如果存在就删除,不存在就添加。

操作元素

1. $("标签")  创建一个标签

2. prepend(jq元素对象)  在内部前面插入元素

3. append(jq元素对象) 在内部后面追加元素

4. empty() 删除元素下的所有子元素

5. remove() 删除所有匹配的元素

事件绑定

1. 事件名(函数)
    jq对象.click(function(){
        //this表示dom对象
    });

    jquery事件与dom事件写法区别:
        jquery 都不要加on 例如 $.click(函数)
        dom 都需要加on 例如 dom.onclick = 函数


2. on("事件名",函数) 
    jq对象.on("click",function(){
        //this表示dom对象
    });


    
3. off("事件名") 
    解除event事件绑定


2. 案例练习

练习1

需求:

点击按钮,实现浏览器背景的护眼模式和正常模式的切换。

说明:

正常模式下,按钮显示 “护眼模式”。

当点击后,修改body标签的class属性,切换为night值,按钮显示 "正常模式"

素材页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../js/jquery-1.11.1.js"></script>
    <!--护眼模式-->
    <style>
        .night{
            background-color: moccasin;
        }
    </style>

</head>
<body>

<button id="btn">护眼模式</button>
</body>
<script>
    
</script>
</html>

参考答案

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../js/jquery-1.11.1.js"></script>

    <!--护眼模式-->
    <style>
        .night{
            background-color: moccasin;
        }
    </style>
</head>
<body>
    <button id="btn" onclick="changeBody()">护眼模式</button>
</body>
<script>
    function changeBody() {
        $("body").toggleClass("night");
        let btnText = $("#btn").text();

        if(btnText=="护眼模式"){
            $("#btn").text("正常模式");
        }else{
            $("#btn").text("护眼模式");
        }
    }
</script>
</html>

练习2

实现一个抽奖功能。

要求:

点击开始按钮后,开始按钮禁用,停止按钮取消禁用,小图片实现快速切换显示。

点击停止按钮后,停止按钮禁用,开始按钮取消禁用,小图片停止切换,将小图片在大图片位置显示。

小图片实现快速切换显示。

素材页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    
    <style type="text/css">
        #small {
            border: 1px solid blueviolet;
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
        }

        #smallPhoto {
            width: 75px;
            height: 75px;
        }

        #big {
            border: 2px solid orangered;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 300px;
            top: 10px
        }

        #bigPhoto {
            width: 500px;
            height: 500px;
        }

        #btnStart {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }

        #btnStop {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }
    </style> 
</head>

<body>
<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="../img/man00.png"/>
</div>

<!-- 大像框 -->
<div id="big">
    <img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
    
<script type="text/javascript">
   
</script>
</body>
</html>

参考答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>

    <style type="text/css">
        #small {
            border: 1px solid blueviolet;
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
        }

        #smallPhoto {
            width: 75px;
            height: 75px;
        }

        #big {
            border: 2px solid orangered;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 300px;
            top: 10px
        }

        #bigPhoto {
            width: 500px;
            height: 500px;
        }

        #btnStart {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }

        #btnStop {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }
    </style>

</head>

<body>

<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="../img/man00.jpg"/>
</div>

<!-- 大像框 -->
<div id="big">
    <img id="bigPhoto" src="../img/begin.jpg" />
</div>


<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">


<script type="text/javascript">

    //初始化抽奖的名单(图片地址)
    let imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg",
    ];

    //定时器序号
    let counter = null;

    //点击开始
    function gameStart() {
        //开始按钮禁用
        $("#btnStart").prop("disabled",true);
        //停止按钮可用
        $("#btnStop").prop("disabled",false);

        //定义计数变量
        let num = 0;

        //使用定时器实现小图框快速切换图片
        counter = setInterval(function () {
            //通过取余,循环得到数组得到索引
            let index = num%imgs.length;
            //修改小图框中img的src即可
            $("#smallPhoto").attr("src",imgs[index]);
            //计数变量自增
            num++;
        },20);
    }
    
    //点击结束
    function gameOver() {
        //禁用结束按钮
        $("#btnStop").prop("disabled",true);
        //取消开始按钮的禁用
        $("#btnStart").prop("disabled",false);

        //停止小图框的抽奖(停止定时器)
        clearInterval(counter);
        //将计算变量重置为0
        num = 0;

        //获取小图框图片地址
        let imgUrl = $("#smallPhoto").attr("src");

        //将抽奖结果显示在大图框中,并隐藏起来
        $("#bigPhoto").attr("src",imgUrl).hide();

        //将图片进行淡出
        $("#bigPhoto").fadeIn(2000);
    }

</script>
</body>
</html>

3. 扩展:表单校验插件

    JQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

导入文件

    Jquery validate 插件依赖Jquery库,使用前需要先导入jquery的js文件,再导入jquery.validate.js插件和中文提示信息文件messages_zh.js。

导入文件:
    <!--jquery文件-->
    <script src="../js/jquery-1.11.1.min.js"></script>

    <!--jquery validate表单校验插件-->
    <script src="../js/jquery.validate.js"></script>

    <!--中文提示信息文件-->
    <script src="../js/messages_zh.js"></script>

开启表单校验

$("#表单id").validate({
            rules : {
                需要校验的表单元素name属性值 : {
                     //配置json格式的校验规则
                }
            },
    
            messages : {
                需要校验的表单元素name属性值  : {
                     //配置json格式的校验提示信息
                }
          }
});


通过jquery的选择器获得表单对象,调用validate()方法进行校验。
validate方法里面传入json格式的校验参数。

属性说明:
rules:{} 校验规则,将需要校验的表单元素在rules里面添加校验规则
messages:{} 错误提示信息,如果校验失败,在messages里面可以定制提示信息。
            该属性不是必须的,不加时使用默认的提示信息。

常用校验规则

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

校验案例

HTML素材页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单校验插件</title>

    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
        }

        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>
</head>
<body>
<div class="regist_bg">
    <div class="regist">
        <form action="#" id="myForm">
            <table width="700px" height="350px">
                <tr>
                    <td colspan="3">
                        <font color="#3164af">会员注册</font> USER REGISTER
                    </td>
                </tr>
                <tr>
                    <td align="right">用户名</td>
                    <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">Email</td>
                    <td colspan="2"><input id="email" type="text" name="email" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">姓名</td>
                    <td colspan="2"><input name="text" name="username" size="50"/></td>
                </tr> 
                <tr>
                    <td align="right">电话号码</td>
                    <td colspan="2"><input id="phone" type="text" name="phone" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td colspan="2">
                        <input type="radio" name="gender" value="男" checked="checked"/>男
                        <input type="radio" name="gender" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input id="rebtn" type="submit" value="注册"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

进行表单校验

需求:

用户名是必填项

密码必填,长度在6-12位之间

确认密码必须和密码一致

邮箱必填,对格式进行校验

电话号码必填,必须是11位数字

相关文章

  • 4/10day30_jQuery

    day30_JQuery 回顾 今日内容 JQuery概述 概述 概述jQuery是一个优秀的javascript...

  • 4/4

    已完成 原本想听写一首歌,实在太懒 要改要克服 目标: 1.瘦10斤 2.赚10w 3.学英语and韩语

  • 4/4

    一大早就发现今天的天气冷,一出门冷傻了,其实冷点没什么,关键是在路上要资源,没一人理你。

  • 4/4

    在適合吃糖的年紀,吃苦在適合跳舞的時光,匆匆在適合終老的睡眠,清醒在沒有兒童的節日,兒童在十四歲以前就安葬年輕,沈...

  • 4/4

    第五十六回 曹操大宴铜雀台 孔明三气周公瑾 曹操一直想报赤壁之仇,奈何孙刘联合一直按兵不动,金碧辉煌的铜雀台已竣工...

  • 4—4

    新员工切配考试。

  • 4!4!

    如果找不到一个兴趣爱好重叠的人,那找个能够支持你的也是好的哇

  • 4/4

    点了一杯咖啡,从季风书园挑了三本书,一坐就是一下午。难得拥有这么闲瑕的时光,静静翻阅着书籍,闻着纸墨的芳香,感...

  • 4/4

    7:39我在43路车上了 今天居然这么早 我已经带着饭了 应该会感动死她哦嘻嘻 jx和L两个魔鬼吗 昨天学习通宵 ...

  • 4/4

    无花无酒过清明,兴味萧然似野僧。------《清明感事》王禹偁 我是在无花可观赏,无酒可饮的情况下过这个清明节的,...

网友评论

      本文标题:4/10day30_jQuery

      本文链接:https://www.haomeiwen.com/subject/lsxjmhtx.html