JS基础--JavaScript实例集锦（初学）

最新推荐文章于 2022-07-21 14:16:28 发布
最新推荐文章于 2022-07-21 14:16:28 发布
阅读量105 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/cheryshi/p/8418884.html
本文介绍 JavaScript 中 DOM 的基本操作方法，包括子节点、父节点、元素创建及移除等，并展示了如何使用 JSON 对象进行数据处理。此外还介绍了通过键盘事件控制页面元素的应用。

1.子节点childNodes：

<!DOCTYPE html>
<html>
<head>
    <title>childNodes</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        //alert(oUl.childNodes.length);
        for(var i=0;i<oUl.childNodes.length;i++){
            /*if(oUl.childNodes[i].nodeType==1){
                oUl.childNodes[i].style.background='red';
            }*/    
            oUl.children[i].style.background='red';
        }
        
        
    }
</script>
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2.父节点parentNodes

<!DOCTYPE html>
<html>
<head>
    <title>ParentNpdes</title>
    <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aA=document.getElementsByTagName('a');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    this.parentNode.style.display='none';
　　　　　　　　　　　　//设置a的父节点li为隐藏
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>gfhfhghgh<a href="javascript:;">hide</a></li>
        <li>hhhh<a href="javascript:;">hide</a></li>
        <li>hhbb<a href="javascript:;">hide</a></li>
        <li>erere<a href="javascript:;">hide</a></li>
        <li>gggg<a href="javascript:;">hide</a></li>
    </ul>
</body>

3.className

<!DOCTYPE html>
<html>
<head>
    <title>className</title>
</head>
<script type="text/javascript">
    function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName('*');//all elements
        var aResult=[];//save the find elements
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var aOn=getByClass(oUl,'on');
        for(var i=0;i<aOn.length;i++){
            aOn[i].style.background='yellow';
        }
    }
</script>
<body>
<ul id="ul1">
    <li></li>
    <li class="on"></li>
    <li></li>
    <li class="on"></li>
    <li></li>
</ul>
</body>
</html>

4.removeChild方法

<!DOCTYPE html>
<html>
<head>
    <title>removeChild</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var aA=document.getElementsByTagName('a');
        var oUl=document.getElementById('ul1');
        for(var i=0;i<aA.length;i++){
            aA[i].onclick=function(){
            oUl.removeChild(this.parentNode);
            }
        }
    }
</script>
<body>
    <ul id="ul1">
        <li>ssss  <a href="javascript:;">remove</a></li>
        <li>tryyy  <a href="javascript:;">remove</a></li>
        <li>kkkk  <a href="javascript:;">remove</a></li>
        <li>ggg   <a href="javascript:;">remove</a></li>
        <li>hjjhk  <a href="javascript:;">remove</a></li>
    </ul>

</body>
</html>

5.使用函数，便于获取css样式

<!DOCTYPE html>
<html>
<head>
    <title>css function</title>
    <style type="text/css">
        #div1{width:200px;height: 200px;background: red;}
    </style>
    <script type="text/javascript">
        //获取哪个，哪个样式
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }

        }
        function css(obj,attr,value){
            if(arguments.length==2){
                return getStyle(obj,attr);
            
        }else if(arguments.length==3){
            obj.style[attr]=value;
        }
    }
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                css(oDiv,'background','green');
                alert(css(oDiv,'width'));
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btn" value="type">
    <div id="div1"></div>
</body>
</html>

6.创建DOM元素

<!DOCTYPE html>
<html>
<head>
    <title>create Dom elements</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var OBtn=document.getElementById('btn');
        var oUl=document.getElementById('ul1');
        var oTxt=document.getElementById('txt1');
        OBtn.onclick=function(){
            var oLi=document.createElement('li');
            //oUl.appendChild(oLi);创建li元素
            var aLi=oUl.getElementsByTagName('li');//获取所有的li元素
            oLi.innerHTML=oTxt.value;//写入文字
            if(aLi.length==0){
                oUl.appendChild(oLi);//如果ali的长度为0，则新添加一个li元素
            }else{
                oUl.insertBefore(oLi,aLi[0]);//如果不为0，则在li前面添加新的li元素

            }
            
        }
    }
</script>
<body>
    <input type="text" id="txt1">
    <input id="btn" type="button" value="createli">
    <ul id="ul1"></ul>
</body>
</html>

7.JS的json运用

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
</head>
<script type="text/javascript">
    var obj={a:5,b:6,c:'abc',d:[1,2,3,4]};
    //var arr=[{a:5,b:12},{a:6,b:19}];
    //alert(obj.d[0]);
    //alert(arr[1].b);
    var attr='';
    for(attr in obj){
        alert(attr+'='+obj[attr]);
    }
</script>
<body>

</body>
</html>

如果是Json只能用 for...... in;如果是array可以用for循环和for...in，一般array用for循环

8.JS操作键盘，keycode
1.运用数字所在的键盘值，来设置输入值只为数字

<!DOCTYPE html>
<html>
<head>
    <title>Only Input Number</title>
