JavaScript入门

小闫同学啊

发布于 2019-07-18 11:28:00

3.3K0

发布于 2019-07-18 11:28:00

文章被收录于专栏：小闫笔记

JavaScript

1.知识回顾

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

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

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

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

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

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

快捷键

   <div></div>
   div.aa
   <div class="aa"></div>
   p.aa
   <p class="aa"></p>
   div#cc
   <div id="cc"></div>
   .aa  #只有div能这样
   <div class="aa"></div>
   <!-- ul>li -->
   <ul>
       <li></li>
   </ul>
   <!-- ul>li*8 -->
   <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <!-- ul>li{内容} -->
   <ul>
       <li>内容</li>
   </ul>
   <!-- ul>li{内容$}*8 -->
   <ul>
       <li>内容1</li>
       <li>内容2</li>
       <li>内容3</li>
       <li>内容4</li>
       <li>内容5</li>
       <li>内容6</li>
       <li>内容7</li>
       <li>内容8</li>
   </ul>
   <!-- div+p -->
   <div></div>
   <p></p>
   <!-- dl>dt+dd -->
   <dl>
       <dt></dt>
       <dd></dd>
   </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()

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <!-- 范围  特点 -- 必须是唯一性的 -->
    <div id="box">div</div>
</body>
</html>
<script>
        // document 网页文档
        // 从整个网页文档里面，通过id名box查找标签
        alert( document.getElementById('box') )
</script>

7.js入口函数

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

window.onload = function(){命令}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 当浏览器窗口加载完成之后，执行后面大括号里面的命令
    window.onload = function(){


        // document 网页文档
        // 从整个网页文档里面，通过id名box查找标签

        alert( document.getElementById('box') )
    }
    </script>
    <script src="xx.js"></script>
    <!-- **** 注意：一个html页面只能有一个js入口函数 -->
</head>
<body>
    <!-- 范围  特点 -- 必须是唯一性的 -->
    <div id="box">div</div>
</body>
</html>

xx.js

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

8.*js 控制标签**

8.1 控制标签内容 --- innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            // document.getElementById('box').innerHTML = 'js'
            // document.getElementById('box').innerHTML = '<p>ppppppppp</p>'
            // 清空div的内容
            document.getElementById('box').innerHTML = ''
        }
    </script>
</head>
<body>
    <div id="box">div</div>
</body>
</html>

8.2 控制标签属性

标签的属性 k='v'

标签的css属性 k:v;

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

oBox .className = 'xx'

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

8.3 控制css样式

查找标签style.csskey

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    window.onload = function(){
        document.getElementById('box').style.color = 'red'
        document.getElementById('box').style.background = 'green'
        // font-size -- js带“-” 写为小驼峰
        document.getElementById('box').style.fontSize = '60px'
    }
    </script>
</head>
<body>
    <div id="box">测试css</div>
</body>
</html>

9.变量

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

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

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

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

命名用小驼峰

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

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

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

10.数据类型

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

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

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

number数值型

string字符串

boolean布尔型

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

object

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num1 = 1  // number 数值型
        var num2 = 1.1  // number
        var str = '1'  // string 字符串
        var bool = true  //boolean 布尔型

        // undefined 未定义 表示程序有bug
        var aa = null  // null类型 虽然得到的提示字是object，但是因为没有真实数据，所以只能叫null类型
        // 对于真实有数据的得到提示字是object的数据才是对象型 -- 标签
        alert(typeof(aa))
        // 总结： 基础（number、string、boolean、undefined、null） 和 复杂（复合 -- 对象型）
    </script>
</head>
<body>

</body>
</html>

11.函数

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

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

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

调用的时候fnAx(参数)

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

变量没有预解析功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // alert(num) // 变量没有预解析到数据

        var num = 1

        // 定义 function fnAx(参数){命令}
        // 调用 fnAx(参数)
        alert(fnAlert())  // js函数预解析

        function fnAlert(){
            // alert('我是自定义函数里面的弹窗')
            return 1
            alert('22222')
        }

    </script>
</head>
<body>

</body>
</html>

12.条件语句

js中：

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

大括号里面可以写命令

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

else{命令}

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

多重条件

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

elif用其全称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // （条件/参数）  {命令}
        // if(条件){条件成立执行的命令}
        // var age = 10
        // if(age > 18)
        // {
        //     alert('可以上网了')
        // }
        // else
        // {
        //     alert('回家写作业去')
        // }
        // if(){}else if(){}...else{}
        // 如果str==A 弹窗a  str == B  弹窗b 既不是a也不是b弹窗daqiu
        var str = 'q'
        if(str == 'A')
        {
            alert('A')
        }
        else if(str == 'B')
        {
            alert('B')
        }
        else
        {
            alert('daqiu')
        }
    </script>
</head>
<body>

</body>
</html>

12.1运算符

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

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

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

&&而且

||或者

!否

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // == 只判断数  === 判断数据类型和数  ----- js是弱类型语言
        // alert( 1 == '1' )
        alert( 1 === '1' )
    </script>
</head>
<body>

</body>
</html>

13. *事件**

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

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

目标.事件属性 = 命令

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

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

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

dbclick 双击double

