初识JS

最新推荐文章于 2024-07-08 18:01:35 发布

时光后-白痴痴

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量270

点赞数

分类专栏： H5学习文章标签： javascript h5开发前端

本文链接：https://blog.csdn.net/baiccnymyh/article/details/77995056

版权

H5学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div >

    </div>
</body>
<!-- 引入外部js文件 在开发中最常用的方式 -->
<script src="js/index.js"></script>

<script type="text/javascript">
    // 一般情况在body下面 写 js代码


//js 调试语句

    // 控制台输出信息
    console.log('断点');

    // 弹窗
    alert('hello');

    //定义变量 在js文件重定义变量使用 var，定义多个变量使用‘，’ 隔开；
    //变量类型：Numer 、String 、Boolean、Object、undefind Null；

    var palce = '青楼';
    var num = 10,
        num1 = '20';

    //在教室js'+'中可以拼接字符串,数子和字符串相加自动转化为字符串

    var num2 = num+num2
    // console.log(num2);
    // console.log(num);

    //语句

    //在js中，只要函数内部是封闭作用域，其他都不是；

    for(var i=0;i<5;i++){
        /// i 是全局变量

    }
    console.log(i);


    // 数组
    var newArray=[];//空数组
    var newArray1=['程媛媛','李师师','苏小小','杜十娘'];

    console.log(typeof(newArray));//typeof()的返回值是数据类型
    //在js中数组属于Object类型

    //数组中是元素通过索引获取
    console.log(newArray1[1]);

    for (var i = 0; i < newArray1.length; i++) {
        //输出数组中所有元素
        console.log(newArray1[i]);
    }

</script>
</html>

JS~~函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>函数</title>
</head>
<body>

</body>
<script type="text/javascript">
    //函数  在js中，只有函数内部是封闭作用域，其他位置定义的变量都是全局变量

    function alertFun(name,man){

        var girl = '小苍老师';

        alert(man+' 说：我要去青楼看'+name);
    }
    //调用 函数

    alertFun('小泽玛利亚','波多野结衣');

    function out(){

        var boy='李逵';
        function inner(){
        var boy1 = '张飞';
        console.log(boy);

        }
        inner();
    }
    out();


    //自调用函数(匿名函数)
    // function myFun(){


    // }

    // var myFun = function(){

    // }

    // myFun();


    (function(name){
        alert('hello'+name);
    })('某某老师');

</script>
</html>

获取元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    <div>哈哈</div>
    <div>呵呵</div>
    <div>嘿嘿</div>
    <div>啊啊</div>

    <p class="book">解忧杂货店</p>
    <p class="book">嫌疑人x的献身</p>
    <p class="book">从你的全世界路过</p>

        <h1 class="bgm">今天是个好日子</h1>


</body>
<script type="text/javascript">
    //通过标签名获取 获取到的是一个数组
    var divs = document.getElementsByTagName('div');
    console.log(divs);


    //通过class名获取 获取到的是一个数组
    var pArray = document.getElementsByClassName('book');


    //通过id获取元素
    var bgm = document.getElementsById('bgm');
    bgm.style.fontSize =  '10px';



    //通过js设置样式
    // divs[0].style.backgroundColor = 'red';

    for (var i = 0; i < divs.length; i++) {
        divs[i].style.backgroundColor='red';

        pArray[i].style.color = "green";
    }

</script>
</html>

时光后-白痴痴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识JS

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div > </div></body><script src="js/index.js"></script><script type="te
复制链接

扫一扫