zoukankan      html  css  js  c++  java

  • 前端笔记4-2

    JS HTM DOM

    通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

    • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反应

    查找 HTML 元素

    通常，通过 JavaScript，您需要操作 HTML 元素。

    为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

    • 通过 id 找到 HTML 元素
    • 通过标签名找到 HTML 元素
    • 通过类名找到 HTML 元素

    1.通过id查找HTML元素

    如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

    如果未找到该元素，则 x 将包含 null。

    var x=document.getElementById("intro");

    2.通过标签查找

    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");

    通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

    改变HTML输出流

    在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

    绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

    改变HTML内容

    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

    语法：

    document.getElementById(id).innerHTML=new HTML;

     1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <button onclick="myfunction()">change</button>
 5 <script type="text/javascript">
 6 function myfunction(){
 7     document.getElementById("first").innerHTML="石楠小札";
 8     var x=document.getElementById("second");
 9     x.innerHTML="new txt";
10 }
11 
12 </script>
13 </body>

    改变HTML属性

    语法：

    document.getElementById(id).attribute=new value

     1 <body>
 2 
 3 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 4 <button onclick="myfunction()">change</button>
 5 <script type="text/javascript">
 6 
 7     document.getElementById("img").src="../example/cut/images/icon.jpg";
 8 }
 9 
10 </script>

    改变HTML样式

    语法：

    document.getElementById(id).style.property=new style

     1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <hr/>
 5 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 6 <button onclick="myfunction()">change</button>
 7 <script type="text/javascript">
 8 function myfunction(){
 9 
10     document.getElementById("first").style.color="blue";
11 }
12 
13 </script>
14 </body>

    显示/隐藏文本

     1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <hr/>
 5 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 6 <button onclick="myfunction()">隐藏文本</button>
 7 <button onclick="myfunction2()">显示文本</button>
 8 <script type="text/javascript">
 9 function myfunction(){
10 
11     document.getElementById("first").style.visibility="hidden";
12 }
13 function myfunction2(){
14 
15     document.getElementById("first").style.visibility="visible";
16 }
17 
18 </script>
19 </body>

    对事件做出反应

    HTML 事件的例子：

    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图像已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当提交 HTML 表单时
    • 当用户触发按键时
    1 <body>
2 <hr/>
3 <h1 onclick="myfunction3(this)">change</h1>
4 <script type="text/javascript">
5 function myfunction3(id){
6     id.innerHTML="谢谢!";
7 }
8 </script>
9 </body>

    onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发。

    onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

    onload 和 onunload 事件可用于处理 cookie。

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 
 5 <script>
 6 function mymessage()
 7 {
 8 alert("这段消息由 onload 事件触发");
 9 }
10 </script>
11 </head>
12 
13 <body onload="mymessage()">
14 </body>
15 
16 </html>
     1 <body onload="myfunction()">
 2 <script type="text/javascript">
 3 function myfunction(){
 4     if(navigator.cookieEnable==true){
 5         alert("已经启用cookie");
 6     }
 7     else{
 8         alert("未启用cookie");
 9     }
10 }
11 </script>
12 </body>

    onchange 事件

    onchange 事件常结合对输入字段的验证来使用。

    类似于焦点移除？

     1 <body >
 2 请输入英文字符：<input type="text" id="fname" onchange="myfunction2()">
 3 <script type="text/javascript">
 4 
 5 function myfunction2(){
 6     var x=document.getElementById("fname");
 7     x.value=x.value.toUpperCase();
 8 
 9 }
10 
11 </script>
12 </body>

    onmouseover 和 onmouseout 事件

    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

     1 <body>
 2 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:lightgray;height:20px;color:gray;padding:40px;120px;font-size:14px;">请把鼠标移到上面</div>
 3 <script type="text/javascript">
 4 
 5 function mOver(obj){
 6    obj.innerHTML="谢谢";
 7 }
 8 function mOut(obj){
 9   obj.innerHTML="请把鼠标移到上面";
10 }
11 </script>
12 </body>

    onmousedown、onmouseup 以及 onclick 事件

    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

     1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
 6 
 7 <script>
 8 function mDown(obj)
 9 {
10 obj.style.backgroundColor="#1ec5e5";
11 obj.innerHTML="请释放鼠标按钮"
12 }
13 
14 function mUp(obj)
15 {
16 obj.style.backgroundColor="green";
17 obj.innerHTML="请按下鼠标按钮"
18 }
19 </script>
20 
21 </body>
22 </html>
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function lighton()
 6 {
 7 document.getElementById('myimage').src="/i/eg_bulbon.gif";
 8 }
 9 function lightoff()
10 {
11 document.getElementById('myimage').src="/i/eg_bulboff.gif";
12 }
13 </script>
14 </head>
15 
16 <body>
17 <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
18 <p>按住鼠标不放可以点亮这盏灯！</p>
19 </body>
20 </html>

    onfocus

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function myFunction(x)
 6 {
 7 x.style.background="yellow";
 8 }
 9 </script>
10 </head>
11 <body>
12 
13 请输入英文字符：<input type="text" onfocus="myFunction(this)">
14 
15 <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
16 
17 </body>
18 </html>

     常用事件

    除了刚才提到的 onclick 事件，还有这些常用的事件：

    onclick 单击
    ondblclick 双击
    onfocus 元素获得焦点
    onblur 元素失去焦点
    onmouseover 鼠标移到某元素之上
    onmouseout 鼠标从某元素移开
    onmousedown 鼠标按钮被按下
    onmouseup 鼠标按键被松开
    onkeydown 某个键盘按键被按下
    onkeyup 某个键盘按键被松开
    onkeypress 某个键盘按键被按下并松开

    JS HTML 元素（节点）

    1.创建HTML元素

     1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 var para=document.createElement("p");//这段代码创建新的 <p> 元素
12 var node=document.createTextNode("这是新段落。");//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点
13 para.appendChild(node);//然后您必须向 <p> 元素追加这个文本节点
14 //最后您必须向一个已有的元素追加这个新元素
15 var element=document.getElementById("div1");//这段代码找到一个已有的元素
16 element.appendChild(para);//这段代码向这个已有的元素追加新元素
17 </script>
18 
19 </body>
20 </html>

    删除HTML元素

     1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 var parent=document.getElementById("div1");//找到 id="div1" 的元素
12 var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素
13 parent.removeChild(child);//从父元素中删除子元素
14 </script>
15 
16 </body>
17 </html>

    这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素

    var child=document.getElementById("p1");
child.parentNode.removeChild(child);
  • 相关阅读:
    log输出到日志和控制台
    CRM--搜索功能
    CRM--对数据进行排序
    CRM-注意的小事情
    CRM--modelform之instance
    CRM--保留原搜索条件
    crm系统
    Django多个app情况下静态文件的配置
    测试
    题库
  • 原文地址：https://www.cnblogs.com/jieyi/p/8372148.html
Copyright © 2011-2022 走看看