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 ...
随机推荐
- Java 实现OCR扫描/识别图片文字
图片内容一般无法编辑,如果想要读取图片中的文本,我们需要用到OCR工具.本文将介绍如何在Java中实现OCR识别读取图片中的文字. 所需工具: IDEA Spire.OCR for Java - Ja ...
- 高抗干扰抗噪，段码LCD液晶低功耗驱动IC-VK2C23B，兼容市面上16C23
VK2C23是一个点阵式存储映射的LCD驱动器,可支持最大224点(56SEGx4COM)或者最大416点(52SEGx8COM)的LCD屏. 单片机可通过I2C接口配置显示参数和读写显示数据,也可通 ...
- SSE与AVX指令基础介绍与使用
SSE与AVX指令基础介绍与使用 SSE/AVX指令属于Intrinsics函数,由编译器在编译时直接在调用处插入代码,避免了函数调用的额外开销.但又与inline函数不同,Intrinsics函数的 ...
- 使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频（未完待续）
使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频 1. 背景 最近项目上有个需求,需要实现:录音.回放录音.实现音频可视化效果.上传wav格 ...
- #倒推#洛谷 3998 [SHOI2013]发微博
题目 分析 考虑\(x\)看到\(y\)的消息条数等于互删时\(y\)发的消息条数减去互加时\(y\)发的消息条数 为了让最后\(x\)和\(y\)不再为好友,那可以将操作反过来,因为一开始他们一定不 ...
- #环#nssl 1487 图
题目 在一个\(n\)个节点\(n\)条边的连通图中, 每条边的权值为两个端点的权值的和. 已知各边权值,求各点权值 (保证环的大小一定是奇数) 分析 考虑断掉环的某一条边,设根节点的答案为\(ax+ ...
- 【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
@Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式.这就是我们本章要介绍的内容stateStyles(又称为:多态样式). ...
- Python 学习路线：介绍、基础语法、数据结构、算法、高级主题、框架及异步编程详解
Python 介绍 Python 是一种 高级 的.解释型 的.通用 的编程语言.其设计哲学强调代码的可读性,使用显著的缩进.Python 是 动态类型 和 垃圾收集 的. 基本语法 设置 Pytho ...
- Qt 排序 QSort
一.对整形排序 // qSort 对整形排序 QList<int> list; list << 1 << 3 << 19 << 0 < ...
- 牛蛙！GoFrame2.7正式版的监控组件真是及时雨
声明:本文首发在同名公众号:王中阳Go,未经授权禁止转载. GoFrame框架今天发布了v2.7.0正式版本啦! 最大看点 本次版本最大的看点是提供了metric监控组件,主库提供了接口化的metri ...