javascript基础&实战

一六长弓 · 发表于 2023-1-3 10:36:55

javascript基础&实战

一、JS基础

1.js编写位置

1.在head中添加

在body中的语句上添加不推荐使用

2.引入外部js文件

3.js基本语法

4.变量赋值

5.标识符

6.数据类型

1.String 字符串

2. Number

3.布尔值

4. Null 和 Undefined

5.强制类型转换-String

6.强制类型转换-Number

<head>
<meta charset="utf-8">
<title></title>
</head>

复制代码

7.其他进制的数字

[/code][size=4]8.转化为 Boolean[/size]
[code]

复制代码

9.算数运算符

[/code][size=4]10.一元运算符[/size]
[code]

复制代码

11.自增和自减

[/code][size=4]12.逻辑运算符（！ && ||）[/size]
[code]

复制代码

13. 非布尔值的与或运算

[/code][size=4]14.赋值运算符[/size]
[code]

复制代码

15.关系运算符

[/code][size=4]16.相等运算符[/size]
[code]

复制代码

17.条件运算符

复制代码

18.运算符的优先级

[/code][align=center][/align]
[size=4]19.代码块[/size]
[code]

复制代码

20. if语句

复制代码

练习

练习2：

复制代码

21.条件分支语句--switch

[/code][size=4]22.while循环[/size]
[code]

复制代码

23.for循环

[/code][b]练习[/b]
[code]

复制代码

23.1测试程序性能

[/code][size=4]24.break和continue[/size]
[code]

复制代码

25.对象的简介 -Object

[/code][size=4]26.属性名和属性值[/size]
[code]

复制代码

27.基本数据类型和引用数据类型

复制代码

28.对象字面量

[/code][size=4]29.函数的简介[/size]
[code]

复制代码

1.函数的参数

复制代码

2.函数的返回值

复制代码

练习

[/code][size=3]3.立即执行函数[/size]
[code]

复制代码

4. 函数的方法 call和apply

复制代码

30.枚举对象中的属性

复制代码

31.全局作用域

复制代码

32.函数作用域

复制代码

33.this

[/code][size=4]34.使用工厂方法创建对象[/size]
[code]

复制代码

35.构造函数

复制代码

36.原型对象

复制代码

原型的补充

[/code][size=4]37.toString()[/size]
[code]

复制代码

38.垃圾回收

复制代码

39.数组简介

复制代码

1.数组字面量

复制代码

2.数组的四个方法

[/code][size=3]3.forEach[/size]
[code]

复制代码

4.slice 和splice

复制代码

练习

复制代码

5.数组的剩余方法

[/code][size=4]40.Date对象[/size]
[code]

复制代码

41.Math

[/code][align=center][/align]
[size=4]42.包装类[/size]
[code]

复制代码

43.字符串的相关方法

[/code][size=4]44.正则表达式的简介[/size]
[code] /* 正则表达式 - admin@atgui.com -邮件的规则：<head>
<meta charset="utf-8">
<title></title>
</head>1.前边可以是xxxx<head>
<meta charset="utf-8">
<title></title>
</head>2.跟着一个@<head>
<meta charset="utf-8">
<title></title>
</head>3.后边可以是xxxx<head>
<meta charset="utf-8">
<title></title>
</head>4. .com获取其他的<head>
<meta charset="utf-8">
<title></title>
</head> - 正则表达式用于定义一些字符串的规则，<head>
<meta charset="utf-8">
<title></title>
</head> 计算机可以根据正则表达式，来检查一个字符串是否符合规则，<head>
<meta charset="utf-8">
<title></title>
</head> 获取将字符串中符合规则的内容提取出来 */ //创建正则表达式对象 /* 语法： var 变量= new RegExp("正则表达式","匹配模式"); 使用typeof检查正则对象，会返回object var reg = new RegExp("asda"); 这个正则表达式可以来检查一个字符串是否含有asda 在构造函数中可以传递一个匹配模式作为第二个参数，可以是 i 忽略大小写<head>
<meta charset="utf-8">
<title></title>
</head> g 全局匹配模式<head>
<meta charset="utf-8">
<title></title>
</head> 正则表达式的方法： test() - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则<head>
<meta charset="utf-8">
<title></title>
</head>如果符合则返回true，否则返回false */ var reg = new RegExp("asda"); //var reg = new RegExp("asda",i); //console.log(reg); ///asda/ //console.log(typeof reg); //object var str = "asda"; result = reg.test(str); console.log(result); </script>

