java day18第十八课JavaScript、DOM、jQuery
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代码存放在标签对<script> js code... </script>
2、当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，name标签中的内容不会被执行。
例：<script src="test.js" type="rext/javascript"></script>
注：规范中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("<br/>");
document.write(str.fontcolor("red"));//字体颜色
document.write("<br/>");
document.write(str.link("http://www.baidu.com"))//将字符串变成超链接
document.write("<br/>");
document.write(str.substr(1,3));//bcd
document.write("<br/>");
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 xml
DOM是如何操作标记型文档的？
要操作标记型文档，必须进行解析
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 对象
演示代码：
<script type="text/javascript">
var tt;
function windowdemo2(){
/* var a = confirm("你确定点击吗？");
alert("a="+a); */
/* setTimeout("alert('setTimeout三秒后弹出来')", 3000); */
tt = setInterval("alert('setInterval三秒出来一次')",3000);
}
/* 使用 setInterval 方法取消先前开始的间隔事件。 */
function stopsetInterval(){
clearInterval(tt);
}
function windowMove(){
moveBy(20, 20);/* 将窗口的位置移动指定 x 和 y 偏移值。 */
moveTo(40, 40);/* 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 */
}
function windowopen(){
open("", "_blank", "height=200,width=200,status=yes,toolbar=yes,menubar=yes,location=yes");
}
</script>
<input type="button" value="window事件演示" onclick="windowdemo2()"></input>
<input type="button" value=" 停止弹" onclick="stopsetInterval()"></input>
<input type="button" value=" open" onclick="windowopen()"></input>
弹窗练习？实现弹窗最小化，都会再弹出来，focus（）
location对象
演示代码：
<script type="text/javascript">
function windowdemo1(){
var name = location.pathname;
var text = location.href;
println(name);
println(text);
}
function println(val){
document.write(val+"<br/>")
}
</script>
<input type="button" value="按钮事件演示" onclick="windowdemo1()"></input>
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对象：
<p id=”imooc”></p>
我们要获取页面上这个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代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
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代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
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选择器之层级选择器
文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系
子元素 后代元素 兄弟元素 相邻元素
通过一个列表，对比层级选择器的区别
仔细观察层级选择器之间还是有很多相似与不同点
层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
