JavaScript入门-CFANZ编程社区

JavaScript

1.知识回顾

标签三种方式：默认的，浮动和定位的。

前端网页标签排布方式，默认的是最好的。

选择顺序：默认的标准流/文档流--->浮动---->定位

定位也能实现浮动的效果，原因是计算机执行定位的时候，稳定性会差一些。

灵活性越好，相对来说稳定性就会差一些。

2.css选择器权重（认识有这么个东西就好了）

快捷键

1   <div></div>
 2   div.aa
 3   <div class="aa"></div>
 4   p.aa
 5   <p class="aa"></p>
 6   div#cc
 7   <div id="cc"></div>
 8   .aa  #只有div能这样
 9   <div class="aa"></div>
10   <!-- ul>li -->
11   <ul>
12       <li></li>
13   </ul>
14   <!-- ul>li*8 -->
15   <ul>
16       <li></li>
17       <li></li>
18       <li></li>
19       <li></li>
20       <li></li>
21       <li></li>
22       <li></li>
23       <li></li>
24   </ul>
25   <!-- ul>li{内容} -->
26   <ul>
27       <li>内容</li>
28   </ul>
29   <!-- ul>li{内容$}*8 -->
30   <ul>
31       <li>内容1</li>
32       <li>内容2</li>
33       <li>内容3</li>
34       <li>内容4</li>
35       <li>内容5</li>
36       <li>内容6</li>
37       <li>内容7</li>
38       <li>内容8</li>
39   </ul>
40   <!-- div+p -->
41   <div></div>
42   <p></p>
43   <!-- dl>dt+dd -->
44   <dl>
45       <dt></dt>
46       <dd></dd>
47   </dl>

当一个标签选择器使用冲突的时候谁先生效的问题

外链式导入的时候，link放在style外面。

id只能使用一次

层级选择器使用两个标签类似于标签选择器的权重。

层级选择器中如果一个类一个标签，那么会执行覆盖，按照书写顺序

同级，标签选择器的权重 < 类选择器 < id的权重
继承性的权重是最低的，只要自己有样式就执行自己的，没有才继承。
外链式和嵌入式看书写顺序，谁在上谁生效 < 行内式
在键值对后面加!import（提权功能，慎用）

3.ps软件前端使用方法

1看颜色单击色块工具---目标单击----复制粘贴颜色值

用十六进制的颜色值，复制过去记得前面加一个#号

2看文字样式 T 单击目标文字，菜单栏下面查看文字效果---释放选择：ctrl + enter或选择其他工具

看完文字ctrl + enter 退出文字选择

3测量尺寸矩形选框工具，直接拖拽需要测量的地方，然后会显示。ctrl+r 标尺中右键可以改单位改为像素px

4切图工作中指的是独立小图标和实现出一个网页形成html文件

切片工具，然后文件---导出---存储为web所用格式--存储----保存的时候选择“选中的切片或所有用户切片”

.psd后缀为ps打开的文件（分层图）

4.了解JavaScript

1995年，那个年代，没有任何一个脚本语言是运行在浏览器端，当时为了把表单验证（当时是在服务器端完成的）在浏览器端完成所以开始研发js

JavaScript 开始叫livesript，为了推广改名

雷锋和雷峰塔的关系

js 抱 java 大腿出来的，和java没有关系

5.js的书写方法

写在哪语法是什么

5.1嵌入式

环境标签双标记script

单行注释是//

多行注释是/* 这里写注释 */

警示框alert()和python中的print的作用一样：打印结果、测试、调试程序。浏览器弹窗的形式展示

有可能有人会在每一行命令的后面加封号，不会报错。还有一个作用就是将两行内容压缩在一行中，封号隔开。

5.2外链式

单独存一个js文件，后缀名是.js

导入的时候用script src查找js文件的位置，填路径即可

5.3 行内式

语法要求：行内式必须是事件的格式k="v" onclick='js命令'

鼠标滑过或者点击这些都是事件，用户操作，需要扑捉用户操作就是事件

在标签里面写

