python JavaScript

JavaScript

一. JavaScript

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

a. JavaScript的引入方式

#直接编写
    <script>
        alert('hello yuan')
    </script>
    
#导入文件
    <script src="hello.js"></script>　　

二. BOM对象

a. window对象

　　所有浏览器都支持 window 对象。

　　概念上讲.一个html文档对应一个window对象.

　　功能上讲: 控制浏览器窗口的.

　　使用上讲: window对象不需要创建对象,直接使用即可.

方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1{
 8             width:200px;
 9             height:50px;
10         }
11     </style>
12 
13 </head>
14 <body>
15 
16 <input type="text" id="id1" onclick="begin()">
17 <button onclick="end()">停止</button>
18 
19 <script>
20 
21     function showTime() {
22              var current_time=new Date().toLocaleString();
23              var ele=document.getElementById("id1")
24              ele.value=current_time
25     }
26     
27     var clock1;
28     function begin() {
29         if(clock1==undefined){
30             showTime();
31            clock1=setInterval(showTime,1000)
32         }
33     }
34 
35     function end() {
36         clearInterval(clock1);
37         clock1=undefined
38     }
39 
40 
41 </script>
42 
43 
44 </body>
45 </html>
46 
47 setInterval clearInterval 时间框

setInterval clearInterval 时间框

 1 #打印hello
 2         window.alert("hello")
 3 
 4         #用户选择true或false
 5         obj = window.confirm("hello word")
 6         console.log(obj)
 7 
 8         #接收用户文本内容
 9         obj = window.prompt("please input content")
10         console.log(obj)
11 
12         #open() 打开和一个新的窗口 并 进入指定网址
13         #参数1 什么都不填 就是打开一个新窗口.
14         #参数2.填入新窗口的名字(一般可以不填).
15         #参数3: 新打开窗口的参数.
16         open('http://www.baidu.com','','width=200,resizable=no,height=100');
17  
18 
19 windows 方法例子
20 
21 alert confirm prompt open 例子

alert confirm prompt open 例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 
10 <script>
11     function f() {
12         console.log("hello...")
13     }
14 
15     setTimeout(f,1000)
16 
17 </script>
18 </body>
19 </html>

setTimeout 点赞功能可能用到，执行一次退出

b. history

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

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

方法

back()         加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()            加载 history 列表中的某个具体页面。

1 -----------history1文件------   
2 
3     <a href="history2.html">clink</a>
4     <button onclick="history.forward()">button</button>
5 
6 -----------history2文件--------
7 
8     <button onclick="history.back()">back</button>
9

View Code

c. Location

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

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

方法

location.reload()           #刷新页面
location.assign(URL)        #跳转页面，相当于链接，可以回退
location.replace(newURL)    #跳转页面，覆盖当前页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <button onclick="f()">click</button>
10 
11 <script>
12 
13     function f() {
14         location.reload()
15     }
16 
17 </script>
18 </body>
19 </html>

刷新页面

四. DOM对象(DHTML)

a. 什么是DOM？

#DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
 
#"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
 
#W3C DOM 标准被分为 3 个不同的部分：
    #核心 DOM - 针对任何结构化文档的标准模型
    #XML DOM - 针对 XML 文档的标准模型
    #HTML DOM - 针对 HTML 文档的标准模型
 
#什么是 XML DOM？  －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
#什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

b. DOM 节点

#根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
　　#整个文档是一个文档节点(document对象)
　　#每个 HTML 元素是元素节点(element 对象)
   #HTML 元素内的文本是文本节点(text对象)
   #每个 HTML 属性是属性节点(attribute对象)
   #注释是注释节点(comment对象)
   #画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。 

节点(自身)属性:

attributes    #节点（元素）的属性节点
nodeType 　　　#节点类型
nodeValue     #节点值
nodeName      #节点名称
innerHTML     #节点（元素）的文本值

导航属性:

parentElement              #父节点标签元素
children                   #所有子标签
firstElementChild          #第一个子标签元素
lastElementChild           #最后一个子标签元素
nextElementtSibling        #下一个兄弟标签元素
previousElementSibling     #上一个兄弟标签元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="div1">
 9         <p class="p1">hello p</p>
10         <div class="div1">hello div</div>
11     </div>
12 
13     <script>
14         var ele = document.getElementsByClassName("p1")[0];
15         console.log(ele);
16         console.log(ele.nodeName);
17         console.log(ele.nodeType);
18         console.log(ele.nodeValue);
19         console.log(ele.innerText)
20     </script>
21 </body>
22 </html>
23 
24 节点(自身)属性 演示

节点(自身)属性演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="div1">
 9         <p class="p1">hello p</p>
10         <div class="div2">hello div</div>
11     </div>
12 
13     <script>
14         var ele = document.getElementsByClassName("p1")[0];
15         var ele2 = ele.parentNode;              #父亲标签
16         console.log(ele2.nodeName);
17         var ele3 = ele.nextElementSibling;      #兄弟标签
18         console.log(ele3.nodeName);
19         console.log(ele3.innerHTML)
20     </script>
21 </body>
22 </html>
23 
24 导航属性 演示

导航属性演示

c. 节点查找

直接查找

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

局部查找

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="div1">
 9 
10     <div class="div2">i am div2</div>
11     <div name="yuan">i am div2</div>
12     <div id="div3">i am div2</div>
13     <p>hello p</p>
14 </div>
15 
16 <script>
17 
18    var div1=document.getElementById("div1");
19 
20    var ele= div1.getElementsByTagName("p");
21    alert(ele.length);
22 
23    var ele2=div1.getElementsByClassName("div2");
24    alert(ele2.length);
25     </script>
26 </body>
27 </html>
28 
29 局部查找只支持两种

局部查找只支持两种

d. DOM Event(事件)

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
 
onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
 
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
 
onload         一张页面或一幅图像完成加载。
 
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开
 
onselect       文本被选中。
onsubmit       确认按钮被点击。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <div onclick="alert('单击事件')">单击事件</div>
10 <div ondblclick="alert('双击事件')">双击事件</div>
11 
12 
13 <input type="text" value="请输入姓名" onfocus="enter(this)" onblur="exit(this)">
14 
15 
16 <script>
17     function enter(self){
18        self.value="";
19     }
20 
21     function exit(self){
22         if(self.value.trim()==""){
23              self.value="请输入姓名";
24         }
25     }
26 
27 </script>
28 
29 </body>
30 </html>
31 
32 onfocus onblur 表单输入例子

onfocus onblur 表单输入例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload=function () {
 8             var ele=document.getElementsByClassName("div1")[0];
 9             console.log(ele.innerText)
10         }
11     </script>
12 </head>
13 <body>
14 
15 <div class="div1">hello div</div>
16 
17 
18 </body>
19 </html>
20 
21 onload js代码最后执行演示

onload js代码最后执行演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <select name="" class="select_pro">
10     <option value="1">河南省</option>
11     <option value="2">湖南省</option>
12     <option value="3">云南省</option>
13 </select>
14 
15 
16 <select name=""  class="select_city">
17 
18 </select>
19 
20 
21 <script>
22     var info={"河南省":["郑州","洛阳","开封"],"湖南省":["湘潭","长沙","岳阳"],"云南省":["大理","昆明"]}
23 
24     var ele=document.getElementsByClassName("select_pro")[0];
25     var ele_2=document.getElementsByClassName("select_city")[0];
26     ele.onchange=function(){
27          var arrs=ele.children;
28 
29 
30         var sindex=this.selectedIndex;          // 得到一个数字
31 
32         var province=arrs[sindex].innerText;    //  得到省份
33         var citys_arr=info[province];
34         console.log(citys_arr);
35 
36         var ele2_children=ele_2.children;
37 
38 
39 //        for (var j=0;j<ele2_children.length;j++){
40 //            ele_2.removeChild(ele2_children[0])
41 //        }
42 
43         ele_2.options.length=0;     //  清空select的子元素
44 
45         for (var i=0;i<citys_arr.length;i++){
46 
47                 var option=document.createElement("option");
48 
49                 option.innerText=citys_arr[i];
50                 ele_2.appendChild(option);
51         }
52     }
53 
54 
55 </script>
56 </body>
57 </html>
58 
59 onchange 二级联动省份演示