</head>
<script type="text/javascript">
    window.onload=function(){
    var oTxt=document.getElementById('txt1');
    oTxt.onkeydown=function(ev){
        var oEvent=ev||event;
        //alert(oEvent.keyCode);
        //0---48 9----57 small keyboard 0---96 9----105
        if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) {
            return false;
        }
    

    };
};
</script>
<body>
<input type="text" id="txt1">
</body>
</html>

2.利用键盘上的上下左右键控制物体的运动

<!DOCTYPE html>
<html>
<head>
    <title>keycode-div</title>
    <style type="text/css">
    #div1{width:100px;height: 100px;background: #ccc;position: absolute;}
</style>
<script type="text/javascript">
    document.onkeydown=function(ev){
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');
        //alert(oEvent.keyCode);
        //← 37→ 39 ↓ 40 ↑38
        if(oEvent.keyCode==37){
            oDiv.style.left=oDiv.offsetLeft-10+'px';
        }else if(oEvent.keyCode==39){
            oDiv.style.left=oDiv.offsetLeft+10+'px';
        }else if(oEvent.keyCode==38){
            oDiv.style.top=oDiv.offsetTop-10+'px';
        }else if(oEvent.keyCode==40){
            oDiv.style.top=oDiv.offsetTop+10+'px';
        }



    }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

3.使用KeyCode控制输入的值只能是数字

<!DOCTYPE html>
<html>
<head>
    <title>Only Input Number</title>
</head>
<script type="text/javascript">
    window.onload=function(){
    var oTxt=document.getElementById('txt1');
    oTxt.onkeydown=function(ev){
        var oEvent=ev||event;
        //alert(oEvent.keyCode);
        //0---48 9----57 small keyboard 0---96 9----105
        if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) {
            return false;
        }
    

    };
};
</script>
<body>
<input type="text" id="txt1">
</body>
</html>

5.使用keycode的ctrl+enter提交留言

<!DOCTYPE html>
<html>
<head>
    <title>ctrl+enter submit the messages </title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById('btn');
        var oTxt1=document.getElementById('txt1');
        var oTxt2=document.getElementById('txt2');
        oBtn.onclick=function(){
            oTxt1.value+=oTxt2.value+'\n';
            oTxt2.value='';
        };
        oTxt2.onkeydown=function(ev){
            var oEvent=ev||event;
            if(oEvent.ctrlKey&&oEvent.keyCode==13){
                oTxt1.value+=oTxt2.value+'\n';
                oTxt2.value='';
            }
        }
    }
</script>
<body>
    <textarea id="txt1" rows="10" cols="40"></textarea><br/>
    <input type="text" id="txt2">
    <input id="btn" type="button" value="Note">

</body>
</html>

9.利用window的scrollTop去判断物体所在的位置和弹出自定义的右键菜单

