初识JS

来源:互联网 发布:智商算法 编辑:程序博客网 时间:2024/05/20 06:53
<!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>