js1

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js1相关的知识，希望对你有一定的参考价值。

<!doctype html>
<!--
1.js获取html元素:
    1.通过id   2.通过标签名  3.通过类名
2.DOM事件:
   鼠标事件：onmouseout onmouseover onclick onmousedown onmouseup
    -->
<html>
<head>
    <meta charset="utf-8">
    <title>JS-HTML-DOM</title>
    <style type="text/css">
        #p3 {
            color: red;
        }

        #p5 {
            border: 3px #ff1d1f solid;
            padding-right: 10px;
            margin-right: 1400px;

        }
    </style>
    <script type="text/javascript">

        function change() {//改变css属性
            document.getElementById("p3").style.color = "yellow";
        }

    </script>
</head>
<body>
<p id="p1" class="c1">hello world!!!</p>
<p id="p2">
    我是411盲打鬼才
</p>
<p id="p3">改变css属性，css颜色为红色</p>
<input type="button" value="点击我改变css属性" onClick="change()"/>
<img src="1.jpg" id="img1"/>
<script type="text/javascript">

    var a = document.getElementById("p1");//通过id获得html元素
    a.innerHTML = "hello js!!!";
    document.write("这是js写的!!!");//改变html输出流(绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。)
    document.getElementById("img1").src = "1.gif";//改变html属性
</script>

<p id="p4">这是一段文字</p><!--用js显示和隐藏文字-->
<br/>
<input type="button" value="隐藏文字" onClick="document.getElementById(‘p4‘).style.visibility=‘hidden‘"/>
<br/>
<input type="button" value="显示文字" onClick="document.getElementById(‘p4‘).style.visibility=‘visible‘"/>
<br/>

<p onclick="this.innerHTML=‘要你点你就点，傻逼‘" id="p5">点击此文本</p><!--点击元素改变内容-->

<input type="text" onChange="Upper()" placeholder="输入的文本会变大写" id="input1">
<script>
    function Upper() {//onchange事件
        var x = document.getElementById("input1");
        x.value = x.value.toUpperCase();
    }
</script>

<div onMouseOver="over(this)" onMouseOut="out(this)"
     style="border: red solid 2px; width:120px; height: 60px;background-color: green;">
    把鼠标放到这上面!!!
</div>
<script>
    function over(obj) {//onMouseOver和onMouseOut事件
        obj.innerHTML = "要你放你就放,傻逼!!!";

    }

    function out(obj) {
        obj.innerHTML = "傻逼，你怎么还走了呢？？？";
    }
</script>

<br/>
<div style="border: red solid 2px; width:120px; height: 140px;background-color: green;" onClick="test(this)">你敢点击我吗？
</div>
<script>
    function test(obj) {
        if (obj.innerHTML == "你敢点击我吗？") {
            obj.innerHTML = "你敢点击我吗？<br>小子胆子真大";
        }
        else if (obj.innerHTML == "你敢点击我吗？<br>小子胆子真大") {
            obj.innerHTML = "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠";

        }
        else if (obj.innerHTML == "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠") {
            obj.innerHTML = "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠<br>好，你狠<br>点最后一次！！！";

        }
        else {
            obj.style.display = "none";
        }

    }

</script>
<div id="div1">
    <p>这是一个段落!!!
    <p>
</div>
<script>//新增html元素
var a = document.createElement("p");//创建<p>元素
var b = document.createTextNode("这是一个新的段落");//创建文本结点
a.appendChild(b);//<p>元素追加文本结点
var c = document.getElementById("div1");
c.appendChild(a);//向已创建的元素追加这个新元素
</script>
//删除html元素
<div id="div2">
    <p id="p6">这是第一个段落</p>
    <p id="p7">这是第二个段落</p>
</div>
<script>
    var a = document.getElementById("div2");
    var b = document.getElementById("p7");
    a.removeChild(b);
    //找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
    // var child=document.getElementById("p1");
    // child.parentNode.removeChild(child);
</script>
</body>
</html>































































































































以上是关于js1的主要内容，如果未能解决你的问题，请参考以下文章

javascript JS1

JS1-属性操作

js1

js1

js1

js1