• L2-初探JavaScript魅力(1)


    getElementById

    在JavaScript中,不得不说的是查找元素,然后再进行对其操作。getElementById(Id)是我们第一个js兼容问题,也是常用的方法。在火狐浏览器下直接使用ID是会存在问题的,要解决这个问题,就需要引入document.getElementById(Id)。document.getElementById在任何浏览器下均可使用。

    案例:网页换肤

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>换肤</title>
    <link id="l1" rel="stylesheet" href="pink.css"/>
    </head>
    <body>
    <input type="button" value="皮肤1" onclick="skinPink()"/>
    <input type="button" value="皮肤2" onclick="skinGreen()"/>
    </body>
    </html>

    pink.css

    body{background:pink;}

    input{200px; height:50px; background:green;}

    green.css

    body{background:green;}

    input{200px; height:50px; background:pink;}

    js

    function skinPink(){

    var oLi = document.getElementById('l1');

    oLi.href = "pink.css";

    }

    function skinGreen(){

    var oLi = document.getElementById('l1');

    oLi.href = "green.css";

    }

    在上案例网页换肤的案例中,可以得出这样一个结论:

      - 任何标签都可以加ID,包括link ;

      - 任何标签的任何属性,也都可以修改;

      - html怎么写,js里就怎么写,但是也有个例外,就是元素的class,元素的class并不能写成元素.class=xxx,应该是元素.className = xxx。

    JavaScript 第一个语句 ——if判断

    案例:点击”更多“按钮,实现显示和隐藏Div

    实现原理分析:

      当用户点击的时候,如果Div是显示的    隐藏掉 = oDiv.style.display = 'none'

    或者Div是隐藏的  显示出来 = oDiv.style.display = 'block'

    基本语法:

    if(Div是显示){

      oDiv.style.display = 'none';

    }

    else{

      oDiv.style.display = 'block';

    }

    总结: 初探JavaScript的魅力(1)

        js是什么?JavaScript是根据用户的操作来修改页面的样式或属性。

        事件:有onclick , onmouseover, onmouseout等等。

        函数:直接在事件内写代码会很乱。函数对于任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方任何时候调用执行。

        getElementById:获取操作对象的方法之一

        if判断:大多数编程语言中常用的一个语句

    function skinPink(){

    var oLi = document.getElementById('l1');

    oLi.href = "pink.css";

    }

  • 相关阅读:
    小组最终答辩
    机器学习的安全隐私
    关于Distillation as a Defense to Adversarial Perturbations against Deep Neural Networks的理解
    第十六讲-对抗样本与对抗训练3
    对抗样本机器学习_Note1_机器学习
    对抗样本机器学习_cleverhans_FGSM/JSMA
    实验四:Tensorflow实现了四个对抗图像制作算法--readme
    实验一拓展文献阅读—反向传播计算图上的微积分
    tf.placeholder 与 tf.Variable
    Robust Adversarial Examples_鲁棒的对抗样本
  • 原文地址:https://www.cnblogs.com/linyongli/p/5286757.html
Copyright © 2020-2023  润新知