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

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>

JS基础--JavaScript实例集锦（初学）的更多相关文章

js基础--javaScript数据类型你都弄明白了吗？绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
JS基础---->javascript的基础(二)
记载javascript的一些基础的知识.我们在春风秋雨中无话不说,又在春去秋来中失去了联系. js中string类型一.字符方法:charAt() 和 charCodeAt() var strin ...
JS基础---->javascript的基础(一)
记录一些javascript的基础知识.只是一起走过一段路而已,何必把怀念弄的比经过还长. javascript的基础一.在检测一个引用类型值和 Object 构造函数时, instanceof 操 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象
1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:
二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应
1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法
1.变量定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...
二、JavaScript语言--JS基础--JavaScript入门篇
1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...
JS基础——JavaScript原型和原型链及实际应用
构造函数 function Stu(name,age){ this.name=name; this.age=age; } instanceof 查看引用类型对象是属于哪个构造函数的方法,通过__pro ...

随机推荐

Redis redis-cli 你需要知道这些有用的命令
一.--stat 输出当前 redis 服务节点状态命令:redis-cli -h host -p port --stat 输出: 连续输出,默认interval 1s 键数 | 内存 | 客户端数 ...
VS Qt扩展插件下载地址
使用vs开发qt项目,需要安装qt插件 QT插件下载地址:https://mirrors.ustc.edu.cn/qtproject/official_releases/vsaddin/
使用 K8S 部署 RSS 全套自托管解决方案- RssHub + Tiny Tiny Rss
前言什么是 RSS? RSS 是一种描述和同步网站内容的格式,是使用最广泛的 XML 应用.RSS 搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者.发布一个 RSS 文件后,这个 ...
centos7或者centos8下安装google-chrome谷歌浏览器亲测成功 20220302
第一步: wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm 第二步: 安装 Google ...
Effective Python：第1条　查询自己使用的Python版本
命令行: python --version:通常可查看python2的版本: python3 --version:通常可查看python3的版本: 代码: import sys print(sys.v ...
webkit简介
WebKit是一款开源的浏览器引擎,主要用于渲染HTML网页和执行JavaScript代码.WebKit起源于苹果公司,最初是为了开发Safari浏览器而创建的.现在,它已经成为许多浏览器(如苹果的S ...
重磅官宣：Nacos2.0发布，性能提升10倍
简介: Nacos2.0 作为一个跨代版本,彻底解决了 Nacos1.X 的性能问题,将性能提升了 10 倍. 作者:席翁继 Nacos 1.0 发布以来,Nacos 迅速被成千上万家企业采用,并 ...
GRPC: 如何实现分布式日志跟踪？
简介: 本文将介绍如何在 gRPC 分布式场景中,实现 API 的日志跟踪. 介绍本文将介绍如何在 gRPC 分布式场景中,实现 API 的日志追踪. 什么是 API 日志追踪? 一个 API 请 ...
WPF 已知问题 InputEventArgs 的 Timestamp 属性是静态的导致事件之间相互影响
本文记录一个 WPF 已知的设计问题,当前此问题已经被大佬修复,这个设计问题刚好属于比较边缘的模块,我写了这么多年的代码还没有踩到这个坑一次,也没有听到有谁提到这个坑远古时候,不知道大佬是故意还是失 ...
WPF 编写一个测试 WM_TOUCH 触摸消息延迟的应用
我听说在 Win10 到 Win11 的系统版本左右,微软加上了一大波触摸性能优化,准确来说是 HID 性能优化.我想测试一下在这些系统下,采用从 Windows 消息接收到 WM_TOUCH 触摸消 ...

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

JS基础--JavaScript实例集锦（初学）的更多相关文章

随机推荐

热门专题