JavaScript概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。特点：1、交互性：它可以做的就是信息的动态交互2、安全性：不允许直接访问本地磁盘3、跨平台性：主要是可以解释Js的浏览器都可以执行，与平台无关。
JavaScript与Java不同
1、Js是Netscape公司的产品。前身是LiveScript；java是sun公司的产品，现在是Oracle公司的产品2、Js是基于对象，Java是面向对象。3、Js值需解释就可以执行，Java需要先编译成字节码文件，再执行。4、Js是弱类型，Java是强类型
JavaScript与Html的结合方式
想要将其他代码融入到Html中，都是以标签的形式1、Js代码存放在标签对2、当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）注意：如果在script标签中定义了src属性，name标签中的内容不会被执行。例：注：规范中script标签早期有一个属性language，而现在使用type属性。
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。Js中也一样有变量，语句，函数，数组等常见语言组成元素。通常高级程序设计语言所包含的语法内容：1、关键字：该语言中被赋予了特殊含义的单词。2、标示符：用于标示数据所表达的符号。通常可以理解为在程序中自定义的名称。比如变量名，函数名。3、注释：注释说明解释程序，用于调试程序。4、变量：用于标示内存中一片空间。用于存储数据，该空间中的数据是可以变化的。什么时候使用变量？当数据不确定的时候。 通过关键字var来定义，弱类型既类型既是不用指定具体的数据类型。 例：var x = 3; x = "heelo"; 注：Js中也属的常量值，undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。 注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。但为了符合编程规范，需要像java一样定义结束符。而且有些情况是必须写分号的，如：var x = 3; var y = 5;如果两条语句写在同一行，就需要分号隔开。 全局变量和局部变量体验？ 在函数里面定义的变量为局部的，在java脚本里面定义的变量为全局的 5、运算符：可以让数据进行运算的符号。 算数运算符 + - * / % ++ -- 注意：在js中，false默认是0或者null。非0或者非null就是true默认为1；所以：alert(1+true)为2； 赋值运算符 = += -= *= /= %= 例如： var a = 3; a = a+3; alert(a); 比较运算符（运算结果要么是true要么是false） > < >= <= != == 例如： var a = 3; alert(a==4);//false 逻辑运算符（用来连接两个boolean型的表达式） && || ! 例如： var a = 3; alert(a>2 && a<4); 位运算符 & | ^ >> << >>> var a = 6; alert(a&3);//2 alert(5^3^3);//5 alert(a>>>1);//3 alert(a<<2);//24 三元运算符 ? : alert(3>1?alert("yes"):alert("0")) typeof：判断属于什么类型？6、语句：用于对程序的运行流程进行控制的表达式。 （1）、顺序结构 从上往下执行 例如： alert("a"); alert("b"); //输出顺序a，b （2）、判断语句 var x = 3; if(x==3){ alert("yes") }else{ alert("no"); } if(x=4){//此种情况注意：这里相当于重新给x赋值 alert("yes") }else{ alert("no"); } 综合上述所以我们建议写法 if(4==x){//如果写成4=x会报错 alert("yes") }else{ alert("no"); } （3）、选择结构 var a = "b" switch(a){ case "a":alert("a");break; case "b":alert("b");break; case "c":alert("c");break; default: alert("输入的是没有选项的"); break; } 判断语句有if和switch语句。如果有固定的几个选项建议使用switch。不过开发过程中，switch用的比较少 （4）、循环结构 var a = 3; while(a<3){ alert("a="+a); //将数据直接写入到当前页面当中 document.write("a="+a); a++; } for(var i = 0;i<=4;i++){ document.write("i="+i); } （5）、其他语句 break：跳出选择，跳出循环结构； contine：用于循环语句，结束本次循环，继续下次循环 7、函数：用于对功能代码进行封装，便于提高复用性。 函数就是一个功能的封装体； 定义功能通常需要两个明确： （1）、功能的结果； （2）、功能实现中的参与运算的未知的内容； js中定义函数的格式： 通过指定关键字来定义： function 函数名（参数列表）｛ 函数体； return 返回值；//如果没有具体的返回值，return语句可以不写； ｝ 函数的注意细节： a、只要使用函数的名称就是对这个函数的调用 b、函数中有一个数组在对传入的参数进行存储，这个数组就是arguments; 注意点： function getnum(){ return 100; } var arr = getnum();//getnum函数运行，并将返回的结果赋值给arr。 var arr1 = getnum;//getnum本身是一个函数名，而函数本身在js中就是一个对象，getnum就是这个函数对象的引用。将getnum这个引用的地址赋值给了arr1 这时，arr1也指向了这个函数对象，此时这个函数对象有两个函数对象。 alert(arr);//100 alert(arr1);//function getnum(){ // return 100;// } var arr = getnum(); js函数的其它表现形式动态函数：使用的是js中内置对象Function参数列表和函数列表都是通过字符串指定的。 var add = new Function("x,y","var sum;sum = x + y;return sum; "); alert(add(4,8)); 一般用的不多 匿名函数：没有名字的函数 例如： function(a,b){ return a+b } 8、数组：对多个数据进行存储，便于操作。就是传说中的容器。 数组用于存储更多的数据，是一个容器。 特点： a、长度是可变的； b、元素的类型是任意的； 建议：在使用数组时，存储同一类型的元素，操作起来方便。 js中的数组定义的两种格式： （1）、var arr= []; (2)、var[] arr = [1,2,4,5,7]; 使用了javacriipt中的Array对象来完成定义 var arr = new Array();//var arr = []; var arr1 = new Array(3);//数组定义并且长度为3； var arr2 = new Array(3,4,5);//定义一个数组，元素为3，4，5； 9、对象：只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念，对象就是一个封装体。既可以封装数据又可以封装函数。 声明一个String对象： var str2 = new String("hello"); var str1 = "hello world"; 演示String对象： var str = "abcde"; document.write(str.bold());//加粗 document.write(""); document.write(str.fontcolor("red"));//字体颜色 document.write(""); document.write(str.link("http://www.baidu.com"))//将字符串变成超链接 document.write(""); document.write(str.substr(1,3));//bcd document.write(""); document.write(str.substring(1,3));//bc 因为js中的string对象方法优先，想要对字符串的操作其它的功能，比如：去除string两端的空格，这时我们只能自定义 代码示例： function delect(str){ //定义两个变量，一个记录开始的位置，一个记录结束的位置 /* 对开始的位置对字符进行判断，如果是空格，就进行递增 ，直到不是空格为止*/ /* 对结束的位置对字符进行判断，如果是空格，就进行递减 ，直到不是空格为止*/ /* 必须要保证开始<= 结束，这样才可以进行截取 */ var start,end; start = 0; end = str.length-1; while(start <= end && str.charAt(start)==" "){ start++; } while(start <= end && str.charAt(end)==" "){ end--; } return str.substring(start,end+1); } var a = " ab c "; alert("!"+delect(a)+"!"); 原型： 从上代码分析：既然delcet方法是用来操作字符串的方法，那么我们可以将该方法定义在字符串对象中，直接用字符串对象调用。 这里可以使用该字符串的原型属性来完成 原型：就是该对象的一个描述。该描述中如果添加了新功能，那么该对象都会具备这些新功能。 而prototype就可以获取到这个原型对象，通过prototype就可以对对象的功能进行扩展。 String.prototype.delect=function(){ var start,end; start = 0; end = this.length-1; while(start <= end && this.charAt(start)==" "){ start++; } while(start <= end && this.charAt(end)==" "){ end--; } return this.substring(start,end+1); }; 综合练习：
1、定义功能：完成对数组的最值获取
2、对数组排序
3、对数组查找，返回该数组中的index角标
4、对数组元素进行反转
原型练习： 1、给字符串添加一个功能，将字符串变成一个字符数组。 2、给字符串添加一个功能，将字符串进行反转。模拟下join的实现 var arr = ["1","2","3"]; var arr1 = ["a","b","c"]; var newarr = arr.concat("连接上了",arr1);//在arr数组上连接一个元素，再连接一个arr1数组 var newarr1 = arr.concat(arr1);//连接两个数组合并为一个数组 document.write(newarr); document.write(arr.pop());//删除并返回最后一个元素 document.write(arr.reverse());//颠倒数组中元素的顺序。 document.write(arr.shift());//删除并返回数组的第一个元素 document.write(arr.splice());//删除元素，并向数组添加新元素(替换)。 document.write(arr.unshift());//向数组的开头添加一个或更多元素，并返回新的长度。 这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式有所不同，但是使用的基本思想是一致的。Date对象 var date = new Date(); document.write(date); document.write(date.toLocaleString());//根据本地时间格式，把 Date 对象转换为字符串。 document.write(date.toLocaleDateString());//根据本地时间格式，把 Date 对象的日期部分转换为字符串。 //日期对象和毫秒值之间的转换 var date1 = new Date(); var time = date1.getTime();//获取毫秒值，日期对象转换毫秒值 //将毫秒值转换成日期对象 var date2 = new Date(time); var datea = "6/20/2017"; var time2 = Date.parse(datea); var date3 = new Date(time2);为了简化对象调用内容的书写可以使用js中的特有语句with来完成with（对象）｛ 在该区域中可以直接食用指定的对象的内容，不需要写对象。｝Math对象 var num1 = Math.ceil("3.14");//返回但雨等于指定参数的最小整数 var num2 = Math.floor("3.14");//返回小于等于指定数据的最大整数 var num3 = Math.round("3.14");//四舍五入 Nuber对象 var num6 = paseInt("123dsdsa"); //将指定禁止格式的字符串转换为十进制 var num = parseInt("110", 2); var num1 = parseInt("0&3c", 16); //将十进制转换成其他进制，使用数字对象来完成 var num2 = new Number(6); document.write(num2.toString());//110 var num3 = 60; document.write(num3.toString());//3c js中特有的语句
for in 格式：for(变量in对象)//对对象进行遍历的语句 { } js自定义对象 如果想哟啊自定义对象，应该先对对象进行描述 js是基于对象，不是面相对象的。不具备描述事物的能力 按照面相思想的编写js？ function Person(){//相当于构造器 alert("this id person"); } //通过描述进行对象的建立 new var p = new Person(); //通过给p对象添加属性，直接使用p.属性名即可 p.name="张三"; p.age = 25; //入伏哦定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法。 p.show = function(){ alert(this.name+"showing舞了"); } 几种写法？ DOM
用来讲标记性文档封装成对象，并讲标记型文档中的所有标签（标签，文本，属性等）都封装成对象封装成对象是为了更方便的操作这些文档，以及文档中的所有内容，因为对象的出现就可以有属性和行为被调用。 文档对象模型 文档：标记性文档 对象：封装了属性和行为的实例，可以被直接调用 模型：所有标记型文档都剧本已写共性特征的一个体现 标记型文档（标签，属性，标签中封装的数据）只要是标记型文档，DOM这种技术都可以对其进行操作常见的标记型文档：html xmlDOM是如何操作标记型文档的？ 要操作标记型文档，必须进行解析 DOM的解析方式 按照标签的层次关系体现出标签的所属，形成一个树状结构，而数中的标签以及文本甚至属性称为节点 DOM解析的特点： 将标记型文档解析成一个DOM树，并将树中的内容都封装成节点对象。这种DOM解析的方式的好处：可以对树中的节点进行任意操作如：增删改。弊端：这种解析需要把整个标记型文档加载进内存。浪费内存空间且所占内存较大。 DOM模型有三种： 1、将html文档封装成对象。 2、在1的基础上加入了一些新功能，比如解析一些名称空间 3、在xml文档封装成了对象 DHTML：动态的HTML 注意：这不是一种语言，是多项技术综合体的简称 其中包涵了HTML，CSS，DOM，JavaScript 这四个技术在动态html页面效果定义时，都处于什么样的角色呢？负责什么效果？ HTML：提供标签，封装数据，目的时便于对该标签中的数据进行操作。 简单讲：用标签封装数据 css：提供样式属性，对标签中的数据进行样式定义 简单讲：对数据进行样式定义 DOM：负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义更多的属性和行为，便于对对象的操作 简单讲：将文档和标签以及其他内容变成对象 JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。 简单讲：负责页面的行为定义。就是页面的动态效果 BOM：browser object Model 浏览器对象模型浏览器对应的对象就是window对象 我们可以通过一个点击事件获取window版本信息的例子体验一下 window 对象 演示代码： 弹窗练习？实现弹窗最小化，都会再弹出来，focus（）location对象演示代码： document对象document最常见的操作就是获取页面中的节点获取节点的方式：1、getElementById 获取对 id 标签属性为指定值的第一个对象的引用。2、getElementsByName 根据name可以有多个，所以返回的就是一个数组。3、getElementsByTagName 获取基于指定元素名称的对象集合。常见的节点有三种：a、标签型节点b、属性节点c、文本节点标签型节点是没有值的，属性和文本节点是有值的。 var di = document.getElementById("div");//di为标签div的id名 alert(di.nodeValue); //获取节点里面的文本 var text = di.innerHTMl; alert(text); //改变文本 di.innerHTML = "文本内容被改掉"; 通过节点的层次关系获取节点对象 关系： 1、父节点：parcntNode:对应一个节点对象 2、子节点：childNode：对应一个节点集合 3、兄弟节点 上一个兄弟节点：previousSibling 下一个兄弟节点：nextSibling 尽量少用兄弟节点，会根据浏览器的不同，会解析除标签间的空白文档节点 课堂练习：创建？添加？删除？ jQuery对象与DOM对象
对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。普通处理，通过标准JavaScript处理：var p = document.getElementById('imooc');p.innerHTML = '您好！这是Dom写入';p.style.color = 'red';通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。jQuery的处理：var $p = $('#imooc');$p.html('您好！这是jQquery写入').css('color','red');通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。如何把jQuery对象转成DOM对象？利用数组下标的方式读取到jQuery中的DOM对象HTML代码 元素一 元素二 元素三 JavaScript代码var $div = $('div') //jQuery对象var div = $div[0] //转化成DOM对象div.style.color = 'red' //操作dom对象的属性用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0通过jQuery自带的get()方法jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：var $div = $('div') //jQuery对象var div = $div.get(0) //通过get方法，转化成DOM对象div.style.color = 'red' //操作dom对象的属性DOM对象转化成jQuery对象相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了HTML代码 元素一 元素二 元素三 JavaScript代码var div = document.getElementsByTagName('div'); //dom对象var $div = $(div); //jQuery对象var $first = $div.first(); //找到第一个div元素$first.css('color', 'red'); //给第一个元素设置颜色通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。jQuery选择器之层级选择器文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。选择器中的层级选择器就是用来处理这种关系子元素 后代元素 兄弟元素 相邻元素通过一个列表，对比层级选择器的区别 仔细观察层级选择器之间还是有很多相似与不同点层级选择器都有一个参考节点后代选择器包含子选择器的选择的内容一般兄弟选择器包含相邻兄弟选择的内容相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下