js基本知识

变量与常量

        在JS中声明变量需要使用关键字
            老版本	var(全部都是全局变量)
            新版本 let(可以声明局部变量)
            # 推荐使用let(其实问题不大)
        在JS中声明常量也需要使用关键字
            const  # 声明一个真正意义上的常量

        如何创建变量
            var name = 'jason'
            let name = 'jason01'
        如何创建常量
            const pi = 3.14

        """
        可以编写js代码的地方
            1.pycharm提供的js文件
            2.直接使用浏览器提供的编程环境
        """
        ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
        需要我们自定义设置 settings>>>l f>>>js

基本数据类型

        python基本数据类型
            int、float、str、list、dict、bool、tuple、set
        js基本数据类型
            number、string、boolean、undefined、object()

        查看数据类型
            python中使用type()
            js中使用typeof

number类型

        # 数值类型:包含了整型与浮点型
        parseInt、parseFloat

        NaN:Not A Number
        """NaN属于数值类型 表示的意思是 不是一个数字"""

string类型

        # 定义字符类型的方式
            1.单引号
            2.双引号
            3.小波浪号
                var s1 = `
                    jason老师
                    tony老师
                    kevin老师
                    `

        # 在js中字符串的拼接推荐使用+号

        # 格式化输出(模板字符串的功能)
            var name1 = 'jason'
            var age = 18
            `my name is ${name1} my age is ${age} `

boolean类型

        在python中布尔值类型首字母大写
            True False
        在js中布尔值类型全部小写
            true false

null与undefined类型

        null 表示的意思是空
        undefined 表示的意思是未定义
        eg:null 意思是厕纸用完了 undefined 意思是厕纸都没装

对象之数组类型

        # 对应到python中就是列表list

        l2.splice(2,1)  # 第一个参数是起始位置 第二个参数是删除元素的个数

运算符

        1.比较运算符
            ==   弱等于  # 会自动转换数据类型至相同状态
            ===  强等于  # 不会自动转换数据类型

        2.逻辑运算符
            python中
                and or not
            js中
                && || !

流程控制

        '''if判断'''
        python中	
            if 条件:
                条件成立之后执行的代码
            else:
                条件不成立执行的代码
        js中
            if(条件){
                条件成立之后执行的代码
            }else{
                条件不成立执行的代码
            }

            if(条件1){
                条件1成立之后执行的代码
            }else if(条件2){
                条件2成立之后执行的代码
            }else{
                条件都不成立执行的代码
            }
        '''switch'''
            var day = new Date().getDay();
            switch (day) {
              case 0:
              console.log("Sunday");
              break;
              case 1:
              console.log("Monday");
              break;
            default:
              console.log("...")
            }
        """for循环"""
            for(起始值;循环条件;每次循环后执行的操作){
                for循环体代码
            }
                for (var i=0;i<10;i++) {
                    console.log(i);
                    }
            # 练习:如何使用for循环取出数组内的每个元素
                var l1 = [111,222,333,444,555,666]
                 for(let i=0;i<l1.length;i++){
                     console.log(l1[i])
                 }
        """while循环"""
            while(循环条件){
                循环体代码
            }

三元运算符

        在python中
            res = '吃饭' if 18 > 10 else '喝水'
        在js中
            res = 18 > 10 ? '吃饭':'喝水'

函数

        在python中
            def 函数名(参数1,参数2,...):
                '''函数注释'''
                函数体代码
                return 返回值

        在js中
            function 函数名(参数1,参数2,...){
                // 函数注释
                函数体代码
                return 返回值
            }
        """
        arguments参数 可以获取传入的所有数据
            也支持return和匿名函数
        """
        var f = v => v;
        // 等同于
        var f = function(v){
          return v;
        }

自定义对象

        # 相当于python中的字典类型
            方式1: var d = {'name':'jason','age':18}
            方式2: var d = Object({'name':'jason','age':18})

        class MyDict(dict):
            def __getattr__(self, item):
                return self.get(item)
            def __setattr__(self, key, value):
                self[key] = value

        res = MyDict(name='jason',age=18)
        print(res.name)
        print(res.age)
        res.xxx = 123
        print(res.xxx)
        print(res)    

内置对象

        # 如果需要使用内置对象 需要关键字 new
        在python中
            import date
            date()
        在js中
            new date()


        ##########################################################
        序列化
            python中
                import json
                json.dumps()  # 序列化
                json.loads()  # 反序列化
            js中
                JSON.stringify()  # 序列化
                JSON.parse()  # 反序列化
        """
        如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
            1.在js中使用JSON.stringify()序列化成json格式字符串
            2.基于网络发送给python程序(自动编码)
            3.python接收 解码并反序列化
        """
        ##########################################################

        regexp对象
            方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
            方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
        全局匹配
            正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
            # 全局匹配会有一个lastindex属性
            reg2
            /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
            reg2.test('jason666')
            true
            reg2.test('jason666')
            false
            reg2.lastIndex
            0
            reg2.test('jason666')
            true
            reg2.lastIndex
            8
        校验时不传参数默认传的是undefined

BOM与DOM操作

        BOM		浏览器对象模型>>>:使用js操作浏览器
        DOM		文档对象模型>>>:使用js操作前端页面

BOM操作

        window.open() 				- 打开新窗口
        window.close() 				- 关闭当前窗口
        history.forward()  			// 前进一页
        history.back()  			// 后退一页
        location.href  				获取URL
        location.href="URL" 		// 跳转到指定页面
        location.reload() 			重新加载页面


        setTimeout()
        clearTimeout()
        setInterval()
        clearInterval()

