一、Javascript介绍

1.1 JavaScript的组成部分

  1. ECMAScript:JavaScript的基础部分，包含：变量、数据类型、控制语句、函数、数组、运算符、对象
  2. BOM：浏览器对象模型
  3. DOM：文档对象模型（重点）

二、JavaScript的基础

2.1 JavaScript的数据类型

  1. number数据类型
  2. boolean数据类型
  3. string数据类型
  4. Object对象数据类型
  5. Array数组数据类型（实际本身属于Object对象数据类型）
  6. function函数数据类型
  7. null空数据类型
  8. NaN数据类型，只有报错的时候才会出现，NaN===》not a number
  9. undefined数据类型，只有报错的时候才会出现，not defined

2.2 JavaScript的变量

方式1：在定义的时候，就给定初始值（ 常用）

  1. var 变量名 = 值;
  2. 比如：
  3. var num = 10;

方式2：先定义，后面再赋值

  1. var 变量名;
  2. 变量名 = 值;
  3. 比如：
  4. var num;
  5. num = 10;

方式3：连关键字var都省略了，直接变量名赋值即可(不可取)

  1. 变量名 = 值;
  2. 比如：
  3. num = 10;

方式4：局部变量

  1. let 变量名 = 值;
  2. 比如：
  3. let i = 0;

注：使用typeof方法，获取变量的数据类型

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>数据类型</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  8.             //定义number变量
  9.             var num1 = 10;
  10.             document.write(typeof num1);
  11.             document.write("<br />");
  13.             var num2 = 9.9;
  14.             document.write(typeof num2);
  15.             document.write("<br />");
  17.             var num3 = "9.9";
  18.             document.write(typeof num3);
  19.             document.write("<br />");
  21.             var num4 = false;
  22.             document.write(typeof num4);
  23.             document.write("<br />");
  25.             var num5 = new Object();
  26.             document.write(typeof num5);
  27.             document.write("<br />");
  29.             var num6 = new Array();
  30.             document.write(typeof num6);
  31.             document.write("<br />");
  33.             var num7 = function add(){}
  34.             document.write(typeof num7);
  35.             document.write("<br />");
  37.             var num8 = null;
  38.             document.write(typeof num8);
  39.             document.write("<br />");
  41.             var a = "abc";
  42.             var b = "123";
  43.             document.write(a - b);
  44.             document.write("<br />");
  46.             document.write(num9 - 10);
  47.         </script>
  48.     </body>
  49. </html>

2.3 JavaScript的输入和输出

  1. 输入
  1. var msg = window.prompt("请输入姓名：");
  2. document.write(msg);
  1. 输出

方式1：以弹出框的形式输出,弹出框的输出优先级最高

  1. window.alert("这里是输出的内容");

方式2：在网页的body部分进行输出,将双引号中的内容直接输出到页面上，如果是标签，那么浏览器会解析标签

  1. document.write("这里是输出内容");

方式3：在控制台进行输出

  1. console.log("控制台输出");

2.4 运算符

  1. 赋值运算符
  1. =,+=,-=,*=,/=,%=
  1. 算数运算符
  1. 加：+,两个作用，做加法运算或者拼接减：-乘：*除：/模：%
  1. 比较运算符
  1. >,>=,<,<=,==,!=,===(要求：数据类型和值都要一致才为true)
  1. 逻辑运算符
  1. 与运算符：&&或者&或运算符:||或者|非运算符：!
  1. 三元运算符:?
  1. var 变量 = 判断语句?值1:值2;

2.5 分支语句

  1. if分支
  1. if(判断语句){  
  3. }else if(判断语句){  
  5. }else{ 
  7. }
  1. switch分支语句
  1. var 变量 = 值;
  2. switch(变量){  
  3.     case 值1：  
  4.         语句;    
  5.         break;  
  6.     case 值2：
  7.         语句;     
  8.         break; 
  9.     default   
  10.         语句;
  11. }

