发表于： 2019-12-10 21:57:43
1 1313
今日完成:
js中获取键盘事件
1 <script type="text/javascript" language=JavaScript charset="UTF-8">
2 document.onkeydown=function(event){
3 var e = event || window.event || arguments.callee.caller.arguments[0];
4 if(e && e.keyCode==27){ // 按 Esc 5 //要做的事情 6 }
7 if(e && e.keyCode==113){ // 按 F2 8 //要做的事情 9 }
10 if(e && e.keyCode==13){ // enter 键11 //要做的事情12 }
13 };
14 </script>
15 只要你定义了这些键的动作，你在浏览器里按下这些键就会响应，兼容目前所有浏览器。
1 js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：
2 keyCode 8 = BackSpace BackSpace
...
--------------------------------------------------------------------------------
js正则表达式语法(补充:读懂别人的正则表达式)
作用:
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。
正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
即:在有查找字符串的需求时,可以用正则表达式来限定(描述)查找条件(复杂查找条件)
很可能使用过Windows/Dos下用于文件查找的通配符(wildcard)，也就是*和?。
如果你想查找某个目录下的所有的Word文档的话，你会搜索*.doc。在这里，*会被解释成任意的字符串。
和通配符类似，正则表达式也是用来进行文本匹配的工具，
只不过比起通配符，它能更精确地描述你的需求,代价就是更复杂
---------------------------------------------------------------------
举例逐步了解
假设在一篇英文小说里查找hi，可以使用正则表达式hi。
它可以精确匹配这样的字符串：由两个字符组成，前一个字符是h,后一个是i
处理正则表达式的工具会提供一个忽略大小写的选项,
匹配结果:hi,HI,Hi,hI这四种情况中的任意一种,
且很多单词里包含hi这两个连续的字符，比如him,history,high等等。用hi来查找的话，这里边的hi也会被找出来。
所以,如果要精确地查找hi这个单词的话,需要用到正则表达式,
如这里:应该使用\bhi\b
\b是正则表达式规定的一个特殊代码(元字符，metacharacter);代表着单词的开头或结尾，也就是单词的分界处.
虽然通常英文的单词是由空格，标点符号或者换行来分隔的，但是\b并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。//这句不是很理解
例子加上元字符的意思为:限定查找条件:以h开头,以i结尾()(这里就把单词中包含hi的单词从查找序列中排除了)
假如要找的是hi后面不远处跟着一个Lucy，应该用\bhi\b.*\bLucy\b
这里，点(.)是另一个元字符，匹配除了换行符以外的任意字符。星号(*)同样是元字符，不过它代表的不是字符，也不是位置，而是数量——它指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配。
因此，点和星号(.*)连在一起就意味着任意数量的不包含换行的字符。
现在\bhi\b.*\bLucy\b的意思就很明显了：先是一个单词hi,然后是任意个任意字符(但不能是换行)，最后是Lucy这个单词
即:查找打印的是一段语句,与\b类似,以hi开头(这里用到\b,去掉与hi成包含关系的字符串,就是单纯的以单词hi开头),以Lucy结尾(这里/b作用同上),
区别就是.*的含义,两个单词之间允许存在除换行外的其他单词,也就是查找以单词hi开头,Lucy结尾的一段话.
ps:
1.如果不加星号(*),单是个点(.)就是查找hi lucy,两个单词,中间不允许出现其他字符串
2.如果不加点和星号(.*),查找的就是hilucy一个单词
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
元字符
更多例子:
如\b,.,*，还有\d.正则表达式里还有更多的元字符，比如\s匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等。\w匹配字母或数字或下划线或汉字等
\ba\w*\b匹配以字母a开头的单词——先是某个单词开始处(\b)，然后是字母a,然后是任意数量的字母或数字(\w*)，最后是单词结束处(\b)。
ps:
1.精确查找某个单词,类似.上个精确查找以某个单词开头,某个单词结尾的字段
好吧，现在我们说说正则表达式里的单词是什么意思吧：就是不少于一个的连续的\w。不错，这与学习英文时要背的成千上万个同名的东西的确关系不大 :)
\d+匹配1个或更多连续的数字。这里的+是和*类似的元字符，不同的是*匹配重复任意次(可能是0次)，而+则匹配重复1次或更多次。
\b\w{6}\b 匹配刚好6个字符的单词(即:查找以w开头的一共有6个字母组成的单词)
元字符^（和数字6在同一个键位上的符号）和$都匹配一个位置，这和\b有点类似
重复
ex:
Windows\d+匹配Windows后面跟1个或更多数字
^\w+匹配一行的第一个单词(或整个字符串的第一个单词，具体匹配哪个意思得看选项设置)
------------------------------------------------------------------------------------------------------------------------------------------------------------------
^匹配要用来查找的字符串的开头，$匹配结尾。这两个代码在验证输入的内容时非常有用，
比如一个网站如果要求你填写的QQ号必须为5位到12位数字时，可以使用：^\d{5,12}$。匹配数字
{5,12}和前面介绍过的{2}是类似的，只不过{2}匹配只能不多不少重复2次，
{5,12}则是重复的次数不能少于5次，不能多于12次，否则都不匹配。
因为使用了^和$，所以输入的整个字符串都要用来和\d{5,12}来匹配，
也就是说整个输入必须是5到12个数字，因此如果输入的QQ号能匹配这个正则表达式的话，那就符合要求了。
和忽略大小写的选项类似，有些正则表达式处理工具还有一个处理多行的选项。如果选中了这个选项，^和$的意义就变成了匹配行的开始处和结束处。
ps:用来限制输入框,输入的内容
ps:正则表达式引擎通常会提供一个“测试指定的字符串是否匹配一个正则表达式”的方法，
如JavaScript里的RegExp.test()方法或.NET里的Regex.IsMatch()方法。
这里的匹配是指是字符串里有没有符合表达式规则的部分。
如果不使用^和$的话，对于\d{5,12}而言，使用这样的方法就只能保证字符串里包含5到12连续位数字，而不是整个字符串就是5到12位数字。
遇到到问题:
1.暂时的理解:(用法)限制条件,精确查找代码,或者文本中的一段内容,或者出现的次数之类.
1.暂时的理解:(用法)限制条件,精确查找代码,或者文本中的一段内容,或者出现的次数之类.
2.从限制条件精确查找转换到限制条件精确输入?(应用情况or条件理解有偏差)
------------------------------------------------------------------------------------------------------------
字符转义
如果你想查找元字符本身的话，比如你查找.,或者*,就出现了问题：你没办法指定它们，因为它们会被解释成别的意思。
这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用\.和\*。当然，要查找\本身，你也得用\\.
总结:元字符和查找条件中的标点混淆,如果想识别为标点就在前面加反斜杠( \ )
ex:
deerchao\.net匹配deerchao.net
C:\\Windows匹配C:\Windows
-----------------------------------------------------------------------------------
字符类
要想查找数字，字母或数字，空白是很简单的，因为已经有了对应这些字符集合的元字符，
但是如果想匹配没有预定义元字符的字符集合(比如元音字母a,e,i,o,u),应该怎么办？(没有对应集合的元字符)
只需要在方括号里列出它们就行了，像[aeiou]就匹配任何一个英文元音字母，[.?!]匹配标点符号(.或?或!)。
也可以轻松地指定一个字符范围，像[0-9]代表的含意与\d就是完全一致的：一位数字；同理[a-z0-9A-Z_]也完全等同于\w（如果只考虑英文的话）。
下面是一个更复杂的表达式：\(?0\d{2}[) -]?\d{8}。
这个表达式可以匹配几种格式的电话号码，像(010)88886666，或022-22334455，或02912345678等。
分析：首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。
ps:“(”和“)”也是元字符，后面的分组节里会提到，所以在这里需要使用转义
总结:元字符类似方法,没有方法就需要自己自定义一个需要的函数
分枝条件
刚才那个表达式也能匹配010)12345678或(022-87654321这样的“不正确”的格式。
要解决这个问题，需要用到分枝条件。
正则表达式里的分枝条件指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，具体方法是用竖杠(|)把不同的规则分隔开。
0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式能匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445)。
\(0\d{2}\)[- ]?\d{8}|0\d{2}[- ]?\d{8}这个表达式匹配3位区号的电话号码，其中区号可以用小括号括起来，也可以不用，区号与本地号间可以用连字号或空格间隔，也可以没有间隔。
\d{5}-\d{4}|\d{5}这个表达式用于匹配美国的邮政编码。
美国邮编的规则是5位数字，或者用连字号间隔的9位数字。
之所以要给出这个例子是因为它能说明一个问题：使用分枝条件时，要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话，那么就只会匹配5位的邮编(以及9位邮编的前5位)。
原因是匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。
总结:竖杠(|)类似判断语句中"或"的意思
分组
怎么重复单个字符?（直接在字符后面加上限定符就行了）；
怎么重复多个字符?(可以用小括号来指定子表达式(也叫做分组)，然后就可以指定这个子表达式的重复次数了)
ex:
(\d{1,3}\.){3}\d{1,3}
解析:
\d{1,3}匹配1到3位的数字，(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次
最后再加上一个一到三位的数字(\d{1,3})。
------------------------------------------------------------------------------------
反义
有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外，其它任意字符都行的情况
ex:
\S+匹配不包含空白符的字符串。
<a[^>]+>匹配用尖括号括起来的以a开头的字符串。
--------------------------------------------------------------------
...
剩下部分等完全理解正则用法,再来详细理解
---------------------------------------------------------------
因为菜鸟教程中没有语法,首先要自己找例子验证语法
ex:1
1.html
<input type="button" value="Login" onclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" onclick="show()" />
<a href="33.html" target="_blank">33.html</a>
<script type=text/javascript src=storage.js></script>
1.js
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name); //暂定
}
//显示数据
//点击show按钮,运行的函数
function show() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
//按钮点击后,函数绑定的输入框(另一个input)显示默认文本(字符串)"your name is "
//加上后面传递的值(且必须(规定)也要是字符串),输入
//遇到问题,这个例子为什么要同时设置name和id呢?
document.getElementById("text").value = str; //输入框的值是str
}
2.html
<script>
var str = window.sessionStorage;
alert(str.getItem("name"));
</script>
显示:
描述:点击show运行函数,弹出txt输入框,以显示的文字,是输入框的默认值,不会被储存,是描述性文本
之后自己写入的才会被储存
写入自己想储存的数据,点击login,运行另一个函数,submit(),数据储存,
两个按钮3个函数有点没有理清关系
遇到问题:
例子没理解透彻,就去做自己的代码,然后都是bug,沉不住气去思考问题了,写的有点少
收获:
1.找到了修改输入框限定类型的新方式,(原本是输入进去,又删除(类似)应该是直接禁用),js获取键盘事件
ps:但是代码没有完全明白
2.正则表达式,看了一堆,算是达到目的,能读懂别人的正则表达式
3.之前做懵了,之后思考不动,在和别人讨论中,正确理解伪代码概念:
一个任务,首先做什么,明确的知道,用到什么属性,用到什么标签,什么方法,.怎么设置函数,理解出逻辑,
这样可以快速检测以自己现有的知识储备,能否去实现,如果不行从两方面考虑:一是是否是自己逻辑上的思考方向有误,二是自己的知识储备不够用,不需要整个认路流程顺下来,但前几步,要非常明确,(因为可能中间想错后面白搭),这样做的好处,不用详细做就能迅速试错,把大的逻辑问题,打通,剩下细的琐碎的具体步骤就很快了
明日计划:
1.把函数的整个看完,(关于闭包,传参,把概念确定下来)
2.用最简单话,先把自己学过的东西,用三两句话说一下,即:是什么,干嘛用的
返回列表
评论