DOM操作之查找标签

        前缀关键字>>>:document

        # 基本查找(核心)
        document.getElementById           根据ID获取一个标签
        document.getElementsByClassName   根据class属性获取
        document.getElementsByTagName     根据标签名获取标签合集

        """
        如果我们的js代码需要页面上某个标签加载完毕
        那么该js代码应该写在body内部最下方或者引入外部js文件
        """

        # 间接查找(重要)
        parentElement            父节点标签元素
        children                 所有子标签
        firstElementChild        第一个子标签元素
        lastElementChild         最后一个子标签元素
        nextElementSibling       下一个兄弟标签元素
        previousElementSibling   上一个兄弟标签元素

节点操作

        var aEle = document.createElement('a');  # 创建标签
        aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
        aEle.innerText = '好不好看?'  # 设置内容文本
        document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加
        """一定要明确当前手上是什么对象"""
        imgEle.getAttribute('title')  # 获取标签属性


        innerText
            不加赋值符号是获取内部文本
            加了赋值符号是设置内置文本
            # 不可以识别HTML标签
        innerHTML
            不加赋值符号是获取内部标签+文本
            加了赋值符号是设置内置标签+文本
            # 可以识别HTML标签

获取值操作

        # 普通的文本数据获取
            标签对象.value
        # 特殊的文件数据获取
            标签对象.value     '''仅仅获取一个文件地址而已'''
            标签对象.files[0]  '''获取单个文件数据'''
            标签对象.files     '''获取所有文件数据'''

class操作

        classList                    查看所有的类
        classList.remove(cls)        删除指定类
        classList.add(cls)           添加类
        classList.contains(cls)      存在返回true，否则返回false
        classList.toggle(cls)        存在就删除，否则添加

样式操作

        标签对象.style.属性名 = 属性值

事件

        # 就是给HTML元素添加自定义的功能
        绑定事件的方式1
            <button onclick="func()">点我</button>
            <script>
                function func() {
                    alert(123)
                }
            </script>

        绑定事件的方式2
            <button id="d1">选我</button>
            <script>
                // 1.先查找标签
                var btnEle = document.getElementById('d1')
                // 2.绑定事件
                btnEle.onclick = function () {
                    alert(456)
                }
            </script>

内置参数this

        # this指代的就是当前被操作对象本身
        在事件的函数体代码内部使用
            btnEle.onclick = function () {
                    alert(456)
                    console.log(this)
                }

事件练习

        onclick单击事件
        onfocus聚焦事件
        onblur失去焦点事件
        onchange文本域变化事件
        onload等待...加载完毕后执行的事件
        # 定时器
        <body>
            <input type="text" id="a1">
            <button id="a2">显示</button>
            <button id="a3">暂停</button>
            <script>
              // 1. 首先查找对应标签
              var btnEle = document.getElementById('a2')
              var btn1Ele = document.getElementById('a3')
              // 4. 定义一个储存定时器的全局变量
              var t = null
              // 3. 单独写一个函数用于展示时间
              function showtime(){
                // 3.1 获取当前时间
                var ctime = new Date().toLocaleString()
                // 3.2 将时间添加到input文本框中
                var iEle = document.getElementById('a1')
                iEle.value = ctime
              }
              // 2. 绑定点击事件
              btnEle.onclick = function (){
                  if (!t){
                    t = setInterval(showtime,1000)  // 每间隔1秒显示一次
                  }
              }
              // 5. 绑定点击事件
              btn1Ele.onclick = function (){
                  clearInterval(t)
                  // 5.1 把t清空
                  t = null
              }
            </script>
        </body>
        // setInterval的语法格式：单位是毫秒
            setInterval(function（函数名）,interval[,arg1,arg2,......argn])
        # 数据校验
        <body>
            <div>
                <p>username:
                  <input type="text" id="a1">
                  <span id="name"></span>
                </p>
                <p>password:
                  <input type="text" id="a2">
                  <span id="pwd"></span>
                </p>
                <button id="a3" style="color: pink">登录
                </button>
            </div>
            <script>
              // 查找标签按钮
              var btnEle = document.getElementById('a3')
              // 绑定事件
              btnEle.onclick = function (){
                // 获取到input框输入的数据
                var usernameEle = document.getElementById('a1').value
                var passwordEle = document.getElementById('a2').value
                // 检验获取的数据是否符合要求
                if (!usernameEle){
                  var splEle = document.getElementById('name')
                  splEle.innerText = '输入无法为空'
                }
                if (!passwordEle){
                var spl1Ele = document.getElementById('pwd')
                  spl1Ele.innerText = '输入无法为空'
                }
              }
            </script>
        </body>
        # 聚焦失焦事件
            // 聚焦演示
            var ipEle = document.getElementById('a1')
            ipEle.onfocus = function (){
                this.style.backgroundColor = 'pink'
            }
            // 失去焦点
            ipEle.onblur = function (){
                alert('溜了溜了')
            }
        # 省市联动
        <body>
        <select id="province">
          <option>请选择省:</option>
        </select>

        <select id="city">
          <option>请选择市:</option>
        </select>

        <script>
          data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

          var p = document.getElementById("province");
          var c = document.getElementById("city");

          for (var i in data) {
            var optionP = document.createElement("option");
            optionP.innerHTML = i;
            p.appendChild(optionP);
          }
          p.onchange = function () {
            var pro = (this.options[this.selectedIndex]).innerHTML;
            var citys = data[pro];
            // 清空option
            c.innerHTML = "";

            for (var i=0;i<citys.length;i++) {
              var option_city = document.createElement("option");
              option_city.innerHTML = citys[i];
              c.appendChild(option_city);
            }
          }
        </script>
        </body>

__EOF__

本文作者：祈安
本文链接：https://www.cnblogs.com/jyc666/p/15897502.html
关于博主：没有收拾残局的能力，就别放纵善变的情绪
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！