JavaScript事件

最新推荐文章于 2021-06-09 21:32:50 发布

白井

最新推荐文章于 2021-06-09 21:32:50 发布

阅读量351

点赞数 1

本文链接：https://blog.csdn.net/csdMo/article/details/75041445

版权

For/In 循环

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

实例：

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

While 循环

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

}

查找页面中的内容

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的属性
}

}

onchange事件

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

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

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

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

JavaScript HTML DOM 事件

与鼠标相关的onmouseover 和 onmouseout 事件

以及onmousedown、onmouseup事件

<span id="ppp" οnmοuseοver="testH()" οnmοuseοut="testI()">请把鼠标移进来</span>
<div id="divJK" style="width:150px;height:200px;background-color:#9393ff" οnmοusedοwn="testJ()" οnmοuseup="testk()"><h1 id="DU">请长按<h1></div>
<hr>

<input type="text" οnfοcus="testL(this)" οnblur="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); //从父元素中删除子元素：
}

JavaScript Window - 浏览器对象模型

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

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

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

function winclose(){
alert(confirm("是否关闭页面"));
if(alert(confirm)==true)
window.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";

}