onchange 二级联动省份演示

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7     <style>
  8         .outer{
  9             margin: 0 auto;
 10             background-color: darkgray;
 11             width: 80%;
 12             height: 600px;
 13             margin-top: 30px;
 14             word-spacing: -5px;
 15 
 16         }
 17 
 18         #left {
 19             display: inline-block;
 20             width: 100px;
 21             height: 140px;
 22             background-color: wheat;
 23             text-align: center;
 24         }
 25 
 26         #choice{
 27             display: inline-block;
 28             height: 140px;
 29             background-color: darkolivegreen;
 30 
 31             vertical-align: top;
 32             padding:0 5px;
 33         }
 34 
 35         #choice button{
 36             margin-top: 20px;
 37         }
 38 
 39          #right{
 40             display: inline-block;
 41             width: 100px ;
 42             height: 140px;
 43             background-color: wheat;
 44             text-align: center;
 45             line-height: 140px;
 46 
 47         }
 48 
 49     </style>
 50 </head>
 51 <body>
 52 
 53 
 54 
 55 <div class="outer">
 56 
 57     <select multiple="multiple" size="5" id="left">
 58         <option>红楼梦</option>
 59         <option>西游记</option>
 60         <option>水浒传</option>
 61         <option>JinPingMei</option>
 62         <option>三国演义</option>
 63     </select>
 64 
 65 
 66 
 67 
 68     <span id="choice">
 69         <button id="choose_move"> > </button><br>
 70         <button id="all_move"> >> </button>
 71     </span>
 72 
 73 
 74 
 75     <select multiple="multiple" size="10" id="right">
 76         <option>放风筝的人</option>
 77     </select>
 78 
 79 
 80 </div>
 81 
 82 
 83 
 84 
 85 <script>
 86 
 87     var choose_move=document.getElementById("choose_move");
 88     var all_move=document.getElementById("all_move");
 89 
 90     var right=document.getElementById("right");
 91     var left=document.getElementById("left");
 92     var options=left.options;
 93 
 94 
 95 
 96     choose_move.onclick=function(){
 97 
 98         for (var i=0; i<options.length;i++){
 99 
100              var option=options[i];
101              if(option.selected==true){
102 
103                    // var news=option.cloneNode(true);
104                    // console.log(news);
105 
106                    right.appendChild(option);
107                    i--;
108              }
109          }
110     };
111 
112     all_move.onclick=function(){
113 
114         for (var i=0; i<options.length;i++){
115 
116              var option=options[i];
117 
118                    right.appendChild(option);
119                    i--;
120 
121          };
122     };
123 
124 
125 
126 
127     /*
128    var buttons=document.getElementsByTagName("button");
129    for(var i=0;i<buttons.length;i++) {
130         buttons[i].onclick = function () {
131 
132             for (var i = 0; i < options.length; i++) {
133 
134                 var option = options[i];
135 
136                 if (this.innerText == ">") {
137                     if (option.selected == true) {
138 
139                         // var news=option.cloneNode(true);
140                         // console.log(news);
141 
142                         right.appendChild(option);
143                         i--;
144                     }
145                 } else {
146                     right.appendChild(option);
147                     i--;
148                 }
149             }
150         };
151     }
152 
153 
154    */
155 
156 
157 </script>
158 
159 
160 </body>
161 </html>
162 
163 select移动

select移动

e. 绑定事件方式

方式一：标签内绑定

1 <div id="div" onclick="foo(this)">点我呀</div>
2 
3 <script>
4     function foo(self){           // 形参不能是this;
5         console.log("点你大爷!");
6         console.log(self);   
7     }
8 </script>

