标签：box console log js 初识 typeof var document

<style>
    .box{
        /*弹性布局*/
        display: flex;
        width: 800px;
        height: 600px;
        background-color: purple;
        /*弹性布局,默认所以的子元素都在通一行显示*/
        /*设置子元素的对齐方式 center(居中) flex-end(从右往左排列) space-around(平分父级宽度)*/
        /*space-between 左右顶格,中间平分父级宽度*/
        justify-content: space-between;

        /*设置子元素是否换行*/
        flex-wrap: wrap;
        /*设置子元素在侧轴的对齐方式  单行*/
        /*align-items: center;*/
        
        align-content: center;
    }

    .box div{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        margin: 10px;

    }
</style>
=================================

<script>
    // dom对象
    //通过标签名字去获取bom 这里获取到的是两个div
    var box = document.getElementsByTagName('div');
    // console.log(box);
    box[0].innerText = '你好世界';
</script>
=================================

<input type="text" name="demo" placeholder="请输入">
/*调用demo前,必须编写demo.js文件*/

<script>
    // 声明变量,获取的方式,获取之后要去做什么
    //getElementById 通过id去获取
    // var id = document.getElementById('box1');
    // console.log(id);
    // id.innerText = '多谢可好提醒';

    // 通过class去获取 class获取到的是多个
    // var class_1 = document.getElementsByClassName('box');
    // console.log(class_1);
    // class_1[1].innerText = '我是第二个';

    // 通过标签名获取  获取到的是多个
    // var tag = document.getElementsByTagName('input');
    // console.log(tag);
    // tag[0].value ='你好';

    //通过name获取 获取的也是多个
    // var myname = document.getElementsByName('demo');
    // console.log(myname);
    // myname[0].value = '我要被修改了';

    //获取第一个 querySelector  id.class,标签名 (只会返回第一个)
    // var a = document.querySelector('#box1');
    // console.log(a);

    // 获取多个(全部)
    var b = document.querySelectorAll('.box');
    console.log(b);

    // 如果是获取到的多个,要去操作标签的时候,一定要指定一下当前操作标签对于的索引
　　
</script>
==============================

<script>
    // 谁触发事件
    // 事件类型
    // 触发之后做什么事情
    var box = document.getElementsByClassName('box');
    // console.log(box)
    box[0].onclick = function (){
        box[0].innerText = '我这个盒子被点击了';
    }
</script>
============================

<script>
    var box = document.getElementsByTagName('div')[0];
    box.ondblclick=function () {
        box.innerText = '我被双击了';
    }
</script>
==========================

<script>
    var box = document.getElementsByClassName('box')[0];
    // 鼠标划入
    box.onmouseenter=function () {
        box.innerText = '划入我';
    }
    // 鼠标划出
    box.onmouseleave=function () {
        box.innerText = '你离开了我';
    }
</script>
=======================

<script>
    var box = document.querySelector('.box');

    window.onresize =function () {
        console.log('窗口发生了变化')
    }
</script>
======================

<script>
    var selector = document.querySelector('')
    // console.log(selector);
    selector.onchange = function () {
        console.log('下拉框发生了改变');
    }

</script>
=====================

<script>
    // 算数运算符 + - * / %
    // - * / % 会将字符串转换为数字类型
    var a ='100';
    // console.log(typeof a)
    var b = 10;
    // var c = a+b
    // 字符串和数字相加,打印显示字符串
    // console.log(typeof c);
    // 字符串减数字,打印显示数字 或 NaN not a number
    // var c = a-b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a*b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a/b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a%b;
    // console.log(c)
    // console.log(typeof c)

    // ++  --
    // ++a 前置递增 先加1 后返回值
    // a++ 后置递增 先返回值, 后加1
    // 只会对运算有影响,对a本身没有影响

    // var num = 20;
    // ++num;
    // console.log(num)
    // console.log(++num + 10);
    // console.log(num++ + 10);

    //赋值运算符 = += -= *= /=

</script>
========================

<script>
    // > < >= <= == ===(全等于)
    // ==值相等
    // ===除了值相等,类型也必须是一样的
    var a = '20';
    var b = 20;
    console.log(a==b);
    console.log(a===b);
</script>
=====================

