JavaScript事件

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例：

function testA(){
var user={username:"狗子",userid:1997,usersex:1,suerage:19};//定义javascript对象
var x;
var txt="";
for(x in user){//遍历对象的的属性，只能作用于对象
txt=txt+user[x];//把属性赋予txt
alert(txt); //输出属性
}
}

<input type="button" value="for/in" onclick="testA()"/>触发事件

While 循环

function testB(){
var car=["aaa","bbb","ccc","ddd"];//定义数组car
var i=0;
while(car[i]){//条件为car[i]不为空
alert(car[i]+"<br>");//逐个打印数组
i++;
}

}

<input type="button" value="数组while" onclick="testB()"/>

查找页面中的内容

function testD(){
var y =document.getElementById("aaa");
var x=y.getElementsByTagName("input");//查找 id="body" 的元素，然后查找 "body" 中的所有 <input> 元素：

alert(x.length);//获取input的数量
for(var i=0;i<x.length;i++){
alert(x[i].type+" "+x[i].value+" "+x[i].onclick+" ");//逐个打印input的属性
}

}

<input type="button" value="查找" onclick="testD()"/>

onchange事件

function myFunction()
{
var x=document.getElementById("fname");//onchange事件
x.value=x.value.toUpperCase();
}

<div>
  请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
  </div>

selectedIndex为当前选中应用于<select><>

function testG(){
var sheng=document.getElementById("select");
alert(sheng.options[sheng.selectedIndex].value);//selectedIndex为当前选中
}

<div>
  <input type="button" onclick="testG()" value="点击"/><br>
  省 <select id="select">
  <option value="">请选择</option>
  <option value="四川1">四川</option>
  <option value="山东1">山东</option>
  <option value="辽宁1">辽宁</option>
  <option value="黑龙江1">黑龙江</option>
  <option value="河北1">河北</option>
  <option value="海南1">海南</option>
  </select>
  </div>

JavaScript HTML DOM 事件

与鼠标相关的onmouseover 和 onmouseout 事件

以及onmousedown、onmouseup事件

function testH(){
var H=document.getElementById("ppp");
H.innerHTML="请把鼠标移出去；";
}
function testI(){
var I=document.getElementById("ppp");
I.innerHTML="请把鼠标移进来；";
}
function testJ(){
var J=document.getElementById("DU");
J.innerHTML="请放松";
var divJ=document.getElementById("divJ");
}
function testk(){
var K=document.getElementById("DU");
K.innerHTML="请长按";
var divK=document.getElementById("divJK");
}
function testL(L){
L.value="获得焦点";
}
function testM(M){
M.value="失去焦点";
}

<span id="ppp" onmouseover="testH()" onmouseout="testI()">请把鼠标移进来</span>
  <div id="divJK" style="width:150px;height:200px;background-color:#9393ff" onmousedown="testJ()"onmouseup="testk()"><h1 id="DU">请长按<h1></div>
<hr>

<input type="text" onfocus="testL(this)" onblur="testM(this)"/>获得焦点与失去焦点<br>

创建新的 HTML 元素

function testN(){
var para=document.createElement("p");//这段代码创建新的 <p> 元素：
var node=document.createTextNode("这是新创建的P标签。");//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
para.appendChild(node);//向 <p> 元素追加这个文本节点：
var element=document.getElementById("div");//向一个已有的元素追加这个新元素。这段代码找到一个已有的元素
element.appendChild(para);这段代码向这个已有的元素追加新元素：
}

删除已有的 HTML 元素

function testO(){
var pars=document.getElementById("div");//找到 id="div" 的元素：
var pI=document.getElementById("p1");//找到 id="p1" 的 <p> 元素
pars.removeChild(pI);//从父元素中删除子元素：
}

<div id="div">
<input type="button" onclick="testN()" value="添加"/>
<input type="button" onclick="testO()" value="删除"/>
<P id="p1">段落1</P>
<p id="p2">段落2</p>

</div>

JavaScript Window - 浏览器对象模型

//window.open() - 打开新窗口

function winOpen(){
window.open("http://www.baidu.com");
}

window.close() - 关闭当前窗口

function winclose(){
alert(confirm("是否关闭页面"));
if(alert(confirm)==true)
window.close() ;


}

<input type="button" onclick="winOpen()" value="open()"/>
<input type="button" onclick="winclose()" value="close"/>

//把输入的内容在百度搜索中打开

function testR(){

var username = document.getElementById("username").value;

location.href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+username+"&rsv_pq=c4737bc00003efef&rsv_t=9a72KBsxTIOpw5GFE8bRXiHpcl4cMdCButFjdP%2Fo4FXeEQ9ls0yZCxjxCZw&rqlang=cn&rsv_enter=0&prefixsug=%25E7%25BE%258E&rsp=0";

}

<form>
用户名：<input type="text" id="username"/>
<input  type="button" value="提交" onclick="testR()"/>
</form>

//返回下一个页面

function bank(){
window.history.back();
}

<input type="button" onclick="bank()" value="返回"/>

//跳转到下一个界面
function go(){
window.history.forward();
}
<input type="button" onclick="go()" value="前进"/>