JS
续day0711
- 循环(while,for)
/*while循环语法*/
while (条件)
{
需要执行的代码
}
/*for循环语法*/
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
例子:
<!--for-->
<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮,将代码块循环五次:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
- JS事件
- onchange 事件
<script>
function testChange(){
var change=document.getElementById("change");
alert("你改变了值 ");
}
</script>
<body>
<input id="change" type="text" value="qinbo" onchange="testChange()"/>
</body>
结果:
JS事件
- onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
- onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
- onload 和 onunload 事件可用于处理 cookie。
- onload 和 onunload 事件
JS事件
- onfocus和onblur事件
- onfocus当鼠标焦点聚集在标签容器上面时触发
- onblur当标签容器上面失去鼠标焦点时触发
- onfocus和onblur事件
/*获得焦点*/
<script>
function testFocus(){
var change=document.getElementById("change");
change.style.color="red";
}
/*失去焦点*/
function testdisFocus(){
var change=document.getElementById("change");
change.style.color="black";
}
</script>
<body>
<input id="change" type="text" value="qinbo" onfocus="testFocus()" onblur="testdisFocus()"/>
</body>
效果图:
鼠标光标在上面的时候
鼠标光标不在上面的时候
- JS事件
- onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<script>
/*当鼠标移上去的时候触发 */
function testOMO(){
var test =document.getElementById("OMO");
test.style.background="green";
test.innerHTML="OMO";
}
/*当鼠标移走的时候触发*/
function testOMOut(){
var test =document.getElementById("OMO");
test.style.background="#666";
test.innerHTML="OMOut";
}
</script>
<body>
<div id="OMO" style="background:#666;width:100px;height:30px;font-size:30px;color:#fff" onmouseover="testOMO()" onmouseout="testOMOut()">OMOut</div>
</body>
效果图:
当鼠标移上去的时候
当鼠标移走的时候
- JS事件
- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件
<script>
/*当鼠标按下去的时候触发 */
function testOMD(){
var test =document.getElementById("OMDU");
test.style.background="green";
test.innerHTML="OMD";
}
/*当鼠标松开的时候触发*/
function testOMU(){
var test =document.getElementById("OMDU");
test.style.background="#666";
test.innerHTML="OMU";
}
</script>
<body>
<div id="OMDU" style="background:#666;width:60px;height:30px;font-size:30px;color:#fff" onmousedown="testOMD()" onmouseup="testOMU()">OMU</div>
</body>
- JS节点
- 创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
- 创建新的 HTML 元素
<script>
/*向某个标签容器里添加节点 */
function testNode(){
var node=document.getElementById("NODE");
var newnode=document.createElement("p");
newnode.innerHTML="我是新的节点";
node.appendChild(newnode);
}
</script>
<body>
<div id="NODE">
<span id="SPAN">第一个段落</span>
<span>第二个段落</span>
</div>
<button onclick="testNode()">测试add</button>
</body>
效果图:
- JS节点
- 删除和修改已有的 HTML 元素
如需删除 HTML 元素,您必须首先获得该元素的父元素。
- 删除和修改已有的 HTML 元素
<script>
/*在某个标签容器里删除节点 */
function testRMNode(){
//var node=document.getElementById("NODE");
var oldnode=document.getElementById("SPAN");
var node=oldnode.parentNode;
node.removeChild(oldnode);
}
/*在某个标签容器里修改节点 */
function testRCNode(){
var node=document.getElementById("NODE");
var oldnode=document.getElementById("SPAN");
var newnode=document.createElement("p");
newnode.innerHTML="我是来替换节点的 ";
node.replaceChild(newnode, oldnode);
}
</script>
<body>
<button onclick="testRMNode()">测试remove</button>
<button onclick="testRCNode()">测试replace</button>
</body>
删除节点的效果图:
修改节点的效果图:
- Window 对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- 一些其他方法:
1,window.open() - 打开新窗口
2,window.close() - 关闭当前窗口
- Window Location
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
- Window Location Href
- location.href 属性返回当前页面的 URL。
- -
- Window History Back
- history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的。
- history.back() 方法加载历史列表中的前一个 URL。
<script>
function testLocal(){
alert(location.hostname);//返回 web 主机的域名
alert(location.pathname);//返回当前页面的路径和文件名
alert(location.port);//返回 web 主机的端口 (80 或 443)
alert(location.protocol);//返回所使用的 web 协议(http:// 或 https://)
}
function testLocaltion(){
var str= document.getElementById("INPUT1").value;
location.href="https://www.baidu.com/name=str;
}
function testBack(){
window.history.back();
}
</script>
<body>
<hr/>
<button onclick="testLocal()">window.Loca</button>
<hr/>
<form action="" >
<input type="text" id="INPUT1" value="ad"/>
<button onclick="testLocaltion()">window.Location</button><!--当点击这个时,会把value提交给location.href="https://www.baidu.com-->
</form>
<hr/>
<button onclick="testBack()">window.Back</button> <!--返回历史列表中的前一个URL-->
</body>
testLocaltion()的效果图: