JS基础

最新推荐文章于 2022-08-16 11:33:46 发布

MMMMMMMay

最新推荐文章于 2022-08-16 11:33:46 发布

阅读量275

点赞数

分类专栏： java 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36066908/article/details/75041239

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

这里写图片描述

MMMMMMMay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础

JS 续day0711循环（while,for）/*while循环语法*/while (条件) { 需要执行的代码 } /*for循环语法*/ for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }例子：&lt;!--for--&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&l...
复制链接

扫一扫

专栏目录