HTML5第十五课时汇总

最新推荐文章于 2017-07-26 18:10:47 发布
最新推荐文章于 2017-07-26 18:10:47 发布
阅读量311 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36872096/article/details/76040185
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script type="text/javascript">
        /*文档就绪函数*/
        window.onload=function(){
            var d=document.getElementById('d');//通过ID来查找。
            d.innerText;//添加文本内容
            d.innerHTML="ssssss";
            var abc=document.getElementsByName('abc');//通过name来查找。
            //获取的是一个数组，通过下标得到对应的元素，因为abc获得的不止一个。
            // 必须用abc[0]才可以修改，从咳咳咳修改到噗噗噗。
            abc[0].innerText="噗噗噗";
            var span=document.getElementsByTagName("span");//通过标签的名字来查找。
            //同上，得到的也是一个数组，用下标来操作对应的标签。
            span[0].innerText="通过标签名字来得到。"
            var p=document.getElementsByClassName("p");//通过classname来查找。
            //通过循环，来改变其内容。
            for(var i=0;i< p.length;i++){
                p[i].innerText="得得得";
            }

        }
    </script>
</head>
<body>
<div id="d">

</div>
<a href="first.html" name="abc">咳咳咳</a>
<br/>
<span>

</span>
<p class="p"></p>
<p class="p"></p>
<p class="p"></p>
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过节点修改属性</title>
    <style>
        .a{
            color: red;
        }
        .b{
            font-weight:bolder;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var d=document.getElementById('d');//通过ID找到对应的元素
            /*d.style.color='red';//设置盒子中字体的颜色。
             d.style.cssText='font-weight:bold';
             d.style.cssText+='font-size:30px';
             //cssText和上面一行方式是一样的，但是以这一行为主,仅仅是字体加粗了，但是却颜色没有改变。
             //如果想要不改变原来的红色，需要按照如此方式写，在‘+’前加一个‘+’：d.style.cssText+='font-weight:bold';*/
            d.className='a';//添加类名。
            d.className+=' b';//要是在‘=’前写了+，就是类名为ab，可以在‘b’的前面加一个空格，类名为a或b
        }
    </script>
</head>
<body>
<div id="d">
    你很厉害。
</div>
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标监听</title>
    <style>
        img{
            margin: 20px 20px;//左右有点间距。
        }
        .a{
            border: 1px solid red;
        }
        .b{
            border: 5px solid orange;
        }
    </style>
    <script type="text/javascript">
        //文档就绪函数。
        window.onload=function(){
            var img=document.getElementsByTagName('img');
            //循环获取鼠标放在每个图片上，需要分成的类和改变的格式。
            for(var i=0;i<img.length;i++){
                //鼠标进入这个元素时
                img[i].onmouseover=function(e){
                    e.target.className='b';//用一个元素，修改类名，target。
                }
                //鼠标离开时候，元素class的改变。
                img[i].onmouseout=function(e){
                    e.target.className='a';
                }
            }
        }
    </script>