2.6 循环语句

  1. for循环
  1. for(var 变量;判断语句;改变变量的值){ 
  2.     循环的代码块;
  3. }
  1. while循环
  1. var 变量 = 值;
  2. while(判断){   
  3.     循环的代码块;    
  4.     改变变量的值;
  5. }
  1. do…while循环
  1. var 变量 = 值;
  2. do{    
  3.     循环的代码块;
  4.     改变变量的值;
  5. }while(判断);

2.7 JavaScript数组

定义数组的方法两种

方式1：先定义数组，再向里面添加元素

  1. var arr = new Array();
  2. arr.push("a");
  3. arr.push("b");
  4. arr.push(12);
  5. arr.push(true);
  6. document.write(arr);

方式2：定义数组就将元素添加到数组中

  1. //定义数组的第二种方式
  2. var arr2 = [1,2,3,4,5,6];
  3. document.write(arr2);

数组的操作：

  1. 数组的遍历

方式1：如果只是查看，可以直接输出数组名即可

  1. document.write(数组名);

方式2：普通遍历

  1. for(定义变量;判断语句;改变变量的值){    
  2. document.write(数组名[i]);
  3. }

方式3：for… in循环

  1. for(var 变量 in 数组名称){    
  2. //强调：这里的变量仍然指的是下标    
  3. document.write(数组名称[变量])
  4. }
  1. 冒泡排序
  1. //定义一个数组
  2. var arr = [9,7,10,15,6,4,12];
  3. document.write("排序前："+arr);
  4. document.write("<br />");
  5. //使用冒泡排序
  6. //外层循环控制遍历多少次
  7. for(var i = 0;i < arr.length-1;i++){    
  8.     //内层循环控制每一轮遍历中的相邻比较    
  9.     for(var j = 0; j < arr.length - 1 - i;j++){    
  10.         //将相邻的两个做比较        
  11.         if(arr[j] > arr[j+1]){    
  12.             var temp = arr[j];        
  13.             arr[j] = arr[j+1];        
  14.             arr[j+1] = temp;    
  15.         }    
  16.     }
  17. }
  18. document.write("排序后："+arr);
  1. 选择排序
  1. //定义一个数组
  2. var arr = [9,7,10,15,6,4,12];
  3. document.write("排序前："+arr);document.write("<br />");
  4. //使用选择排序
  5. for(var i = 0;i < arr.length-1;i++){
  6.     for(var j = i+1;j < arr.length;j++){    
  7.         //比较
  8.         if(arr[i] > arr[j]){
  9.             var  temp = arr[i];        
  10.             arr[i] = arr[j];        
  11.             arr[j] = temp;        
  12.         }
  13.     }
  14. }
  15. document.write("排序后："+arr);
  1. 折半查找
  1. //定义一个数组,要求必须是有序列
  2. var arr = [1,2,3,4,5,6,7,8,9,12,13,14,16,18,20,25];
  3. //定义变量，记录要找的元素值
  4. var key = window.prompt("请输入一个要找的数：");
  5. //定义变量，记录最小下标
  6. var min = 0;
  7. //定义变量，记录最大下标
  8. var max = arr.length-1;
  9. //定义一个变量，记录最终的下表值
  10. var index = -1;
  11. //使用折半查找
  12. while(min < max){
  13.     //计算中间下标
  14.     var mid = parseInt((min + max) / 2);    
  15.     //用中间下标处的元素值和要找的值进行比较
  16.     if(arr[mid] > key){        
  17.         max = mid -1;
  18.     }else if(arr[mid] < key){
  19.         min = mid + 1;
  20.     }else{        
  21.         index = mid;
  22.         break;
  23.     }
  24. }
  25. //判断index的值
  26. if(index != -1){
  27.     document.write("当前的下表："+mid);
  28. }else{    
  29.     document.write("该元素不在数组中");
  30. }