行内式基本不用：

1.冗余代码多，

2.行内式有局限性、有些命令没法写

6***JavaScript查找标签

注意范围、注意特点（必须是唯一性的）

招标签的时候，可以将js放到要找的标签后面，也可以定义一个入口函数。

入口函数是固定的格式，我们需要进行记忆

浏览器加载完就是标签加载完了。

先执行标签再执行js那么就需要window.onload = function(){}

一个html页面只能有一个js入口函数

document.getElementByid()

1 <!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8
 9</head>
10<body>
11    <!-- 范围  特点 -- 必须是唯一性的 -->
12    <div id="box">div</div>
13</body>
14</html>
15<script>
16        // document 网页文档
17        // 从整个网页文档里面，通过id名box查找标签
18        alert( document.getElementById('box') )
19</script>

7.js入口函数

作用：先执行标签，再执行js

window.onload = function(){命令}

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        // 当浏览器窗口加载完成之后，执行后面大括号里面的命令
10    window.onload = function(){
11
12
13        // document 网页文档
14        // 从整个网页文档里面，通过id名box查找标签
15
16        alert( document.getElementById('box') )
17    }
18    </script>
19    <script src="xx.js"></script>
20    <!-- **** 注意：一个html页面只能有一个js入口函数 -->
21</head>
22<body>
23    <!-- 范围  特点 -- 必须是唯一性的 -->
24    <div id="box">div</div>
25</body>
26</html>

xx.js

1window.onload = function(){
2    alert('这是外链式')
3}

8.***js 控制标签

8.1 控制标签内容 --- innerHTML

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        window.onload = function(){
10            // document.getElementById('box').innerHTML = 'js'
11            // document.getElementById('box').innerHTML = '<p>ppppppppp</p>'
12            // 清空div的内容
13            document.getElementById('box').innerHTML = ''
14        }
15    </script>
16</head>
17<body>
18    <div id="box">div</div>
19</body>
20</html>

8.2 控制标签属性

标签的属性 k='v'

标签的css属性 k:v;

如果控制class属性js写法为className，其余html属性写法和js控制的时候写法一样

oBox .className = 'xx'

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        window.onload = function(){
10            // 如果控制class属性js写为className,其余html属性写法和js控制的时候写法一样
11            document.getElementById('img').src = 'img3.jpg'
12            document.getElementById('img').alt = '赵四'
13            document.getElementById('img').className = 'zhaosi'
14        }
15    </script>
16</head>
17<body>
18    <img src="img2.jpg" alt="" id="img" class="aa">
19</body>
20</html>

8.3 控制css样式

查找标签style.csskey

注意如果是font-size 写为小驼峰 fontSize

但凡是变化的，需要写到js里面

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9    window.onload = function(){
10        document.getElementById('box').style.color = 'red'
11        document.getElementById('box').style.background = 'green'
12        // font-size -- js带“-” 写为小驼峰
13        document.getElementById('box').style.fontSize = '60px'
14    }
15    </script>
16</head>
17<body>
18    <div id="box">测试css</div>
19</body>
20</html>

9.变量

关键字var，后面跟着自定义的变量名，再对其进行赋值

js命名变量的时候会在原有标识符的基础上加入数据类型的体现

标签存储到js，数据类型用o（object）

命名的时候数字、字母下划线，或者$

命名用小驼峰

不能和内置的关键字冲突、符合标识符的命名规则

网页内出现大量的行内式的style，很有可能是js控制的

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9    window.onload = function(){
10        // var 变量名 = 值  js明明变量的时候会在原有标识符的基础上加入数据类型的体现
11        // fAa  sAa  bAa
12        // o 表示object  所有的标签通过js查找到之后都是对象型
13        var oBox = document.getElementById('box')
14        oBox.innerHTML = 'js'
15        oBox.className = 'bb'
16        oBox.style.color = 'red'
17        oBox.style.fontWeight = 'bold'
18        alert(typeof(oBox))
19    }
20    </script>
21</head>
22<body>
23    <div id="box">测试css</div>
24</body>
25</html>

