码迷，mamicode.com
首页 > Web开发 > 详细

39、重新复习js之三

时间：2016-10-24 09:40:31      阅读：299      评论：0      收藏：0      [点我收藏+]

标签：nodename   添加   default   script   停止   数组   color   哪些   支持   

1、盒子模型典型标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    div {
        display: none;
    }
        span {
    /*
        display : 调整标签类型
            block
            inline
            none 不显示,而不留位置
        
        display: none;
    */
    visibility: hidden;
    }
</style>
</head>
<body>
    itcast传智播客<div>itcast传智播客</div>itcast传智播客 <br>
    itcast传智播客<span>itcast传智播客</span>itcast传智播客
</body>
</html>

上边结果是下边这样的

技术分享

2、二级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select id="province" >
    <option>--请选择省份--</option>
</select >

<select id="city">
    <option>--请选择城市--</option>
</select>
</body>
<script type="text/javascript">
/*
    //json 对象
    //java 中的 map  key:value
    //创建json对象
    var json = {"name":"tom","age":18};
    //拿到json中的所有键
    for(var key in json){
    //根据键取得对应的值
        alert(key+"==>"+json[key]);
    }
*/

var json = {"河北省":["廊坊市","保定市","石家庄"],"山东省":["济南","青岛","烟台"],"河南省":["郑州市","洛阳市","开封"]};
    
//遍历json中的所有key,把key封装到option对象中,将option对象添加到省的select中
//0 获得省的select对象
var province = document.getElementById("province");
var city = document.getElementById("city");
//1 遍历json中的所有key
for(var key in json){
//2 key封装到option对象中
        var option = document.createElement("option");
        option.innerHTML = key;
//3 添加
        province.appendChild(option);
    }

//为province添加onchange事件
province.onchange=function(){
    //0 每次添加市之前,清空市的下拉选
        city.length=1;
    //1. 获得用户选择的省
    var pronvinceKey = this.options[this.selectedIndex].innerHTML;
    //2. 根据选择的省去json中取得对应 市数组
    var cities = json[pronvinceKey];
    //3. 遍历数组中的所有市,封装到option对象中
    for(var i = 0 ; i < cities.length ; i++){
        var option = document.createElement("option");
            option.innerHTML = cities[i];
    //4. 将option添加到city中
            city.appendChild(option);
    }
    
}


</script>
</html>

上边结果是下边这样的

技术分享

3、check的反选等等功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        
    </head>
    <body>
        <form method="post" action="">
               请选择您的爱好!
            <br><input type="checkbox" id="checkedAll_2"/>全选/全不选
               <br/>
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="游泳"/>游泳
            <input type="checkbox" name="items" value="唱歌"/>唱歌
               <br/>
            <input type="button" id="CheckedAll" value="全　选"/>
            <input type="button" id="CheckedNo" value="全不选"/>
            <input type="button" id="CheckedRev" value="反　选"/> 
        
            
        </form>
    </body>
    <script language="JavaScript">
            //反选
            //1 获得反选按钮,添加点击事件
            document.getElementById("CheckedRev").onclick=function(){
                //2 获得到要操作4个input 对象
                var items =  document.getElementsByName("items");
                //3 遍历
                for(var i = 0 ; i < items.length ; i++){
                    //判断 ,当前遍历的input的选中状态
                    //alert(items[i].checked);
                    /* if(items[i].checked){
                            //选中 ==> 没选中
                        items[i].checked=false;
                    }else{
                            //没选中==> 选中
                        items[i].checked=true;    
                        
                    } */
                    items[i].checked = !items[i].checked;
                }
                
            }    
        
        
        
    </script>
</html>

技术分享

4、左侧菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>好友列表</title>
<style type="text/css">
table {
    border:#0099FF 1px solid;
    width:100px;
    border-collapse:collapse;
    }
    
table td{
    border:#0066FF 1px solid;
    background-color:#FF9900;
    text-align:center;
    }
    
table td div {
    background-color:#FFFF99;
    text-align:left;
    }
    