复制代码

1.正则语法

[/code][size=3]2.字符串和正则相关的方法[/size]
[code]

复制代码

3.正则表达式语法

[/code][b]练习[/b]
[code]

复制代码

45.DOM简介

<body>
<button id="btn">我是一个按钮</button>

复制代码

46.事件的简介

<body>
<button id="btn">我是一个按钮</button>
</body>

复制代码

47.文档的加载

<head>
<meta charset="utf-8">
<title></title>
</head> 我是一个按钮

复制代码

1.获取元素结点

2.获取元素结点的子节点

练习

3.获取父节点和兄弟结点

4.dom查询的剩余方法

<head>
<meta charset="utf-8">
<title></title>
</head><head>
<meta charset="utf-8">
<title></title>
</head>我是box1中的div 11<head>
<meta charset="utf-8">
<title></title>
</head>我是box1中的div 12

复制代码

练习

1.图片切换的练习

<head>
<meta charset="utf-8">
<title></title>
</head><head>
<meta charset="utf-8">
<title></title>
</head>
[align=center][img]https://www.cnblogs.com/img/1.jpg[/img][/align] 上一张下一张

复制代码

示例：

2.全选练习

全选练习<head>
<meta charset="utf-8">
<title></title>
</head> 你爱好的运动是？全选/全不选
足球篮球羽毛球乒乓球
<head>
<meta charset="utf-8">
<title></title>
</head><head>
<meta charset="utf-8">
<title></title>
</head>

复制代码

5.dom的增删改

6.操作内联样式(使用DOM操作css)

<head>
<meta charset="utf-8">
<title></title>
</head> 点击切换颜色点击读取元素样式
<head>
<meta charset="utf-8">
<title></title>
</head>

复制代码

7.获取当前元素的样式（getStyle()方法）

<head>
<meta charset="utf-8">
<title></title>
</head> 点我一下

复制代码

8.其它样式相关的属性

<head>
<meta charset="utf-8">
<title></title>
</head> 点我一下

复制代码

练习(当垂直滚动条滚动到底时使表单项可用)

<head>
<meta charset="utf-8">
<title></title>
</head> [size=4]欢迎亲爱的用户注册[/size]
亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情亲爱的用户，请先阅读目录详情
我已仔细阅读协议，一定遵守

复制代码

49.事件对象

<head>
<meta charset="utf-8">
<title></title>
</head>

复制代码

50.div跟随鼠标移动

<head>
<meta charset="utf-8">
<title></title>
</head><head>
<meta charset="utf-8">
<title></title>
</head>

复制代码

51.事件的冒泡

<head>
<meta charset="utf-8">
<title></title>
</head><head>
<meta charset="utf-8">
<title></title>
</head> 我是box1 我是span

复制代码

52.事件的委派

<head>
<meta charset="utf-8">
<title></title>
</head> 添加超链接
[list]
[*][url=https://www.cnblogs.com/javascript:;]超链接一[/url]
[*][url=https://www.cnblogs.com/javascript:;]超链接二[/url]
[*][url=https://www.cnblogs.com/javascript:;]超链接三[/url]
[/list]

复制代码

53.事件的绑定

<head>
<meta charset="utf-8">
<title></title>
</head> 单击按钮

复制代码

54.事件的传播(了解即可)

关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
然后在向内传播给后代元素
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
IE8及以下的浏览器中没有捕获阶段

复制代码

55.拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是一段文字
<img src="https://www.cnblogs.com/img/an.jpg" id="img1" />
</body>
</html>

复制代码

56.滚轮的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
</body>
</html>

复制代码

57.键盘事件

[code]键盘事件：onkeydown 按键被按下对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。onkeyup 按键被松开键盘事件一般都会绑定给一些可以获取到焦点的对象或者是documentkeyCode 可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下除了keyCode，事件对象中还提供了几个属性altKeyctrlKeyshiftKey这个三个用来判断alt ctrl 和 shift是否被按下如果按下则返回true，否则返回false//console.log(event.keyCode); //判断一个y是否被按下 //判断y和ctrl是否同时被按下 if(event.keyCode === 89 && event.ctrlKey){ console.log("ctrl和y都被按下了"); } input.onkeydown = function(event) { event = event || window.event; //数字 48 - 57 //使文本框中不能输入数字 if(event.keyCode >= 48 && event.keyCode 收藏关注评论
来源:https://www.cnblogs.com/yin-jihu/p/17020439.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

javascript基础&实战

本帖子中包含更多资源