10.数据类型

检测数据类型typeof(类型名)

需要弹出的时候用到alert()

python中用的是很多是缩写，JavaScript中是完整的单词

number数值型

string字符串

boolean布尔型

undefined未定义类型（表示程序有bug，没有定义变量）

object

aa = null 叫做null类型（虽然得到的提示字是object，但是因为没有真实数据，所以只能叫做null类型）

对于真实有数据的得到提示字是object的数据才是对象型---标签

总结：基础（number、string、boolean、undefined、null）和复杂型（复合---对象型有数据的）

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        var num1 = 1  // number 数值型
10        var num2 = 1.1  // number
11        var str = '1'  // string 字符串
12        var bool = true  //boolean 布尔型
13
14        // undefined 未定义 表示程序有bug
15        var aa = null  // null类型 虽然得到的提示字是object，但是因为没有真实数据，所以只能叫null类型
16        // 对于真实有数据的得到提示字是object的数据才是对象型 -- 标签
17        alert(typeof(aa))
18        // 总结： 基础（number、string、boolean、undefined、null） 和 复杂（复合 -- 对象型）
19    </script>
20</head>
21<body>
22
23</body>
24</html>

11.函数

和python中的函数中不同的是语法规则

定义 function fnAx(参数){命令}

function后面跟着函数名，但是一般前面加fn

调用的时候fnAx(参数)

还有一个不同点：可以先调用，再定义------js函数预解析

变量没有预解析功能

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        // alert(num) // 变量没有预解析到数据
10
11        var num = 1
12
13        // 定义 function fnAx(参数){命令}
14        // 调用 fnAx(参数)
15        alert(fnAlert())  // js函数预解析
16
17        function fnAlert(){
18            // alert('我是自定义函数里面的弹窗')
19            return 1
20            alert('22222')
21        }
22
23    </script>
24</head>
25<body>
26
27</body>
28</html>

12.条件语句

js中：

小括号里面可以写条件和参数

大括号里面可以写命令

if(条件){条件成立时执行的命令}

else{命令}

else执行了，那么if没有执行

多重条件

if(){}else if(){}.....else{}

elif用其全称

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        // （条件/参数）  {命令}
10        // if(条件){条件成立执行的命令}
11        // var age = 10
12        // if(age > 18)
13        // {
14        //     alert('可以上网了')
15        // }
16        // else
17        // {
18        //     alert('回家写作业去')
19        // }
20        // if(){}else if(){}...else{}
21        // 如果str==A 弹窗a  str == B  弹窗b 既不是a也不是b弹窗daqiu
22        var str = 'q'
23        if(str == 'A')
24        {
25            alert('A')
26        }
27        else if(str == 'B')
28        {
29            alert('B')
30        }
31        else
32        {
33            alert('daqiu')
34        }
35    </script>
36</head>
37<body>
38
39</body>
40</html>

12.1运算符

==判断等于（只判断数值）

=== （严格的判断，判断数据类型和数值）

js是弱类型语言（赋了什么值，就是什么类型）

&&而且

||或者

!否

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        // == 只判断数  === 判断数据类型和数  ----- js是弱类型语言
10        // alert( 1 == '1' )
11        alert( 1 === '1' )
12    </script>
13</head>
14<body>
15
16</body>
17</html>

13. ***事件

事件语法 + 常用的事件属性：单击、鼠标滑过、鼠标离开

单击onclick 鼠标滑过onmouseover 鼠标离开onmouseout

目标.事件属性 = 命令

命令：1、函数名 2、匿名函数function(){}

事件语法：发生事件的目标，事件属性= 函数名/function(){}

function(){}-----叫做匿名函数，就是没有名字的函数

dbclick 双击double

十六进制0-9a-f

css2.0改变按钮的圆角，需要切图片

css3.0中可以border-radius:圆角半径;