table td a:link, table td a:visited {
    color:#00ffFF;
    text-decoration:none;
    }
    
table td a:hover {
    color:#00CC00;
    }

/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div {
    display:none;
    }

.open {
    display:block;
    }
    
.close {
    display:none;
    } 

</style>

<script type="text/javascript">
    function openDiv(a){
        //1.通过a元素得到 下面的div 
        var targetDiv = a.parentNode.getElementsByTagName("div")[0];
        //2.取得页面中所有div
        var divs = document.getElementsByTagName("div");
        //3.遍历所有div
        for(var i= 0; i < divs.length ; i ++){
            //判断当前遍历的div是不是第一步获得的div
            if(divs[i] == targetDiv){
                    //是 ==> 设置该div属性为block
                //divs[i].style.display="block";
                    divs[i].className="open";
            }else{
                    //不是 ==> 设置div属性为none
                //divs[i].style.display="none";
                    divs[i].className="close";
            }
        }
    }
    


</script>
</head>


<body>
<table>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
            <div>
                秦始皇<br />
                刘邦<br />
                李世民<br />
                康熙<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
            <div>
                刘备<br />
                关羽<br />
                张飞<br />
                赵云<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
            <div>
                西施<br />
                貂蝉<br />
                杨贵妃<br />
                王昭君<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
            <div>
                马云<br />
                李开复<br />
                俞敏洪<br />
                冯威<br />
            </div>
        </td>
    </tr>
</table>
</body>
</html>

技术分享

5、左侧选中蹦到右边

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" size="10" multiple="multiple" class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>    
    </td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
       <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
    </td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
    //1 为id为add元素添加事件
    document.getElementById("add").onclick=function(){
        //2 获得左侧select元素下所有option
            var first = document.getElementById("first");
            var second = document.getElementById("second");
            var options = first.options;
        //3 遍历并判断当前遍历的option是否被选中
        for(var i = 0; i< options.length ; i++){
            if(options[i].selected){
            //选中 ==> 添加到右侧select
                second.appendChild(options[i]);
                i--;
            }
        }
        
    }
</script>
</html>

技术分享

6、Node的CURD

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
    border:#0099FF 1px solid;
    height:60px;
    width:120px;
    margin:20px 0px 20px 20px;
    padding:10px 0px 0px 20px;
    }
    
#div_1{
    background-color:#00FFFF;
    }
    
#div_2{
    background-color:#FF3399;
    }
    
#div_3{
    background-color:#0000FF;
    }
    
#div_4{
    background-color:#FFFF66;
    }
</style>


</head>



<body>
    <div id="div_1">
        
    </div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
        div区域3
    </div>
    
    
    
    <div id="div_4">
    div区域4
    </div>
    
    
    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />

</body>
<script type="text/javascript">
//动态为div增加一个a元素,点击之后跳转到传智首页
function addNode(){
    //1.创建a元素 <a></a>
    var aEle = document.createElement("a");
    //2.为a元素添加属性
    aEle.setAttribute("href", "http://www.itcast.cn");
    //3.为a元素添加文本
    aEle.innerHTML = "传智播客";
    //4.获得目标div
    var div_1 = document.getElementById("div_1");
    //5.添加
    div_1.appendChild(aEle);
}
//把div_2删除
function deleteNode(){
    //1 获得要删除的元素
    var div_2 = document.getElementById("div_2");
    //2 找到该元素的父亲
    var parent= div_2.parentNode;
    //3 删除
    parent.removeChild(div_2);
}
//将div_3替换成一张图片
function updateNode(){
    //1 找到要替换的div
    var div_3 = document.getElementById("div_3");
    //2 找到div的父亲
    var parent = div_3.parentNode;
    //3 创建一个img元素对象
    var imgEle = document.createElement("img");
    //4 添加属性(src)
    imgEle.setAttribute("src", "001.jpg");
    //5 替换
    parent.replaceChild(imgEle, div_3);
}
//将div_4 复制,并加入到页面末尾
function copyNode(){
    //1 获得要复制的div
    var div_4 = document.getElementById("div_4");
    //2 复制  cloneNode=> 参数 如果是false.那么只复制本身不复制子节点.
                              //true==> 复制本身和所有子节点
    var div_copy = div_4.cloneNode(true);
    //3 获得父亲
    //4 添加
    div_4.parentNode.appendChild(div_copy);
}
</script>

