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面试题】Hibernate
六.Hibernate 50)简述一下 hibernate 的开发流程 第一步:加载 hibernate 的配置文件,读取配置文件的参数(jdbc 连接参数,数据 库方言,hbm 表与对象关系映射文件 ...
- #线性筛，斐波那契数列，GCD#BZOJ 2813 奇妙的Fibonacci
题目 有一个斐波那契数列,满足 \[F_n=\begin{cases}1\qquad (n==1)\\1\qquad (n==2)\\F_{n-1}+F_{n-2}\qquad (n>2)\en ...
- #区间dp#CF1114D Flood Fill
题目 有一个长度为\(n\)的颜色序列,在游戏前选择一个固定的位置, 若当前轮该位置的颜色为\(x\),那么可以将所有颜色为\(x\)的连通块改为任意颜色, 问最少进行多少轮使得区间\([1,n]\) ...
- Go 语言基础：包、函数、语句和注释解析
一个 Go 文件包含以下几个部分: 包声明 导入包 函数 语句和表达式 看下面的代码,更好地理解它: 例子 package main import "fmt" func main( ...
- Qt通过UDP发送广播
// x.h QUdpSocket* udp = nullptr; // UDP对象 void createUdpAndSendData(); // 创建UDP对象和发送广播数据 void dropU ...
- 【有奖互动】开发者版本新特性，你期待哪些更新？#HDC.Together2023#
<hdc.together< span="">>华为开发者大会2023再次启航,将于8月4日~6日在中国松山湖举办,承载万千期待,开启崭新时代.聚焦新版本. ...
- centos8 \CentOS 9 Stream \Oracle Linux8\Oracle Linux 9 rpm 安装mysql8.0.28 mysql8.0.34
centos8 rpm 安装mysql8.0.28 检查 检测系统是否自带安装 MySQL 命令如下: rpm -qa | grep mysql 如果如下存在已安装的包,就需要卸载 mysql80-c ...
- 重新点亮linux 基本软件————防火墙[一]
前言 简单介绍一下linux的防火墙. 正文 防火墙分类: 软件防火墙和硬件防火墙 包过:过滤防火墙和应用层防火墙 iptables 的表和链 规则表: filter nat mangle raw f ...
- mysql 重新整理——索引优化explain简单介绍 [八]
前言 做开发的我们晓得一个道理,就是说不是说你说这东西性能稳定就是性能稳定,你说发版本就发版本,这个是测试部门说了算的. 那么索引优化的关键也就是说一个我们来逐步调优,调优就要知道我们这条语句在mys ...
- mysql 重新整理——性能下降的原因[四]
前言 什么是性能下降? 其实就是代码运行的环境变了,那么环境变化是什么? 比如cpu上升了,内存满了.有或者表中数量增加了,量变了. 其实这些是dba干的,但是呢,我们也需要去了解下,并且优化我们的c ...