【无标题】

最新推荐文章于 2024-06-13 14:35:59 发布
最新推荐文章于 2024-06-13 14:35:59 发布
阅读量71 收藏
点赞数
文章标签： 正则表达式 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BBsix666/article/details/128742134
版权

文章目录

108、初识正则表达式

mytext.onblur = function()
onblur 失去焦点执行一次
在这里插入图片描述
检测mytext里面有没有包含abc

109、元字符-基本元字符

\d 一位数字（0-9）在这里插入图片描述
\D 一位非数字
\s 一位空白 （空格 缩进 换行）
\S 一位非空白
\w 字母、数字、下划线
\W 非字母、数字、下划线
. 任意内容（换行不是）
在这里插入图片描述
.\转义字符
在这里插入图片描述

110、元字符-边界符

^ 开头
在这里插入图片描述
& 结尾
var reg = /^a\dc&/

111、元字符-限定符

  • 0~多次
    在这里插入图片描述
  • 1~多次（适用于exec测试）
    在这里插入图片描述
    在这里插入图片描述
    ？ 0~1次
    {n} 指定次数
    在这里插入图片描述
    {n,m} 大于等于n小于等于m次

112、元字符-特殊符号

| 或
（） 合起一个整体
[ ] 代表一个，只要包含一个就true
在这里插入图片描述

  • 一个区间，a-z,A-Z,0-9
    [ ^ abc ] 取反，不是abc的就是true

113、正则表达式-exec捕获

在这里插入图片描述

/g 标识符，使exec可以捕获多次
在这里插入图片描述
/i 标识符，忽略大小写

114、正则表达式的两大特性

懒惰 解决方法：使用标识符g
贪婪 解决方法：用?在这里插入图片描述

115、正则与字符串方法

replace search march

在这里插入图片描述
search无法用g搜索全局，若搜索不到则输出-1
在这里插入图片描述