</html>

 

 

7、table动态添加数据

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>添加用户</title>
    </head>
    <body>
        <center>
            <br><br>
            添加用户:<br><br>
            姓名: <input type="text" name="name" id="name"  />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
            <input type="button" id="addUser" value="添加" />
            <br><br>
            <hr>
            <br><br>
            <table id="usertable" border="1" cellpadding="5" cellspacing=0>
                    <tr>
                        <th>姓名</th>
                        <th>email</th>
                        <th>电话</th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td>
                    </tr>
            </table>
        </center>
    </body>
    <script type="text/javascript">
    //DHTML ==> Dynamic HTML ==> 动态HTML ==> 整合了HTML CSS JAVAScript DOM
    // 对页面中的DOM对象的增强.
    // 对页面中的DOM对象增加了一些属性和方法.
    
    
    
    
    
        //1 获得添加按钮 , 添加点击事件
        document.getElementById("addUser").onclick=function(){
            //2.获得表单中,用户名,邮箱,电话的值
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var tel = document.getElementById("tel").value;
            //3.创建一个tr对象
                var tr = document.createElement("tr");
            //4.直接在tr中添加4个td
                tr.innerHTML="<td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td><a href=‘javascript:void(0)‘ onclick=‘del(this)‘ >Delete</a></td>";
                
            
            /* //4.创建4个td,分别放入 用户名,邮箱,电话
            //5.将4个td 添加到tr中 */
            //6.tr添加到table中
                document.getElementById("usertable").appendChild(tr);
        }
    
    //删除一行
    function del(a){
        //要删除一行,已知条件就是a标签.
        a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
    }
    
    
    </script>
</html>

结果就是下边这样

技术分享

 

 

8、猜数字

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //1 生成1~100之间的随机数
        var num1 = randomNumber();
        
        alert(num1);
        
        function guess(){
    //2 使用propmt 让用户输入数字,并比较
        var num2 = prompt("请输入1~100之间的数字!","0");
        if(isNaN(+num2)){
            //输入了无效数字,提示,并重复执行2步
            alert("请输入有效数字!");
            guess();
        
        } else if(num2 > num1){
            //大了==> 提示用户大了,并重复执行第2步
            alert("大了");
            guess();
        }else if(num2 < num1){
            //小了==> 提示用户小了,并重复执行第2步
            alert("小了");
            guess();
        }else{
            //猜对了==> 提示用户猜对了,询问是否继续游戏,
            var  result = confirm("恭喜您答对了!是否要继续游戏?")
            if(result){
                //是   ==> 重复执行 1,2步
                num1 = randomNumber();
                guess();
            }else{
                //不继续 ==> window.close();
                window.close();
            }
        }
            
        }

        function randomNumber(){
            return Math.round(Math.random()*100);
        }
    
        guess();
</script>

</head>
<body>

</body>
</html>

技术分享

 

 

9、window对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window对象代表一个html文档.
    //方法
        // alert confirm prompt close
        // open => 打开一个新的窗口
        //语法window.open(URL,name,features,replace)
            // 参数1.新打开窗口的地址
            // 参数2.(没有用) 新打开窗口的名称.
            // 参数3. 新窗口的一些特征
            // 参数4. (没有用) 需不需要用新打开的窗口记录来替换调用open方法页面的历史记录.
            // 返回值: 返回新打开窗口的window对象.
        
        var baiduWindow = open("http://www.baidu.com","","width=200,height=100");
        
        alert(baiduWindow);

//总结: window对象是由浏览器创建的,加载文档时,浏览器就自动创建出来了.我们直接使用方法和属性即可.
    //理论上window对象调用方法和属性时,不需要加前缀. 推荐加上"window.",
    
    
        
        
        
        
        
