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 ...
随机推荐
- STAR法则是什么（如何把一件事表达清楚）
STAR法则,即为Situation Task Action Result的缩写,具体含义是: Situation: 事情是在什么情况下发生 Task: 你是如何明确你的任务的 Action: 针对这 ...
- MarkDown常用语法Typora
一级标题:左右分别 # 二级标题:左右分别 ## 三级标题 四级标题 五级标题 六级标题 加粗:左右分别 ** 斜体:左右分别 * 斜体加粗:左右分别 *** 删除:左右分别 ~~ "> ...
- 性能对比 Go、Python、Perl、Ruby、Rust、C/C++、PHP、Node.js、Java.. 等多编
1. 有人说 Python 性能没那么 Low? 这个我用 pypy 2.7 确认了下,确实没那么差, 如果用 NumPy 或 其它版本 Python 的话,性能更快.但 pypy 还不完善,pypy ...
- [Unity] 为什么文件名和类名需要相同
挂载脚本时文件名和类名的关联方式 写过Unity脚本的人应该都知道,挂载脚本的文件名和类名必须相同 今天写新功能的时候偶然发现了这个规则的底层逻辑 并且发现这个规则并非必须的,实际上Unity是根据脚 ...
- #Tarjan，树的直径#CF1000E We Need More Bosses
题目 给定一个\(n\)个点\(m\)条边的无向图,找到两个点\(s,t\),使得\(s\)到\(t\)必须经过的边最多 分析 桥就是必须经过的边,考虑给无向图缩点, 按照桥建一棵树,那么就转换成了求 ...
- OpenHarmony父子组件双项同步使用：@Link装饰器
子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定. 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用. 概述 @Link装饰的变量与其父组件中的数 ...
- C++ 字符串完全指南：学习基础知识到掌握高级应用技巧
C++ 字符串 字符串用于存储文本. 一个字符串变量包含由双引号括起来的一组字符: 示例 创建一个 string 类型的变量并为其赋值: string greeting = "Hello&q ...
- openGauss数据与PostgreSQL的差异对比
openGauss 数据与 PostgreSQL 的差异对比 前言 openGauss 数据库已经发布 2.0.1 版本了,中启乘数科技是一家专业的专注于极致性能的数据库服务提供商,所以也关注 ope ...
- openGauss资源池化开发者入门指南(一)
openGauss资源池化开发者入门指南(一) 一.内容简介 openGauss 资源池化是 openGauss 推出的一种新型的集群架构.通过 DMS 和 DSS 组件,实现集群中多个节点的底层存储 ...
- 4天带你上手HarmonyOS ArkUI开发
本次HarmonyOS ArkUI入门训练营课程--健康生活实战篇,手把手教大家如何制作一个合理膳食的APP前端Demo! 课程实战样例通过ArkUI声明式UI开发框架实现,只需用几行简单直观的声明式 ...