小M开发_JS_day170712

来源：互联网发布：数据库的四个基本概念编辑：程序博客网时间：2024/04/30 23:27

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。
JS事件
- 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 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<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 元素，您必须首先获得该元素的父元素。

<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。
  这与在浏览器中点击后退按钮是相同的。

<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()的效果图：

这里写图片描述

阅读全文

0 0