第十七章正则表达式和jQuery入门

百密一疏^^

已于 2022-06-23 08:14:09 修改

阅读量306

点赞数

分类专栏：前端学习文章标签： jquery 前端 javascript

于 2022-06-22 16:08:02 首次发布

本文链接：https://blog.csdn.net/m0_71674778/article/details/125408523

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.回顾练习

简单的表格校验，实现以下目标:

①创建一个表单，包含用户名和邮箱两个表单元素；

②点击提交按钮或光标离开文本框时触发校验；

③用户名不能为空，长度必须是4-10。

④邮箱不能为空，长度6-50，必须有@和.且.在@后面。

<body>
    <form action="" method="get" id="frm" >
        <p>
            用户名:<br />
            <input type="text" id="username" name="username" onblur="checkName()">
        </p>
        <div class="err"></div>
        <p>
            邮箱:<br />
            <input type="text" id="email" name="email" onblur="checkEmail()">
        </p>
        <div class="err"></div>
    </form>
    <div onclick="checkAll()" id="send">
        发送
    </div>
    <script>
        var err = document.querySelectorAll(".err");
        function checkName(){
            var name = username.value.length;
            if(username.value.trim()==0){
                err[0].innerText="用户名为空";
                return false;
            }
            if(name<4||name>10){
                err[0].innerText="长度不是4-10";
                return false;
            }
            err[0].innerText=""
            return true;
        }
        function checkEmail(){
           
            var em = email.value.length;
            var at = email.value.indexOf("@");
            var dot = email.value.indexOf(".");
            
            if(em==0){
                err[1].innerText="邮箱为空";
                return false;
            }
            if(em<6||em>50){
                err[1].innerText="长度不是6-50";
                return false;
            }
            if(at==-1){
                err[1].innerText="没有@";
                return false;
            }
            if(dot == -1){
                err[1].innerText="没有.";
                return false;
            }
            if(dot<at){
                err[1].innerText="@在.后面";
                return false;
            }
            err[1].innerText="";
            return true;
        }
        function checkAll(){
            //checkName();
            //checkEmail();
            if(checkName() & checkEmail()){
                frm.submit();
            }
            
        }
    </script>
</body>

2.正则表达式

2.1 什么是正则表达式

2.2 为什么要用正则表达式

有一些比较复杂的校验使用字符串提供的方法不能很好的校验，那么此时就使用正则进行一些复杂校验，如：身份证号，手机号，只能输入汉字校验...

2.3 正则表达式的使用

创建正则表达式：

var 变量名 = new RegExp("表达式","附加参数")；

var reg = /表达式/附加参数

附加参数:g(global):全局匹配 i(ignoreCase):不区分大小写

使用正则表达式：

test()	检索字符串中是否存在指定的值。存在返回true,不存在返回false。
exec()	检索字符串中的正则表达式的匹配。如果存在返回该字符串，不存在返回null

2.4 正则表达式常用的字符含义

符号	含义
.	匹配任意字符
\	转义字符:在正则中有许多符号都有特殊含义，当我们不想使用特殊含义，只需要使用符号身时，可以使用\转义符。
[]	表示范围
{}	限定位数 {n}代表匹配n位;{n,}代表至少匹配n位；{n,m}匹配n-m位
*	匹配前边子表达式任意次
+	匹配前边子表达式1次或者多次(>=1)
?	匹配前边子表达式0次或者1次
^	匹配行首开头
$	匹配末尾结尾
\|	表示或者
()	表示一个整体
[^...]	不在括号范围内的任意字符
\w	任意单字字符，等价于[a-zA-Z0-9]
\W	任何非单字字符,等价于[^a-zA-Z0-9]
\s	任何空字符，等价于[\t \n \r \f \v]
\S	任何非空白符，等价于[^\t\n\r\f\v]
\d	任何数字，等价于[0-9]
\D	除了数字之外的任何字符，等价于[^0-9]

<body>
    <p>
        手机号:
        <input type="text" id="phone" />
        <input type="button" id="btn" value="校验">
    </p>
    <script>
        btn.onclick=function (){
            var r1 = /\d/;
            if(r1.test(phone.value)){
                console.log("有一个数字");
            }else{
                console.log("没有一个数字 1");
            }
            var r2 =/\d{11}/
            if(r2.test(phone.value)){
                console.log("有11位数字")
            }else{
                console.log("没有2");
            }
            var r3 = /^\d{11}$/
            if(r3.test(phone.value)){
                console.log("只有11位数字")
            }else{
                console.log("不是3");
            }
            var r4 = /^13[357]\d{8}$/
            if(r4.test(phone.value)){
                console.log("手机号正确")
            }else{
                console.log("不对 4");
            }
            var r5 = /^\w+@\w+\.com$/
            if(r5.test(phone.value)){
                console.log("正确的邮箱")
            }else{
                console.log("邮箱不争取 5");
            }
        }
    </script>