View Code

方式二：标签对象.事件=function(){}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>PPP</p>
10     <p>PPP</p>
11     <p>PPP</p>
12 
13 
14     <script>
15 
16     //绑定方式二 标签对象.事件=function(){};
17 
18 
19     var eles =document.getElementsByTagName("p");
20        for (var i=0;i<eles.length;i++){
21            eles[i].onclick=function(){
22                alert(789);
23            }
24        }
25 
26     </script>
27 
28 </body>
29 </html>

View Code

f. 事件介绍

事件传播

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         .outer{
 9             width: 200px;
10             height: 200px;
11             background-color: red;
12 
13         }
14 
15          .inner{
16             width: 100px;
17             height: 100px;
18             background-color: yellow;
19 
20         }
21     </style>
22 </head>
23 <body>
24 
25 <div class="outer">
26     <div class="inner"></div>
27 </div>
28 
29 
30 <script>
31     var ele=document.getElementsByClassName("outer")[0];
32     ele.onclick=function(){
33         alert(123);
34     };
35 
36      var ele2=document.getElementsByClassName("inner")[0];
37      ele2.onclick=function(e){
38         alert(456);
39 
40 
41         e.stopPropagation();
42     }
43 </script>
44 </body>
45 </html>
46 
47 stopPropagation 阻止外层的事件传向内层

stopPropagation 阻止外层的事件传向内层

onkeydown:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9 <input type="text" id="d1">
10 
11 <script>
12     var ele=document.getElementById("d1");
13     ele.onkeydown=function (e) {
14         var num=e.keyCode;
15         var alph=String.fromCharCode(num);
16         alert(e.keyCode+"-----"+alph)
17     }
18 </script>
19 
20 </body>
21 </html>
22 
23 onkeydown 演示

onkeydown 演示

onmouseout与onmouseleave事件的区别：

#1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
 
#2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #container{
 8             width:300px;
 9             background-color: purple;
10             text-align: center;
11         }
12         #title{
13             line-height: 50px;
14         }
15         #list{
16             display: none;
17         }
18         #list div{
19             line-height: 50px;
20         }
21         #list .item1{
22             background-color: green;
23         }
24         #list .item2{
25             background-color: yellow;
26         }
27         #list .item3{
28             background-color: blue;
29         }
30     </style>
31 
32 </head>
33 <body>
34 
35 <div id="container">
36     <div id="title">mouseout演示</div>
37     <div id="list">
38         <div class="item1">111</div>
39         <div class="item2">222</div>
40         <div class="item3">333</div>
41     </div>
42 </div>
43 
44 <script>
45 
46     var container=document.getElementById("container");
47     var list=document.getElementById("list");
48     var title=document.getElementById("title");
49 
50     title.onmouseover=function () {
51         list.style.display="block"
52     }
53 
54     container.onmouseleave=function(){
55         list.style.display="none";
56     };
57 
58 </script>
59 
60 </body>
61 </html>

View Code

onsubmit

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

Event 对象：　　

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <script>
 8 
 9         window.onload=function(){
10             //阻止表单提交方式1().
11             //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
12 
13              var ele=document.getElementById("form");
14              ele.onsubmit=function(event) {
15             //    alert("验证失败 表单不会提交!");
16             //    return false;
17 
18             // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
19              alert("验证失败 表单不会提交!");
20              event.preventDefault();
21 
22     }
23 
24         };
25 
26     </script>
27 </head>
28 <body>
29 
30 <form id="form">
31             <input type="text"/>
32             <input type="submit" value="点我!" />
33 </form>
34 
35 </body>
36 </html>
37 
38 阻止事件发生 两种演示

阻止事件发生两种演示

g. 节点操作

创建节点：

createElement(标签名) ：创建一个指定名称的元素。
 
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

添加节点：　

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
  
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点：

removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：　

