学习前端JS-1

Posted yyzyyx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习前端JS-1相关的知识,希望对你有一定的参考价值。

1.通过可编程的对象模型,javascript 获得了足够的能力来创建动态的 html
  JavaScript 能够改变页面中的所有 HTML 元素

  JavaScript 能够改变页面中的所有 HTML 属性

  JavaScript 能够改变页面中的所有 CSS 样式

  JavaScript 能够对页面中的所有事件做出反应

2.查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
  为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
  通过 id 找到 HTML 元素
    (document.getElementById("intro");)
  通过标签名找到 HTML 元素
    本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
       var x=document.getElementById("main");
       var y=x.getElementsByTagName("p");
  通过类名找到 HTML 元素
3.修改 HTML 内容的最简单的方法时使用 innerHTML 属性
    document.getElementById(id).innerHTML=new HTML
4.改变 HTML 属性
  如需改变 HTML 元素的属性,请使用这个语法:
    document.getElementById(id).attribute(属性的名字)=new value
5.改变 HTML 样式
  如需改变 HTML 元素的样式,请使用这个语法:
    document.getElementById(id).style.property=new style
6.对事件做出反应
   可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
   如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
   onclick=JavaScript
DOM事件====
7.向 HTML 元素分配 事件
1)使用事件属性。
  向 button 元素分配 onclick 事件:
    <button onclick="displayDate()">点击这里</button>
2)使用 JavaScript 来向 HTML 元素分配事件。
    <button id="myBtn">点击这里</button>
    <script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>

    <p id="demo"></p>
8.onchange 事件常结合对输入字段的验证来使用。相当于属性。
  <input type="text" id="fname" onchange="myFunction()">离开输入字段时会触发函数
9.onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
10.onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
  首先当点击鼠标按钮时,会触发 onmousedown 事件,
  当释放鼠标按钮时,会触发 onmouseup 事件,
  最后,当完成鼠标点击时,会触发 onclick 事件
DOM元素(节点)===
11. JavaScript 教程的 HTML DOM 部分,您已经学到了:
  如何改变 HTML 元素的内容 (innerHTML)
    document.write(Date());
    document.getElementById(id).innerHTML=new HTML
  如何改变 HTML 元素的样式 (CSS):
    document.getElementById(id).style.property=new style
  如何对 HTML DOM 事件作出反应:
    <h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
    <h1 onclick="changetext(this)">请点击该文本</h1>
    <button onclick="displayDate()">点击这里</button>
    document.getElementById("myBtn").onclick=function(){displayDate()};//向 button 元素分配 onclick 事件:
    <input type="text" id="fname" onchange="myFunction()">
  如何添加或删除 HTML 元素:
  添加:
    <div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
    </div>

    <script>
    var para=document.createElement("p"); //创建新的 <p> 元素
    var node=document.createTextNode("这是新段落。"); //如需向 <p> 元素添加文本
                             //首先创建文本节点。这段代码创建了一个文本节点:
    para.appendChild(node); //向 <p> 元素追加这个文本节点:

    var element=document.getElementById("div1");//最后您必须向一个已有的元素追加这个新元素。
                          //这段代码找到一个已有的元素
    element.appendChild(para); //向这个已有的元素追加新元素
    </script>
  删除:
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>

    <script>
    var parent=document.getElementById("div1"); //找到 id="div1" 的元素
    var child=document.getElementById("p1"); //找到 id="p1" 的元素
    parent.removeChild(child); //从父元素中删除子元素,//或者 child.parentNode.removeChild(child);
    </script>























































































以上是关于学习前端JS-1的主要内容,如果未能解决你的问题,请参考以下文章

前端 JavaScript

前端组件框架方案Vue.js 1.0发布,初始化渲染性能100%

前端学习:JS学习总结(图解)

自学前端,前端开发的学习路线是啥?

Vue.js 基础入门

前端学习资料整理