作业讲解

  1. 第一题：
  1. /*
  2.     1、在弹出框输入一串字符串，统计出数字个数、大写字母个数和小写字母个数，提示：js中将
  3.     单个字符转换成ASCII码表值得方法是charCodeAt(index);
  4. */
  6. //弹出框输入一个字符串，并且用一个变量来接受
  7. var str = prompt("请输入一个字符串：");
  8. //定义变量，记录数字的个数
  9. var countNumber = 0;
  10. //定义变量，记录大写字母个数
  11. var countBig = 0;
  12. //定义变量，记录小写字母的个数
  13. var countSmall = 0;
  14. //对字符串进行循环遍历，取到每一个字符
  15. for(var i = 0;i < str.length;i++){
  16.     //将每一个字符转换成ASCII码表值
  17.     var code = str.charCodeAt(i);
  18.     //判断code的值范围
  19.     if(code >= 48 && code <= 57){
  20.         countNumber++;
  21.     }else if(code >= 65 && code <= 90){
  22.         countBig++;
  23.     }else if(code >= 97 && code <= 122){
  24.         countSmall++;
  25.     }
  26. }
  28. //输出个数:
  29. document.write("数字个数："+countNumber+",大写字母个数："+countBig+",小写字母个数："+countSmall);
  1. 第二题：
  1. /*
  2.     2、用JavaScript在页面输出99乘法表
  3. */
  4. for(var i = 1;i <= 9;i++){
  5.     for(var j = 1;j <= i;j++){
  6.         document.write(j+"×"+i+"="+(i*j)+" ");
  7.     }
  8.     document.write("<br />");
  9. }
  1. 第三题：
  1. //定义二维数组
  2. var arr = new Array();
  3. for(var i = 0;i < 7;i++){
  4.     arr[i] = new Array(i);
  5. }
  7. //给二维数组赋值
  8. for(var i = 0;i < 7;i++){
  9.     for(var j = 0;j <i+1;j++){
  10.         if(j == 0 || i == j){
  11.             arr[i][j] = 1;
  12.         }else{
  13.             arr[i][j] = arr[i-1][j]+arr[i-1][j-1];
  14.         }
  15.     }
  16. }
  18. //遍历二维数组
  19. for(var i = 0;i < arr.length;i++){
  20.     for(var j = 0;j <= i;j++){
  21.         document.write(arr[i][j]+" ");
  22.     }
  23.     document.write("<br />");
  24. }
  1. 第四题
  1. /*
  2.     水仙花数
  3. */
  4. for(var i = 100;i <= 999;i++){
  5.     //将i依次剥离，剥离出各位，十位和百位
  6.     var a = i % 10;
  7.     var b = parseInt(i / 10) % 10;
  8.     var c = parseInt(i / 100);
  10.     var res = a*a*a + b*b*b + c*c*c;
  11.     //判断
  12.     if(res == i){
  13.         document.write(i+" ");
  14.     }
  15. }
  1. 第五题
  1. /*
  2.     5、在弹出框中输入一组数字，判断该数是否是回文数，提示：对称得数称为回文数，比如：2332
  3. */
  4. var str = prompt("请输入一个数：");
  5. //定义变量，记录是否是回文数，假设是回文数
  6. var flag = true;
  7. //对str进行循环
  8. for(var i = 0;i < str.length / 2;i++){
  9.     //对称比较
  10.     if(str.charAt(i) != str.charAt(str.length-1-i)){
  11.         flag = false;
  12.         break;
  13.     }
  14. }
  15. if(flag){
  16.     document.write(str+"是回文数");
  17. }else{
  18.     document.write(str+"不是回文数");
  19. }

二、函数

函数概念：将实现特定功能的代码块进行封装，该方法最好是实现单一功能，提高代码的复用性

js中，函数分为 内置函数(系统函数) 和 自定义函数(重点)

2.1内置函数

  1. 1    alert(内容)  弹出消息框
  2. 2    typeof(值)  查看类型
  3. 3    parseInt(值); 转成整型
  4. 4    parseFloat(值)： 转成小数
  5. 5    isNaN（值） 判断是否是非数字，如果是非数字，返回true,反之亦然
  6. 6    prompt(值1[,值2])  弹出输入框，值1是标题，值2是初始值,点击确定，返回输入的值，否则返回null
  7. 7    confirm(值)  弹出确认框   点击确认，返回true，反之亦然

