js学习笔记-初探JavaScript魅力 - 1

话说弄网站怎么能不会js呢，那么从今天开始，我也开始来学习了，看看我今天学到的内容吧。

我可以说这些都是我手打的吗...

第一个是最简单的-鼠标划过选框，显示提示内容，鼠标移出，提示内容消失。

<!DOCTYPE html>    
<html>    
<head>    
    <title>JS练习</title>    
    <meta charset="UTF-8" />    
    <style>#div1{display: none;}</style>    
</head>    
<body>    
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>    
    <div id="div1">    
        这里是测试内容，鼠标滑过显示    
    </div>    
</body>    
</html>

遇到的问题：额，大小写能不能别写错啊！！！

第二个测试，多个style样式改变

<!DOCTYPE html>    
<html>    
<head>    
    <title>JS练习</title>    
    <meta charset="UTF-8" />    
    <style>#div1{width: 200px;height: 200px;background: red;}</style>    
</head>    
<body>    
    <div id="div1" onmouseover="   
    document.getElementById('div1').style.width='300px';   
    document.getElementById('div1').style.height='300px';   
    document.getElementById('div1').style.background='green';   
    "    
    onmouseout="   
    document.getElementById('div1').style.width='200px';   
    document.getElementById('div1').style.height='200px';   
    document.getElementById('div1').style.background='red';   
    ">    
            
    </div>    
</body>    
</html>

第三个js练习，运用函数来调用js

<!DOCTYPE html>  
<html>  
<head>  
    <title>JS练习</title>  
    <meta charset="UTF-8" />  
    <style>  
        #div1{  
            width: 200px;  
            height: 200px;  
            background: red;  
            }  
    </style>  
    <script>  
    function togreen(){  
        document.getElementById('div1').style.width='300px';  
        document.getElementById('div1').style.height='300px';  
        document.getElementById('div1').style.background='green';  
    }  
    function tored(){  
        document.getElementById('div1').style.width='200px';  
        document.getElementById('div1').style.height='200px';  
        document.getElementById('div1').style.background='red';  
    }  
    </script>  
</head>  
<body>  
    <div id="div1" onmouseover="togreen()" onmouseout="tored()"><!-- 这里别漏了() -->  
    </div>  
</body>  
</html>

第四个练习，利用变量来精简代码

<!DOCTYPE html>  
<html>  
<head>  
    <title>JS练习</title>  
    <meta charset="UTF-8" />  
    <style>  
        #div1{  
            width: 200px;  
            height: 200px;  
            background: red;  
            }  
    </style>  
    <script>  
    function togreen()  
    {  
        var oDiv=document.getElementById('div1');  
        oDiv.style.width='300px';  
        oDiv.style.height='300px';  
        oDiv.style.background='green';  
    }  
    function tored()  
    {  
        var oDiv=document.getElementById('div1');  
        oDiv.style.width='200px';  
        oDiv.style.height='200px';  
        oDiv.style.background='red';  
    }  
    </script>  
</head>  
<body>  
    <div id="div1" onmouseover="togreen()" onmouseout="tored()">  
    </div>  
</body>  
</html>

第五个练习，点击切换css（说明了，任何标签都可以添加id，标签内任何属性都可以通过js来替换）

<!DOCTYPE html>  
<html>  
<head>  
    <title>JS练习-更换herf里面的内容</title>  
    <meta charset="UTF-8" />  
    <link id="l1" rel="stylesheet" type="text/css" href="css1.css">  
    <script>  
    function skin1()  
    {  
        var oL=document.getElementById.('skin1');  
        oL.href='css1.css';  
    }  
    function skin2()  
    {  
        var oL=document.getElementById.('skin2');  
        oL.href='css2.css';  
    }  
    </script>  
</head>  
<body>  
    <input type="button" value="skin1" onclick="skin1()">  
    <input type="button" value="skin2" onclick="skin2()">  
</body>  
</html>

好吧，下面的不文字介绍了

<!DOCTYPE html>  
<html>  
<head>  
    <title>JS练习-更换herf里面的内容</title>  
    <meta charset="UTF-8" />  
    <script>  
    function setText()  
    {  
        var oTxt=document.getElementById('text1');  
        oTxt.value="文字2";  
    }  
    </script>  
</head>  
<body>  
    <input id="text1" type="text" value="文字1"/>  
    <input type="button" value="改文字" onclick="setText()">  
</body>  
</html>

if判断+添加/移除class属性

<!DOCTYPE html>  
<html>  
<head>  
    <title>JS练习-if判断加变色</title>  
    <meta charset="UTF-8" />  
    <style>  
    #div1{height: 200px;width: 100px;border: 1px solid black;}  
    .box{background: red}  
    </style>  
    <script>  
    function turnRed()  
    {  
        var oDiv=document.getElementById('div1');  
        if (oDiv.className=='box') {  
            oDiv.className='';  
        }  
        else{  
            oDiv.className='box';  
        }  
    }  
    </script>  
</head>  
<body>  
    <input type="button" value="变色" onclick="turnRed()"/>  
    <div id="div1"></div>  
    这里注意className的写法 以及判断语句==  
</body>  
</html>

初探JavaScript魅力 - 1

JavaScript是什么

网页特效原理
- 淘宝、新浪、百度
- JavaScript就是修改样式
编写JS的流程布局：
- HTML+CSS属性：确定要修改哪些属性事件：确定用户做哪些操作（产品设计）
- 编写JS：在事件中，用JS来修改页面元素的样式

第一个JS特效——鼠标提示框

分析效果实现原理
- 样式：Div的display
- 事件：onmouseover、onmouseout
- 动手编写此效果
特效基础
- 事件驱动：onmouseover
- 元素属性操作：obj.style.[……]
- 特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改

初识函数

制作更复杂的效果（DIV的颜色、大小都变化）
- 直接在事件内写代码会很乱引入fucntion()、函数的基本形式
- 把JS从标签里放入到函数里，类似css里的class
- 变量的使用——别名
定义和调用
- 函数定义：只是告诉系统有这个函数，不会实际执行
- 函数调用：真正执行函数里的代码
- 关系和区别

getElementById

第一个JS兼容性问题
- 在FF下直接使用ID存在问题
- 引入document.getElementById()
- document.getElementById在任何浏览器下均可使用
网页换肤
- 土豆网“开灯、关灯”效果
- 任何标签都可以加ID，包括link
- 任何标签的任何属性，也都可以修改
- HTML里怎么写，JS里就怎么写