somenode.replaceChild(newnode, 某个节点);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .div1,.div2,.div3,.div4{
 9             width: 300px;
10             height: 200px;
11         }
12         .div1{
13             background-color: green;
14         }
15         .div2{
16             background-color: red;
17         }
18         .div3{
19             background-color: blue;
20         }
21         .div4{
22             background-color: lemonchiffon;
23         }
24     </style>
25     
26 </head>
27 <body>
28 
29     <div class="div1">
30         <button onclick="add()">add</button>
31         div1</div>
32 
33 
34     <div class="div2">
35         <button onclick="del()">del</button>
36         div2</div>
37     <div class="div3">
38         <button onclick="change()">change</button> 
39         <p>div3</p>
40     </div>
41     <div class="div4">div4</div>
42 
43     <script>
44 
45 //        把div3  的p改变为image
46         function change() {
47             var img=document.createElement("img");
48             img.src="meinv.png";
49 
50             var ele=document.getElementsByTagName("p")[0];
51             var father=document.getElementsByClassName("div3")[0];
52             father.replaceChild(img,ele)
53         }
54         
55 //        删除p元素
56         function del() {
57             var father=document.getElementsByClassName("div1")[0];
58             var son=father.getElementsByTagName("p")[0]
59             father.removeChild(son)
60         }
61 
62 
63 //        增加p元素
64         function add() {
65             var ele=document.createElement("p");
66             ele.innerHTML="hello p";
67 
68             var father=document.getElementsByClassName("div1")[0];
69             father.appendChild(ele)
70         }
71 
72     </script>
73 
74 </body>
75 </html>
76 
77 增 删 改 查 演示

增删改查演示

h. 节点属性操作：

a. 改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .div1{
 9             width: 300px;
10             height: 200px;
11         }
12         .div1{
13             background-color: green;
14         }
15 
16     </style>
17     
18 </head>
19 <body>
20 
21     <div class="div1">
22         <button onclick="add()">add</button>
23         div1</div>
24 
25 
26     <script>
27 
28         function add() {
29             var ele=document.createElement("p");
30             ele.innerHTML="<h1>hello p</h1>";
31 
32             var father=document.getElementsByClassName("div1")[0];
33             father.appendChild(ele)
34         }
35 
36     </script>
37 
38 </body>
39 </html>
40 
41 改变元素内容 演示

改变元素内容演示

b. 改变 CSS 样式

<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
</script> 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .div1{
 9             width: 300px;
10             height: 200px;
11         }
12         .div1{
13             background-color: green;
14         }
15 
16     </style>
17 
18 </head>
19 <body>
20 
21     <div class="div1">
22         <button onclick="add()">add</button>
23         div1</div>
24 
25 
26     <script>
27 
28         function add() {
29             var ele=document.createElement("p");
30             ele.innerHTML="<h1>hello p</h1>";
31             ele.style.color="red";
32             ele.style.fontSize="10px";
33 
34             var father=document.getElementsByClassName("div1")[0];
35             father.appendChild(ele)
36         }
37 
38     </script>
39 
40 </body>
41 </html>
42 
43 改变CSS样式 演示

改变CSS样式演示

c.改变 HTML 属性

elementNode.setAttribute(name,value)
 
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

f. 关于class的操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="div1 div2">div1</div>
10 
11 <script>
12     var ele=document.getElementsByTagName("div")[0];
13 
14     console.log(ele.className);
15     console.log(ele.classList[0]);
16     ele.classList.add("hide");
17     console.log(ele.className)
18 </script>
19 
20 </body>
21 </html>
22 
23 class操作 演示

class操作演示

五. 案例　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 
 8 </head>
 9 <body>
