JavaScript
基本组成
1. ECMAScirpt(规范了基本的语法而已)
2. BOM (浏览器对象模型)
3. DOM (文档对象模型)
变量声明:
格式:
var 变量名 = 数据;
声明变量要注意的事项:
1. 在javascript中声明变量使用var关键字,javascript中的变量可以存储任意的数据类型数据.
2. javascript中变量数据类型是根据存储的值决定的,可以随时更改存储数据的类型。
3. 定义了多个同名的变量是,后定义的同名变量是覆盖前面定义的同名变量。
4. 声明变量的时候可以省略var关键字,但是不建议省略。
数据类型:
typeof 查看变量的数据类型。
使用格式:typeof 变量名
number 小数与整数
string 字符串 注意: javascript中没有字符的概念,只有字符串,字符串可以写在单引号或双引号中。
boolean 布尔数据类型,
undefined undefined代表该变量没有定义。
字符串转数字
parseInt() 可以把一个字符串转换成整数。
parseFloat() 可以把一个字符串转换成小数。
注意:
1、上面方法如果接收的字符串含有非数字的字符,那么会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字返回
2、上面方法如果接收的字符串发生无法转化的情况,会返回一个NaN
3、上面方法如果接收的字符串如果是以0开头的,会去掉0后返回
4、上面方法如果接收的字符串如果是以0x开头的,那么会把字符串中的内容当成十六进行的数据处理后返回。
5、parseFloat如果接收的字符串是一个整数时,那么转换后还是一个整数
6、在使用上面的方法转换前,一般会先使用isNaN判断接收的字符串是否是一个数字,isNaN返回true说明此字符串不是一个数字。
运算符特别
基本运算符:
+:加法运算中true代表1,false代表0
/: 除法中两个整数不能相除的话会出现小数点。
比较运算符:
凡是数字与字符串进行比较,会先把字符串转换成数字再进行比较的。
控制语句:
if语句
格式:
if(判断条件){
符合条件执行的代码
}
特殊之处:
1. 在javascript中的if语句条件不是只可以写布尔表达式,而是可以写任意数据。
number 非0为true, 0为false.
string 内容非空是true, 内容空的时候是false。
undefined:false
NaN: false
switch语句
格式:
switch(变量){
case 值1:
break;
default:
break;
}
特殊之处:
1. 在javascript中case后面可以跟常量、变量或者表达式。
for循环语句
格式:
for(var 变量名 in 遍历的目标){
}
for-in语句的作用:
1. 可以用于遍历数组的元素。 注意: 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
2. 可以用于遍历对象的所有属性数据。 注意: 使用for-in语句遍历对象的属性的时候,遍历出来的是对象的属性名。
with语句
有了with语句,在存取对象属性和调用方法时就不用重复指定对象。
格式:
with(对象){
}
函数
定义格式:
function 函数名(形参列表){
函数体 ;
}
要注意的细节:
1. 在js中函数定义形参时是不能使用var关键字声明变量的。
2. 在js中函数中的函数是没有返回值类型的,如果函数需要返回数据给调用者,直接返回即可,如果不需要返回则不返回。
3. 在js中函数中是没有函数重载概念的,后定义的同名函数会直接覆盖前面定义同名函数。
4. 在js中任何的函数内部都隐式的维护了一个arguments(数组)的对象,给函数传递数据的时候,是会先传递到arguments对象中, 然后再由arguments对象分配数据给形参的。
String
创建一个字符串的方式:
方式1:
var str = new String("字符串的内容");
方式2:
var str = "字符串的内容";
字符串常用的方法:
anchor() 生产锚点
charAt() 返回指定索引位置处的字符。
charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。
fontcolor() 把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML <I> 标记放置在 String 对象中的文本两端。
link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
replace() 返回根据正则表达式进行文字替换后的字符串的复制
split() 切割
Substr() 截取子串
toUpperCase() 转大写
toLowerCase 转小写
Number对象
创建Number对象的方式:
方式1:
var 变量 = new Number(数字)
方式2:
var 变量 = 数字;
常用的方法:
toString(num) 把数字转换成指定进制形式的字符串。
toFixed(num) 将数值以指定保留小数位四舍五入进行处理。
Math对象
Math对象常用的方法:
ceil() 向上取整
floor() 向下取整
random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间(含 0,不含 1),
round() 四舍五入
Array对象
创建数组的方式1:
var 变量名 = new Array(); 创建一个长度为0的数组。
方式2:
var 变量名= new Array(长度) 创建一个指定长度的数组对象。
方式3:
var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组的对象。
方式4:
var 变量名 = ["元素1","元素2"...];
数组要注意的细节:
1. 在javascript中数组的长度是可以发生变化的。
常用方法:
contact() 将数组拼接上另一个数组组成一个新数组返回。
join() join使用指定的分隔符把数组中的元素拼装成一个字符串返回。
pop() 移除数组中的最后一个元素并返回该元素。
push() 将新元素添加到一个数组中,并返回数组的新长度值。
shift() 删除第一个元素并返回
reverse() 翻转数组的元素
sort(sortNumber) 排序,排序的时候一定要传入排序的方法。
function sortNumber(num1,num2){
return num1-num2;
}
splice(1,1,"张三","李四","王五") 第一个参数是开始删除元素的索引值, 第二参数是删除元素的个数,往后的数据就是插入的元素。
slice(1,2) 指定数组的开始索引值与结束索引值截取数组的元素,并且返回子数组
自定义对象:
在javascript没有类的概念,只要有函数即可创建对象。
自定义对象的
方式1:使用无参的函数创建对象。
function Person(){}
var p = new Person(); //创建了一个Person对象了
p.id = 110;
p.name = "狗娃";
方式2:使用带参的函数创建对象。
function Person(id,name){
this.id = id;
this.name = name;
this.say = function(){
alert(name+"呵呵");
}
}
var p = new Person(110,"狗剩"); //创建对象
方式3:使用Object函数创建对象
var p = new Object();
p.id = 110;
p.name = "铁蛋";
方式4:使用字面量的方式创建
var p = {
id:110,
name:"狗娃",
say:function(){
alert(this.name+"呵呵");
}
Prototype
prototype是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。
注意的细节:
1.prototype是函数(function)的一个必备属性(只要是function,就一定有一个prototype属性)
2.prototype的值是一个对象
3.可以任意修改函数的prototype属性的值。
4.一个对象会自动拥有prototype的所有成员属性和方法
例子:为String对象添加reverse功能
String.prototype.reverse = function(){
var arr = this.toCharArray();
arr.reverse();
return arr.join("");
}
BOM(Browser Object Model) 浏览器对象模型.将浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象
window对象常用的方法:
open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
setInterval() 每经过指定毫秒值后就会执行指定的代码,它会返回一个任务ID。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定的代码一次。
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
location对象:
href: 获取以及设置地址栏的对象
reload():刷新当前的页面
screen对象
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
事件
注册:
方式一: 直接在html元素上注册
<body onload="ready()">
function ready(){
alert("body的元素被加载完毕了..");
}
方式二:可以js代码向找到对应的对象再注册。 推荐使用。
document.getElementById("body").onload = function(){
alert("body的元素被加载完毕");
}
常用的事件:
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发
ondblclick 当用户双击对象时触发
onmousedown 但鼠标位于对象之上按下时触发
onmouseup 当鼠标位于对象之上释放时触发
鼠标移动相关:
onmouseout 当鼠标指针移出对象边界时触发。
onmousemove 当鼠标指针划过对象时触发。
焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
DOM(Document Object Model)文档对象模型
一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容.
通过html元素的标签属性找节点。
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
通过关系(父子关系、兄弟关系)找标签。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
我们可以通过标签的类型进行判断筛选:
文本节点的类型: 3
注释的节点类型: 8
标签节点的类型: 1
XML
XML基础
可扩展标记性语言(标签可以自定义)
一个XML文件分为如下几部分内容:文档声明、标签、属性、注释、转义字符、CDATA区、处理指令。
标签
<student>student</student>或者 <student/> 或 <student></student>
xml标签名称区分大小写
xml标签有开始必须有结束
xml标签名中间不能使用空格或者:
xml标签中的空格是被认为是一种元素的
xml标签名不能以数字开头
在一个xml文档中,有且仅有一个根标签
属性:
<student name=""></student>
属性以键值对的形式存在,值必须以引号包含,不可省略。
一个标签内可以有多个属性,但属性名不能重复。
注释:
<!-- 注释体 -->
注释不能嵌套,不能放置到文件的第一行,那时留给文档声明的
文档声明:
<?xml version="1.0" encoding="utf-8"?>
文档声明必须放置在xml文件的第一行顶格写。
version: xml的版本号
encoding:解析xml文件时查询的码表(解码过程时查询的码表)
转义字符:
在xml中内置了一些特殊字符,这些特殊字符不能直接被浏览器原样输出。如果希望把这些特殊字符按照原样输出到浏览器,对这些特殊字符进行转义。转义之后的字符就叫转义字节。
特殊字符 转义字符
< <
> >
" "
' '
& &
空格 &nsbp;
CDATA
可以让一些需要进行包含特殊字符的内容统一进行原样输出,相当于整体转义。
<![CDATA[
内容体
]]>
处理指令
告诉xml解析如果解析xml文档。
XML约束:
xml约束技术:dtd、schmea
dtd引入方式:
使用内部的dtd文件:<!DOCTYPE 根元素名称 [ 约束体 ]>
引入外部的dtd文件:<!DOCTYPE 根元素名称 SYSTEM "dtd文件名">
引入网络的dtd文件:<!DOCTYPE 根元素名称 PUBLIC "文件名称" "dtd文件的URL">
dtd语法:
定义元素<ELEMENT>
复杂元素<!ELEMENT 元素 (子元素1,子元素2...)>
子元素出现次数的限制:
默认:出现且仅出现一次
+ :出现一次或者多次
? : 出现零次或者一次
* :出现零次或者多次
子元素出现顺序的限制:
, : 表示依次序出现这些元素
| : 表示只能出现其中一个元素
简单元素<!ELEMENT 元素 约束规则>
约束规则可以是:
(#PCDATA) 字符串
EMPTY 空
ANY 任意
定义属性<ATTTLIST>
<!ATTLIST 元素名称
属性名称 属性类型 属性约束规则
>
属性类型:
CDATA :字符串
枚举 (选项a|选项b|...) :只能出现代选项中的一个
ID :此项值不可重复,且只能以字母或者_开头
属性约束规则:
#REQUIRED :表示该属性必须出现
#IMPLIED :表示该属性可有可无
#FIXED :表示一个固定值,#FIXED "固定值"
直接值 :表示默认给元素添加一个属性并赋予直接值。
定义实体<!ENTITY>
<!ENTITY 实体名称 "实体值">
相当于变量:引用时使用 &实体名称;
这个一定要定义在内部,如果定义到外部文件中,部分浏览器不兼容。
schema约束特点:
1、这是一个xml格式的xml约束,它符合xml的基本语法格式。
2、在一个xml中可以有多个schema,多个schema通过命名空间来区分。
3、相比于dtd约束,schema可以支持除了(#PCDATA) 字符串之外更多的数据类型。
schema基本语法:
1、schema文件的扩展名是.xsd,根节点就是<schema>,文件内容使用的标签和属性有w3c提供。
2、targetNamespace="" 这表示本文件的一个声明id,被约束文件通过这个id引入此约束。
3、xmlns="" 表示这是一个约束文件。
4、复杂元素写法:
<element name="元素名">
<complexType>
<sequence>
子元素
</sequence>
</complexType>
</element>
复杂元素指示器:
sequence:表示元素出现的顺序
all:表示元素只能出现一次
choice:表示只能出现待选项中的一个
maxOccurs:表示最多出现的次数,值unbounded表示无限制
属性约束定义(必须定义在复杂元素上):
<attribute name="id" type="int" use="required" />
5、简单元素写法
<element name="子元素" type="数据类型" />
schema引入:
<schema xmlns="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.example.org/classSchema"
xmlns:tns="http://www.example.org/classSchema"
elementFormDefault="qualified"></schema>
<students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.example.org/classSchema"
xsi:schemaLocation="http://www.example.org/classSchema classSchema.xsd"
></students>
XML解析:
XML解析方式(原理不同)
DOM解析:一次性把整个xml文档加载进内存,然后在内存中构建一棵对象树。优点:容易进行增删改的操作;缺点:有可能导致内存溢出。
SAX解析:采用时间驱动,边读边解析。优点:不会造成内存溢出,方便实现查询操作;缺点:无法进行增删改操作。
解析工具:
1)JAXP (oracle-Sun公司官方)
2)JDOM工具(非官方)
3)Dom4J工具(非官方)
XML解析实现:
JAXP解析器在jdk的javax.xml.parsers包里面,存在四个类分别针对DOM和SAX的解析
针对DOM:
DocumentBuilderFactory:解析器工厂类
这是一个抽象类,可以通过DocumentBuilderFactory.newInstance()得到
DocumentBuilder:解析器类
这是一个抽象类,可以通过DocumentBuilderFactory.newDocumentBuilder()得到
Document parse(File f) 通过一个文件的路径构建一个document
在Node中,
NodeList getElementsByTagName(String name) 获取指定名字的所有标签
createElement(String tagName) 创建标签
createTextNode(String data) 创建文本
appendChild(Node newChild) 将文本添加到标签下面
getTextContent() 获取节点的文本内容
setTextContent(String textContent) 修改节点文本的内容
removeChild(Node oldChild) 删除节点,只能是用父节点来删除自己
getParentNode() 获取父节点
使用jaxp实现查询操作的步骤:
//创建解析器
DocumentBuilder documentBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
//利用解析器加载xml文档
Document doc = documentBuilder.parse(new File("./src/class.xml"));
//查询所有的指定标签,返回节点集合
NodeList nodeList = doc.getElementsByTagName("name");
//将NodeList的集合遍历出来
for(int i=0;i<nodeList.getLength();i++){
//可以利用item(i)获取具体某一个节点的信息
Node node = nodeList.item(i);
//获取节点的文本信息
String textContent = node.getTextContent();
System.out.println(textContent);
}
使用jaxp实现增加操作的步骤
DocumentBuilder documentBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
Document document = documentBuilder.parse(new File("./src/class.xml"));
//增加操作,先创建出各个节点,然后通过appendChild()挂到相应父节点
Node node = document.getElementsByTagName("student").item(1);
Element sexEle = document.createElement("sex");
Text manText = document.createTextNode("man");
sexEle.appendChild(manText);
node.appendChild(sexEle);
//回写操作
Transformer transformer = TransformerFactory.newInstance().newTransformer();
transformer.transform(new DOMSource(document), new StreamResult("./src/class.xml"));
针对SAX:
SAXParserFactory:解析器工厂类
这是一个抽象类,可以通过SAXParserFactory.newInstance()得到
SAXParser:解析器类
这是一个抽象类,可以通过SAXParserFactory.newSAXParser()得到
void parse(File f,DefaultHandler dh)
当解析到开始标签的时候,会自动执行startElement方法,通过qName返回标签名称。
当解析到文本内容的时候,会自动执行characters方法,通过string的构造方法返回内容
当解析到结束标签的时候,会自动执行endElement方法,通过qName返回便签名称
使用jaxp实现查询操作的步骤:
//创建SAXParser解析器
SAXParser saxParser = SAXParserFactory.newInstance().newSAXParser();
//解析xml文件,需要两个参数,第一个为源文件,第二个为一个时间驱动器
saxParser.parse(new File("./src/class.xml"), new MyHandler());
//自定义事件驱动继承defaultHandler,重写startElement、characters、endElement方法
class MyHandler extends DefaultHandler{
public void startElement(String uri, String localName, String qName,
Attributes attributes) throws SAXException {
//这里通过qName获取开始标签
//这里通过attributes获取属性
}
public void characters(char[] ch, int start, int length)
throws SAXException {
//这里通过new String(char[] ch, int start, int length)获取文本内容
}
public void endElement(String uri, String localName, String qName)
throws SAXException {
//这里通过qName获取结束标签
}
}
DOM4J解析实现:
DOM4J并不是javase的一部分,使用前需导入DOM4J的jar包。
节点(Node)类型:
标签节点(Element):
属性节点(Attribute):
文本节点(Text):
使用Dom4j解析步骤:
//创建SAXReader对象
SAXReader sr = new SaxReader();
//读取到Document对象
Document document = sr.read(new File());
//使用遍历器得到对象子对象
Iterator it = document.nodeIterator();
while(it.hasNext()){
Node node = it.next();
}
//将文档写出
XMLWriter writer = new XMLWriter(OutputStream, OutputForamt)
wirter.write(Document);
write.close();
使用Dom4j实现添加操作:
SAXReader sr = new SAXReader();
Document document = sr.read(new File("./class.xml"));
Element rootElement = document.getRootElement();
Element studentEle = rootElement.element("student");
//增加元素
Element sexEle = studentEle.addElement("sex");
sexEle.setText("nan");
//写回文档
XMLWriter xmlWriter = new XMLWriter(new FileOutputStream(new File("./class.xml")),OutputFormat.createPrettyPrint());
xmlWriter.write(document);
xmlWriter.close();
常用方法:
节点:
Iterator nodeIterator() 获取当前标签节点下的所有子节点
标签:
Element getRootElement() 获取xml文档的根标签
Element element("标签名") 获取指定名称的子标签中的第一个
List<Element> elements("标签名") 获取所有指定名称的子标签
List<Element> elements() 获取所有子标签
Iterator<Element> elementIterator("标签名") 获取指定名称的所有子标签
属性:
String attributeValue("属性名") 获取指定名称的属性值
Attribute attribute("属性名") 获取指定名称的属性对象
String getName() 获取属性名称
String getValue() 获取属性值
List<Attribute> attributes() 获取所有属性对象
Iterator<Attribute> attibuteIterator() 获取所有属性对象
文本:
getText() 获取当前标签的文本
elementText("标签名") 获取当前标签的指定名称的子标签的文本内容
修改xml文档的API方法
增加:
DocumentHelper.createDocument() 增加文档
addElement("名称") 增加标签
addAttribute("名称",“值”) 增加属性
修改:
Attribute.setValue("值") 修改属性值
Element.addAtribute("同名的属性名","值") 修改同名的属性值
Element.setText("内容") 修改文本内容
删除
Element.detach(); 删除标签
Attribute.detach(); 删除属性
Element.getParent.remove(element);//利用父节点去删除子节点
使用Dom4J支持XPATH的操作
XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。
XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。
下面列出了最有用的路径表达式:
表达式 描述
nodename 选取此节点的所有子节点。
/ 从根节点选取。
// 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。
. 选取当前节点。
.. 选取当前节点的父节点。
@ 选取属性。
* 匹配任何元素节点。
@* 匹配任何属性节点。
node() 匹配任何类型的节点。
Dom4J本身不支持XPATH,需要引入jaxen包。,这里面提供了两个方法来支持XPath
selectSingleNode(String nodeName)
selectNodes(String nodeName)