圆角半径可以是百分比，可以是像素。当圆角半径是50%，背景是正方形的话，那么是一个圆。最大值是50%。

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <script>
9        window.onload = function(){
10            var oBtn01 = document.getElementById('btn01');
11            var oBtn02 = document.getElementById('btn02')
12            var oBtn03 = document.getElementById('btn03');
13            // 事件语法  发生事件的目标.事件属性 = 函数名/ function(){}
14            // function(){} -- 叫做匿名函数
15            // ondblclick
16            oBtn01.onclick = fnClick
17            function fnClick(){
18                alert('单击成功')
19            }
20
21            oBtn02.onmouseover = function(){
22                alert('鼠标滑过成功')
23            }
24
25            oBtn03.onmouseout = function(){
26                alert('鼠标离开成功')
27            }
28
29        }
30    </script>
31</head>
32<body>
33    <button id="btn01">单击</button>
34    <button id="btn02">鼠标滑过</button>
35    <button id="btn03">鼠标离开</button>
36</body>
37</html>

14. 网页换肤

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <link rel="stylesheet" type="text/css" href="css/main02.css">
 9    <script>
10        window.onload = function(){
11            // 1。设置按钮绑定单击事件：获取左侧用户输入的数据，显示到右侧； 下拉菜单选中不同的选项，更换不同的风格（css）
12            // 按钮
13            var oSetcard = document.getElementById('setcard');
14            var oInp01 = document.getElementById('input01')
15            var oInp02 = document.getElementById('input02')
16            var oInp03 = document.getElementById('input03')
17            var oInp04 = document.getElementById('input04')
18            var oInp05 = document.getElementById('input05')
19            var oInp06 = document.getElementById('input06')
20            var oInp07 = document.getElementById('input07')
21
22            // 右侧显示区域
23            var oCardWrap = document.getElementById('card_wrap')
24            oSetcard.onclick = function(){
25                // 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
26                    if(oInp01.value == '' || oInp02.value == '')
27                    {
28                        alert('请输入内容')
29                        return
30                    }
31
32
33
34                // 1、获取数据2、显示数据  == 获取每个表单控件的value属性值，把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
35                // alert(oInp01.value)
36                var str = '<div class="p01">'+oInp01.value+'<em>'+oInp02.value+'</em></div><div class="p02"><p class="company">银河科技信息技术有限公司</p><p>手机：1808888888</p><p>email：dasan@126.com</p><p>地址：中关村银河大厦B座2603</p></div>'
37
38                // 设置右侧显示区域的内容是 str
39                oCardWrap.innerHTML = str
40
41                // 下拉菜单控制风格：如果下拉选中风格1（如果下拉菜单的value==0），右侧就是风格1的样式 --css（更换class属性值idcar01  02 03）；如果下拉选中风格2，右侧就是风格2的样式
42                if(oInp07.value == 0)
43                {
44                    oCardWrap.className = 'idcard01'
45                }
46                else if(oInp07.value == 1)
47                {
48                    oCardWrap.className = 'idcard02'
49                }
50                else
51                {
52                    oCardWrap.className = 'idcard03'
53                }
54
55
56
57            }
58        }
59    </script>
60</head>
61<body>
62    <div class="set_con">
63        <div class="left_set">
64            <label>姓名：</label>
65            <input type="text" id="input01" value="会员名">
66            <label>职位：</label>
67            <input type="text" id="input02">
68            <label>公司名称：</label>
69            <input type="text" id="input03">
70            <label>手机：</label>
71            <input type="text" id="input04">
72            <label>email：</label>
73            <input type="text" id="input05">
74            <label>地址：</label>
75            <input type="text" id="input06">
76            <label>风格：</label>
77            <select  id="input07">
78                <option value="0">风格一</option>
79                <option value="1">风格二</option>
80                <option value="2">风格三</option>
81            </select>
82            <input type="button" value="设 置" class="setbtn" id="setcard">
83        </div>
84        <div class="right_show">
85            <div class="idcard01" id="card_wrap">
86                <div class="p01">张大山<em>产品经理</em></div>
87                <div class="p02">                    
88                    <p class="company">银河科技信息技术有限公司</p>
89                    <p>手机：1808888888</p>
90                    <p>email：dasan@126.com</p>
91                    <p>地址：中关村银河大厦B座2603</p>
92                </div>
93            </div>
94        </div>
95    </div>
96</body>
97</html>

