JavaScript基础

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

特点：1.向HTML页面中添加交互行为

2. 脚本语言，语法和Java类似

3.解释性语言，边执行边解释

语法：<script type= "text/javascript">

JavaScript 语句;

</script>

注：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可。

网页中引用JavaScript的方式（和HTML引用css有相似之处）

1. 直接在HTML标签中

2. 使用script标签

3. 外部js文件

JavaScript核心语法

核心语法-变量

1.先声明再赋值

var width; （var-用于声明变量的关键字 width－变量名）

width = 5;

2.同时声明和赋值变量

var catName= "皮皮";

var x, y, z = 10;

3.不声明直接赋值（变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用）

width = 5;

核心语法—数据类型

undefined-- var width; 变量width没有初始值，将被赋予值undefined

null--表示一个空值，与undefined值相等

number--var iNum=23; //整数

var iNum=23.0; //浮点数

boolean--true和false

string--一组被引号（单引号或双引号）括起来的文本

var string1="This is a string";

核心语法— typeof运算符

typeof运算符的作用：返回一个用来表示表达式的数据类型的字符串

typeof运算符的返回值如下

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和null

核心语法—String对象

String 对象用于处理文本（字符串）

语法：

var str1=“this is a String Object”; //声明方式1

var str2=new String(“熟悉的配方”); //声明方式2

String 对象的常用属性

属性	描述
consructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String对象的常用方法

方法名称	说 明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

核心语法—数组

创建数组：

var 数组名称 = new Array(size);

为数组元素赋值：

var fruit= new Array("apple", "orange", " peach","banana");

var fruit = new Array(4);

fruit [0] = " apple ";

fruit [1] = " orange ";

fruit [2] = " peach ";

fruit [3] = " banana ";

数组的常用属性和方法

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
	sort()	对数组排序
	push()	向数组末尾添加一个或更多 元素，并返回新的长度

核心语法—运算符号

类型	运算符
算术运算符	+ - * / % ++ - -
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& || !

核心语法—逻辑控制语句

if条件语句

switch多分支语句

for、while循环语句

for-in

核心语法—跳转语句

break

continue

核心语法—注释

单行注释以 // 开始，以行末结束

多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释

核心语法—常用的输入/输出

alert()

语法：alert("提示信息");

prompt()

语法：

prompt("提示信息", "输入框的默认信息");

prompt("请输入你喜欢的颜色","红色");

prompt("请输入你喜欢的颜色","");

核心语法—语法约定

1：代码区分大小写

2：变量、对象和函数的名称

3：分号

程序调试

方法1：Chrome开发人员工具

停止断点调试

单步调试，不进入函数体内部

单步调试，进入函数体内部

跳出当前函数

禁用所有的断点，不做任何调试

方法2：alert()方法

什么是函数

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块

使用更简单：不用定义属于某个类，直接使用

函数分类：系统函数和自定义函数

常用系统函数：

parseInt (“字符串”)：将字符串转换为整型数字

如: parseInt ("86")将字符串“86“转换为整型值86

parseFloat(“字符串”)：将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN()：用于检查其参数是否是非数字

自定义函数：

定义函数