</head>
<body>
<img class="a" src="../../image/new_01.jpg" alt=""/>
<img class="a" src="../../image/new_02.jpg" alt=""/>
<img class="a" src="../../image/new_03.jpg" alt=""/>
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>节点的查找</title>
    <script type="text/javascript">
        window.onload=function(){
            //通过id找到td
            var td1=document.getElementById('td1');
            var tr=td1.parentNode;//获取父元素节点。
            tr.style.backgroundElementColor='red';
            var td3=tr.lastElementChild;//最后一个孩子元素节点。
            td3.innerText='333'
            var td11=tr.firstElementChild;//获取第一个孩子元素节点。
            td11.innerText='122321'
            var td2=td3.previousElementSibling;//td3的前一个元素节点。
            td2.innerText='000000';
            var td4=td1.nextElementSibling;//后一个元素节点。
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td id="td1">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>创建,插入节点</title>
</head>
<body>
<div id="d">

</div>
<br/>
<span id="s">span标签</span>
</body>
<script type="text/javascript">
    window.onload=function(){
        var d=document.getElementById('d');
        //创建一个节点
        var a=document.createElement('a');//创建一个a标签
        a.href='index.html';
        a.innerText='二娃，千里眼和顺风耳。'
        a.style.cssText+='color:red';
        a.style.cssText+='text-decoration:none';
        d.appendChild(a);//在d中添加一个a标签。
        //在指定节点前插入节点。
        var p=document.createElement('p');//创建一个p标签
        p.innerText='大娃，钢筋铁骨。';//添加文本内容。
        d.insertBefore(p,a);//插入到d中，将p放在a的前面。
        var span=document.getElementById('s');//获取目标元素。
        span.style.cssText+='color:orange'
        var spanc=span.cloneNode(true);//true是将原先标签里的内容克隆出来，false不将原先的标签内容克隆出来。
        d.appendChild(spanc);
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<input type="button" id="b" value="鼠标事件单击"/>
<input type="button" id="c" value="鼠标事件双击"/>
</body>
<script type="text/javascript">
    window.onload=function(){
        function dbl(){
            alert('鼠标双击了');//内部方法
        }
        var input=document.getElementById('b');
        input.οnclick=function(){
            alert('鼠标单击了');
        }
        var c=document.getElementById('c');
        c.οndblclick=dbl;
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>

</body>
<script type="text/javascript">
    window.onload=function(){
        window.onkeypress=function(e){
            console.log(e);
            /* alert(e.keyCode);//keyCode输出的是键值码。*/
            if(e.charCode==103){
                alert('G键被点击了。')
            }
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML时间监听</title>
</head>
<body>
<input type="text" id="d"/>
</body>
<script type="text/javascript">
    window.onload=function(){
        var d=document.getElementById('d');
        d.onchange=function(){//内容发生改变，光标焦点转移之后，能够监听到，转移之前监听不到
            alert('内容发生改变了');
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>内容复制事件</title>
</head>
<body>
<input type="text" id="a"/>
<div id="b"></div>
</body>
<script type="text/javascript">
    window.onload=function(){
        //获取元素
        var a=document.getElementById('a');
        var b=document.getElementById('b');
        //添加一个内容改变监听事件
        a.oninput=function(){
            //将a的文本输入框内容复制给b
            b.innerText= a.value;
        }

    }
</script>
</html>




<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格提交练习写法1</title>
</head>
<body>
<form id="f">
    <input type="text" id="username"/>
    <input type="submit" />
</form>
</body>
<script type="text/javascript">
    window.onload=function(){
        var f=document.getElementById('f');
        //输入框获取
        var username=document.getElementById('username');
        f.onsubmit=function(){//提交表单的事件监听。
            //判断是否存在内容
            if(username.value==''){
                alert('请输入用户名');
                return false;//阻止提交。
            }else{
                alert('提交成功');
                return true;//允许提交。
            }
            return false;
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格提交练习写法2</title>
</head>
<body>

<form οnsubmit="return submitFun(this);">
    <input type="text" name="category" />
    <input type="submit" name="submit" value="提交"/>
</form>
</body>
<script>
    function submitFun(obj){
        if(obj.category.value==''){
            alert("请输入内容");
            return false;
        }else{
            alert('提交成功');
            return true;
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>填写信息登录验证</title>
</head>
<body>
<form action="test.html" method="post" id="f">
    邮箱：
    <br/>
    <input type="text" id="email" />
    <br/>
    密码：
    <br/>
    <input type="password" id="pwd"/>
    <br/>
    <br/>
    <input type="submit" value="登录"/>
</form>
</body>
<script type="text/javascript">
    window.onload=function(){
        //获取两个表单项目
        var email=document.getElementById('email');
        var pwd=document.getElementById('pwd');
        //表单提交监听事件
        document.getElementById('f').onsubmit=function(){
            //验证表单项：
            //1.验证邮箱是否为空
            if(email.value==''){
                alert('请输入邮箱！！！');
                return false;
            }
            //2.验证密码是否为空
            if(pwd.value==''){
                alert('请输入密码！！！');
                return false;
            }
            //3.验证邮箱是否正确
            if(email.value.indexOf('@'+'.')==-1){
                alert('邮箱格式不正确！！！必须包含@或.');
                return false;
            }
            return true;
        };

    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正则表达式普通方式</title>
</head>
<body>
<form action="test.html" method="post" id="form">
    <input type="text" id="a"/>
    <input type="submit" value="登录"/>
</form>
</body>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById('form').onsubmit=function(){//提交监听事件
            //普通方式声明一个正则表达式
            var reg1=/white/i;//此处的i（附加参数）是忽略大小写。
            //使用构造函数声明一个正则表达式
            var reg2=new RegExp('china','i');
            //验证输入框内容是否匹配
            /*var a=document.getElementById('a').value;//返回的是该节点的属性值。
             if(reg1.test(a)){//返回的是true或者false
             //验证通过
             alert('验证通过')
             }else{
             //验证失败
             alert('验证失败');
             return false;
             }
             */
            //通过正则表达式，分割一个字符串。
            var arr= a.split(reg1);
            for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过正则表达式，分割一个字符串</title>
</head>
<body>
<form action="test.html" method="post" id="form">
    <input type="text" id="a"/>
    <input type="submit" value="登录"/>
</form>
</body>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById('form').onsubmit=function(){//提交监听事件
            //普通方式声明一个正则表达式
            var reg1=/a/i;
            //通过正则表达式，分割一个字符串。
            var arr= a.split(reg1);
            for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }
        }
    }
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正则表达式修改输入框属性</title>
</head>
<body>
<form action="test.html" method="post" id="form">
    <input type="text" id="a"/>
    <input type="submit" value="登录"/>
</form>
</body>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById('form').onsubmit=function(){//提交监听事件
            //普通方式声明一个正则表达式
            var reg1=/a/ig;//此处的i（附加参数）是忽略大小写。g是代表全局匹配。
            //验证输入框内容是否匹配
            var a=document.getElementById('a').value;
            var b= a.replace(reg1,'b');
            //通过value的值，用reg1，修改输入框的属性。
            var input=document.getElementById('a');
            input.value=b;
            return false;
        }
    }
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>登陆成功</h1>
</body>
</html>
甲戌天火
关注
专栏目录
201数据的集中趋势(第2课时)2011平均数(2)共15
10-29
标题中的"201数据的集中趋势(第2课时)2011平均数(2)"表明，这个课程或资料主要关注的是统计学中的一个关键概念——数据的集中趋势，特别是平均数这一衡量标准。在统计分析中，数据的集中趋势是指一组数值围绕其中心...
HTML网页设计新手入门教程（共32课时）
07-22
HTML网页设计教程第一章（概论）1【】HTML网页设计教程第一章（概论）2【】HTML网页设计教程第一章（概论）3【】HTML网页设计教程第一章（概论）4【】HTML网页设计教程第一章（概论）5【】HTML 资源太大，传百度网盘...
九年级第十二单元课件第五课时.ppt
10-18
九年级第十二单元课件第五课时.ppt
课时70第四十五回 reduce席卷.mp4
09-17
Python原来这么简单(win系统 提高篇)
课时60第三十五回 面向对象.mp4
09-17
Python原来这么简单(win系统 提高篇)
jq和js用mousemove获取鼠标当前位置
甲戌天火的博客
07-26 8800
html> lang="en"> charset="UTF-8"> jq获取鼠标的位置 div{ width: 500px; height: 500px; background-color: #585858; margin: 0; pa
jquery简单练习题目五个
甲戌天火的博客
07-26 3340
html> lang="en"> charset="UTF-8"> jq获取鼠标的位置 div{ width: 500px; height: 500px; background-color: #585858; margin: 0; pa
html5第九课时，声明变量
甲戌天火的博客
05-23 3200
html> html> head lang="en"> meta charset="UTF-8"> title>声明变量title> script> /*var width1=11,width2=12;//声明变量，并且赋值。 alert(width1); alert(width2); width1=666;
a标签的三种功能及其属性的运用
甲戌天火的博客
04-06 2273
html> html> head lang="en"> meta charset="UTF-8"> title>a标签title> head> body> 标签三种功能： 1.页面跳转。 2.锚点链接。 3.功能链接。--> a href="http://book.qidian.com/
html5第十课时，判断输入的年份是否是闰年
甲戌天火的博客
07-24 2193
html> lang="en"> charset="UTF-8"> 判断输入的年份是否是闰年 type="text/javascript"> var year=parseInt(prompt('请输入年份')); (year%4==0&&year%100!=0)||year%400==0?alert(year+'是闰年'):alert(year
HTML5第十课时，计算个人所得税
甲戌天火的博客
07-24 1751
html> lang="en"> charset="UTF-8"> 计算个人所得税 type="text/javascript"> var n=parseInt(prompt('请输入基本工资')); var m=n>1000?n-((n-1000)*0.05):n; alert(m);
html第九课时，水仙花数
甲戌天火的博客
05-23 1673
html> html> head lang="en"> meta charset="UTF-8"> title>水仙花数title> script type="text/javascript"> var zhi1=prompt('请输入一个数'); var length=zhi1.length;//得到位数可以计算幂数。 va
HTML5第六课时，margin外边距
甲戌天火的博客
04-19 1214
html> html> head lang="en"> meta charset="UTF-8"> title>margin外边距title> style> *{ padding: 0; margin: 0; } /*标签选择器*/ div{
HTML5第六课时，超链接，伪类选择器
甲戌天火的博客
04-19 1013
html> html> head lang="en"> meta charset="UTF-8"> title>超链接,伪类选择器title> style> /*伪类选择器，必须按照以下的顺序去写，l,v,h,a*/ a:link{/*1.默认的链接状态。未访问状态。*/ color: pink;
html5第八课时，图片放大溢出解决
甲戌天火的博客
05-13 919
html> html> head lang="en"> meta charset="UTF-8"> title>图片放大溢出的解决title> style> div{ width: 160px; height: 180px; border: 1px red solid;
html5第八课时，属性前缀
甲戌天火的博客
05-13 852
html> html> head lang="en"> meta charset="UTF-8"> title>属性前缀title> style> div{ width: 200px; height: 200px; background-color: #cccccc;
HTML第十课时，多次输出helloworld
甲戌天火的博客
07-24 837
html> lang="en"> charset="UTF-8"> 多次输出helloworld type="text/javascript"> var n; n=prompt("输入次数"); for(var i=0;i;i++){ document.write('HelloWorld'+'');
html第九课时，圆柱体体积
甲戌天火的博客
05-23 830
html> html> head lang="en"> meta charset="UTF-8"> title>圆柱体体积title> script> var r=prompt('请输入半径'); var h=prompt('请输入高度'); r=parseInt(r); h=parseInt(h);
HTML5入门教程：24小时训练指南
第五部分（Using Lists）介绍了列表的运用，包括插入无序列表（Lesson13）、操作有序列表（Lesson14）以及扩展列表功能（Lesson15），让读者学会组织和展示信息。 第六部分（Structuring Tables）讲解了表格的构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值