<script>
    // &&(与)  ||(或)  !(非)
    // && 两边都为true, 结果为true
    // ||  两边有一个为true,结果为true

    // && 碰到假就停,||碰到真就停
    // var a = this&&true;
    // var b = false || true;
    //
    // console.log(a);
    // console.log(b);

    // var aa = true && 0 && true;
    // console.log(aa)

    //显示null 碰到假就停
    // var bb = true && 5 && -10 && ' ' && null;
    // console.log(bb);

    // 显示3  碰到真就停
    var cc = 3 || -20 || '1' || 0;
    console.log(cc);

</script>
=======================

<script>
    // var str1 = 'hello';
       // console.log(typeof str1);

    // number包含了整数,小数
    // var num = 1.2;
       // console.log(typeof num);

    // bool
    // var bool1 = false;
       // console.log(typeof bool1);

    var arry1 = [1,2,3];
    // js当中没有字典
    var dict1 ={'name':'kehao'}
        // console.log(typeof arry1)
        console.log(typeof dict1)
</script>
========================

<script>
    var box = document.querySelector('.box');
    var inp = document.querySelector('input');
    // box.style.width = '150px';
    // box.style.height = '150px';
    // box.style.background ='blue';

    // box.style.cssText = 'width:200px;height:200px;background:gray';


    // box.style['margin-left'] = '300px';
    // var a = 'width';
    // var b = '400px';
    // box.style[a] = b;

    inp.value ='hello'
</script>
========================

<script>
    var box = document.querySelector('.a1');
    // console.log(box)
    // 修改target属性
    // box.target = '_self';


    // 获取类名 className
    box.className ='kehao';

    //修改属性
    // box.setAttribute('xy','777');

    // 添加属性
    // box.setAttribute('name','chuan');


</script>
=======================

<script>
    // // 年龄大于18,可以进入网吧.否则不可以
   // prompt(输入框)
    // var age = prompt('小伙子,今年多少岁了');
    //
    // if (age>=18){
    //     alert('你已经成年,但是上网也要记得节制')
    // }else {
    //     alert('sorr,未成年不允许进入网吧')
    // }
    // var  age = prompt('输入年龄');
    //
    //如果条件是一个范围,那么必须要用逻辑运算符进行连接
    // if(13<=age && age<15){
    //     alert('你是一个初中生')
    // }else if(15<=age && age<=18){
    //     alert('你是一个高中生')
    // }else {
    //     alert('我不晓得你是那个等级')
    // }
    //
    // switch语句 在特定的值的时候,可以去用
    var age = 20;
    switch (age) {
        case 10:{
            alert('对哦,你10岁');
            break
        }
        case 20:{
            alert('你是20岁');
            break
        }
        case 30:{
            alert('你30岁');
            break
        }
        default:
            alert('抱歉,默认值')

    }
</script>
============================

<script>
    // 变量  条件  变量变化
    // for (var a=1;a<=10;a++){
    //     console.log(a)
    // }

    // for 循环写乘法表
    for (var i=1;i<=9;i++){
        for (var j=1;j<=i;j++){
            var c = j*i
            document.write(j+'*'+i+'='+c+'&emsp;')

        }
        document.write('<br>')
    }
    //python 写法
    // for i in range(1,10):
    //     for j in range(1,i+1):
    //         print('{}*{}={}'.format(j,i,j*i),end=' ')
    //     print()
</script>
=============================
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　/*阿里失量图*/　　
    <link rel="stylesheet" href="./font_3518089_tan77sw6bp/iconfont.css">
    <style>
        .box{
            width: 250px;
            height: 80px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="box">
    密码: <input type="password" placeholder="请输入密码">
        <span class="iconfont icon-biyan"></span>
</div>
<script>
    var inp = document.querySelector('input');
    var btn = document.querySelector('span');

    var flag = true;
    // console.log(inp);
    // console.log(btn);

    // 点击眼睛的logo,改变input的一个显示类型
    btn.onclick = function() {
        if (flag) {
            // 修改属性
            inp.type = 'text';
            // 修改类名
            btn.className = 'iconfont icon-jurassic_openeyes';
            flag = !flag;
    }else {
            inp.type = 'password';
            btn.className = 'iconfont icon-biyan';
            flag = !flag;
        }
    }
</script>
</body>
</html>

标签：box,console,log,js,初识,typeof,var,document
来源： https://www.cnblogs.com/longwanghzx/p/16512592.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。