0801

 

1 js的字符集

　　JavaScript 使用 Unicode 字符集

 

2 js的注意事项

　　2.1 js严重区分大小写

　　2.2 代码后面需要加分号表示结束

　　2.3 构造函数首字母大写

　　2.4 普通函数首字母小写

 

3 注释

　　3.1 单行注释

　　　　// 我是单行注释

　　3.2 多行注释 

　　　　/*

　　　　　　我是多行注释

　　　　*/

 

4 执行js代码的三种方式

　　4.1 在标签中去写js代码【菜鸟才用】

　　4.2 在script元素中写js代码

　　4.3 在js文件中写js代码

 

5 读取、写入数据的三种方法

　　innerHTML

　　innerText

　　innerValue

 

6 输出数据的四种方法

　　alert()

　　windows.write()

　　innderHTML/innerText/innerValue

　　console.log()

 

7 获取节点的四种方法

　　document.getElementById("id名字"); 通过ID名字获取元素 返回只有一个元素
　　document.getElementsByClassName("class名字"); 通过class名字来获取 IE9+ 返回一箩筐 ———— 类数组
　　document.getElementsByTagName("tag标签名字"); 通过Tag标签名字来获取元素 返回集合
　　document.getElementsByName("name属性的值"); 通过name属性的值来获取元素 返回集合

 

8 6大基本类型　

　　Number ———— 数字
　　String ———— 字符串
　　Boolean ——— 布尔值 true/false
　　function —— 函数 函数名字加括号执行函数
　　undefined — 未定义 它的值就是undefined未定义
　　Object ———— 对象 只有对象才能去点方法点属性,数组也是对象

 

　　

9 绑定事件（注册事件、事件监听）　

　　onmouseenter / onmouseover 鼠标划入
　　onmouseleave / onmouseout 鼠标划出

　　onmousemove 鼠标移动
　　onclick 单击左键
　　ondblclick 双击左键

　　onkeydown 键盘按下某键 ———
　　onkeyup 键盘抬起某键 |———————— 能被输入字符才能被触发事件
　　onkeypress 键盘按下并抬起某键 ———


　　onblur 失去焦点 能被获取焦点的元素才能触发事件
　　onfocus 得到焦点 能被获得到焦点的元素才能触事件

 

10 利用事件改编样式

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17     <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
18 
19     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
20     <style>
21         *{
22             margin: 0;
23             padding: 0;
24         }
25         #box {
26             width: 100px;
27             height: 100px;
28             background-color: red;
29         }
30         #box1 {
31             width: 200px;
32             height: 200px;
33             background-color: skyblue;
34         }
35         #parent {
36             width: 200px;
37             height: 200px;
38             border: 1px solid transparent;
39         }
40     </style>
41 
42     
43 </head>
44 
45 <body>
46     <div id="parent">
47         <div id="box">hello</div>
48     </div>
49     <input type="button" name="" value="ClickMe" id="button">
50     
51     <script type="text/javascript">
52         var box = document.getElementById("box");
53         var button = document.getElementById("button");
54 
55         button.onclick = function() {
56             if(box.id == "box") {
57                 box.id = "box1";    
58             }else {
59                 box.id = "box";
60             }
61             
62         };
63     </script>
64 </body>
65 </html>
HTML代码

 

 

 

 

 

 

 

 

　　

 

posted @ 2017-06-02 17:57  寻渝记  阅读(475)  评论(0)    收藏  举报