</script>

</head>
<body>

</body>
</html>

技术分享

 

 

10、window对象之定时器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window对象代表一个html文档.
    //方法:
        // setInterval clearInterval
        // setTimeout  clearTimeout
        
        // 定时器方法 ,设置定时器(setInterval), 清除定时器(clearInterval).
        
        //参数1: 接受一个字符串.这个字符串是js代码.
        //参数1: 还可以接受一个函数对象.
        //参数2:接受一个整数,单位是毫秒
        //返回值: 打开的定时器的ID
        //每隔参数2毫秒数执行参数1代码或函数.
            //window.setInterval("alert(‘aaa‘);", 3000);
        
            var ID = window.setInterval(fun1, 3000);
        
            function fun1(){
                alert(‘bbb‘);
            }
        //clearInterval ==>  清除定时器
        
        window.clearInterval(ID);
//-----------------------------------------------------------------------


        
</script>

</head>
<body>
    

</body>
</html>

 

 

11、页面时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type="text" size="30" id="one" /><br/>
    <input type="button" id ="two" value="开始" onclick="fun1();" />
    <input type="button" id ="three" value="结束" onclick="fun2();" />

</body>
</html>
<script type="text/javascript">
    var id;

    //控制文本框中内容
    //document.getElementById("one").value= "123";
    function fun1(){
          setTime();
        //3.调用setInterval 每隔一秒调用一次setTime方法.
        if(!id){
         id =    window.setInterval(setTime, 1000);
        }
    }
    
    function setTime(){
        //1.获得当前时间
        var date = new Date();
        //2.交给文本输入框显示
        document.getElementById("one").value= date.toLocaleString();
    }
//停止时钟
    function fun2(){
        //
        clearInterval(id);
        id = undefined;
    }
</script>

技术分享

 

 

 

12、window对象03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window对象代表一个html文档.
    //方法:
        // setTimeout  clearTimeout
        
        // 定时器方法 ,设置定时器(setTimeout), 清除定时器(clearTimeout).
        
        //参数1: 接受一个字符串.这个字符串是js代码.
        //参数1: 还可以接受一个函数对象.
        //参数2:接受一个整数,单位是毫秒
        //返回值: 打开的定时器的ID
        //参数2毫秒后执行参数1代码或函数.(只执行一次)
        
        //setTimeout("alert(‘aaa‘)",1000);

        //作业1:使用setTimeout方法完成页面时钟,需求跟刚才的例子一模一样.

        
</script>

</head>
<body>
    

</body>
</html>

 

13、window对象04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window对象代表一个html文档.
    //属性
        //self parent top 
        //frames
        //opener
        
</script>

</head>
<body>
        <iframe src="03-页面时钟.html" >
        
        </iframe>

</body>
</html>

 

 

14、history对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//history对象代表当前页面的访问历史
//获得: history对象是window对象的属性.
    var history = window.history;
//属性
    //length --> 当前标签页一共浏览过几个页面
    
//方法
    //forward ==> 前进
    //back ==> 后退
    //go ==> 前进或后退
    //前进
    function fun1(){
        //window.history.forward();
        window.history.go(1);
    }
</script>

</head>
<body>
        <a href="05-history对象02.html">05-history对象02.html</a>
        <input type="button" value="前进" onclick="fun1();"  />
</body>
</html>

技术分享

技术分享

 

 

14、Location对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//Location对象代表了当页面的地址
    //属性
        //href  ==> 用来改变当前页面的地址
    //方法 
        //参数1,可以填一个url, 刷新到url指定页面.
        //reload() ==> 刷新当前页面
function fun1(){
            
            window.location.href = "http://www.baidu.com";
        }
function fun2(){
    
    window.location.reload();
}    
</script>

</head>
<body>
        <input type="button" value="百度" onclick="fun1();"  />
        <input type="button" value="刷新" onclick="fun2();"  />
</body>
</html>

技术分享

 

 

