JavaScript基础教程2-20160612

1.JavaScript之操作html元素，Dom

Dom是抽象出来的网页对象，需要了解面向对象的思想；调用对象下的方法实现相应的功能

使用JS调用dom来创建标签.

//document是网页对象

(1)方法1

<html>

<body>

    <div id='t1'></div>

    <script type='text/javascript'>

        //创建a标签

        var tag = document.createElement('a');

        tag.href="http://www.baidu.com"

        tag.innerText = '点我啊'

        //把a标签放到id为t1的div块里面

        var id1 = document.getElementById('t1')

        id1.appendChild(tag)

    </script>

</body>

</html>

#createElement:创建元素节点。

#getElementById:返回带有指定ID的元素对象

#appendChild(tag):把tag子子节点添加到id1的父节点里

#innerText:元素的文本值

（2）方法2

<html>

<body>

    <div id='t1'></div>

    <script type='text/javascript'>

        //创建a标签

        var tag = "<a href='http://www.jd.com'>点我啊</a>"

        //把a标签放到id为t1的div块里面

        var id1 = document.getElementById('t1')

        id1.innerHTML= tag;    

    </script>

</body>

</html>

#innerHTML:节点元素的文本值

2.使用JS修改页面的CSS样式

<html>

    <head>

        <style>

              .show{

               }

              .hide{

                    display:none;

               }

        </style>

    </head>

    <body>

            <div id='t1' class='show'>点我啊</div>

    </body>

    <script type='text/javascript'>

            var id1 = document.getElementById('t1');

            id1.className = 'hide'

    </script>

</html>

3.使用JS修改标签属性//把其中div为name=xiaohong改为xiaolan

<html>

    <head>

    </head>

    <body>

            <div id='t1' class='show' name='xiaohong'>点我啊</div>

    </body>

    <script type='text/javascript'>

            var id1 = document.getElementById('t1');

            console.log(id1.getAttribute('name'));

            id1.setAttribute('name','xiaolan');

            console.log(id1.getAttribute('name'));

    </script>

</html>

4.使用JS去修改样式

<body>

     <div id='t2' style='width:500px;height:200px;border:2px solid #333;'>

     <script type='text/javascript'>

          var id2 = document.getElementById('t2');

          var width = id2.style.width;

          console.log(width);

          id2.style.width = '100px';

     </script>

</body>

5.使用JS来提交表单

（1）原先的模式，submit

<form action="http://www.sogou.com/web?" method='GET'>

     <input type='text' name='query'/>

     <input type='submit' value='提交' />

</form>

//原先input标签下直接有submit类型，直接提交给action选项那去了

（2）通过按钮伪造一个表单提交的东西

<body>

    <form id='F1' action="http://www.sogou.com/web?" method='GET'>

         <input type='text' name='query' />

         <input type='button' value='伪提交' onclick="Foo();">

    </form>

    <script type='text/javascript'>

        function Foo(){

        document.getElementById('F1').submit()

        }

    </script>

</body>

//onclick指定button被点击的时候执行了Foo函数.Foo函数定义的时候，通过getElementById方法找到某个表单元素对象，进而对象的submit方法提交表单

//提交表单的这个js调用更加灵活

6.JS特效之鼠标点击文本框输入内容和移走文本框显示提示信息效果实现

涉及到几个知识点

onblur：元素失去焦点

onfocus：元素获得焦点

<head>

    <style>

         .gray{

        color:gray;

        }

        .black{

        color:black;

        }

    </style>

</head>

<body>

 <input type='text' class='gray' id='d1' value='请输入关键字' onfocus='Enter();' onblur='Leave();' />

<script>

     function Enter(){

       var id1 = document.getElementById('d1');

       id1.className = 'black'

       if(id1.value=='请输入关键字'||id1.value.trim()==''){

             id1.value='';

       }

     }

     function Leave(){

       var id1 = document.getElementById('d1');

       var val = id1.value

       if(val.length==0||id1.value.trim()==''){

          id1.value = '请输入关键字';

          id.className = 'gray';

        }else{

          id1.className = 'black';

          }

     }

</script>

</body>

//核心思想在于，当鼠标点击进去的时候，元素获得焦点，会调用Enter()函数，Enter函数会把这个文本框的css样式改为black，然后判断当前的文本框内容是否为空或者是否为默认的请输入关键字，如果是把内容置空

//当鼠标移除之后，元素失去焦点，调用Leave函数，Leave函数会判断当前文本框中的内容长度是否为0或者是否为多个空格，如果是，把文本框内容置为初始值，样式是灰色；如果里面有内容，把样式改为黑色

7.JS特效之进度条and跑马灯功能

里面主要涉及到的知识点有setInterval和clearInterval

setTimeout和clearTimeout

（1）进度条功能

//每隔半秒去服务器端抓一次数据，进度+10%，如果最后超过100了，停止

//进度条功能是通过更改div快的width宽度来实现的

//setInterval实现每隔几秒执行一下什么函数

//clearInterval保证用来达到某个特殊条件来退出那个循环

<html>

<head>

    <meta charset="utf-8">

    <title>你好，欢迎来到我的网站</title>

</head>

<body>

    <div style="width: 500px; background-color: #ddd;">

        <div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>

    </div>

    <script type="text/javascript">

        pro = 10

        function Foo() {

            var id1 = document.getElementById('pro');

            pro = pro + 10;

            if(pro >= 100){

                clearInterval(interval)

            }else{

                id1.style.width = pro+'%';

            }

            id1.style.width = pro+'%';

        }

        interval = setInterval('Foo()',500);

    </script>

</body>

</html>

//setTimeout和clearTimeout功能只保证某个函数隔半秒执行一次，执行一次后就终止了；常见用于删除某个邮件的时候，提示消息删除成功，然后停留5秒后，提示消息消失的功能

（2）跑马灯功能

//基本知识原理一样，用来实现title头中的内容滚动显示

//核心思想setInterval每隔几秒执行以下什么函数

<html>

<head>

    <meta charset="utf-8">

    <title>你好，欢迎来到我的网站</title>

</head>

<body>

    <!-- <div style="width: 500px; background-color: #ddd;">

        <div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>

    </div> -->

    <script type="text/javascript">

        function Go(argument) {

            // body...

            var content = document.title;

            var firstChar = content.charAt(0);

            var sub = content.substring(1,content.length);

            document.title = sub + firstChar;

        }

        setInterval('Go()',500);

    </script>

</body>

</html>

（3）补充知识点----如果每隔2秒跑一次进度条更新的东西，如果跑一半了，不想让它继续往后跑了，直接停止了。怎么弄？

//调用知识点clearTimeout来实现

//此处建立了个button按钮，点击的效果呢，是执行函数stop。来调用clearTimeout来终止循环

<html>

<head>

    <meta charset="utf-8">

    <title>你好，欢迎来到我的网站</title>

</head>

<body>

    <div style="width: 500px; background-color: #ddd;">

        <div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>

    </div>

    <input type="button" name="" value="别闹" onclick="Stop();">

    <script type="text/javascript">

        pro = 10

        function Foo() {

            var id1 = document.getElementById('pro');

            pro = pro + 10;

            if(pro >= 100){

                clearInterval(interval)

            }else{

                id1.style.width = pro+'%';

            }

            id1.style.width = pro+'%';

        }

        interval = setInterval('Foo()',1000);

        function Stop() {

            // body...

            clearTimeout(interval);

        }

    </script>

</body>

</html>

巴特西

JavaScript基础教程2-20160612

最新文章

热门文章