javascript基础&实战
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.其他进制的数字
8.转化为 Boolean
9.算数运算符
10.一元运算符
11.自增和自减
12.逻辑运算符 （！ &&||）
13. 非布尔值的与或运算
14.赋值运算符
15.关系运算符
16.相等运算符
17.条件运算符
18.运算符的优先级
19.代码块
20. if语句
练习
练习2：21.条件分支语句--switch
22.while循环
23.for循环
练习
23.1测试程序性能
24.break和continue
25.对象的简介 -Object
26.属性名和属性值
27.基本数据类型和引用数据类型
28.对象字面量
29.函数的简介
1.函数的参数
2.函数的返回值
练习
3.立即执行函数
4. 函数的方法 call和apply
30.枚举对象中的属性
31.全局作用域
32.函数作用域
33.this
34.使用工厂方法创建对象
35.构造函数
36.原型对象
原型的补充
37.toString()
38.垃圾回收
39.数组简介
1.数组字面量
2.数组的四个方法
3.forEach
4.slice 和splice
练习
5.数组的剩余方法
40.Date对象
41.Math
42.包装类
43.字符串的相关方法
44.正则表达式的简介
/* 正则表达式 - 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.正则语法
2.字符串和正则相关的方法
3.正则表达式语法
练习
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>
https://www.cnblogs.com/img/1.jpg 上一张 下一张 示例：
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> 欢迎亲爱的用户注册
亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情 亲爱的用户，请先阅读目录详情
我已仔细阅读协议，一定遵守 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> 添加超链接
[*]超链接一
[*]超链接二
[*]超链接三
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.键盘事件
键盘事件：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】 我们会及时删除侵权内容，谢谢合作！
页:
[1]