<!DOCTYPE html>
<html>
<head>
    <title>siderbarAd</title>
    <style type="text/css">
        #div1{width:100px;height:100px;position: absolute;right: 0;background: red;}
    </style>
    <script type="text/javascript">
    window.onresize=window.onload=window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
            oDiv.style.top=scrollTop+t+'px';
        }
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>弹出自定义的右键菜单</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #ul1{width: 100px;background: #ccc;border:1px solid black;position: absolute;display: none;}
    </style>
    <script type="text/javascript">
        document.oncontextmenu=function(ev){
            var oEvent=ev||event;
            var oUl=document.getElementById('ul1');
            var scrollTop=document.documentElementscrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElementscrollLeft||document.body.scrollLeft;
            oUl.style.display="block";
            oUl.style.left=oEvent.clientX+scrollLeft+'px';
            oUl.style.top=oEvent.clientY+scrollTop+'px';
            return false;
        };
        document.onclick=function(){
            var oUl=document.getElementById('ul1');
            oUl.style.display='none';
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>Login</li>
        <li>Back to home</li>
        <li>Logout</li>
        <li>add in VIP</li>
        <li>cancel</li>
</ul>
</body>
</html>

 

转载于:https://www.cnblogs.com/cheryshi/p/8418884.html

JS入门小案例
含笑
09-05 2470
js计算指定日期第几天？ js计算阶乘 js求素数 js求斐波那契数
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5777
JS基础案例
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用标记对直接屏蔽法 1.7.2 使用和标记对给出提示信息 1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第2章 JavaScript语言入门 2.1 编程准备 2.1.1 编程术语 2.1.2 脚本执行顺序 2.1.3 大小写敏感 2.1.4 空白字符 2.1.5 分号 2.1.6 块 2.2 数值类型 2.2.1 整型和浮点数值 2.2.2 八进制和十六进制 2.3 变量 2.3.1 变量标识符 2.3.2 变量申明 2.3.3 变量作用域 2.4 弱类型 2.5 基本数据类型 2.5.1 Number型 2.5.2 String型 2.5.3 Boolean型 2.5.4 Undefined型 2.5.5 Null型 2.5.6 Function型 2.6 组合类型 2.6.1 Array型 2.6.2 Object型 2.7 运算符 2.7.1 赋值运算符 2.7.2 基本数学运算符 2.7.3 位运算符 2.7.4 位移运算符 2.7.5 自加和自减 2.7.6 比较运算符 2.7.7 逻辑运算符 2.7.8 逗号运算符 2.7.9 空运算符 2.7.10 ?...:运算符 2.7.11 对象运算符 2.7.12 typeof运算符 2.7.13 运算符优先级 2.8 核心语句 2.8.1 基本处理流程 2.8.2 if条件假设语句 2.8.3 switch流程控制语句 2.8.4 for循环语句 2.8.5 while和do-while循环语句 2.8.6 使用break和continue进行循坏控制 2.8.7 with对象操作语句 2.8.8 使用for…in进行对象循坏 2.8.9 含标签的语句 2.9 函数 2.9.1 函数的基本组成 2.9.2 全局函数与局部函数 2.9.3 作为对象的函数 2.9.4 函数递归调用 2.9.5 语言注释语句 2.9.6 函数应用注意事项 2.10 本章小结 第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 3.4 事件处理器的返回值 3.5 事件处理器设置的灵活性 3.6 现代事件模型与Event对象 3.7 IE4中的Event对象 3.7.1 对象属性 3.7.2 事件上溯 3.7.3 阻止事件上溯 3.7.4 事件改向 3.8 NN4中的Event对象 3.8.1 对象属性 3.8.2 事件捕获 3.8.3 关闭事件捕获 3.8.4 事件传递 3.9 DOM的解决之道
JS基础案例
Python1One的博客
09-17 221
JS基础案例 js生成验证码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
掌握JavaScript编程：js-exercises练习集锦
1. JavaScript基础知识 - JavaScript是一种高级的、解释执行的编程语言，它遵循ECMAScript标准，并广泛用于网页开发中，提供了动态交互功能。 - 了解JavaScript的基本语法，包括变量声明、数据类型、运算符、控制...
JavaScript 实例集锦：网页开发必备
"常见script实例提供了网页...这些JavaScript实例对于初学者和开发者来说都是非常实用的，可以帮助他们快速实现常见的网页交互效果和功能。在实际开发中，可以根据需求灵活运用和修改这些代码片段，以提高开发效率。
300个炫酷JavaScript效果实例集锦
2. 直接可用的代码示例：这个集合中的每一个实例都包含了可以直接插入网页中使用的代码，这对于初学者来说是非常友好的，因为它可以帮助他们快速理解JavaScript代码如何工作。 3. 丰富的效果种类：包含300个不同的...
JavaScript精彩实例集锦：343个编程案例解析
6. 学习资源的有效利用：最后，介绍如何利用这类资源文件，比如压缩包子文件“MYJS”，来组织和学习JavaScript实例。包括文件结构的介绍、如何在项目中复用这些实例、以及如何通过编写实例来扩展自己的编程能力。 ...
JavaScript入门实用实例集锦
根据提供的文件信息，可以看出该文件是一个关于JavaScript的学习资源，它包含了100个实例，涵盖了JavaScript的对象、高级特性以及基础知识点。以下是对于这些知识点的详细介绍： ### JavaScript基础知识点： 1. **...
js基础案例集合
Build Kay的博客
07-21 383
代码】js基础案例集合。
js基础小例子
Vivian_shuang的博客
07-12 947
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> input type="text" name="txt1" id="txt1" value="" /> input type="text" name="txt2" id="txt2" value="" /
JS小案例总结（JS基础案例）
a_l_f_的博客
08-08 8557
JS小案例总结JS小案例总结案例一：JS实现tab选项卡功能案例二：JS实现盒子拖拽功能案例三：JS实现导航条吸顶效果案例四：JS实现图片懒加载结构案例五：JS实现简易弹幕功能案例六：JS实现自动滚动新闻列表 JS小案例总结 案例一：JS实现tab选项卡功能 描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。 HTML代码如下： <body> <div id="tabs"> <div id="options">
js常用基础案例整理(持续更新)
热门推荐
weixin_41086056的博客
11-17 1万+
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0
JS基础&案例
qq_44331253的博客
03-05 7277
目录JS基础JS的作用JS的组成JS引入常用的一些方法变量数据类型算数运算函数JS事件事件介绍常见事件事件绑定普通函数方式匿名函数方式事件使用JS的BOMBOM里面的五个对象window: 窗体对象navigator:浏览器导航对象screen:屏幕对象history:历史对象location:当前路径信息JS的DOM操作标签获取标签操作标签操作标签体 JS基础 什么是JS JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。 JS语言和Java
javascript 基础案例（循环）
阿牛的博客
02-22 1898
今天写几个基本的js案例，熟悉一下js中的循环。
js基础精选案例
m0_64492064的博客
04-09 1761
主要是自己用来复习用的。如果想要练习的小伙伴也可以参考一下哦~ 1.[red','blue','red','green','pink','red'],求red出现的位置和次数 //思路是 先把第一个red的坐标找出来 然后遍历 每次查找的位置是上一个位置+1； var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = arr.indexOf('red'); //0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值