15、dom中的五类对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <font id="one" color="red" >哈哈</font>
</body>
</html>
<script type="text/javascript">
//一下这些对象全都不是我们自己创建 的. 浏览器创建的.加载html文档时就已经创建了.

//获得文档对象 
    var doc = window.document;
    /*     alert(doc.nodeName); //#document
        alert(doc.nodeValue); // null
        alert(doc.nodeType); // 9 */
//获得元素对象
    var font = document.getElementById("one");
        /* alert(font.nodeName); //font
        alert(font.nodeValue); // null
        alert(font.nodeType); // 1 */
//获得属性对象
    var color = font.getAttributeNode("color");
        /* alert(color.nodeName); // 属性名称
        alert(color.nodeValue); // 属性值
        alert(color.nodeType); // 2 */
//获得文本对象
    var text = font.firstChild;
        alert(text.nodeName); // #text
        alert(text.nodeValue); // 文本内容
        alert(text.nodeType); //  3
</script>

 

16、获得Element对象方式01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <font id="one" color="red" >哈哈</font>
</body>
</html>
<script type="text/javascript">
//获得元素对象,方式01
//获得元素对象 , 在整个文档范围内查找一个 id值为one的元素对象.
    var font = document.getElementById("one");
    
</script>

 

 

17、获得Element对象方式02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <font  color="red" >哈哈</font>
</body>
</html>
<script type="text/javascript">
//获得元素对象,方式02
//获得元素对象 , 在整个文档范围内查找一个元素名称为font的元素对象.
//返回一个 元素数组(nodeList,在js中就当数组用)
    var font = document.getElementsByTagName("font")[0];
    alert(font);
</script>

 

 

18、获得Element对象方式03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <font class="one" color="red" >哈哈</font>
</body>
</html>
<script type="text/javascript">
//获得元素对象,方式03
//获得元素对象 , 在整个文档范围内查找Class名称为one的元素对象数组.
//返回一个 元素数组(nodeList,在js中就当数组用)
    var font = document.getElementsByClassName("one")[0];
    alert(font);
</script>

 

 

19、获得Element对象方式04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <font name="one" color="red" >哈哈</font>
</body>
</html>
<script type="text/javascript">
//获得元素对象,方式04
//获得元素对象 , 在整个文档范围内查找Name名称为one的元素对象数组.
//返回一个 元素数组(nodeList,在js中就当数组用)
    var font = document.getElementsByName("one")[0];
    alert(font);
</script>

 

 

20、在元素范围内获得元素方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <div id="one" >
        <div id="two" class="two" name="two" ></div>
    </div>
</body>
</html>
<script type="text/javascript">
    var one = document.getElementById("one");
    //根据ID查找里面的div ==> 不支持
    /* var two =    one.getElementById("two");
    alert(two); */
    //根据 class查找 ==> 支持
        /* var two = one.getElementsByClassName("two")[0];
        alert(two); */
    //根据name查找 ==> 不支持
        /* var two = one.getElementsByName("two")[0];
        alert(two); */
    //根据标签名称查找==> 支持
        var two = one.getElementsByTagName("div")[0];
        alert(two);
</script>

 

 

21、dom中的事件01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <div id="one" ondblclick="alert(‘bbb‘);" >
        这是div
    </div>
    <input type="text" id="two" value="请输入用户名/邮箱/手机号" />
</body>
</html>
<script type="text/javascript">
    //事件: 给对应的元素对象,添加一个Function类型的属性.
           //这个function对象会在相应的实际被调用.
           // 调用的时机跟 属性的名称有关.
        /* //1.div获得到
        var one = document.getElementById("one");
        //2.为div新增一个属性( Function)
        one.onclick = function (){
            alert(‘aaa‘);
        } */
        
    //以上是为元素对象附加事件属性的两种方式.
//----------------------------------------------------------------
    //被支持的常用事件有哪些?
    // onblur 
    // onfocus
    var two =  document.getElementById("two");
        two.onfocus=function (){
            alert("onfocus");
        }
        two.onblur=function (){
            alert("onblur");
        }
</script>

 

 

