zoukankan      html  css  js  c++  java
  • W3school——javascript笔记

    js改变其背景颜色

    function changeBgClr(value)
    {
    document.body.style.backgroundColor=value
    }   
    

    this的话还可以调用本身节点的属性

    节点的基本操作

     var newParagraph = document.createElement("p"); 
    

    如何在节点的文本框中加入字符串

    创建节点

    createTextNode

    插入和添加节点

    insertBefore
    insertAfter
    appendChild

    复制节点

    cloneNode()

    删除和替换节点

    removeChild
    replaceChild

    w3school网站
    需求
    查找HTML元素
    ById;ByTagName;ByClassName
    未找到则什么都不返回,或者返回null把
    为什么要查找元素,查找元素有什么用么,要知晓数据库中有无数据先查找
    通过类名查找不适用于ie8及更早版本

    通过CSS选择器查找HTML元素

    querySelectorAll()

    通过HTML对象选择器查找HTML对象

    书上没有
    .标签名['name属性'],并不是name属性,而是form的id号,html对象也神奇;name属性也可以,但必须是forms
    并不是标签名 forms啥,表单复数

    改变HTML元素

    innerHTML可用在自身查找的返回是列表元素中
    innerHTML;attribute
    serAttribute;style.property

    添加和删除元素

    createElement;removeChild
    appendChild;replaceChild
    document.write(xxx)
    一般的事件处理程序既是.onclick点击标签事件

    查找HTML对象

    a-u
    https://www.w3school.com.cn/js/js_htmldom_document.asp
    tips:alert而不是alter

    DOM文档

    document.write()直接写入HTML输入流
    千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

    JavaScript表单

    基本概念:
    表单域(fname)
    js表单验证
    表单验证的验证函数直接写在表单中(form中),更确切的是form中的onsubmit属性
    那为什么要写return呢,直接调用函数名不行么
    还可用let来定义变量

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm() {
      let x = document.forms["myForm"]["fname"].value;
      if (x == "") {
        alert("Name must be filled out");
        return false;
      }
    }
    </script>
    </head>
    <body>
    
    <h1>JavaScript 验证</h1>
    
    <form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
      Name: <input type="text" name="fname">
      <input type="submit" value="Submit">
    </form>
    
    </body>
    </html>
    

    js验证1-10之间的输入

    function myFunction() {
      // 获取 id = "numb" 的输入字段的值
      let x = document.getElementById("numb").value;
      // 如果 x 不是数字或小于 1 或大于 10
      let text;
      if (isNaN(x) || x < 1 || x > 10) {
        text = "输入无效";
      } else {
        text = "输入没问题";
      }
      document.getElementById("demo").innerHTML = text;
    }
    

    required可以验证HTML属性可以提交表单,若表单字段(fname)为空,则提醒

    改变CSS

    HTMLDOM动画

    JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。
    计数器
    setInterval函数有什么作用
    clearInterval函数呢

    var id = setInterval(frame, 5);
    
    function frame() {
        if (/* 测试是否完成 */) {
            clearInterval(id);
        } else {
             /* 改变元素样式的代码 */
        }
    } 
    

    onclick有2种用法

    1.直接嵌在button标签中,或者input的button类型中
    2.获取对应的元素对象,然后再使用.onclick属性=xxx函数名

    检测浏览器是否启用Cookie

    function checkCookies() {
      var text = "";
      if (navigator.cookieEnabled == true) {
        text = "Cookie 已启用";
      } else {
        text = "Cookie 未启用";
      }
      document.getElementById("demo").innerHTML = text;
    }
    

    onchange事件

    onchange 事件经常与输入字段验证结合使用

    function myFunction() {
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();
    }
    
    请输入您的名字:<input type="text" id="fname" onchange="myFunction()">
    

    onmouseover和onmouseout事件可用于当用户将鼠标移至HTML元素上或移出时触发某个函数

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" 
    style="background-color:#D94A38;120px;height:20px;padding:40px;">
    请把鼠标移上来</div>
    
    <script>
    function mOver(obj) {
      obj.innerHTML = "谢谢您"
    }
    
    function mOut(obj) {
      obj.innerHTML = "请把鼠标移上来"
    }
    </script>
    

    onmousedown, onmouseup 以及 onclick 事件
    onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

    首先当鼠标按钮被点击时,onmousedown 事件被触发;然后当鼠标按钮被释放时,onmouseup 事件被触发;最后,当鼠标点击完成后,onclick 事件被触发。

    javaScript HTML DOM事件监听程序

    语法

    element.addEventListener(event, function, useCapture);
    

    第一个参数是事件的类型(比如 "click" 或 "mousedown")。
    第二个参数是当事件发生时我们需要调用的函数。
    第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
    可引用外部命名函数和内部命名函数

    内部命名函数

    element.addEventListener("click", function(){ alert("Hello World!"); });
    

    外部命名函数

    element.addEventListener("click", myFunction);
    
    function myFunction() {
        alert ("Hello World!");
    }
    

    向相同元素添加多个事件处理程序

    addEventListener() 方法允许您向相同元素添加多个事件,同时不覆盖已有事件:

    element.addEventListener("click", myFunction);
    element.addEventListener("click", mySecondFunction);
    

    您能够向相同元素添加不同类型的事件:

    element.addEventListener("mouseover", myFunction);
    element.addEventListener("click", mySecondFunction);
    element.addEventListener("mouseout", myThirdFunction);
    

    向Window对象添加事件处理程序

    添加当用户调整窗口大小时触发的事件监听器:

    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = sometext;
    });
    

    传递参数

    element.addEventListener("click", function(){ myFunction(p1, p2); });
    

    来自W3school的事件监听程序
    https://www.w3school.com.cn/js/js_htmldom_eventlistener.asp

    事件冒泡还是事件捕获

    事件传播是一种定义当发生事件时元素次序的方法。假如div元素内有一个<p>,然后用户点击了这个<p>,应该首先处理那个元素'click'事件?
    在冒泡中,最内侧元素的事件会首先被处理,然后是更外侧的:首先处理<p>元素的点击事件,然后时<div>元素的点击事件。在捕获中,最外侧元素的事件会首先被处理,然后是更内测的.
    在addEventListener(event,function,useCapture)中
    useCapture默认值时false,将使用冒泡传播,如果将该值设置为true,则事件使用捕获传播。

    removeEventListener() 方法

    removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序:

    element.removeEventListener("mousemove", myFunction);
    

    节点树导航

    js访问一个节点的方法就有3种,让人难受

    # 1文本节点的值能够通过节点的 innerHTML 属性进行访问:
    var myTitle = document.getElementById("demo").innerHTML;
    # 2访问 innerHTML 属性等同于访问首个子节点的 nodeValue:
    var myTitle = document.getElementById("demo").firstChild.nodeValue;
    # 第3种方法
    var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
    

    节点与节点之间的关系

    和爬虫里的类似
    父、子和同胞,

    parentNode,childNodes[nodenumber]
    firstChild
    lastChild
    nextSibing
    previousSibling
    

    以上都是属性,可以直接使用,一般加在获取的元素节点之后。
    如使用getElementById获取了元素节点,再次基础上进行操作

    DOM根节点

    有两个特殊属性允许访问完整文档

    document.body -文档的body
    document.documentElement-完整文档
    

    可打印处本html页面的所有代码

     alert(document.body.innerHTML);
    alert(document.documentElement.innerHTML);
    

    nodeName属性

    nodeName属性规定节点的名称

    nodeName 是只读的
    元素节点的 nodeName 等同于标签名
    属性节点的 nodeName 是属性名称
    文本节点的 nodeName 总是 #text
    文档节点的 nodeName 总是 #document

    nodeValue 属性

    nodeValue 属性规定节点的值。

    元素节点的 nodeValue 是 undefined
    文本节点的 nodeValue 是文本文本
    属性节点的 nodeValue 是属性值

    nodeType 属性

    nodeType 属性返回节点的类型。nodeType 是只读的。
    返回的只有数字
    ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
    ATTRIBUTE_NODE 2 class = "heading" (弃用)
    TEXT_NODE 3 W3School
    COMMENT_NODE 8
    DOCUMENT_NODE 9 HTML 文档本身( 的父)
    DOCUMENT_TYPE_NODE 10 <!Doctype html>

    JavaScript HTML DOM 元素(节点)

    就算有参考手册我也不知道它属于什么模块,有什么可以搜索的,从他这个方法就可以搜索到什么属性,直接搜把,有空再看,做东西把

    努力拼搏吧,不要害怕,不要去规划,不要迷茫。但你一定要在路上一直的走下去,尽管可能停滞不前,但也要走。
  • 相关阅读:
    跨站请求伪造CSRF
    XSS危害——session劫持
    跨站脚本攻击XSS
    初识jsonp
    php json与xml序列化/反序列化
    php操作xml
    HTML5 WebStorage
    串口调试助手
    dashboard
    windows定时器编程
  • 原文地址:https://www.cnblogs.com/wkhzwmr/p/15620475.html
Copyright © 2011-2022 走看看