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选择器之层级选择器
文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系
子元素 后代元素 兄弟元素 相邻元素
通过一个列表,对比层级选择器的区别
仔细观察层级选择器之间还是有很多相似与不同点
层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下