22、dom中的事件02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <input type="text" id="two" /><br/>
    <select id="three" >
        <option>河北</option>
        <option>西藏</option>
        <option>新疆</option>
    </select>
</body>
</html>
<script type="text/javascript">
    //被支持的常用事件有哪些?
    // onchange 
    var two =  document.getElementById("two");
        two.onchange=function (){
            alert("onchange");
        }
    //----
        var three =  document.getElementById("three");
        three.onchange=function (){
            alert("onchange");
        }
</script>

 

 

23、dom中的事件03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
    <input type="text" id="two" /><br/>
</body>
</html>
<script type="text/javascript">
    //被支持的常用事件有哪些?
    // onkeydown 
    var two =  document.getElementById("two");
        two.onkeydown=function (event){
            if(event.keyCode == 13){
                alert("表单提交啦!");
            }
        }
        
</script>

 

 

24、dom中的事件04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //被支持的常用事件有哪些?
    // onload 
    function fun1(){
        var two =document.getElementById("two");
        alert(two);
    }
        
</script>
</head>
<body onload="fun1();">
    <input type="text" id="two" /><br/>
</body>
</html>

 

 

25、dom中的事件05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
    width:300px;
    height:300px;
    border: 1px solid red;
}

</style>
<script type="text/javascript">
    //被支持的常用事件有哪些?
    /* onmousedown 鼠标按钮被按下。 4 1 9 Yes 
        //onmouseup 鼠标按键被松开。 4 1 9 Yes  
        
        onmouseover 鼠标移到某元素之上。 3 1 9 Yes 
        onmouseout 鼠标从某元素移开。 4 1 9 Yes 
        
        onmousemove 当鼠标悬停时,连续被触发.。 3 1 9 Yes 
        
        */

    function fun1(){
        var two =document.getElementById("two");
        two.onmousedown=function (event){
            //鼠标按键按下时触发
            //获得按下的是哪个键
            alert(event.button);
        }
    /*     two.onmouseup=function (){
            alert("onmouseup");
        } */
        /* two.onmouseover=function (){
            alert("onmouseover");
        }
        two.onmouseout=function (){
            alert("onmouseout");
        } */
        two.onmousemove=function (event){
            //alert("onmousemove");
            alert(event.clientX+"=="+event.clientY);
        } 
        
    }
        
</script>
</head>
<body onload="fun1();">
    <div id="two">
    
    </div>
</body>
</html>

 

 

25、dom中的事件06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //被支持的常用事件有哪些?
    /* onsubmit 当表单提交之前触发
        */

    function fun1(){
        var two =document.getElementById("two");
        two.onsubmit=function(event){
            alert(‘onsubmit‘);
            //做验证的话.如果验证失败,如何拦截表单提交?
            //拦截方式一:
                    //该事件是众多事件中最特殊的一个.
                    //该事件可以返回一个boolean型的值
                    // true==> 表单提交
                    // false ==> 拦截表单提交
                    //return false;
            //拦截方式二: 
                    //preventDefault() => 
                    
                event.preventDefault();
        }
    }
        
</script>
</head>
<body onload="fun1();">
    <form id="two" >
        <input type="text" name="name"  ><br/>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

 

 

26、dom中的事件07

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    div {
        border: 1px solid red;
    }
    #one {
        width:300px;
        height:300px;
    }
    #two {
        width:100px;
        height:100px;
    }
</style>
<script type="text/javascript">
    /* stopPropagation() 
        */

    function fun1(){
        var one =document.getElementById("one");
        var two =document.getElementById("two");
        one.onclick=function(){
            alert("oneoneoneone");
        }
        two.onclick=function(event){
            alert("twotwotwotwo");
            event.stopPropagation();
        }
    }
        
</script>
</head>
<body onload="fun1();">
    <div id="one" >
        <div id="two"></div>
    </div>
</body>
</html>

 

39、重新复习js之三

标签：nodename   添加   default   script   停止   数组   color   哪些   支持   

原文地址：http://www.cnblogs.com/weizhen/p/5991708.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！