美文网首页
Day25-js入门

Day25-js入门

作者: ____空白 | 来源:发表于2018-08-20 19:17 被阅读0次

    0、js引入方式和打印方式


    四种引入方式
    (1)<a href="javascript:alert('集合,准备团战')">百度一下</a>
    (2)<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我,马上到')"></div>
    (3)在html页面的任何位置加入 <script>js代码</script>
    (4)在html页面的任何位置加入 <script src='js.js'></script>
    三种打印方式
    (1)alert弹窗打印
    (2)console.log('打印的内容') 结合浏览器控制台查看
    (3)document.write('打印的内容') 往html文档中写内容

    <!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 src="js.js"></script> -->
    </head>
    <body>
        <a href="javascript:alert('集合,准备团战')">百度一下</a>
        <div style="width:200px; height:200px; background-color:red" onclick="alert('等等我,马上到')"></div>
    </body>
    </html>
    <script>
        // alert('猥琐发育,别浪')
        // document.write('<b>注意,我来抓人了</b>')
    </script>
    

    1、函数


    全局变量和局部变量
    全局变量:直接定义的变量,全局有效
    加var和不加var都一样
    局部变量:函数体内定义的变量,只在函数体内有效
    如果局部前面有var,该变量真是一个局部变量
    如果局部前面没有var,该变量其实是一个全局变量,在函数调用之后,该变量即可随便使用
    上面知道即可,一般情况定义变量都加var
    如果局部和全局同名,优先使用局部变量
    匿名函数
    没有函数名的函数,需要将其赋给一个变量,然后变量按照函数的形式进行调用即可
    封闭空间
    将匿名函数用小括号括起来,然后在后面再加一个小括号调用这个匿名函数,称之为封闭空间

    <!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>
        
    </body>
    </html>
    <script>
        // var a = '李白'
        // b = '杜甫'
        // // alert(b)
        // function demo() {
        //     c = '白居易'
        //     alert(c)
        //     // alert(b)
        // }
        // demo()
        // alert(c)
    
        var m = 100
        var n = 200
    
        function demo() {
            // var m
            // var n
            var m = 300
            var n = 400
            console.log(m, n)
        }
    
        demo()
        console.log(m, n)
    
    
     // var a = function () {
        //     alert('天青色等烟雨,而我在等你')
        // }
        // a()
    
        // var a = function () {
        //     alert('这是一个函数')
        // }
        // a()
        // var b = a
        // b()
    
        // function demo() {
        //     alert('哈哈哈')
        // }
        // var a = demo
        // a()
    
        function add(m, n) {
            return m + n
        }
        function sub(m, n) {
            return m - n
        }
    
        function cacl(m, n, fn) {
            return fn(m, n)
        }
    
        // alert(cacl(100, 200, sub))
        alert(cacl(100, 200, function (m, n) {
            return m * n
        }))
    
        // (function (m, n) {
        //     alert('炊烟袅袅升起,隔江千万里===' + m + n)
        // })('周杰伦', '双节棍')
    </script>
    

    2、数组


    定义:array
    遍历:
    数组定义通过索引进行访问,索引从0开始
    但是数组也可以通过属性值追加属性和值,但是一般不这么使用
    遍历的时候,通过for进行遍历只能遍历索引数组,通过forin进行遍历,既可以遍历索引,又可以遍历属性
    字符串遍历
    通过索引进行遍历,索引从0开始

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    var arr1 = [1, '周杰伦', 2, '王力宏']
    arr1['name'] = '狗蛋'
    arr1['height'] = 180
    // var arr = []
    // var arr2 = new Array()
    
    // 通过下标进行访问,下标从0开始
    // alert(arr1[1])
    // alert(arr1)
    // alert(arr1['name'])
    // console.log(arr1[4])
    // 遍历数组
    // for (var i = 0; i < arr1.length; i++) {
    //     console.log(arr1[i])
    // }
    
    // for (var i in arr1) {
    //     console.log(arr1[i])
    // }
    
    string1 = '12345,上山打老虎'
    for (var i = 0; i < string1.length; i++) {
        console.log(string1[i])
    }
    </script>
    

    3、对象


    三种方式:
    (1)构造方法
    (2)通过官方创建
    (3)直接写一个对象即可
    obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}
    属性的引号可以添加也可以不添加,一般就不加了
    使用时候
    obj['name'] 或者 obj.name
    在js中json格式字符串和js对象相互转化的函数
    将js对象转化为json字符串
    string = JSON.stringify(obj)
    json字符串转化为js对象
    obj = JSON.parse(string)
    obj = eval('(' + string + ')')

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    /*
    function Person(name, age, height, weight) {
        this.name = name
        this.age = age
        this.height = height
        this.weight = weight
        this.say = function () {
            console.log('我的名字叫做' + this.name + '==我的年龄为' + this.age + '==我的身高为' + this.height + '==我的体重为' + this.weight)
        }
    }
    obj = new Person('黄晓明', 40, 150, 200)
    obj.say()
    */
    
    // 创建对象方式2
    // obj = new Object()
    // obj.name = '黄晓明'
    // obj.age = 40
    // obj.height = 150
    // obj.say = function () {
    //     alert('haha')
    // }
    // console.log(obj)
    
    // 创建对象方式3
    // json格式,前后端交互使用的格式,json格式在js里面原生支持
    obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}
    
    // 没有这种写一个class,然后里面写属性写方法这种特点了
    // console.log(obj.name)
    // console.log(obj['name'])
    // 将js里面的对象转化为json格式字符串
    string = JSON.stringify(obj)
    // console.log(typeof(string))
    // js如何将json格式字符串转化为js对象
    // ming = JSON.parse(string)
    ming = eval('(' + string + ')')
    
    console.log(ming)
    </script>
    
    

    4、常用对象和函数


    parseInt
    将字符串转化为整型,必须以数字开头,只要碰到非数字,转化结束
    如果以非数字开头,转化为NaN, 两个NaN不能判断是否相等,判断是不是NaN可以使用 isNaN函数 判断是不是NaN,是返回true,不是返回false
    parseFloat
    将字符串转化为浮点,必须以数字开头,碰到非数字立马结束,小数点不算
    如果以非数字开头,转为NaN
    Math对象
    abs : 绝对值函数
    ceil : 向上取整
    floor : 向下取整
    max : 取最大的值,传递过个参数,找到最大值
    min : 传递多个参数,找到最小值
    pow : 求幂
    random : 随机值 只能随机0-1之间的小数,如果需要随机5-10之间的数,自己实现
    round : 四舍五入函数
    字符串常用函数
    indexOf : 字符串查找函数,返回查找到的字符串的第一个字母的下标,如果找不到,返回-1 类似于python里面的find
    lastIndexOf : 字符串查找函数,找最后一次出现的位置,找不到返回-1,类似于python里面的rfind
    substr : 字符串的提取 substr(start, length) 从start开始提取length个字符
    replace : 字符串替换,只能替换第一个 string.replace(old, new)
    toLowerCase : 全部转化为小写
    toUpperCase : 全部转化为大写
    fromCharCode : 所有的大写 65-90 所有的小写 97-122 数字 48-57
    split : 按照特定的字符进行切割
    数组常用函数
    push : 给数组追加一个元素
    pop : 弹出最后一个元素,只能这么做
    shift : 弹出数组中第一个元素
    unshift : 数组最前面添加一个元素
    join : 字符串拼接 arr.join('*') 将列表里面所有的字符串按照 * 拼接
    reverse : 将数组逆序
    slice : slice(start, end) [start, end) 左闭右开
    sort : 排序,如果都是数字,默认按照数字的ascii进行排序,如果想按照数字大小排序
    arr.sort(function (a, b) {return a > b}) 从小到大排序
    日期对象常用函数
    getDate : 获得日期
    getDay : 获得星期几 0-6 0表示周天
    getMonth : 0-11 当前月份减一
    getFullYear : 得到年份
    getHours : 得到小时 24小时进制
    getMinutes : 得到分钟数
    getSeconds : 得到秒数
    getTime : 时间戳,毫秒数

    每一个都有对应的设置方法,自己看看
    创建日期对象的方式
    // 创建当前时间的时间对象
    d = new Date()
    // 根据指定的时间戳创建时间对象
    d = new Date(1534750144520)
    // 根据时间字符串创建时间对象
    d = new Date('2018/8/20 15:29:04')
    // 根据年月日时分秒值创建对象
    d = new Date(2018, 7, 20, 15, 29, 4)

    <script>
    // 将字符串转化为整型
    /*
    var string = 'a100px'
    var string2 = 'b200'
    var num1 = parseInt(string)
    var num2 = parseInt(string2)
    if (num1 == NaN) {
        console.log('相等')
    } else {
        console.log('不相等')
    } */
    // var num = parseInt(string) + 100
    // console.log(parseInt(string))
    // var num = parseInt(string) + 100
    // var string = num + 'px'
    
    // var string = '3..14.15lalala'
    // console.log(parseFloat(string))
    // console.log(parseInt(string))
    
    // console.log(Math.abs(-200))
    // console.log(Math.ceil(3.14))
    // console.log(Math.floor(3.14))
    // console.log(Math.max(1, 200, 900, 56))
    // console.log(Math.pow(2, 3))
    // console.log(Math.random())
    
    // console.log(Math.round(3.54))
    
    // string = 'i love you BABY, you love me'
    
    // console.log(string.split(' '))
    
    // console.log(string.charAt(0))
    // console.log(string[0])
    
    // console.log(string.indexOf('love'))
    // console.log(string.lastIndexOf('love'))
    // console.log(string.substr(2, 4))
    // console.log(string.replace('love', 'hate'))
    
    // console.log(string.toLowerCase())
    
    // console.log(String.fromCharCode(97))
    
    // var arr = ['柳岩', '高圆圆', '韩红', '赵丽颖', '杨幂']
    
    // console.log(arr.slice(1, 3))
    // console.log(arr.reverse())
    // console.log(arr.join('*'))
    // arr.shift()
    // arr.unshift('赵丽颖')
    
    
    // arr.push('李宇春')
    
    // console.log(arr)
    // console.log(arr.pop(2))
    // console.log(arr)
    
    // var arr = ['baby', 'curry', 'anglebaby', 'love', 'taikongyi', 'anglebaby']
    
    // var arr = [100, 15, 200, 29, 300, 56]
    
    // console.log(arr.sort(function (a, b) {
    //     return a > b
    // }))
    
    // 创建当前时间的时间对象
    d = new Date()
    // 根据指定的时间戳创建时间对象
    d = new Date(1534750144520)
    // 根据时间字符串创建时间对象
    d = new Date('2018/8/20 15:29:04')
    // 根据年月日时分秒值创建对象
    d = new Date(2018, 7, 20, 15, 29, 4)
    // console.log(d)
    // console.log(d.getDate())
    // console.log(d.getDay())
    // console.log(d.getMonth())
    // console.log(d.getFullYear())
    // console.log(d.getHours())
    // console.log(d.getMinutes())
    // console.log(d.getSeconds())
    // console.log(d.getTime())
    </script>
    
    <!-- lt = ['hello', 'baby']
    
    string = '*'.join(lt) -->
    

    5、js简单演示


    背景切换
    核心:页码中有一个标签,如果想给标签添加点击事件,只需要写onclick,如果想添加其它的,添加对应事件即可。在事件的后面就要写代码,通过js的DOM操作找到指定节点,将节点的属性修改即可

    <!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>测试</title>
        <link id="lk" rel="stylesheet" href="yellow.css">
    </head>
    <body>
        <button onclick="document.getElementById('lk').href = 'red.css'">点我变成红色</button>
        <button onclick="document.getElementById('lk').href = 'yellow.css'">点我变成黄色</button>
    </body>
    </html>
    

    6、获取对象


    DOM操作,document object mxxx, 文档操作,document就是整个文档对象
    document.getElementById 得到指定对象
    document.getElementsByClassName 得到对象集合,符合类名要求的都可以得到
    document.getElementsByName
    document.getElementsByTagName 得到对象集合

    <!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>测试</title>
    </head>
    <body>
        <div id="libai">日照香炉生紫烟,遥看瀑布挂前川</div>
        <div class="dufu">会当凌绝顶,一览众山小</div>
        <div class="dufu">安得广厦千万间,大庇天下寒士俱欢颜</div>
    </body>
    </html>
    <script>
        // div1 = document.getElementById('libai')
        // console.log(typeof(div1))
        // div2 = document.getElementsByClassName('dufu')
        div3 = document.getElementsByTagName('div')
        console.log(div3[2])
    </script>
    

    7、常用事件


    onmouseover :鼠标移动上去触发
    onmouseout : 鼠标离开的时候触发
    onmouseup : 鼠标按下松开的时候触发
    onmousedown : 鼠标按下的时候触发
    onmousemove : 鼠标移动的时候触发
    onclick : 点击的时候触发
    ondblclick : 双击的时候触发
    如下两个用在input框中
    onblur : 失去焦点
    onfocus : 获取焦点

    <!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 style="width:200px; height:200px; background-color:red" onmouseover="alert('今天我要嫁给你啦')"></div>
        <div style="width:200px; height:200px; background-color:green" onmouseout="alert('明天我们要结婚啊')"></div>
        <div style="width:200px; height:200px; background-color:blue" onmouseup="alert('后天我们要结婚了')"></div>
        <div style="width:200px; height:200px; background-color:gray" onmousedown="alert('后天我们要结婚')"></div>
        <div style="width:200px; height:200px; background-color:pink" onmousemove="console.log('后天我们要结婚')"></div>
        <div style="width:200px; height:200px; background-color:purple" onclick="alert('后天我们要结婚')"></div>
        <div style="width:200px; height:200px; background-color:orange" ondblclick="alert('后天我们要结婚')"></div>
        <input type="text" onblur="console.log('我失去了焦点,生活没有意义了')" onfocus="console.log('得到焦点,得到了全世界')"/>
    </body>
    </html>
    
    

    8、获取、设置属性和内容


    获取属性
    odiv.id
    odiv.className
    odiv.style.width
    odiv.style.height
    odiv.style.backgroundColor
    【注】在css中带杠的属性,到js中都修改为小驼峰即可
    获取内容
    odiv.innerHTML 获取标签里面的所有文本内容,带标签
    odiv.innerText 获取标签里面的纯文本内容
    点和中括号区别
    能使用点的地方肯定能使用中括号,能使用中括号的地方不一定能使用点
    点后面只能跟属性名
    中括号里面可以写属性名字符串,也可以写变量
    显示隐藏图片
    this使用
    切换背景色
    表单内容控制

    <!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="bai" class="li" name='wang' style="width:200px; height:200px; background-color:gold"><b>李白乘舟将欲行,忽闻岸上踏歌声,桃花潭水深千尺,不及汪伦送我情</b></div>
        <a href="www.baidu.com" id="lala"></a>
    </body>
    </html>
    <script>
    var odiv = document.getElementById('bai')
    var oa = document.getElementById('lala')
    // console.log(odiv.style.height)
    // console.log(odiv.style.backgroundColor)
    
    // console.log(odiv.innerHTML)
    // console.log(odiv.innerText)
    // console.log(odiv.style.width)
    // console.log(odiv.style['width'])
    // console.log(odiv['style']['width'])
    
    obj = {name: '王宝强', age: 30}
    console.log(obj.name, obj['name'])
    for (var i in obj) {
        console.log(obj[i])
    }
    </script>
    

    相关文章

      网友评论

          本文标题:Day25-js入门

          本文链接:https://www.haomeiwen.com/subject/traliftx.html