2.2自定义函数

语法：最常见的函数定义方式

  1. //定义函数
  2. function 函数名称([参数列表]){
  3.     函数封装的代码片段;
  4.     [return 变量]
  5. }
  7. //调用函数
  8. 函数名([参数列表]);
  1. 无参的函数事例
  1. //定义函数，实现两个数的和
  2. function add(){
  3.     var a = 10;
  4.     var b = 20;
  5.     var c = a + b;
  6.     document.write("c = "+c);
  7. }
  9. //调用函数
  10. add();
  1. 有参的函数事例,无返回值
  1. //定义函数，实现任意两个数的和
  2. function add2(a,b){
  3.     var c = a + b;
  4.     document.write("c = "+c);
  5. }
  7. add2(10,10);
  1. 有参数的函数事例，有返回值
  1. //定义函数，实现任意两个数的和，并且将和返回到函数外面
  2. function add3(a,b){
  3.     var c = a + b;
  4.     return c;
  5. }
  6. //调用函数
  7. var res = add3(20,20);
  8. document.write("res = "+res);
  1. 可变参数的函数
  1. //定义一个函数，实现任意个数的数据相加和，并返回
  2. function add4(){    
  3.     //定义变量，记录和    
  4.     var sum = 0;    
  5.     //在js中有可以接受实际参数的对象，arguments    
  6.     //遍历arguments对象，获取到每一个实际参数的值    
  7.     for(var i = 0;i < arguments.length;i++){    
  8.         sum = sum + arguments[i];
  9.     }    
  10.     return sum;
  11. }
  12. //调用函数
  13. var res1 = add4(10,20,100,200);
  14. document.write("res1 = "+res1);
  1. 字面量的函数,要求：必须先定义，后使用
  1. //定义一个字面量函数
  2. var add5 = function(){
  3.     var i = 10;
  4.     var j = 20;    
  5.     var k = i + j;
  6.     return k;
  7. }

三、面向对象（了解）

  1. 字面量创建对象
  1. //用字面量定义类
  2. var person = {    
  3.     name:"张三",    
  4.     age:18,    sex:"男",
  5.     doIt:function(){    
  6.         document.write("我在学习JavaScript");
  7.     }
  8. }
  9. //创建对象
  10. document.write(person.name+"<br />");
  11. document.write(person.age+"<br />");
  12. document.write(person.sex+"<br />");
  13. person.doIt();
  1. 使用父类创建对象
  1. //使用父类创建对象
  2. var user = new Object();
  3. user.name = "张三";
  4. user.age = 19;
  5. user.doId = function(){    
  6.     document.write("我已经不想些Java代码了");
  7. }
  8. document.write(user.name);
  9. user.doId();
  1. 使用工厂思想，用父类对象完成面向对象
  1. //使用工厂的思想，完成面向对象
  2. function createBook(bookName,price){
  3.     var obj = new Object();    
  4.     obj.bookName = bookName;
  5.     obj.price = price;        
  6.     return obj;
  7. }
  8. //获取对象
  9. var b1 = createBook("Java编程思想",108);
  10. document.write(b1.bookName);
  11. document.write(b1.price);
  1. 使用构造方法的方式创建对象
  1. //使用构造方法形式定义
  2. var Product = function(productName,price){    
  3.     this.productName = productName;    
  4.     this.price = price;    this.doIt = function(){    
  5.         document.write("想念java的第N天");
  6.     }
  7. }
  8. //创建对象
  9. var prod = new Product("旺仔",5.5);
  10. document.write(prod.productName);
  11. document.write(prod.price);
  12. prod.doIt();

四、DOM对象

  1. document object model 文档对象模型—-》操作document对象
    我们可以把每个标签看成是一个对象，标签的属性也就是对象的属性,DOM就是通过document来操作每一个标签

