FrontEnd-Basis-7th

周五,阴,记录生活分享点滴

参考博客:https://www.cnblogs.com/yuanchenqi/articles/5980312.html

 

 JavaScript(一)

BOM对象(续)

history对象

History 对象属性

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

length     // 返回浏览器历史列表中的 URL 数量。

History 对象方法

back()     // 加载 history 列表中的前一个 URL。
forward()  // 加载 history 列表中的下一个 URL。
go()       // 加载 history 列表中的某个具体页面。
<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

Location 对象方法

location.assign(URL)      // 加载新文档
location.reload()         // 刷新本页面
location.replace(newURL)  // 注意与assign的区别
<!-- 例子:------------------------------------------------------------>

<input type="button" value="重载" onclick="location.reload()">  <!-- 刷新本页面 -->
<input type="button" value="重载" onclick="location.href='http://www.baidu.com'">  <!-- 加载到一个新的页面 -->

 

DOM对象(DHTML)

DOM 节点

HTML 文档中的所有内容都是节点(NODE):

  • 整个文档是一个文档节点(document对象)·【重要】

  • 每个 HTML 元素是元素节点(element 对象)·【重要】

  • HTML 元素内的文本是文本节点(text对象)

  • 每个 HTML 属性是属性节点(attribute对象)

  • 注释是注释节点(comment对象)

FrontEnd-Basis-7th

节点(自身)属性:

  • attributes - 节点(元素)的属性节点

  • nodeType - 节点类型

  • nodeValue - 节点值

  • nodeName - 节点名称

  • innerHTML - 节点(元素)的文本值

导航属性:

  • parentNode - 节点(元素)的父节点 (推荐)

  • firstChild - 节点下第一个子元素

  • lastChild - 节点下最后一个子元素

  • childNodes - 节点(元素)的子节点

推荐导航属性:

  • parentElement - 父节点标签元素

  • children - 所有子标签

  • firstElementChild - 第一个子标签元素

  • lastElementChild - 最后一个子标签元素

  • nextElementtSibling - 下一个兄弟标签元素

  • previousElementSibling - 上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div>hello div </div>
    <p>hello p</p>
</div>

<script>

// firstElementChild - 第一个子标签元素 ------------------------------------------
    var ele=document.getElementById("div1");
    var ele_son=ele.firstElementChild;    // 第一个子标签元素
    alert(ele_son.nodeName)  // DIV

// lastElementChild - 最后一个子标签元素 -----------------------------------------
    var ele=document.getElementById("div1");
    var ele_son=ele.lastElementChild;     // 最后一个子标签元素
    alert(ele_son.nodeName);              // P

// children - 所有子标签 --------------------------------------------------------
    var ele=document.getElementById("div1");
    var ele_sons=ele.children;            // 所有子标签
    alert(ele_sons.length);               // 2
    alert(ele_sons[0]);                   // [object HTMLDivElement]
    for (var i=0;i<ele_sons.length;i++){  // 通过for循环查看所有子标签
        console.log(ele_sons[i])          // <div>hello div </div> 和 <p>hello p</p>
    }

// nextElementtSibling - 下一个兄弟标签元素 --------------------------------------
    var ele=document.getElementById("div1").firstElementChild;
    var sib=ele.nextElementSibling;       // 下一个兄弟标签元素
    alert(sib.nodeName);                  // P


// 这些属性是为了对文档树进行导航

</script>
</body>
</html>

查找对象方式

全局查找:

  • 通过使用 getElementById() 方法

  • 通过使用 getElementsByTagName() 方法

  • 通过使用 getElementsByClassName() 方法

  • 通过使用 getElementsByName() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">hello
    <div class="div2">hello 2</div>
    <div class="div3" name="chung">hello 3</div>
    <p>hello p</p>
</div>

<script>

    // 通过ID ID特性:唯一性 -----------------------------------------------------------
    var temp=document.getElementById("div1");

    // 通过ClassName 有可能是多个,数组的格式 --------------------------------------------
    var ele=document.getElementsByClassName("div2")[0];  // 通过[0]取一个值
    var ele2=ele.nextElementSibling;
    alert(ele2.innerHTML);                               // hello 3

    // 通过TagName ---------------------------------------------------------------------
    var tag=document.getElementsByTagName("p");
    alert(tag[0].innerHTML)                              // hello p

    // 通过Name -------------------------------------------------------------------------
    var Name=document.getElementsByName("chung");
    for(var i in Name){
    console.log(Name[i].innerHTML)                       // hello 3
    }

