专栏首页小闫笔记JavaScript入门

JavaScript入门

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只能使用一次

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

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

  1. 同级,标签选择器的权重 < 类选择器 < id的权重
  2. 继承性的权重是最低的,只要自己有样式就执行自己的,没有才继承。
  3. 外链式和嵌入式看书写顺序,谁在上谁生效 < 行内式
  4. 在键值对后面加!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>

本文分享自微信公众号 - 全栈技术精选(Pythonnote),作者:小闫同学啊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html和css进阶

    5.0之前没有placeholder新增功能,之前是value(提示的文字需要用户删除,而且字的颜色也没有变暗)实现的

    小闫同学啊
  • web前端入门

    8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

    小闫同学啊
  • 一些经典案例

    小闫同学啊
  • Python爬虫——Beautiful Soup

    Beautiful Soup是Python处理HTML或XML的解析库,使用Beautiful Soup需要安装Beautiful Soup库和lxml的库 ...

    羊羽shine
  • 【叔小生】JavaScript进阶篇

    如何插入JS JS基础语法 语法、函数、方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。

    达达前端
  • 掌握好这几个css属性,少写100行js代码

    比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

    小明爱学习
  • 掌握好这几个css属性,少写100行js代码

    比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

    小明爱学习
  • jquery导航栏点击及页面跳转后对应栏目添加选中效果

    但是一般页面的导航栏都是需要跳转页面的,上面的方法只在当前页面有效,跳转后就失效了。

    德顺
  • 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

    Daotin
  • 爬虫入门到精通-网页的解析(xpath)

    本文章属于爬虫入门到精通系统教程第六讲 在爬虫入门到精通第五讲中,我们了解了如何用正则表达式去抓取我们想要的内容.这一章我们来学习如何更加简单的来获取我们想...

    爬虫

扫码关注云+社区

领取腾讯云代金券