DOM对象的应用入门：

  1. //在body上面输出内容
  2. document.write("哈哈哈哈");
  3. document.write("<br />");
  4. //用document对象操作标签内容
  5. document.write("<span id = 'one'>你是一条猪儿虫</span>");
  6. document.write("<br />");
  7. document.write("<span id ='two'>我是一条小青龙</span>");

4.1 DOM对象对标签的操作

  1. 查询（获取标签）：在body中正常的进行布局，然后由js获取标签
  1. //第一种获取标签的方式:根据id获取,只能获取一个
  2. var e1 = document.getElementById("id的名称");
  3. //方式2：根据标签中的class属性名获取
  4. var e2 = document.getElementsByClassName("class的名称");
  5. //方式3：根据标签名称获取
  6. var e3 = document.getElementsByTagName("标签的名称");
  7. //方式4：直接使用querySelector("选择器");实现获取标签,只能获取唯一的一个
  8. var e4 = document.querySelector("#选择器");
  9. //方式5：如果要获取的结果集由多个，querySelectorAll("选择器");
  10. var e5 = document.querySelectorAll(".选择器");
  1. 修改,通过document对象获取了对象之后，可以去获取的标签用js完成css样式的修改或者属性值的修改
  1. //先获取，然后修改css的样式（修改css:修改原有属性，新增css属性等操作）
  2. //操作1：修改标签的css
  3. function updateCss1(){    
  4.     //获取标签    
  5.     var e = document.querySelector("#img1");
  6.     //修改该标签的css属性
  7.     e.style.border = "2px red solid";
  8.     e.style.width = "200px";    
  9.     e.style.height = "200px";
  10. }
  11. //操作2：修改属性
  12. function updateAttr(){
  13.     var e = document.querySelectorAll(".img2");
  14.     for(var i = 0;i < e.length;i++){    
  15.         e[i].src = "../img/1.jpg";
  16.     }
  17. }
  18. //给指定的标签增加css的选择器
  19. function addCss(){    
  20.     var e = document.querySelectorAll("li");
  21.     //完整的    
  22.     for(var i = 0;i < e.length;i++){    
  23.         if(e[i].hasAttribute("class")){        
  24.             e[i].setAttribute("class",e[i].getAttribute("class")+" col");    
  25.         }else{        
  26.             e[i].setAttribute("class","col");    
  27.         }
  28.     }
  29. }
  1. 新增：使用js在页面动态的创建标签
  1. //操作1:创建标签
  2. function createDiv(){
  3.     var oDiv = document.createElement("div");
  4.     //可以给新创建的div设置css属性    
  5.     oDiv.style.width = "100px";
  6.     oDiv.style.height = "100px";
  7.     oDiv.style.border = "2px red solid";
  8.     oDiv.style.float = "left";        
  9.     //将创建的div挂在到#out的div里面    
  10.     var parent = document.querySelector("#out");
  11.     parent.appendChild(oDiv);
  12. }
  13. //操作2：使用innerHTML = 值;方法，将字符串类型的标签语句，嵌入到一个父标签下
  14. function createHtml(){    
  15.     var e = document.querySelector("#temp");
  16.     var oSpan= "<span style = 'color:red'>哈啊哈哈哈</span>";
  17.     e.innerHTML = oSpan;
  18. }
  19. //操作3：获取双标签之间的文本数据
  20. function getText(){
  21.     var e = document.querySelector("#temp");    
  22.     var val = e.innerText;    console.log(val);
  23. }
  24. //操作4：修改或者在双标签之间添加文本数据
  25. function updateText(){    
  26.     var e = document.querySelector("#temp");    
  27.     e.innerText = e.innerText+"哈哈哈哈";
  28. }
  1. 删除
  1. //操作1：删除一个标签
  2. function delete1(){    
  3.     //获取标签    
  4.     var oDiv = document.getElementById("out");
  5.     oDiv.remove();
  6. }
  7. //操作2：一定要考虑是否能够删除完全
  8. function delete2(){    
  9.     var oImg = document.getElementsByClassName("img1");    
  10.     var len = oImg.length;    
  11.     for(var i = 0;i < len;i++){    
  12.         oImg[0].remove();
  13.     }
  14. }
  15. //操作3：
  16. function delete3(){    
  17.     var oImg = document.querySelectorAll(".img1");
  18.     for(var i = 0;i < oImg.length;i++){    
  19.         oImg[i].remove();    
  20.     }
  21. }