function 函数名( 参数1,参数2,参数3,… ){ //有参函数 、无参函数 //JavaScript语句 [return 返回值] //可有可无 }

调用函数

函数调用一般和表单元素的事件一起使用，调用格式

语法：事件名＝ "函数名( )" ;

无参函数

调用无参函数，输出5次“欢迎学习JavaScript”

function study( ){ for(var i=0;i<5;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } }

<input name="btn" type="button" value="显示5次欢迎学习JavaScript" οnclick="study( )" />

有参函数

根据输入的次数，显示“欢迎学习JavaScript”

function study( count){ for(var i=0;i<count;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } }

<input type=“button“ value=”请输入显示的次数" οnclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />

事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

JavaScript操作BOM

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM可实现功能：

弹出新的浏览器窗口；

移动、关闭浏览器窗口以及调整窗口的大小；

页面的前进、后退；

window对象的常用属性

属性名称	说 明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

语法：window.属性名= "属性值"

示例：window.location="http://www.bdqn.cn" ;

window对象的常用方法

方法名称	说 明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法

confirm()：将弹出一个确认对话框

语法：confirm("对话框中显示的纯文本")

open()方法

语法：window.open("弹出窗口的url","窗口名称","窗口特征”)

属性名称	说 明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes | no |1 | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes | no |1 | 0	是否显示滚动条。黙认是yes
location=yes | no |1 | 0	是否显示地址地段。黙认是yes
status=yes | no |1 | 0	是否添加状态栏。黙认是yes
menubar=yes | no |1 | 0	是否显示菜单栏。黙认是yes
resizable=yes | no |1 | 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes | no |1 | 0	是否显示标题栏。黙认是yes
fullscreen=yes | no |1 | 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

history对象

常用方法：

名称	说 明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

location对象

常用属性：

名称	说 明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法：

名称	说 明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用

主页面使用和热风实现跳转和刷新本页

示例：

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>

<a href="javascript:location.reload()">刷新本页</a>

<a href="javascript:history.back()">返回主页面</a>

document对象

常用属性：

属性名称	说 明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：

document.referrer

document.URL

document对象应用

判断页面是否是链接进入

自动跳转到登录页面

document对象的常用方法

document对象的常用方法

名称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用 （对象的id唯一）
getElementsByName()	返回带有指定名称的对象的集合 （相同name属性）
getElementsByTagName()	返回带有指定标签名的对象的集合 （相同的元素）
write()	向文档写文本、HTML表达式或JavaScript代码

document对象访问页面元素案例

动态改变层、标签中的内容

访问相同name的元素

JavaScript内置对象

Array：用于在单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date：用于操作日期和时间

Date对象

语法：

var 日期对象=new Date(参数)

参数格式：MM DD,YYYY,hh:mm:ss

示例：

var today=new Date(); //返回当前日期和时间

var tdate=new Date("september 1,2013,14:58:12");

Date对象2-2

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

定时函数2-1

语法：

setTimeout("调用的函数",等待的毫秒数)

语法：

setInterval("调用的函数",间隔的毫秒数)

如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

清除定时函数

语法：

clearTimeout(setTimeOut()返回的ID值)

示例：

var myTime＝setTimeout("disptime() ", 1000 );

clearTimeout(myTime)；

语法：

clearInterval(setInterval()返回的ID值)

示例：

var myTime＝setInterval("disptime() ", 1000 );

clearInterval(myTime)；

jQuery简介

jQuery能做什么

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

提示：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

jQuery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

1.搭建jQuery开发环境

第一步：将jQuery开发版本的库文件拷贝到网页中。

第二步：在页面中引入jQuery库文件（可以放入head标签中）

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

使用jQuery弹出提示框，测试开发环境是否搭建成功。

<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码}) ;

jQuery语法结构

语法：

$(selector).action() ; 

工厂函数$()：将DOM对象转化为jQuery对象。

选择器 selector：获取需要操作的DOM 元素。

action()：jQuery中提供的方法，其中包括绑定事件处理的方法。

jQuery操作页面元素

jQuery操作页面元素的方法

使用addClass( )方法为元素添加样式

使用css( )方法设置元素样式

使用show( )、hide( ) 方法设置元素的显示和隐藏

语法：

jQuery 对象.addClass([样式名]);

样式：

$("#current").addClass("current");      

语法：

css("属性","属性值") ;     //设置一个css属性
css({"属性1":"属性值1","属性2":"属性值2"...}) ; //设置多个css属性

示例：

$(this).css({"background":"#c81623"});

设置元素的显示和隐藏

语法：

$(selector).show( );
$(selector).hide( );

示例：

$(this).children("div").show();
$(this).children("div").hide();

jQuery代码风格和规范

“$”等同于“ jQuery ”

链式操作

隐式迭代

注释

DOM对象和jQuery对象

链式操作：对一个对象进行多重操作，并将操作结果返回给该对象

隐式迭代：对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点。

jQuery 的方法内部存在隐式迭代，它会对匹配到的所有元素进行循环遍历，执行相应的方法；无需我们再手动地进行循，方便我们使用。

添加注释

---

DOM对象：直接使用JavaScript获取的节点对象

var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML;  

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
等同于
document.getElementById("title").innerHTML; 

提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

jQuery基本操作

jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

示例：

$("h3").css("background","#09F");

获取并设置网页中所有<h3>元素的背景

“h3”为选择器语法，必须放在$()中

$(“h3”)返回jQuery对象

.css()是为jQuery对象设置样式的方法

jQuery选择器分类

jQuery选择器功能强大，种类也很多，分类如下

通过CSS选择器选取元素

基本选择器

层次选择器

属性选择器

通过过滤选择器选择元素

基本过滤选择器

可见性过滤选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,...,selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

属性选择器

属性选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href ='#']" )选取href属性值为“#”的元素
[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !='#']" )选取href属性值不为“#”的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素

过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类

基本过滤选择器

可见性过滤选择器

表单对象过滤选择器

内容过滤选择器、子元素过滤选择器……

基本过滤选择器

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素