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 ...
随机推荐
- list集合中的实现类ArrayList
如上图所示,list集合是 Collection 接口的子接口,它是一个元素有序(每个元素都有对应的顺序索引,第一个元素索引为0).且可重复的集合,他有三个实现类,如下: ArrayList add方 ...
- #单调栈#CodeChef Meteor
METEORAK 分析 设 \(dp[l][r]\) 表示第 \(l\) 到 \(r\) 行的答案,可以发现它由 \(f[l][r],dp[l][r+1],dp[l+1][r]\) 转移而来. 关键就 ...
- #杜教筛，欧拉函数,整除分块#HDU 6683 Rikka with Geometric Sequen
题目 由\(1,2,\dots,n-1,n\)组成的序列中有多少个子序列是等比数列\((n\leq 5*10^{17})\) 分析 分类讨论,先设公比为\(q=\frac{i}{j}[gcd(i,j) ...
- 使用OHOS SDK构建flac
参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/xiph/flac 进入 ...
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Scan Kit
1.问题描述 Scan Kit扫描专用底层码流接口需要鉴权,鉴权失败后功能还能用吗? 解决方案 如果已经申请过白名单,因为异常导致的鉴权失败会优先放通,保障业务成功. 2.问题描述 调用Scan Ki ...
- 关于集群节点timeline不一致的处理方式
关于集群节点 timeline 不一致的处理方式 本文出处:https://www.modb.pro/db/400223 在 PostgreSQL/MogDB/openGauss 数据库日常维护过程中 ...
- Python语言Numpy包之Meshgrid 函数
Meshgrid 函数的基本用法 在 Numpy 的官方文章里, meshgrid 函数的英文描述也显得文绉绉的,理解起来有些难度.可以这么理解, meshgrid 函数用两个坐标轴上的点在平面上画网 ...
- 重新点亮linux 命令树————目录相关[三]
前言 简单介绍一些目录命令 正文 主要介绍三个命令 cd 路径切换 cd 这个命令用于切换当前目录的. 切换有三种形式. 以/开头的是绝对路径,比如/home. 以.开头的是相对路径,比如说./ser ...
- 对于小程序canvas在某些情况下touchmove 不能触发导致的签名不连续替代方案(企微)
1.问题 微信开放社区链接 尝试过新版canvas,在企业微信中签名依然是依然断触,有问题的手机是iphoe15,系统版本以及企微版本微信版本均与签名正常的手机一致,但是那个手机就是无法正常签字,在微 ...
- 剑指offer51(Java)-数组中的逆序对（困难）
题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 示例1: 输入: [7,5,6,4] 输出: 5 限制: 0 &l ...