10 
11      <button onclick="select('all');">全选</button>
12      <button onclick="select('cancel');">取消</button>
13      <button onclick="select('reverse');">反选</button>
14 
15 
16      <table border="1" id="Table">
17          <tr>
18              <td><input type="checkbox"></td>
19              <td>111</td>
20          </tr>
21          <tr>
22              <td><input type="checkbox"></td>
23              <td>222</td>
24          </tr>
25          <tr>
26              <td><input type="checkbox"></td>
27              <td>333</td>
28          </tr>
29          <tr>
30              <td><input type="checkbox"></td>
31              <td>444</td>
32          </tr>
33      </table>
34 
35 
36 <script>
37     function select(choice){
38         var ele=document.getElementById("Table");
39 
40         var inputs=ele.getElementsByTagName("input");
41         for (var i=0;i<inputs.length;i=i+1){
42 
43                    var ele2=inputs[i];
44             if (choice=="all"){
45                 ele2.checked=true;
46 
47             }else if(choice=="cancel"){
48                 ele2.checked=false;
49             }
50             else {
51 
52                 if (ele2.checked){
53                     ele2.checked=false;
54                 }else {
55                     ele2.checked=true;
56                 }
57             }
58 
59             }
60     }
61 </script>
62 
63 
64 </body>
65 </html>
66 
67 表格 全选 反选 取消 演示

表格全选反选取消演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         h1{
 8             background-color: darkgray;
 9             color: red;
10             text-align: center;
11             line-height: 50px;
12         }
13     </style>
14 </head>
15 <body>
16 
17 <h1 class="title">欢迎方少伟sb</h1>
18 <script>
19        function test(){
20             var ele=document.getElementsByClassName("title")[0];
21             // console.log(ele)
22             //       console.log(ele.innerText);
23             //       console.log(typeof ele.innerText);
24             var content=ele.innerText;
25             var fist_char=content.charAt(0);
26             var later_string=content.substring(1,content.length);
27             var new_content=later_string+fist_char;
28 
29            // 赋值操作
30            ele.innerText=new_content;
31        }
32 
33        setInterval(test,1000);
34 </script>
35 </body>
36 </html>
37 
38 跑马灯例子

跑马灯例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .content{
 8             height: 1800px;
 9             background-color: grey;
10         }
11 
12         .shade{
13             position: fixed;
14             top: 0;
15             left: 0;
16             right: 0;
17             bottom: 0;
18             background-color: yellow;
19             opacity: 0.3;
20         }
21 
22         .mode1{
23             width: 200px;
24             height: 200px;
25             background-color: bisque;
26             position: absolute;
27             top:50%;
28             left: 50%;
29             margin-top: -100px;
30             margin-left: -100px;
31 
32         }
33 
34         .hide{
35             display: none;
36         }
37 
38 
39     </style>
40 </head>
41 <body>
42 <div class="content">
43     <button onclick="show()">show</button>
44 </div>
45 
46 <div class="shade hide"></div>
47 
48 
49 <div class="mode1 hide">
50     <button onclick="cancle()">cancle</button>
51 </div>
52 
53 <script>
54     
55     function show() {
56         var ele_share=document.getElementsByClassName("shade")[0];
57         var ele_mode1=document.getElementsByClassName("mode1")[0];
58 
59         ele_share.classList.remove("hide");
60         ele_mode1.classList.remove("hide");
61     }
62 
63     function cancle() {
64         var ele_share=document.getElementsByClassName("shade")[0];
65         var ele_mode1=document.getElementsByClassName("mode1")[0];
66 
67         ele_share.classList.add("hide");
68         ele_mode1.classList.add("hide");
69 
70 
71     }
72 </script>
73 
74 
75 </body>
76 </html>
77 
78 模态对话框

模态对话框

苑昊

posted @ 2017-06-27 23:41 Meet~ 阅读(267) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Loading

不苦不累, 人生无味

python JavaScript

JavaScript

一. JavaScript

a. JavaScript的引入方式

二. BOM对象

a. window对象

b. history

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

c. Location

四. DOM对象(DHTML)

a. 什么是DOM？

b. DOM 节点

c. 节点查找

d. DOM Event(事件)

e. 绑定事件方式

f. 事件介绍

g. 节点操作

h. 节点属性操作：

五. 案例

公告