Skip to content

Commit 38ed7de

Browse files
Zeng FanzaiZeng Fanzai
Zeng Fanzai
authored and
Zeng Fanzai
committed
JavaScript基础.md
1 parent ab53104 commit 38ed7de

File tree

1 file changed

+182
-1
lines changed

1 file changed

+182
-1
lines changed

‎JavaScript基础.md

+182-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
- [数据类型](#数据类型)
44
- [DOM](#dom)
5+
- [正则表达式](#正则表达式)
56

67
## **数据类型**
78

@@ -62,4 +63,184 @@ if(1){} //1转换为true
6263
```
6364
- 获取**标签名**为p的DOM节点数组：//<p></p>
6465
```js
65-
document.getElementByTagName('p');
66+
document.getElementByTagName('p');
67+
- IE8及以上的现代浏览器支持**querySelector**和**querySelectorAll**方法来获取DOM节点，更加灵活高效，querySelector查询的是第一个满足条件的节点，而querySelectorAll查询的是所有满足条件的节点。
68+
- ```js
69+
document.querySelector("#test");
70+
document.querySelector(".test");
71+
document.querySelector("p")
72+
document.querySelector("div.test>p:first-child");
73+
```
74+
- DOM内容操作
75+
- 修改HTML元素内容：
76+
```js
77+
<p id="p1">Hello World!</p>
78+
document.getElementById("p1").innerHTML = "New Next!";
79+
```
80+
- 修改HTML属性：
81+
```js
82+
<img id="image" src="smiley.gif">
83+
document.getElementById("image").src = "landscape.jpg";
84+
```
85+
- 修改CSS样式：
86+
```js
87+
<p id="p2">Hello World!</p>
88+
document.getElementById("p2").style.backgroundColor = "blue"
89+
```
90+
- DOM事件：
91+
```js
92+
<h1 onclick="changetext(this)">请点击该文本</h1>
93+
function changetext(id){id.innerHTML = "谢谢";}
94+
```
95+
- 常全局对象
96+
- Window对象
97+
- 所有浏览器都支持window对象，他表示浏览器窗口。
98+
```js
99+
document.getElementById("a") //等同
100+
101+
window.document.getElementById("a")
102+
```
103+
- Screen对象
104+
- window.screen对象包含有关用户屏幕的信息。
105+
- 获取浏览器窗口的尺寸
106+
- screen.availWidth - 可用的屏幕宽度
107+
- screen.availHeight - 可用的屏幕高度
108+
- Location对象
109+
- window.location 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新页面。
110+
- 参数：hostname,pathname,port,protocol(http: // or https: //)
111+
- History对象
112+
- window.history 对象包含浏览器的历史
113+
- history.back()-加载历史列表中的前一个URL
114+
- history.forward()-加载历史列表中的下一个URL
115+
- JSON对象
116+
- JSON.parse()：用于将JSON字符转换为JS对象
117+
- JSON.stringify()：用于将JS对象转化为JSON字符串
118+
- 数据操作
119+
- Array方法
120+
方法名|作用
121+
|:----|:-----|
122+
join|将数组转化为字符串并连接在一起，可以指定一个字符串用来分隔各个数组元素
123+
toString|效果与不带参数的join()方法类似
124+
toLocalString|同上
125+
reverse|将数组中的元素颠倒
126+
sort|对数组进行排序
127+
concat|创建并返回一个新数组，元素包括元素数组和参数
128+
slice|返回指定数组的一个子数组，两个参数分别指定开始和结束的位置，若只指定一个参数，则返回从该参数开始到数组结束这一子数组
129+
splice|在数组中插入或截取元素
130+
push|在数组尾部添加一个或多个元素，并返回数组新的长度
131+
pop|删除数组最后一个元素并将其返回
132+
...|...
133+
[Array数组方法参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)
134+
- String方法
135+
方法名|作用
136+
|:----|:----|
137+
split|把一个字符串根据参数分割为字符串数组
138+
charCodeAt|返回一个整数，代表指定位置字符的Unicode编码
139+
fromCharCode|从一些Unicode字符串返回一个字符串
140+
charAt|返回指定索引位置处的字符。如果超出有效范围的索引返回空字符串
141+
trim|去掉字符串前后的空格
142+
...|...
143+
[String方法参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)
144+
- Math方法
145+
方法名|作用
146+
|:---|:---|
147+
round|四舍五入
148+
ceil|向上取整
149+
floor|向下取整
150+
abs|取绝对值
151+
max|取最大值
152+
pow|Math.pow(a,b)，返回a的b次幂
153+
trunc|去掉一个数的小数部分，并返回整数部分，如Math.trunc(4.1)//4
154+
sign|参数伪正数,返回+1，参数为负数，返回-1；参数为0，返回0；参数伪-0，返回-0；其他值，返回NaN
155+
cbrt|返回数字的立方根
156+
- Object方法：
157+
方法名|作用
158+
|:---|:---|
159+
keys|获取该对象所有可遍历的key值数组
160+
hasOwnProperty|确定某个对象是否具有带指定名称的属性，该方法不会检查对象的原型链中的属性
161+
isPrototypeOf|确定一个对象是否存在于另一个对象的原型链中
162+
**ES6新增方法**|
163+
values|获取该对象所有可遍历的键值数组
164+
entries|获取该对象所有可遍历的键值对数组
165+
166+
## **正则表达式**
167+
168+
- 在JS中，正则表达式也是对象。这些模式被用于RegExp的exec和test方法，以及String的match、replace、search、和split方法。
169+
- 创建一个正则表达式：其由包含在斜杠之间的模式组成
170+
171+
```js
172+
/*
173+
/pattern/flags
174+
*/
175+
const regex = /ab+c/;
176+
const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
177+
```
178+
179+
在加载脚本后，正则表达式字面值提供正则表达式的编译。当正则表达式保持不变时，使用此方法可获得更好的性能。
180+
- 或者调用RegExp对象的构造函数，如下所示
181+
182+
```js
183+
/*
184+
new RegExp(pattern [,flags])
185+
*/
186+
let regex = new RegExp("ab+c");
187+
let regex = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$/,"gi");
188+
let regex = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$","gi");
189+
```
190+
191+
字符|含义
192+
|:---|:---|
193+
**\\**|匹配依照下列规则：<br> a).**在非特殊字符前的反斜杠表示下一个字符是特殊的**，不能从字面上解释。eg. 'b'和'\b'。<br>b).**反斜杠也可以将其后的特殊字符转义为字面量**。eg. a*/表示匹配0个或多个a相反，模式/a\*/将‘*’的特殊性移除，从而匹配像'a*'这样的字符串。<br>注意：使用new RegExp("pattern")的时候要将\进行转义。
194+
**^**|a).**匹配输入的开始**。如果多行标志被设置为true，那么也匹配换行符后紧跟的位置eg./^A/不会匹配"an A"中的”A",但会匹配“An E”中的"A"。<br>b).**当 '^' 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。**
195+
**$**|**匹配输入的结束**。如果多行标示被设置为true，那么也匹配换行符前的位置。<br>eg. /t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。
196+
**\***|**匹配前一个表达式0次或多次,等价于 {0,}**。<br>eg. /bo*/会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中将不会匹配任何东西。
197+
**+**|**匹配前面一个表达式1次或者多次。等价于 {1,}。**<br>eg. /a+/匹配了在 "candy" 中的 'a'，和在 "caaaaaaandy" 中所有的 'a'。
198+
**?**|a).**匹配前面一个表达式0次或者1次。等价于 {0,1}。**<br>eg. /e?le?/ 匹配 "angel" 中的 'el'，和 "angle" 中的 'le' 以及"oslo' 中的'l'。<br>b).**如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符）**，和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。<br>eg.对 "123abc" 应用 /\d+/ 将会返回 "123"，如果使用 /\d+?/,那么就只会匹配到 "1"。<br>c).**还可以运用于先行断言**，如本表的 x(?=y) 和 x(?!y) 条目中所述。
199+
**.**|（小数点）**匹配除换行符之外的任何单个字符**。<br>eg. /.n/将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay'。
200+
**(X)**|**匹配 'x' 并且记住匹配项**，就像下面的例子展示的那样。括号被称为 **捕获括号**。
201+
(?:x)|**匹配 'x' 但是不记住匹配项。****这种叫作非捕获括号**，使得你能够定义为与正则表达式运算符一起使用的子表达式。
202+
x(?=y)|**匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。**
203+
x(?\|y)|**匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。**
204+
x\|y|匹配‘x’或者‘y’。
205+
**{n}**|**n是一个正整数，匹配了前面一个字符刚好发生了n次**。<br>eg. /a{2}/不会匹配“candy”中的'a',但是会匹配“caandy”中所有的a，以及“caaandy”中的前两个'a'。
206+
**{n,m}**|**n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。**
207+
**[xyz]**|**一个字符集合。匹配方括号的中任意字符，包括转义序列。** 你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。<br>eg. [abcd] 和[a-d]是一样的。他们都匹配"brisket"中得‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/都匹配“test.i.ng”中得所有字符。
208+
**[^xyz]**|**一个反向字符集。** 也就是说， 它**匹配任何没有包含在方括号中的字符**。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。
209+
[\b]|匹配一个**退格**(U+0008)。（不要和\b混淆了。）
210+
\b|**匹配一个词的边界。** 一个词的边界就是一个词不被另外一个词跟随的位置或者不是另一个词汇字符前边的位置。注意，**一个匹配的词的边界并不包含在匹配的内容中。** 换句话说，**一个匹配的词的边界的内容的长度是0。**（不要和[\b]混淆了）<br>eg. /\bm/匹配“moon”中得‘m’；<br>eg. /oo\b/并不匹配"moon"中得'oo'，因为'oo'被一个词汇字符'n'紧跟着。<br>eg. /oon\b/匹配"moon"中得'oon'，因为'oon'是这个字符串的结束部分。这样他没有被一个词汇字符紧跟着。<br>eg. \w\b\w/将不能匹配任何字符串，因为一个单词中的字符永远也不可能被一个非词汇字符和一个词汇字符同时紧跟着。
211+
\B|**匹配一个非单词边界。** 他匹配一个**前后字符都是相同类型**的位置：都是单词或者都不是单词。一个字符串的开始和结尾都被认为是非单词。<br>eg. /\B../匹配"noonday"中得'oo', 而/y\B./匹配"possibly yesterday"中得’ye‘
212+
\cX|**当X是处于A到Z之间的字符的时候，匹配字符串中的一个控制符。** <br>eg./\cM/ 匹配字符串中的 control-M (U+000D)。
213+
**\d**|**匹配一个数字。** 等价于[0-9]。
214+
**\D**|**匹配一个非数字字符。** 等价于[^0-9]。
215+
\f|匹配一个换页符 (U+000C)。
216+
\n|匹配一个换行符 (U+000A)。
217+
\r|匹配一个回车符 (U+000D)。
218+
\s|匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如, /\s\w*/ 匹配"foo bar."中的' bar'。
219+
\S|匹配一个非空白字符。
220+
\t|匹配一个水平制表符 (U+0009)。
221+
\v|匹配一个垂直制表符 (U+000B)。
222+
**\w**|匹配一个单字字符（字母、数字或者下划线）。等价于[A-Za-z0-9_]。
223+
**\W**|匹配一个非单字字符。等价于[^A-Za-z0-9_]。
224+
**\n**|当 n 是一个正整数，一个返回引用到最后一个与有n插入的正则表达式(counting left parentheses)匹配的副字符串。比如 /apple(,)\sorange\1/ 匹配"apple, orange, cherry, peach."中的'apple, orange,' 。
225+
\0|匹配 NULL (U+0000) 字符， 不要在这后面跟其它小数，因为 \0\<digits> 是一个八进制转义序列。
226+
\xhh|与代码 hh 匹配字符（两个十六进制数字）
227+
\uhhhh|与代码 hhhh 匹配字符（四个十六进制数字）。
228+
\u{hhhh}|(仅当设置了u标志时) 使用Unicode值hhhh匹配字符 (十六进制数字).
229+
230+
- 使用正则表达式
231+
方法|描述
232+
|:---|:---|
233+
exec|一个在string中执行查找匹配的RegExp方法，它**返回一个数组（未匹配到则返回null）**。
234+
test|一个在string测试是否匹配的RegExp方法，它**返回true或false**。
235+
match|一个在string中执行查找匹配的String方法，它**返回一个数组或者在未匹配到时返回null**。
236+
search|一个在string中测试匹配的String方法，它**返回匹配到的位置索引，或者在失败时返回-1**。
237+
replace|一个在string中执行**查找匹配**的String方法，并且**使用替换字符串替换掉匹配到的子字符串**。
238+
split|一个使用正则表达式或者一个固定字符串分隔一个字符串，并**将分隔后的子字符串存储到数组中**的String方法。
239+
- 正则表达式标志
240+
标志|描述
241+
|:---|:---|
242+
g|全局搜索
243+
i|不区分大小写搜索
244+
m|多行搜索
245+
y|执行”粘性“搜索，匹配从目标字符串的当位置开始，可以使用y标志
246+
- [正则表达式参考(MDN)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)

0 commit comments

Comments
 (0)