十六进制0-9a-f

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02')
            var oBtn03 = document.getElementById('btn03');
            // 事件语法  发生事件的目标.事件属性 = 函数名/ function(){}
            // function(){} -- 叫做匿名函数
            // ondblclick
            oBtn01.onclick = fnClick
            function fnClick(){
                alert('单击成功')
            }

            oBtn02.onmouseover = function(){
                alert('鼠标滑过成功')
            }

            oBtn03.onmouseout = function(){
                alert('鼠标离开成功')
            }

        }
    </script>
</head>
<body>
    <button id="btn01">单击</button>
    <button id="btn02">鼠标滑过</button>
    <button id="btn03">鼠标离开</button>
</body>
</html>

14. 网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main02.css">
    <script>
        window.onload = function(){
            // 1。设置按钮绑定单击事件：获取左侧用户输入的数据，显示到右侧； 下拉菜单选中不同的选项，更换不同的风格（css）
            // 按钮
            var oSetcard = document.getElementById('setcard');
            var oInp01 = document.getElementById('input01')
            var oInp02 = document.getElementById('input02')
            var oInp03 = document.getElementById('input03')
            var oInp04 = document.getElementById('input04')
            var oInp05 = document.getElementById('input05')
            var oInp06 = document.getElementById('input06')
            var oInp07 = document.getElementById('input07')

            // 右侧显示区域
            var oCardWrap = document.getElementById('card_wrap')
            oSetcard.onclick = function(){
                // 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
                    if(oInp01.value == '' || oInp02.value == '')
                    {
                        alert('请输入内容')
                        return
                    }



                // 1、获取数据2、显示数据  == 获取每个表单控件的value属性值，把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
                // alert(oInp01.value)
                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>'

                // 设置右侧显示区域的内容是 str
                oCardWrap.innerHTML = str

                // 下拉菜单控制风格：如果下拉选中风格1（如果下拉菜单的value==0），右侧就是风格1的样式 --css（更换class属性值idcar01  02 03）；如果下拉选中风格2，右侧就是风格2的样式
                if(oInp07.value == 0)
                {
                    oCardWrap.className = 'idcard01'
                }
                else if(oInp07.value == 1)
                {
                    oCardWrap.className = 'idcard02'
                }
                else
                {
                    oCardWrap.className = 'idcard03'
                }



            }
        }
    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01" value="会员名">
            <label>职位：</label>
            <input type="text" id="input02">
            <label>公司名称：</label>
            <input type="text" id="input03">
            <label>手机：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>风格：</label>
            <select  id="input07">
                <option value="0">风格一</option>
                <option value="1">风格二</option>
                <option value="2">风格三</option>
            </select>
            <input type="button" value="设 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">张大山<em>产品经理</em></div>
                <div class="p02">                    
                    <p class="company">银河科技信息技术有限公司</p>
                    <p>手机：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中关村银河大厦B座2603</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

15.打印名片

1、按钮单击

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main02.css">
    <script>
        window.onload = function(){
            // 1。设置按钮绑定单击事件：获取左侧用户输入的数据，显示到右侧； 下拉菜单选中不同的选项，更换不同的风格（css）
            // 按钮
            var oSetcard = document.getElementById('setcard');
            var oInp01 = document.getElementById('input01')
            var oInp02 = document.getElementById('input02')
            var oInp03 = document.getElementById('input03')
            var oInp04 = document.getElementById('input04')
            var oInp05 = document.getElementById('input05')
            var oInp06 = document.getElementById('input06')
            var oInp07 = document.getElementById('input07')

            // 右侧显示区域
            var oCardWrap = document.getElementById('card_wrap')
            oSetcard.onclick = function(){
                // 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
                    if(oInp01.value == '' || oInp02.value == '')
                    {
                        alert('请输入内容')
                        return
                    }



                // 1、获取数据2、显示数据  == 获取每个表单控件的value属性值，把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
                // alert(oInp01.value)
                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>'

                // 设置右侧显示区域的内容是 str
                oCardWrap.innerHTML = str

                // 下拉菜单控制风格：如果下拉选中风格1（如果下拉菜单的value==0），右侧就是风格1的样式 --css（更换class属性值idcar01  02 03）；如果下拉选中风格2，右侧就是风格2的样式
                if(oInp07.value == 0)
                {
                    oCardWrap.className = 'idcard01'
                }
                else if(oInp07.value == 1)
                {
                    oCardWrap.className = 'idcard02'
                }
                else
                {
                    oCardWrap.className = 'idcard03'
                }



            }
        }
    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01" value="会员名">
            <label>职位：</label>
            <input type="text" id="input02">
            <label>公司名称：</label>
            <input type="text" id="input03">
            <label>手机：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>风格：</label>
            <select  id="input07">
                <option value="0">风格一</option>
                <option value="1">风格二</option>
                <option value="2">风格三</option>
            </select>
            <input type="button" value="设 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">张大山<em>产品经理</em></div>
                <div class="p02">                    
                    <p class="company">银河科技信息技术有限公司</p>
                    <p>手机：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中关村银河大厦B座2603</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-12-13，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

css

html

python

本文分享自全栈技术精选微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度