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 ...
随机推荐
- Python爬取腾讯疫情实时数据并存储到mysql数据库
思路: 在腾讯疫情数据网站F12解析网站结构,使用Python爬取当日疫情数据和历史疫情数据,分别存储到details和history两个mysql表. ①此方法用于爬取每日详细疫情数据 1 impo ...
- JDK14性能管理工具:jmap和jhat使用介绍
目录 简介 jmap clstats finalizerinfo histo dump jhat 总结 简介 我们在写代码的过程中,经常会遇到内存泄露的问题,比如某个集合中的对象没有被回收,或者内存出 ...
- 成长计划知识赋能 | 第九期：渐进式深入理解OpenHarmony系统
成长计划知识赋能直播第九期如约而至,面向OpenHarmony初中级开发者,解析OpenHarmony系统架构和驱动框架,助力开发者快速上手OpenHarmony系统开发. 详情见海报内容,资深软 ...
- 三七互娱《斗罗大陆：魂师对决》上线，Network Kit助力玩家即刻畅玩
三七游戏旗下的年度旗舰大作<斗罗大陆:魂师对决>现已开启全平台公测.8月1日,三七互娱技术副总监出席了HMS Core.Sparkle游戏应用创新沙龙,展示了在HMS Core Netwo ...
- Tailscale 的 TLS 证书过期，网站挂了 90 分钟！
3月7日,基于 WireGuard 的知名 VPN 厂商 Tailscale 的官方网站 tailscale.com 因 TLS 证书过期而中断服务约90分钟. 虽然影响有限,但这起事件还是在 Hac ...
- 看不懂来打我，vue3如何将template编译成render函数
前言 在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件,通过那篇文章我们知道了,template编译为render函数底层就是调用了@vue ...
- HarmonyOS“一次开发，多端部署“优秀实践——玩机技巧，码上起航
随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间按需调用.互助共享,让用户享受无缝的全场景体验.作为应用开发者,广泛的设备类型也能为应用带来广大的潜 ...
- 【开发者说】XstoryMaker快速书写剧本场景动画
原文:https://mp.weixin.qq.com/s/63V0dfD2IufbX92JeD-G_A,点击链接查看更多技术内容. [开发者说]栏目是为HarmonyOS开发者提供的展示和分享平台, ...
- jenkins 持续集成和交付——pipeline（五）
前言 整理一下pipeline. 正文 介绍 什么是pipeline呢? 根据前面的所得,我们知道,以前都是模板形式,但是如果有些复杂的项目,需要用更加自定义的写法,那么就有了pipeline,也就是 ...
- arp 的概念解析
前言 这里基于arp的基础概念,请先看前面那一节. 正文 看图: 和前面一样去解析地址. 以太网目的地址:就是mac地址. 在发送arp包的时候呢,这个mac地址就是全部是1,因为不知道对方地址是啥. ...