15.打印名片

1、按钮单击

2、数据显示 – 获取表单控件的value – 拼字符串 – 设置显示区域的内容是这个字符串

3、换右侧区域的风格 – 分析出if – 条件：看下拉菜单选中了哪一项（下拉菜单的vlaue == 0/1/2） -- 命令：右侧区域的class属性换值

4、为空的判断 – if ：获取value==‘’，执行命令报错提示用户alert + return

1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Document</title>
 8    <link rel="stylesheet" type="text/css" href="css/main02.css">
 9    <script>
10        window.onload = function(){
11            // 1。设置按钮绑定单击事件：获取左侧用户输入的数据，显示到右侧； 下拉菜单选中不同的选项，更换不同的风格（css）
12            // 按钮
13            var oSetcard = document.getElementById('setcard');
14            var oInp01 = document.getElementById('input01')
15            var oInp02 = document.getElementById('input02')
16            var oInp03 = document.getElementById('input03')
17            var oInp04 = document.getElementById('input04')
18            var oInp05 = document.getElementById('input05')
19            var oInp06 = document.getElementById('input06')
20            var oInp07 = document.getElementById('input07')
21
22            // 右侧显示区域
23            var oCardWrap = document.getElementById('card_wrap')
24            oSetcard.onclick = function(){
25                // 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
26                    if(oInp01.value == '' || oInp02.value == '')
27                    {
28                        alert('请输入内容')
29                        return
30                    }
31
32
33
34                // 1、获取数据2、显示数据  == 获取每个表单控件的value属性值，把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
35                // alert(oInp01.value)
36                var str = '<div class="p01">'+oInp01.value+'<em>'+oInp02.value+'</em></div><div class="p02"><p class="company">银河科技信息技术有限公司</p><p>手机：1808888888</p><p>email：dasan@126.com</p><p>地址：中关村银河大厦B座2603</p></div>'
37
38                // 设置右侧显示区域的内容是 str
39                oCardWrap.innerHTML = str
40
41                // 下拉菜单控制风格：如果下拉选中风格1（如果下拉菜单的value==0），右侧就是风格1的样式 --css（更换class属性值idcar01  02 03）；如果下拉选中风格2，右侧就是风格2的样式
42                if(oInp07.value == 0)
43                {
44                    oCardWrap.className = 'idcard01'
45                }
46                else if(oInp07.value == 1)
47                {
48                    oCardWrap.className = 'idcard02'
49                }
50                else
51                {
52                    oCardWrap.className = 'idcard03'
53                }
54
55
56
57            }
58        }
59    </script>
60</head>
61<body>
62    <div class="set_con">
63        <div class="left_set">
64            <label>姓名：</label>
65            <input type="text" id="input01" value="会员名">
66            <label>职位：</label>
67            <input type="text" id="input02">
68            <label>公司名称：</label>
69            <input type="text" id="input03">
70            <label>手机：</label>
71            <input type="text" id="input04">
72            <label>email：</label>
73            <input type="text" id="input05">
74            <label>地址：</label>
75            <input type="text" id="input06">
76            <label>风格：</label>
77            <select  id="input07">
78                <option value="0">风格一</option>
79                <option value="1">风格二</option>
80                <option value="2">风格三</option>
81            </select>
82            <input type="button" value="设 置" class="setbtn" id="setcard">
83        </div>
84        <div class="right_show">
85            <div class="idcard01" id="card_wrap">
86                <div class="p01">张大山<em>产品经理</em></div>
87                <div class="p02">                    
88                    <p class="company">银河科技信息技术有限公司</p>
89                    <p>手机：1808888888</p>
90                    <p>email：dasan@126.com</p>
91                    <p>地址：中关村银河大厦B座2603</p>
92                </div>
93            </div>
94        </div>
95    </div>
96</body>
97</html>