</script>

</body>
</html>

局部查找:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">

    <div class="div2">i am div2</div>
    <div name="chung">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

// 支持 TagName ----------------------------------------------------------
   var ele= div1.getElementsByTagName("p");
   alert(ele.length);    // 1

// 支持 ClassName --------------------------------------------------------
    var ele2=div1.getElementsByClassName("div2");
    alert(ele2.length);  // 1

// 不支持 Id --------------------------------------------------------------
    var ele3=div1.getElementById("div3");
    alert(ele3.length);

// 不支持 Name ------------------------------------------------------------
    var ele4=div1.getElementsByName("chung");
    alert(ele4.length)

</script>
</body>
</html>

 

HTML DOM Event(事件)

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。
onblur         元素失去焦点。              应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。

onchange       域的内容被改变。            应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)

onkeydown      某个键盘按键被按下。         应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开。

onselect       文本被选中。
onsubmit       确认按钮被点击。

event 对象 & 输入框练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 鼠标双击ppppp反馈123 ------------------------------------------------------------------------>
    <p ondblclick="alert(123)">ppppp</p>

    <!-- 输入框练习 --------------------------------------------------------------------------------->
    <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名">
    <!-- onfocus元素获得焦点;onblur元素失去焦点 -->
    
<script>
    
    function func1() {
        var ky=document.getElementsByClassName("keyword")[0];
        ky.value="";
    }
    function func2() {
        var ky=document.getElementsByClassName("keyword")[0];
        if (ky.value.trim().length==0){
            ky.value="请输入用户名";
        }
    }
    
</script>
</body>
</html>

onchange·多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select  onchange="fun3()">
    <option>上海</option>
    <option>北京</option>
    <option>河北</option>
</select>

<script>
    function fun3() {
        alert(1234);
    }
</script>


</body>
</html>

onkeydown & onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" >
    <!-- onkeydown某个键盘按键被按下;onkeyup某个键盘按键被松开 -->

<script>
    function fun1(e) {
        console.log(456);
    }
    function fun2() {
        console.log(123)
    }
</script>
    
</body>
</html>

onload

<!--onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <script>
        function fun1() {
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
        
        window.onload=function () {               /* onl oad 一张页面或一幅图像完成加载 */
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
    </script>

<p id="id1">hello p</p>

</body>
</html>

onmousedown & onm ousemove & onm ouseout & onm ouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            background-color: #84a42b;
            width: 200px;
        }
    </style>
</head>
<body>

    <div onm ousedown="down()" onm ousemove="move()" >div1</div>
    <!--
    onm ousedown    鼠标按钮被按下
    onm ousemove    鼠标被移动
    onm ouseout     鼠标从某元素移开
    onm ouseover    鼠标移到某元素之上
    -->
    
<script>
    function down() {
        console.log("down");
    }
    function move() {
    console.log("move");
    }
    function out() {
        console.log("out");
    }
    function over() {
        console.log("over");
    }
</script>
    
</body>
</html>

onsubmit

绑定事件的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="div1" onclick="func1()">hello duv
        <p class="ppp">hello p</p>
    </div>

    <script>
        
        /* 第一种:找到标签对象 --------------------------------------------*/
        var obj=document.getElementsByClassName("ppp")[0];
        obj.onclick=function () {
            alert(123);
        }
        
        /* 第二种:直接在标签后加属性 ---------------------------------------*/
        function func1(){
            alert("func1")
        }
        
    </script>

</body>
</html>

验证方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="form" onsubmit="return check()">
    <input type="text" name="username">
    <input type="submit" value="submit">
</form>

<script>
// 第一种方式 ----------------------------------------------------------------------------------------
    function check(event) {
        alert("验证失败!");
        return false;  //返回true没有问题,如果返回false,需要注意onsubmit="return check()"有return
// 第二种方式 ----------------------------------------------------------------------------------------
        // event.preventDefault() 用这句话替代 return false ,表示组织标签默认行为
    }
    
</script>
</body>
</html>

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 300px;
            height: 200px;
            background-color: #84a42b;
        }
        #div2{
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div id="div1" onclick="alert('div1')">
    <div id="div2" onclick="func1(event)"></div>
</div>

<script>
    function func1(e) {
        alert('div2');
        e.stopPropagation();  // 阻止事件向外层div传播
    }
</script>

</body>
</html>

 

上一篇:ubuntu提示E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用)


下一篇:Could not get lock /var/lib/dpkg/lock-frontend