五、事件操作

  1. 在页面需要鼠标、键盘进一步操作之后，才会触发某些js函数的执行。

5.1 鼠标事件（掌握）

  1. 1、鼠标单击事件：在标签上添加onclick = "函数名()";
  2. 2、鼠标双击事件：在标签上添加ondblclick = "函数名()";
  3. 3、鼠标移入事件：onmouseenter = "函数名称()";或者onmouseover = "函数名称()"
  4. 4、鼠标移出事件：onmouseleave = "函数名称()";或者onmouseout = "函数名称()";
  5. 5、鼠标移动事件：onmousemove = "函数名称()";

5.2 键盘事件

  1. 1、键盘按下事件：window.onkeydown2、键盘松开事件：window.onkeyup

5.3 表单事件（掌握）

  1. 1、获取焦点事件：onfocus2、失去焦点事件：onblur3、内容改变事件：onchange

5.4 js中注册事件的方法

方式1： 在标签中通过注册事件来完成

  1.  <button id="btn1" onclick="f1()">按钮1</button>
  2.     <script>
  3.         function f1() {
  4.             alert("ok1");
  5.         }
  6.     </script>

方式2：在js中完成注册

语法:

标签对象.onxx事件=function(){}

  1.  <button id="btn2">按钮2</button>
  2.     <script>
  3.         var btn2 = document.getElementById("btn2");
  4.         btn2.onclick = function() {
  5.             alert("ok2");
  6.         }
  7.     </script>
  1.   <button id="" name="btn">按钮2</button>
  2.     <button id="" name="btn">按钮2</button>
  3.     <button id="" name="btn">按钮2</button>
  4.     <button id="" name="btn">按钮2</button>
  5.     <button id="" name="btn">按钮2</button>
  7.     <script>
  8.         var btns = document.getElementsByName("btn");
  9.         for (var i = 0; i < btns.length; i++) {
  10.             btns[i].onclick = function() {
  11.                 alert("ok");
  12.             }
  13.         }
  14.     </script>

方式3：绑定事件

在js中写代码

绑定语法:

  1. 标签对象.addEventListener("事件类型",function(){代码})
  3. 标签对象.addEventListener("事件类型",函数名)

移出绑定语法

  1. 标签对象.removeEventListener("事件类型",函数名)

事件类型不能有 “on”

  1.  var b1 = document.getElementById("b1");
  2.         b1.addEventListener("click", f1)
  3.         b1.addEventListener("click", f2)
  5.         function f1() {
  6.             alert("b1");
  7.         }
  9.         function f2() {
  10.             alert("b2");
  11.         }
  13.         var b2 = document.getElementById("b2");
  14.         b2.addEventListener("click", function() {
  15.             b1.removeEventListener("click", f1);
  16.         })

六、BOM

brwoser object model 浏览器对象模型,将浏览器的各个组成部分封装对象

我们操作的是window对象

window是js的顶级对象(类似于java的Object),而document也只是window对象的属性之一

组成:

  1. 1 window:窗口对象
  3. 2 screen:屏幕对象
  5. 3 history: 历史对象
  7. 4 location:地址栏对象

6.1、window:窗口对象

该对象不需要创建，直接用即可

  1. window.属性
  2. window.方法()
  3. window.是可以省的

6.2、window属性—screen

  1.  //除开标题高度的窗体高度
  2.  console.log(screen.availWidth + ":" + screen.availHeight);
  3.  //分辨率
  4. console.log(screen.width + ":" + screen.height);

