JavaScript
一、概念:一门客户端脚本语言;运行在客户端浏览器,每一个浏览器都有JavaScript的解析引擎;脚本语言:不需要编译,直接就可以被浏览器解析执行、
二、功能:可以来增加用户和html页面的交互过程,可以来控制html元素,让页面有一些动态效果,增强用户的体验。
三、发展史:
1992年,Nombase公司,开发出第一门客户端脚本语言,专用于表单的校验,命名为:c--;后来更名为:ScriptEase
1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript;后来,请回来了sun公司的专家,修改LiveScript,命名为Javascript
1996年,微软抄袭Javascript开发出JScript语言
1997年,ECMA(欧洲计算机制造商协会)ECMAScript,就是所有客户端脚本语言的标准
JavaScript=ECMAScript+JavaScript自己特有的东西(BOM+DOM)
四、ECMAScript
1.基本语法:客户脚本语言的标准
(1)与html结合的方式
①内部JS:定义<script>,标签体内容就是js代码
②外部JS:定义<script>,通过src属性引入外部的js文件
注意:<script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序;<script>可以定义多个
(2)注释
①单行注释://注释内容
②多行注释:/*注释内容*/
(3)数据类型
①原始数据类型(基本数据类型):
number:数字。整数/小数/NaN(not a number 一个不是数字的的数字类型)
string:字符串;字符串:"abc" "a" 'abc'
Boolean:true和false
null:一个对象为空的占位符
undefined:未定义。如果一个变量没有给初始化值,则会默认赋值为:undefined
② 应用数据类型:对象
(4)变量
变量:一小块存储数据的内存空间
Java语言是强类型语言,而JavaScript是弱类型语言;强类型语言:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定的的数据类型;弱类型:在开辟变量存储空间时,不定义空间将来存储的数据类型,可以存放任意的数据类型的数据
语法:var 变量名=初始化值;打印到页面上:document.write();
typeof运算符:获取变量数据类型;注意:null运算后得到的是一个object
(5)运算符
①一元运算符:只有有个运算数的运算符:++、--、+(正号);++、--自增自减,在前先自增或自减在运算,在后先运算在自增或自减
②算数运算符:+、-、*、/、%...
③赋值运算符:+=、-=、/=、*=...
④比较运算符:>、<、>=、<=、==、===(全等于);比较方式:类型相同;直接比较;类型不同:先进行类型转换,在比较(字符串比较:按字典顺序比较。按位逐一比较,直到得出大小为止)===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false。
⑤逻辑运算符:&&、||、!;其他数据类型转boolean:number:0或NaN为假,1为真;string:除了空字符串(“”),其他都为true;null&undefined:都是false;对象:所有对象都为true;
⑥三元运算符:?、:
(6)流程控制语句
①if..else..
②switch:在Java中,switch语句可以接收的数据类型:byte int shor char,枚举(1.5),String(1.7);在JS中,switch语句可以接收任意的原始数据类型
③while
④do...while
⑤for
(7)JS特殊的语法
①语句以分号结尾,如果一行只有一条语句则可以神略(不建议)
②变量的定义使用var关键字,也可以不使用;用:定义的变量是局部变量;不用:定义的变量是全局变量(不建议)
2.基本对象
(1)Function:函数(方法)对象
①创建:var fun=new Function(形式参数列表,方法体); function 方法名称(形参列表){方法体}; var 方法名=function(形参列表) { 方法体}
②方法
③属性:length形参个数
④特点:方法定义时,形参数据类型不用写,返回值类型也可以不用写;方法是一个对象,如果定义名称相同,后面定义的会覆盖见面所定义的; 在JS中,方法的调用只与方法的名称有关,和参数列表无关; 在方法声明中有一个隐藏的的内置对象(数组),arguments封装所有的实际参数
⑤调用:方法名称(实际参数列表)
(2)Array对象:
①创建
var arr= new Array(元素列表);
var arr =new Array(默认长度);
var arr=[元素列表];
②方法:
join():将数组中的元素按照指定的分隔符拼接成字符串
push():向数组的末尾添加一个元素或更多的元素,并返回新数组的长度
③属性:length数组的长度
④特点:JS中,数组元素的类型可变的; 在JS中数组的长度是可变的
(3)Boolean对象
(4)Date日期对象
①创建:var date=new Date();
②方法:toLocaleDateString():返回当前date对象对应的时间本地字符串格式;getTime():获取毫秒值。返回当前时间到1970.1.1零点的毫秒值
(5)Math对象
①创建:特点:Math对象不用创建直接可以使用。Math.方法名();
②方法:
random();返回0~1之间的随机数,包含0不包含1
ceil(x):对数进行上舍入
floor(x):对数进行下舍入
round(x):把数四舍五入为最接近的整数
③属性:PI圆周率
(6)NUmber对象
(7)String对象
(8)RegExp:正则表示对象
①正则表达式:定义字符串的组成规则
单个字符:[ ];如[a] [ab]a或b [a-zA-Z0-9_]; 特殊符号代表特殊含义的单个字符:\d:单个数字字符[0-9] ; \w单个单词字符[a-zA-Z0-9_]
量词符号:?:表示出现0次或1次、*表示出现0次或多次、+出现1次或多次; {m,n}表示m<=数量<=n,m如果缺省最多n次,n如果缺省最少m次
开始结束符号:^开始符号;结束符号:$
②正则对象:
创建var reg = new RegExp(“正则表达式”); var reg=/正则表达式/;
方法
test(参数):验证指定的字符串是否符合正则定义的规范
(9)Global
①特点:全局对象,这个方法中封装的方法不需要对象就可以直接调用; 方法名();
②方法
encodeURI():url编码
decoderURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseTnt():将字符串转为数字;逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN:六亲不认,连自己都不认,NaN参与的比较全部为false
eval():将JavaScript字符串作为脚本代码执行
③url编码:
五、BOM
1.概念:Browser Object Model 浏览器对象模型;将浏览器的各个组成部分封装成对象
2.组成
(1)window:窗口对象
(2)Navigatior:浏览器对象
(3)Screen:显示器屏幕
(4)History:历史记录对象
(5)LOcation:地址栏对象
3.window对象
(1)创建
(2)方法
与弹出框有关的方法
①alter():显示带有一段信息和一个确认按钮的警告框
②confirm():显示带有一段信息以及确认和取消按钮的对话框
如果用户点击确定按钮,则方法返回true;
如果用户点击取消按钮方法返回false
③prompt():显示可提示用户输入的对话框(输入框)
返回值:获取用户输入的值
与打开关闭有关的方法
open();打开一个新浏览器窗口;返回一个新的window对象
close():关闭一个浏览器窗口;关闭调用窗口;关闭新窗口:newWindow.close();
与定时器有关的方法
setTimeout( ):在指定的毫秒数后调用函数或计算表达式(一次性的定时器)
参数:(1)js代码或者方法对象;(2)毫秒值
返回值:唯一标识,用于取消定时器
clerarTimeout( ):取消有setTimeout( )方法设置的timeout
setInterval():按照指定的周期(以毫秒计)来调用函数或计算机表达式
参数:(1)js代码或者方法对象;(2)毫秒值
返回值:唯一标识,用于取消定时器
clearInterval():取消由setInterval()设置的timeout。
(3)属性
①获取其他BOM对象:
history
location
Navigator
Screen
②获取DOM对象
document
(4)特点
①Window对象不需要创建可以直接使用 window使用。window.方法名();
②window引用可以省略。方法名();
4.Location:地址栏对象
(1)创建(获取)
window.location
location
(2)方法:
reload():重新加载当前文档
(3)属性
href:设置和返回当前路径
5.History对象
(1)创建
window.history
history
(2)方法
back():加载history列表中的前一个url
forward():加载history列表中的下一个url
go(参数):加载history列表中的某个具体页面
正数/;前进几个历史记录
负数:后退几个历史记录
(3)属性
length:返回当前窗口历史列表中的url数量
六、DOM
事件
(1)功能:某些组件被执行了某些操作后,触发某些代码的执行
(2)如何让绑定事件
①直接在html标签上,指定事件的属性(操作 ),属性值就是js代码
事件:onclick:单击事件
②通过js获取元素对象,指定事件属性,设置一个函数
1.事件
事件:某些操作。如:单击,双击,键盘按下,鼠标移动
事件源:组件。如:按钮、文本输入框
监听器:代码
注册监听器:将事件,事件源,监听器集合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码
常见事件
点击事件
onclick:单击事件
ondblclick:双击事件
焦点事件
onblur:失去焦点事件
onfocus:元素获得焦点事件
加载事件
onload:一张页面或一幅图像完成加载
鼠标事件
onmousedown:鼠标按钮被按下
onmouseup:鼠标按键松开事件
onmousemove:鼠标被移动
onmouseover:鼠标移动到某元素之上
onmouseout:鼠标从某元素移开
键盘事件
onkeydown:某个键盘按钮被按下
onkeyup:某个键盘按钮被松开
onkeypress:某个键盘按键被按下并松开
选择和改变
onchange:域的内容被改变
onselect:文本被选中
表单击事件
onsubnit:确认按钮被点击
onerset:重置按钮被点击
2.功能:控制html文档的内容
3.代码:获取页面标签(元素)对象 Element:document.getElementById(“id值”);通过元素的id获取元素对象
4.操作Element对象:
(1)修改属性值
① 明确你获取的对象是哪一个
②查看api文档有哪些属性
(2)修改标签体的内容
①innerHTML;重新定义标题内容
5.DOM
(1)概念:Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
(2)W3C DOM 标准被分为3个不同部分
核心 DOM:针对任何结构化文档的标准
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他五个的父对象
XML DOM:针对XML文档的标准模型
HTML DOM :针对HTML文档的标准模型
(3)核心DOM
Document:文档对象
创建:在HTML Dom 模型中可以使用window对象来获取
window.document
document
方法
获取Element对象
getElementById():根据id属性值获取元素对象,id属性值一般唯一
getElementByTagName()根据元素名称获取元素对象,返回值是一个数组
getElementsByClassName():根据class属性值获取元素对象,返回值是一个数组
getElementsByName():根据name属性值获取元素对象,返回值是一个数组
创建其他DOM对象
createAttribute(name):属性
createComment():注释
createElement():元素
createTextNode():文本节点
属性
Element:元素对象
获取/创建:通过document来获取创建
方法
removeAttribute():删除属性
setAttribute():设置属性
Node节点对象
特点:所有DOM对象都可以被认为是一个节点
方法
CRUD DOM树
appendChild():向节点的子节点列表的结尾添加新的的子节点
removeChild():删除(并返回)当前节点的指定子节点
replaceChild():用新节点替换一个子结点
超链接功能:可以被点击:样式; 点击后跳转到herf指定的url;如果想要只保留点击功能,去掉跳转功能,实现:href="javascript:void(0);"
属性
parentNode:返回节点的父节点
(4)HTML DOM
标签体的设置和获取:innerHTNL
使用html元素对象的属性
控制样式
一个单词直接写
多个单词需要去掉中间的横线第二个单词首字母大写
方式一:使用元素的style属性来设置
方式二:提前定义好类选择器的样式,通过元素的className属性来设置class属性值
Bootstrap
一、概念:一个前端开发的框架
框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
好处:定义了很多的css样式和js插件,开发人员直接可以使用样式和插件得到丰富的页面效果;响应式布局:同一套页面可以兼容不同分辨率的设备
二、快速入门
1.下载Bootstrap
2.在项目中引入三个文件夹
3.创建html页面,引入必要得到文件
三、响应式布局
1.同一套页面可以兼容不同分辨率的设备
2.实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
3.步骤
定义容器:相当于之前的table
定义行:相当于之前的dr 行(row)
容器:.container (在不同设备上有不同固定宽度)或 .container-fluid (每一种设备都是100% 宽度)
定义元素:指定该元素在不同设备上所占格子数目 样式:col-设备代号-格子数目
设备代号: .col-xs-12超小屏幕 手机 (<768px);.col-sm-小屏幕 平板 (≥768px);.col-md-中等屏幕 桌面显示器 (≥992px);.col-lg-大屏幕 大桌面显示器 (≥1200px)
4.注意事项
(1)一行中如果格子数目超过12行会自动换行
(2)栅格类属性可以向上兼容,栅格类适用于屏幕宽度大于或等于分界点的设备
(3)如果设备的宽度小于了设置的栅格类属性的设备代码的最小值,会默认一个元素占满一整行
四、css样式和JS插件
1.全局的css样式
按钮:class="btn btn-link"(背景颜色)
表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
表单
给表单项添加:class="form-control"
图片:class="img-responsive"(不管什么情况都占100%);图片的形状:<img src="..." alt="..." class="img-rounded">方形
<img src="..." alt="..." class="img-circle">圆形
<img src="..." alt="..." class="img-thumbnail">相框
2.组件
导航条
分页条
3.插件
轮播图
XML
一、概念:Externsible Markup Language 可扩展标记语言
可扩展:标签都是自定义的。
功能:存储数据
作为配置文件
在网络中传输
与html区别:
都可用w3c查询:万维网联盟
xml的标签都是自定义的,html标签都是预定义的
xml的语法严格,html语法松散
xml是存储数据的,html是展示数据的
二、语法
基本语法
xml文档后缀名:.xml
xml文档第一行必须写文档声明
有且仅有一个跟标签
属性值必须使用引号引起来,单双引号都可以
标签必须正确关闭,要么自闭和,要么就有结束标签
xml标签区分大小写
组成部分
文档声明
格式:<?xml 属性列表 ?> //文档申明<?xml version='1.0' ?> //文档申明
属性列表
version:版本号,必须的属性
encoding:编码方式;告知解析引擎当前文档使用的字符集,默认值为:ISO-8859=1;<?xml version='1.0' encoding='utf-8' ?>
standalone:是否独立;取值:yes不依赖其他文件,no依赖其他文件
指令(了解):结合css
标签:标签名称自定义的
名称可以包含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字母xml(或者XML、Xml 等等)开始
名称不能包含空格
属性
id属性值唯一
文本
转义字符:小于号(<);&符号(&&);大于符号(>)
CDATA区:在该区域中的数据会被原样展示;<![CDATA[数据]]>
约束:规定xml文档的书写规则;作为框架的使用者(程序员):能够在xml中引入约束文档;能够简单读懂约束文档‘
DTD:一种简单的约束
Schema:一种复杂的约束
DTD
引入dtd文档到xml文档中
内部dtd:将约束定义在xml文档中
外部:dtd:将约束的规则定义在外部的dtd文件中
本地:<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
网络:<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
Schema
三、解析:操作xml文档,将文档中的数据读取到内存中
1.解析(读取):将文档中的数据读取到内存中
DOM:将标记语言文档一次性加载到内存,在内存中形成一颗dom树
优点:操作方便,可以对文档进行CRUD的所有操作
缺点:占内存
SAX:逐行读取,基于事件驱动
优点:不占内存,适用于内存较小的设备
缺点:只能读取,不能增删改
2.写入:将内存中的数据集保存到xml文档中,持久化的的存储
3.xml常见的解析器
(1)JAXP:sun公司提供的解析器,支持dom和sax两种思想
(2)DOM4J:一款非常优秀的解析器
(3)Jsoup:(用来解析HTML,因为HTML是一种标记语言,也可以用来解析XMl)
(4)PULL:Android操作系统内置的解析器,sax方式
4.Jsoup
(1)导入架包(jar)
(2)获取Document对象
(3)获取对应的标签Element对象
(4)获取数据
(5)对象的使用
Jsoup:工具类,可以解析html或xml文档,返回Document
parse:解析html或xml文档,返回Document
Document:文档对象,代表内存中的dom树
获取Element对象
Elements:元素Element对象的集合。可以当作ArrayList<Element>来使用
Element:元素对象
获取子元素对象
获取属性值
String attr(String key):根据属性名称获取属性值
获取文本内容
String text():获取所有子标签文本内容
String html():获取标签体的的所有内容(包括子标签)
Node:节点对象:是Document和Element对象的父类
(6)快捷查询方式
selector:选择器
使用的方法:Elements select(String cssQuerry)
Xpath:是一门在xml文档中查找信息的语言
使用Jsoup的Xpath需要导入一个架包
查询w3cshool参考手册,使用xpath的语法完成查询
Bootstrap
一、概念:一个前端开发的框架
框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
好处:定义了很多的css样式和js插件,开发人员直接可以使用样式和插件得到丰富的页面效果;响应式布局:同一套页面可以兼容不同分辨率的设备
二、快速入门
1.下载Bootstrap
2.在项目中引入三个文件夹
3.创建html页面,引入必要得到文件
三、响应式布局
1.同一套页面可以兼容不同分辨率的设备
2.实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
3.步骤
定义容器:相当于之前的table
定义行:相当于之前的dr 行(row)
容器:.container (在不同设备上有不同固定宽度)或 .container-fluid (每一种设备都是100% 宽度)
定义元素:指定该元素在不同设备上所占格子数目 样式:col-设备代号-格子数目
设备代号: .col-xs-12超小屏幕 手机 (<768px);.col-sm-小屏幕 平板 (≥768px);.col-md-中等屏幕 桌面显示器 (≥992px);.col-lg-大屏幕 大桌面显示器 (≥1200px)
4.注意事项
(1)一行中如果格子数目超过12行会自动换行
(2)栅格类属性可以向上兼容,栅格类适用于屏幕宽度大于或等于分界点的设备
(3)如果设备的宽度小于了设置的栅格类属性的设备代码的最小值,会默认一个元素占满一整行
四、css样式和JS插件
1.全局的css样式
按钮:class="btn btn-link"(背景颜色)
表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
表单
给表单项添加:class="form-control"
图片:class="img-responsive"(不管什么情况都占100%);图片的形状:<img src="..." alt="..." class="img-rounded">方形
<img src="..." alt="..." class="img-circle">圆形
<img src="..." alt="..." class="img-thumbnail">相框
2.组件
导航条
分页条
3.插件
轮播图
XML
一、概念:Externsible Markup Language 可扩展标记语言
可扩展:标签都是自定义的。
功能:存储数据
作为配置文件
在网络中传输
与html区别:
都可用w3c查询:万维网联盟
xml的标签都是自定义的,html标签都是预定义的
xml的语法严格,html语法松散
xml是存储数据的,html是展示数据的
二、语法
基本语法
xml文档后缀名:.xml
xml文档第一行必须写文档声明
有且仅有一个跟标签
属性值必须使用引号引起来,单双引号都可以
标签必须正确关闭,要么自闭和,要么就有结束标签
xml标签区分大小写
组成部分
文档声明
格式:<?xml 属性列表 ?> //文档申明<?xml version='1.0' ?> //文档申明
属性列表
version:版本号,必须的属性
encoding:编码方式;告知解析引擎当前文档使用的字符集,默认值为:ISO-8859=1;<?xml version='1.0' encoding='utf-8' ?>
standalone:是否独立;取值:yes不依赖其他文件,no依赖其他文件
指令(了解):结合css
标签:标签名称自定义的
名称可以包含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字母xml(或者XML、Xml 等等)开始
名称不能包含空格
属性
id属性值唯一
文本
转义字符:小于号(<);&符号(&&);大于符号(>)
CDATA区:在该区域中的数据会被原样展示;<![CDATA[数据]]>
约束:规定xml文档的书写规则;作为框架的使用者(程序员):能够在xml中引入约束文档;能够简单读懂约束文档‘
DTD:一种简单的约束
Schema:一种复杂的约束
DTD
引入dtd文档到xml文档中
内部dtd:将约束定义在xml文档中
外部:dtd:将约束的规则定义在外部的dtd文件中
本地:<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
网络:<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
Schema
三、解析:操作xml文档,将文档中的数据读取到内存中
1.解析(读取):将文档中的数据读取到内存中
DOM:将标记语言文档一次性加载到内存,在内存中形成一颗dom树
优点:操作方便,可以对文档进行CRUD的所有操作
缺点:占内存
SAX:逐行读取,基于事件驱动
优点:不占内存,适用于内存较小的设备
缺点:只能读取,不能增删改
2.写入:将内存中的数据集保存到xml文档中,持久化的的存储
3.xml常见的解析器
(1)JAXP:sun公司提供的解析器,支持dom和sax两种思想
(2)DOM4J:一款非常优秀的解析器
(3)Jsoup:(用来解析HTML,因为HTML是一种标记语言,也可以用来解析XMl)
(4)PULL:Android操作系统内置的解析器,sax方式
4.Jsoup
(1)导入架包(jar)
(2)获取Document对象
(3)获取对应的标签Element对象
(4)获取数据
(5)对象的使用
Jsoup:工具类,可以解析html或xml文档,返回Document
parse:解析html或xml文档,返回Document
Document:文档对象,代表内存中的dom树
获取Element对象
Elements:元素Element对象的集合。可以当作ArrayList<Element>来使用
Element:元素对象
获取子元素对象
获取属性值
String attr(String key):根据属性名称获取属性值
获取文本内容
String text():获取所有子标签文本内容
String html():获取标签体的的所有内容(包括子标签)
Node:节点对象:是Document和Element对象的父类
(6)快捷查询方式
selector:选择器
使用的方法:Elements select(String cssQuerry)
Xpath:是一门在xml文档中查找信息的语言
使用Jsoup的Xpath需要导入一个架包
查询w3cshool参考手册,使用xpath的语法完成查询