</body>

2.5 小结

①一般来说在需要使用的时候可以直接拷贝使用；

②能够看懂正则表达式；

③可以写一些简单的正则表达式。

3. jQuery入门

3.1 什么是jQuery

框架：半成品软件

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的 JavaScript代码库（或JavaScript框架）。 JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery优点:

①强大的选择器

js获取对象	jq获取对象
document.getElementById(); <br/>docoment.getElementsByTagName() <br/>document.getElementsByClassName() <br>document.getElementsByName() <br>document.querySelector() <br>document.querySelectorAll()<br>	$("选择器")或者jQuery("选择器")

②优秀的DOM操作

js操作DOM麻烦，用jq操作简化。(jq过时)

③完善的事件处理机制

跟js差不多

④动画效果

js使用定时器写动画，运动框架，现在因为css3的出现，导致了jq动画过时了。

Ajax 异步编程

⑤链式编程

链式操作是指对发生在同一jQuery对象上的一组动作，可以直接连写而无需重复获得对象，这是jQuery的特色，使得jQuery编码无比优雅。

jQuery.js 框架已经过时了，因为有了vue.js框架，jQuery就是封装好的js，本质上还是js。

3. jQuery使用

3.1 搭建jQuery环境

去jQuery官网下载jQuery.js文件，然后引入到项目中。

//引入jQuery
<script src="../jquery-各种版本/3.2.1/jquery-3.2.1.min.js"></script>

3.2 jQuery语法

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

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

jQuery(selector).action()

美元符号定义jQuery

选择符(selector) "查询"和"查找" HTML元素

jQuery的action()执行对元素的操作

3.3 jQuery选择器

用于获取元素对象。

$("选择器")或者jQuery("选择器")

3.4 jQuery属性操作

属性操作函数	说明
html()	设置或获取innerHTML属性的值
text()	设置或获取innerText属性的值
val()	设置或获取value属性的值
attr()	设置或获取某属性的值
removeAttr()	删除某属性
prop()	跟attr()作用一样，但是主要针对可简写的属性
removeProp()	删除某属性
addClass()	设置元素class属性的值
removeClass()	删除元素class属性的值

上述方法中，如果括号中带有参数那么就表示设置/修改属性；如果括号中不写参数：就表示获取数据。

<style>
    .txt{
        width: 70px;
    }
</style>
<body>
    <input type="text" id="num1" placeholder="数字1">
    <input type="button" value="+" id="and">
    <input type="text" id="num2" placeholder="数字2">
    =
    <span id="res">结果在此</span>
    <script src="../jquery-各种版本/3.2.1/jquery-3.2.1.min.js"></script>
    <script>
        //alert($);
        $(function(){
            $("#num1,#num2").css("border","1px solid red");
            $("#num1,#num2").css("height","30px");

            $("#num1,#num2").addClass("txt");
        })
        
        $("#and").click(function(){
            var n=$("#num1").val();
            console.log(n);
            var m = $("#num2").val();
            console.log(m);
            var h = Number(n)+Number(m);
            console.log(h);
            $("#res").html(h);
        })
        
    </script>
</body>

3.5 Jquery操作CSS样式

js	jq
对象.style.属性 = “属性值”	css({"属性值"："属性"，"属性":"属性值"})//多属性
	css("属性名","属性值");//单个属性

3.6 jQuery事件绑定

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

事件绑定的三种方法:

$("选择器").click(function(){ })；常用

$("选择器").bind("click",function(){});

$("选择器").on("click",function(){});常用

 <script type="text/javascript">
	$("<div></div>").css({
		border:"1px solid red",
		width:"200px",
		height:"200px",
		position:"absolute",
		top:"50px",
		left:"100px"
	}).click(function(){
		$(this).animate({left:"+=200"},1000)
		       .delay(200)
			   .animate({width:"+=100",height:"+=100"},1000)
			   .delay(200)
			   .animate({width:"-=50",height:"-=50"},1000)
			   .delay(200)
			   .slideUp();
				
	})
	.appendTo("body");
  </script>