6.3、window属性—history

语法

  1. history.back()       返回上一个页面
  2. history.forward()    前进下一个页面
  3. history.go()          可以返回/前进n个页面
  4. 比如
  5. history.go(1)           前进一个页面
  6. history.go(-1)          返回一个页面

6.4、window属性—location(重点)

js跳转

语法

  1. location.href="url地址"

6.5、window属性—document

获取载入当前页面的页面地址 (需要服务器的支持)

语法:

  1. document.referrer

比如a页面跳转到b页面，在b页面中打印documendt.referrer 获取的是a页面地址

6.6、window对象的方法

  1. alert()
  2. confirm()
  3. prompt();
  4. open();
  5. close();

拓展

什么是冒泡和捕获

js的事件流：元素节点按照特定的顺序传播

捕获阶段—-》目标阶段—->冒泡阶段

现在的所有的浏览器都把捕获特点给删除了(以前网景浏览器默认采用的捕获·)

冒泡：子元素到父元素的过程

捕获:父元素到子元素的过程

我们可以通过.addEventListener的语法来控制捕获或冒泡:

  1. addEventListener("click",function(){}, true/false);
  2. true:捕获
  3. false/不写: 冒泡

js如何解决冒泡

使用关键词event

用法和this相同，需要传递到函数中

  1. onclick="event"
  3. function xx(e){
  5. }

作用：

1 通过event可以获得点击那个元素对象

  1. e.target

2 能够阻止冒泡

  1. event.stopPropagation() 
  2. 例子：阻止a标签跳转
  3.   <a href="http://www.baidu.com" onclick="ff2(event)">跳转</a>
  4.     <script>
  5.         function ff(o, e) {
  6.             alert(o.id);
  7.             //阻止冒泡
  8.             event.stopPropagation()
  9.                 // console.log(e.target == o);
  10.         }

3 阻止默认 (阻止元素本身的行为)

  1. e.preventDefault()

event和this的区别

  1. this：绑定的那个元素
  2. event:操作的那个元素

事件委托

  1. 利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应
  3. 1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

子页面嵌套iframe

  1.  <iframe src="../0604/demo1.html" frameborder="0" width="100%" height="200px" scrolling="no"></iframe>

innerHTML和innerText的区别

以上都都能够操作标签体内容，

innerHTML能够识别标签

innerText 不能识别标签

div可编辑

  1. <div id="d" contenteditable="true">
  3. </div>

js控制样式(css)

语法:

标签对象.style.样式属性=”值”

注意：如果样式属性是右-组成的，则我们需要去掉-，-后面的单词首字母大写,

比如:font-size 需要写成 fontSize

5、让超链接失去跳转功能

  1. <a href="javaScript:;"></a>
  2. <a href="javaScript:void(0)"></a>

string

字符串，是js的基本数据类型之一,同时也是内置对象

内置对象，不用new，直接用

语法法:

  1. 1 .length
  2. 2 .indexOf(内容)--->返回第一个下标
  3. 3 .lastIndexOf(内容)---->返回最后一个下标
  4. 4 .substr(开始位置,截取长度)
  5. 5 .substring(开始位置，结束位置)
  6. 6 charAt()
  7. 7 charCodeAt()
  8. 8 split()分割 通过分隔符转成数组

ASCII

  1. //a-z  97~122
  2. //A-Z  65~90
  3. //0-9  48~57

正则表达式

正则表达式就是来做表单验证的