116、案例-密码强度验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
        }

        .da{
            border: 2px solid black;
            width: 400px;
            height: 100px;
        }

        .xiao{
            width: 360px;
            height: 40px;
        }

        .box{
            width: 400px;
            display: flex;
            justify-content: center;
        }

        .level{
            display: flex;
            justify-content: space-between;
        }

        .small{
            width: 50px;
            height: 20px;
            border: 2px solid black;
        }

        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="da">
        <div class="box"><input type="text" class="xiao"></div>
        <div class="level">
            <div class="ruo small">弱</div>
            <div class="zhong small">中</div>
            <div class="qiang small">强</div>
        </div>
    </div>
    <script>
        var oinput=document.querySelector('input')
        var osmall=document.querySelectorAll(".small")
        var reg1=/\d/
        var reg2=/[a-z]/i
        var reg3=/[!@#$%^&*()]/
        oinput.oninput=function(){
            console.log(this.value)
            var kong = 0
            if(reg1.test(this.value)) kong++
            if(reg2.test(this.value)) kong++
            if(reg3.test(this.value)) kong++
            for(var i=0;i<osmall.length;i++){
                osmall[i].classList.remove("active")
                if(i<kong){
                    osmall[i].classList.add("active")
                }
            }
        }
    </script>
</body>
</html>

117、this指向

谁调用我我指向谁
在这里插入图片描述

118、改变this指向

call 执行函数，并改变this执行为函数的第一个参数，支持多个参数
aplly 执行函数，并改变this执行为函数的第一个参数，支持两个参数，第二个参数是一个数组
bind 执行函数，并改变this执行为函数的第一个参数，不会自动执行函数
在这里插入图片描述
在这里插入图片描述

119、ES6定义变量

在这里插入图片描述
let const var
在这里插入图片描述

120、案例-块级作用域

121、ES6的箭头函数

在这里插入图片描述
（）在只有一个变量的时候可以省略
{ } 在只有一句代码或只有返回值的时候可以省略
没有arguments
箭头函数没有this
在这里插入图片描述

122、ES6的解构赋值

在这里插入图片描述
在这里插入图片描述

123、ES6的对象简写

在这里插入图片描述

124、ES6展开运算符

…复制
在这里插入图片描述

125、ES6模块化语法

126、初识面向对象

在这里插入图片描述

127、创建对象的方式

字面量 内置构造函数
在这里插入图片描述
在这里插入图片描述

128、构造函数注意问题

1、首字母大写
2、构造函数不写return
在这里插入图片描述

129、面向对象的原型

用ele指box下的小class，而非在document大层面上寻找
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h1></h1>
        <ul></ul>
    </div>
    <script>
        var data = {
            title: '课程',
            list: ['数学', '语文']
        }
        function CreateList(select, data) {
            this.ele = document.querySelector(select)
            this.title = data.title
            this.list = data.list

            this.render = function () {
                var h1 = this.ele.querySelector('h1')
                var ul = this.ele.querySelector('ul')

                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join('')
            }
        }

        var obj1 = new CreateList('.box', data)
        obj1.render()
    </script>
</body>

</html>

130、选项卡-面向对象

131、ES6-class

在这里插入图片描述

132、面向对象继承

在这里插入图片描述

133、继承案例

134、ES6继承

function Person(name,age){
    this.name = name
    this.age = age
}

Person.prototype.say = function(){
    console.log("hello")
}

function Student(name,age,classroom){
    Person.call(this,name,age)
    this.classroom = classroom
}

Student.prototype = new Person()

var obj = new Student("kerwin",100,"1班")

135、初识前后端交互

136、ajax（async javascript and xml）

所拥有的优点：
1.不需要插件支持原生js就可使用
2.用户体验好，无需刷新页面就可以更新数据
3.减轻服务端和带宽的负担
缺点
搜索引擎容易搜索不到
ajax状态码：
readyState0：表示未初始化完成，也就是open方法还没有执行
readyState1：表示配置信息已经完成，也就是执行完open之后
readyState2：表示send方法已经执行完成
readyState3：表示正在解析响应内容
readyState==4：表示响应内容已经解析完毕，可以在客户端使用了



# 137、Ajax案例

```js
<script>
ajax({
	url:"http://localhost:300/users",
	method:"GET",
	async:true
	data:{
		username:"kerwin",
		password:"123"
	}
	headers:{}
	success:function(res){
		console.loh(res)
	}
	error:function(err){
		console.log(err)
	}
})

</script>

139-140、请求方式

get 偏向获取数据
post 偏向提交数据
put 偏向更新
delete偏向删除信息
patch偏向部分修改

141-142、封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //请求服务端
        //1、创建XHR（对象） new XMLHttpRequest（）
        var xhr = new XMLHttpRequest()
        //2、配置 open(请求方式，请求地址，是否异步)
        //localhost本机域名 127.0.0.1 本机ip
        xhr.open('GET','ip地址')
        //3、拨出 send
        xhr.send()
        //4、接受数据，注册一个事件
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                console.log("数据解析完成",xhr.responseText/*拿内容*/)
            }
        }
        
        </script>
</body>
</html>

144、前后端交互案例

准备json文件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="mytext">
    <button id="myadd">add</button>
    <ul class="list"></ul>
    <script type="module">
        import ajax from './util.js'
        class TodoList{
            constructor(select){
                this.list = document.querySelector(select)
                this.listdata = []

                this.init()
            }

            init(){
                this.getList()
            }
            getList(){
                ajax({
                    url:'',
                    success:function(res){
                        this.listdata=res
                    },
                    Error:function(){
                        
                    }
                })
            }

        }
        var obj = new TodoList('.list')
        
    </script>
</body>
</html>

144、回调地狱

在这里插入图片描述

<script>
//tiechui已经登录
ajax({
	url:"http://localhost3000/news",
	data:{
		author:"tiechui"
	},
	success:function(res){
		console.log(res[0])
		ajax({
			url:"http://loclhost:3000/comments",
			data:{
				
			},
			success:function(res){//二层的回调地狱，代码维护性不好
				newsId:res[0].id
			}
		})
	}

})

</script>

145、promise基础语法

在这里插入图片描述

<script>
var q = new Promise(function(resolve，reject){
	//放异步
	settimeout（（）=>{
		//成功兑现承诺
		resolve()

		//失败拒绝承诺
		//reject（）
	},2000）
})
//pending 执行中
//fulfilled 兑现承诺
//reject 拒绝承诺

//q是promise对象
q.then(function(){
//兑现承诺，这个函数被执行
}).catch(function(){
//拒绝承诺，这个函数被执行  
})

146、promise封装ajax

<script>
function pajax(){
	var q = new Promise(function(resolve,reject){
		ajax({
			success:function(res){、
				resolve(res)
			},
			error:function(err){
				reject(err)
			}
		})
	
	})
	return q
}

</script>

148、async和await语法

在这里插入图片描述

asnyc function fn(){
	const res = new Promise(function(resolve,reject){
		ajax({
			url:'',
			success(res){
				resolve(res)
			}
		})
	})
}

150-151、fetch

在这里插入图片描述

152-154、大案例

155、cookie

156-158、jsonp

sonp是json的一种“使用方式”，可以让王爷从别的域名（网站）那获取资料，即跨域读取数据
同源策略：同域名 同端口号 同协议
不符合同源策略，浏览器为了安全，会阻止请求

解决：
1、cors 有后端设置，Access-Control-Allow-Origin：*
2、jsonp：前后端必须协作

const script = document.creatElement('script')
script.src='./kerwin.txt'
document.body.appendChild(script)

159、再谈函数

在这里插入图片描述

160、闭包

函数内部返沪i一个函数，被外界所引用
这个内部函数就不会被销毁回收
内部函数所用到的外部函数的变量也不会被销
毁
优点：
让临时变量永驻内存
缺点
内存泄漏（解决 func=null）

<script>
function outer(){
	var name="kerwin"
	return function(){
		return name+"1111111"
	}
}
var func=outer()
console.log(func())

</script>

161、闭包的应用

1.记住列表的索引

    <script>
        var oli = document.querySelectorAll('li')
        for(var i=0;i<oli.length;i++){
            oli[i].onclick=(function(index){
                return function(){
                    console.log(11111,index)
                }
            })(i)//匿名自执行函数
        }
    </script>

2.jsonp案例优化–函数防抖
在这里插入图片描述

BBsix666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt无标题窗口
05-21
一个比较简单的Qt无标题窗口，基本实现了现在默认窗口自带的功能，可以用于界面美化自绘标题栏。
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
VC去掉'无标题'字样的方法.zip
11-21
Visual c++去掉'无标题'字样的方法.zip
无标题
02-12
无标题
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
vc++取掉窗口的 -无标题 字样
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
无标题dwewerwerwerwrwqrqwrqwrwqre
06-06
无标题dwewerwerwerwrwqrqwrqwrwqre
无标题jsjshshhshshshs
05-09
无标题jsjshshhshshshs
无标题123111113332
05-11
123
无标题zibraeffect
10-09
无标题zibraeffect
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
wxWidgets实现无标题栏窗口拖动效果
08-26
wxWidgets实现无标题栏窗口拖动效果 wxWidgets是一款功能强大且跨平台的图形用户界面（GUI）库，提供了丰富的控件和功能来帮助开发者快速构建图形用户界面应用程序。其中，实现无标题栏窗口拖动效果是其中一个重要...
c#之圆形无标题栏椭圆窗体的实现详解
09-05
在C#编程中，创建一个圆形无标题栏的椭圆窗体可以用于设计独特或具有艺术感的用户界面。以下是对实现这一功能的详细步骤的解释： 1. **隐藏标题栏**： 首先，你需要创建一个新的窗体（Form）。在C#中，你可以通过...
无标题的笔记本.pdf
08-11
"指针专题" 指针是一种复杂的数据类型，在编程语言中，它可以指向某个内存地址，存储该地址的值或变量。下面是关于指针的详细知识点： 一、指针的定义和概念 指针是一个变量，它存储了另一个变量的内存地址。...
无标题游戏
02-12
无标题游戏梅森公园（Meesun Park）的Jarisha Olanday描述快来了敏捷委员会，路线图，要求
Android 实现全屏和无标题栏的显示
01-05
在Android实现没有标题栏的方法有两种： 在代码中添加 requestWindowFeature(Window.FEATURE_NO_TITLE)； 在清单文件AndroidManifest.xml中添加 android:theme=@android:style/Theme.NoTitleBar 具体的代码...
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
无标题文档
02-10
网站该网站是使用现代静态网站生成器构建的。安装yarn install当地发展yarn start 此命令将启动本地开发服务器并打开浏览器窗口。 大多数更改都实时显示，而无需重新启动服务器。建立yarn build 此命令将静态内容...
【Python入门与进阶】Python 中的正则表达式
最新发布
小火龙的博客
06-13 335
Python 中的正则表达式是通过内置模块re来实现的。正则表达式是一种用于模式匹配和文本处理的强大工具，可以用于查找、替换、分割字符串等操作。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值