语法

  1. var reg=//;   -- 表达式
  3. reg.test(字符串)--->如果合法则返回true，否则false
  1. ^ : 以....开头
  2. $ : 以...结尾
  3. []: 匹配[]中的任意一个字符
  4.     [1,2,3,a,b,c]
  5.     [a-zA-Z0-9]
  6. [^] :匹配不在[]中的任意一个字符
  7. \s : 匹配空白字符
  8. \S : 匹配非空白字符
  9. \w: 匹配单词  (单词=字母、数字、_)  ==> [a-zA-Z0-9_]
  10. \W: 匹配非单词
  11. \d :匹配数字    ==>[0-9]
  12. \D :匹配非数字
  13. . :匹配任意字符
  14. \. : 匹配.
  15. | :或者  需要搭配()
  16. {n,m} 匹配左边规则的个数必须>=n && <=m
  17. {n,}  匹配左边规则的个数必须>=n
  18. {n}  匹配左边规则的个数必须=n
  19. ? :匹配0次或1次  -->{0,1} 
  20. + :匹配1一次或多次  -->{1,}
  21. * :匹配0次多次  {0,}

js中的定时器

语法 :

  1. 1 setInterval(参数1，参数2);  -->返回当前计时器的序列名
  2.  每隔xx毫秒执行一次该函数
  3. 参数1：函数
  4. 参数2：毫秒
  6. 方式1：使用匿名函数
  7. setInterval(function(){},毫秒)
  8. 方式2：不使用匿名函数
  9. setInterval(函数名,毫秒)
  10. function 函数名(){}
  12. 2 setTimeout(参数1，参数2)
  13.  等待xx毫秒执行一次该函数
  14. 参数1：函数
  15. 参数2：毫秒
  18. 3 停止计时器
  19. clearInterval(定时器序列名)

递归

在一个方法中，调用本方法

  1. public static void xx(int i){
  2.         System.out.println("ok");
  3.         i++;
  4.         if(i<=5){
  5.             xx(i);        
  6.         }    
  7.     }
  9.     public static void main(String[] args) {
  10.         xx(1);
  11.     }
  13.     //    通过递归完成斐波那契排列
  14.     //1   1   2   3    5     8     13    21     34
  15.     public static void xx(int[]arr,int i){
  16.         arr[i+2]=arr[i]+arr[i+1];
  17.         i++;
  18.         if(i<=97){
  19.             xx(arr, i);
  20.         }
  21.     }
  22.     public static void main(String[] args) {
  23.         int [] arr=new int[100];
  24.         arr[0]=1;
  25.         arr[1]=1;
  26.         xx(arr, 0);
  28.         System.out.println(arr[7]);
  31.     }

全局变量

  1. 1 如果在onload中定义的变量都会自动提升位全局变量(因为变量指向window的的属性)
  3. 2 如果在函数中定义变量时不写var，则自动提升为全局变量

节点

我们会把页面上的所有元素当成节点来进行操作

元素(标签、属性、注释)

核心：根据层次关系来获取对应的元素

层次关系：

  1. 找爸爸
  3. 找儿子
  5. 找兄弟

节点的属性

  1. 1 nodeType  节点类型
  3. 在html中有12种节点，我们只需要直到标签节点/元素节点的type=1
  4.                  文本节点的type=3
  6. 标签节点/元素节点: <span></span>     <br/>
  7. 元素节点：标签外部的文本比如  xxxxx<span>xxxxx</span>xxxxx
  9. 2 firstElementChild |  lastElementChild
  10. 找当前标签元素的第一个/最后一个元素节点儿子
  12. 3 children 获得当前节点的所有元素子节点
  13.   console.log(d.children[0]);
  14.   console.log(d.children[d.children.length - 1]);
  16. 4 直接获得html标签对象
  17. document.documentElement
  19. 5 直接获得body标签对象
  20. document.body
  22. 6 找当前元素节点的下一个元素兄弟
  23. nextElementSibling
  25. 7 找当前元素节点的上一个元素兄弟
  26. previousElementSibling
  28. 8 找当前元素节点的父节点
  29. parentNode

节点方法

  1. 1 操作属性
  2. 节点对象.setAttribute("属性"，“值”)
  3. 节点对象.getAttribute("属性")
  5. 2 创建节点
  6. var 节点= document.createElement("标签名")
  8. 3 父节点追加字节点到末尾
  9. 父节点.appendChild(子节点(新节点));
  11. 4 删除当前节点
  12. 当前节点的父节点.removeChild(当前节点)