JAVA学习笔记17——JavaScript，BootStrap，XML
JavaScript
1.JavaScript基础
基本概念
JavaScript是一门客户端脚本语言
运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行
基本功能
增强用户和HTML页面交互过程，可以来控制html元素，让页面有一些动态效果，增强用户体验
2.ECMAScript
2.1 基本语法
2.1.1 与html结合
内部JS
<script>
alert("HelloWorld")
</script>
外部JS
<script src="路径名"></script>
2.1.2 数据类型
原始数据类型
1.number：数字。整数/小数/NaN，不是数字的数字类型
2.string：字符串
3.boolean：true和false
4.null：一个对象为空的占位符
5.undefined：未定义。
引用数据类型
对象
2.1.3 变量
Java(强类型语言):在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
JavaScript(弱类型语言):在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
语法：var 变量名=初始化值；
<script>
var s1="Hello"
var s2="World"
//输出到页面上,换行
document.write(s1+"
");
document.write(s2)
</script>
2.2 基本对象
2.2.1 Function
函数对象
<script>
//创建
function fun1(a,b){
document.write(a+b);
}
fun1("Hello","World");
document.write("
");
var fun2=function(a,b){
document.write(a+b);
}
fun2("Hello","World");
</script>
特点：
方法定义时形参的类型不用写
方法是一个对象如果定义名称相同的方法，会覆盖
在JS中，方法的调用只和方法名有关，和参数列表无关
在方法声明中有一个隐藏的内置对象arguement，封装所有的实际参数
<script>
//创建
function fun1(){
var sum=0;
for (var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
document.write(sum);
}
fun1(1,2,3,4,5);
</script>
2.2.2 Array
数组对象
创建
var arr=new Array(元素列表);
var arr=new Array(默认长度);
var arr=[元素列表]
<script>
//创建
var arr1=new Array(24,23,8);
var arr2=new Array(5);
var arr3=[24,23,8];
document.write(arr1+"
")
document.write(arr2+"
")
document.write(arr3+"
")
</script>
方法
join():将数组中的元素按照指定的分隔符拼接为字符串
<script>
var arr=[24,23,8];
document.write(arr.join("#")); //24＃23＃8
</script>
push():向集合的尾部添加一个元素
属性
length:数组长度
特点
1.数组元素的类型可以变
2.数组长度可以变
2.2.3 Date
创建
var Date=new Date();
方法
toLocalString():返回当前date对象对应的时间本地字符串格式
<script>
var date=new Date();
document.write(date.toLocaleString());
</script>
getTime():返回当前对象描述的时间到1070年1月0点之间的毫秒值差
2.2.4 Math
Math不用创建，直接使用
方法
random():创建0~1之间的随机数
cell():向上取整
floor():向下取整
round():四舍五入
2.2.5 RegExp
正则表达式对象
1.正则表达式
定义字符串的组成规则
单个字符[]
[a],[ab] (a或者b),[a-z] (a到z)
特殊符号代表特殊含义的单个字符：
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9]
量词符号
*：出现0次或多次
？：出现0次或者一次
+：出现1次或多次
{m，n}：m<=数量<=n
开始结束符号
^:开始
$:结束
正则对象
创建
var reg=new RegExp(“正则表达式”);
var reg=/正则表达式/；
方法
test(字符串):验证指定字符串是否满足正则定义的规范
<script>
var reg1=new RegExp("\w{6,12}")
var reg2=/^\w{6,12}$/;
document.write(reg1+"
");
document.write(reg2+"
");
var flag=reg2.test("KobeBryant");
document.write(flag); //true
</script>
2.2.6 Global
全局对象，Global中封装的对象不需要对象就可以直接使用
方法
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码
decodeURIComponent():url解码(编码字符更多)
parseInt():将字符串转化为数字。逐一判断每一个字符是否是数字，知道不是数字为止，将前边的数字转换为number
eval():计算JavaScript字符串，并把它作为脚本代码执行
3. BOM
3.1 基本概念
Browser Object Model：浏览器对象模型，将浏览器的各个组成部分封装成对象
3.2 组成
3.2.1 Window窗口对象
创建
方法
与弹出框有关的方法：
alert():
confirm():显示带有一段消息及确认按钮和取消按钮的对话框。如果用户点击确定则为true，否则为false
prompt():显示可提示用户输入的对话框。返回值获取用户输入的值
与打开关闭有关的方法：
open():返回一个window对象
close():关闭调用的窗口
与定时器有关的方法：
setTimeout():在指定的毫秒数后调用函数或计算表达式。参数1为JS代码片段，参数2为毫秒值（一次性定时器），返回值为一个标识，用于取消定时器
clearTimeout():取消由setTimeout()方法设置的timeout
setInterval():按照指定的周期来调用函数或计算方法。与setTimeout()相同
clearInterval():取消由setInterval()方法设置的timeout
<script>
setTimeout("alert('HelloWorld')",5000);
</script>
属性
1.获取其他BOM对象(history,navigator,screen,location)
2.获取DOM对象
特点
Window对象不需要创建，值结束用window对象。window.方法名();
window引用可以省略。方法名();
3.2.2 History历史记录对象
方法
back():加载history列表中的前一个url
forward():加载history列表中的下一个url
go():加载history列表中的某一个具体页面
属性
length：返回当前窗口历史列表中的url数量
3.2.3 Location地址栏对象
方法
reload():刷新当前页面
属性
href：设置或者返回完整url
3.2.4 其他
Navigator浏览器对象
Screen显示器屏幕对象
4. DOM
4.1 DOM基础
概念：Document Object Model文档对象模型。将标记语言文档的各个组成部分封装为对象
功能：控制html文档
语法：document.getElementById(“id值”):通过元素id获取元素对象
4.1.1 基本操作
1.修改属性值
<body>
<img id="picture" src="img/picture.jpg">
<script>
//获取图片
var picture = document.getElementById("picture");
//更换图片
picture.src="img/校徽.jpg";
</script>
</body>
</html>
2.修改标签体内容
属性：
修改标签体内容：innerHTML()
<body>
<h1 id="s1">Hello</h1>
<script>
var s1 = document.getElementById("s1");
//修改标签体内容
s1.innerHTML="World";
</script>
</body>
4.1.2 事件
功能
某些组件被执行了某些操作后，触发某些代码执行
事件绑定
1.直接在html标签上指定事件的属性，属性值就是html代码
事件:onclick——单击事件
2.通过js获取元素对象，指定事件属性，设置函数
<body>
<img src="img/Kobe.jpg">
<script>
function f() {
alert("点击");
}
var p1 = document.getElementById("Kobe");
//绑定事件
p1.onclick=f();
</script>
</body>
4.2 核心DOM模型
4.2.1 Document文档对象
4.2.1.1 创建
在HTML DOM模型中可以使用window对象来获取
window.document document
4.2.1.2 方法
获取Element对象
getElementById():查找具有指定唯一ID的元素
getElementsByTagName():根据元素名称获取元素对象们，返回数组
getElementsByClassName():根据Class属性值获取元素对象们，返回数组
getElementsByName():根据Name属性值获取元素对象们，返回数组
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<br>
<script>
//根据元素名称获取元素对象，返回数组
var divs1 = document.getElementsByTagName("div");
document.write(divs1.length);
//根据Class属性值获取元素对象，返回数组
var divs2 = document.getElementsByClassName("cls1");
document.write(divs2.length);
var divs3 = document.getElementsByName("username");
document.write(divs3.length);
</script>
</body>
创建DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
4.2.2 Element元素对象
4.2.2.1 获取
通过document获取
4.2.2.2 方法
removeAttribute():删除属性
setAttribute():设置属性
<body>
<a>click</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取按钮
var btn_set = document.getElementById("btn_set");
btn_set.onclick=function () {
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.csdn.net/");
}
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick=function () {
var element_b = document.getElementsByTagName("a")[0];
element_b.removeAttribute("href","https://www.csdn.net/");
}
</script>
</body>
4.2.2.3 属性
4.2.3 Node节点对象
所有DOM对象都可以被认为是一个节点
4.2.3.1 方法
appendChild():向节点的子节点列表的结尾添加新的子节点
removeChild():删除并且返回当前节点的指定子节点
replaceChild():用新节点替换一个子节点
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
<input type="button" id="btn_remove" value="删除">
<input type="button" id="btn_append" value="添加">
<script>
var btn_remove = document.getElementById("btn_remove");
var btn_append = document.getElementById("btn_append");
btn_remove.onclick=function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
btn_append.onclick=function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div3.innerHTML="div3";
div1.appendChild(div3);
}
</script>
</body>
4.2.4 表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border:1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入姓名">
<input type="text" id="num" placeholder="请输入编号">
<input type="text" id="city" placeholder="请输入城市">
<input type="button" id="btn_add" value="添加">
</div>
<table>
<caption>信息表</caption>
<tr>
<th>姓名</th>
<th>编号</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr>
<td>Kobe</td>
<td>24</td>
<td>LosAngela</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>Jordan</td>
<td>23</td>
<td>Chicago</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<script>
document.getElementById("btn_add").onclick=function () {
var id = document.getElementById("id").value;
var num = document.getElementById("num").value;
var city = document.getElementById("city").value;
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_num = document.createElement("td");
var text_num = document.createTextNode(id);
td_num.appendChild(text_num);
var td_city = document.createElement("td");
var text_city = document.createTextNode(id);
td_city.appendChild(text_city);
var td_remove = document.createElement("td");
var element_a = document.createElement("a");
element_a.setAttribute("onclick","delTr(this)");
element_a.setAttribute("href","javascript:void(0);");
var text_a = document.createTextNode("删除");
element_a.appendChild(text_a);
td_remove.appendChild(element_a);
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_num);
tr.appendChild(td_city);
tr.appendChild(td_remove);
var tableElement = document.getElementsByTagName("table")[0];
tableElement.appendChild(tr);
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
4.3 HTML DOM
4.3.1 标签体的设置和获取
案例修改
document.getElementById("btn_add").onclick=function () {
var id = document.getElementById("id").value;
var num = document.getElementById("num").value;
var city = document.getElementById("city").value;
//获取table
var table = document.getElementsByTagName("table")[0];
table.innerHTML+=" \n" +
" "+id+" \n" +
" "+num+" \n" +
" "+city+" \n" +
" 删除 " +
" ";
}
4.3.2 控制样式
使用style属性设置样式
<script>
var div1 = document.getElementById("div1");
div1.onclick=function () {
//修改样式1
div1.style.border="1px solid red";
}
</script>
通过className设置样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick=function () {
div1.className="d1";
}
</script>
</body>
4.4 事件
4.4.1 基本概念
某些组件被执行了某些操作后，触发某些代码的执行
事件源：组件。如：按钮，文本输入框
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码
4.4.2 常见事件
4.4.2.1 点击事件
onclick:单击事件
doubleclick:双击事件
4.4.2.2 焦点事件
onblur:失去焦点
onfocu):获得焦点
4.4.2.3 加载事件
onload:一张页面或一幅图像完成加载
4.4.2.4 鼠标事件
onmousedown:鼠标按钮被按下
onmouseup:鼠标按钮被松开
onmousemove:鼠标被移动
onmouseover:鼠标移动到某元素之上
onmouseout:鼠标从某元素移开
4.4.2.5 键盘事件
onkeydown:某个键盘按键被按下
onkeyup:某个键盘按键被松开
onkeypress:某个键盘按键按下并松开
4.4.2.6 选择和改变事件
onchange:内容被改变
onselect:文本被选中
4.4.2.7 表单事件
onsubmit:确认按钮被点击。可以阻止表单提交(返回false)
onreset:重置按钮被点击
5. Bootstrap
5.1 基本概念
前端开发框架
优点：
定义了许多css样式和js插件，让我们开发人员可以得到丰富的页面效果
响应式布局。同一套页面可以兼容不同分辨率的设备
5.2 快速入门
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
5.3 响应式布局
实现：依赖于栅格系统
5.3.1 实现步骤
1.定义容器，相当于table
容器分类：
container:固定宽度
container-fluid:100%宽度
2.定义行，相当于tr。样式：row
3.定义元素，指定该元素在不同设备上所占格子的数目。样式:col-设备代号-格子数目
<body>
<!--定义容器-->
<div class="container-fluid">
<!--定义行-->
<div class="row">
<!--定义元素-->
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
</div>
</div>
</body>
5.3.2 注意事项
1.一行如果格子数目超过12，则超出部分自动换行
2.栅格类属性可以向上兼容
3.如果真实设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素沾满一整行
5.4 CSS样式和JS插件
5.4.1 全局CSS样式
按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
图片
//图片在任意尺寸都100%
<img src="..." class="img-responsive" alt="Responsive image">
表格
<table class="table table-bordered">
表单
class=“form-hover”
5.4.2 组件
导航条
分页条
5.4.3 插件
轮播图
6. XML
6.1 基本概念
Extensible Markup Language可扩展标记语言
功能：存储数据，作为配置文件，可以在网络中传输
xml与html区别：
1.xml标签都是自定义的，html是预定义的
2.xml语法严格，html语法松散
3.xml存储数据，html展示数据
6.2 语法
6.2 基本语法
<?xml version='1.0' ?>
<users>
<user id='1'>
<name>Kobe</name>
<num>24</num>
</user>
</users>
1.xml文档后缀名为xml
2.xml第一行必须定义为文档标签
3.xml文档中有且仅有一个根标签
4.属性值必须使用引号
5.必须有结束标签
6.3 组成部分
6.3.1 文档声明
属性列表：
version：版本号
encoding：编码方式。告知解析引擎当前稳当使用的字符集
standalone：是否独立
6.3.2 指令
结合CSS
6.3.3 标签
规则：
1.名称可以包含字母，数字以及其他字符
2.名称不能以数字或者标点符号开始
3.名称不能以xml开始
4.名称不能包含空格
6.3.4 文本
CDATA区：存放代码
<1[CDATA[数据]]>
6.4 解析
操作xml文档，将文档中的数据读取到内存中
6.4.1 解析xml的方式
DOM：将标记语言一次性加载进内存，在内存中形成一颗DOM树
优点：操作方便，可以对文档进行CRUD所有操作
缺点：消耗内存
SAX：逐行读取，基于事件驱动的
优点：不占内存
缺点：只能读取
6.4.2 xml解析器
1.JAXP：支持DOM与SAX
2.DOM4J：支持DOM
3.Jsoup：JAVA的HTML解析器
4.PULL：Android操作系统内置的解析器，sax方式
6.4.3 Jsoup
6.4.3.1 快速入门
public class Demo01 {
public static void main(String[] args) throws IOException {
//获取document对象，根据xml文档
//获取users.xml的path
String path = Demo01.class.getClassLoader().getResource("users.xml").getPath();
//解析xml文档，加载文档进内存，获取DOM树
Document doc = Jsoup.parse(new File(path), "utf-8");
//获取元素对象
Elements elements = doc.getElementsByTag("name");
System.out.println(elements.size());
//获取第一个
Element element = elements.get(0);
String name = element.text();
System.out.println(name);
}
}
6.4.3.2 对象的使用
Jsoup
工具类，可以解析html或xml文档，返回document
parse(File in,String charseName):解析xml或html文档
parse(String html):解析xml或html字符串
public class Demo01 {
public static void main(String[] args) throws IOException {
String path = Demo01.class.getClassLoader().getResource("users.xml").getPath();
String str="\n" +
"\n" +
" \n" +
" Kobe \n" +
" 24 \n" +
" \n" +
" \n" +
" Jordan \n" +
" 23 \n" +
" \n" +
"";
Document doc = Jsoup.parse(str);
System.out.println(doc);
}
}
parse(String url,int timeoutMillis):通过网络路径获取指定的html或xml的文档对象
public class Demo01 {
public static void main(String[] args) throws IOException {
String path = Demo01.class.getClassLoader().getResource("users.xml").getPath();
URL url=new URL("https://www.csdn.net/"); //代表网络中的一个资源路径
Document doc = Jsoup.parse(url, 10000);
System.out.println(doc);
}
}
Document
文档对象，代表内存中的dom树
getElementsByTag(String tagName):根据标签名称获取元素对象集合
getElementsByAttribute(String key):根据属性名称获取元素对象集合
getELementsByAttributeValue(String key,String value):根据对应的属性名和属性值获取元素对象集合
Elements
元素对象集合，可以当做ArrayList来使用
public class Demo02 {
public static void main(String[] args) throws IOException {
String path = Demo01.class.getClassLoader().getResource("users.xml").getPath();
Document document = Jsoup.parse(new File(path), "utf-8");
//获取元素对象
Elements users = document.getElementsByTag("users");
System.out.println(users);
Element element1 = document.getElementById("24");
System.out.println(element1);
Elements element2 = document.getElementsByAttributeValue("number", "2");
System.out.println(element2);
Elements element3 = document.getElementsByAttribute("id");
System.out.println(element3);
}
}
Element
获取子元素对象
getElementById(String id):根据id属性值获取唯一的element对象
getElementByTag(String tagName):根据标签名称获取元素对象集合
getElementByAttribute(String key):根据属性名称获取元素对象集合
getElementsByAttributeValue(String key,String value):根据对应的属性名和属性值获取元素对象集合
获取属性值
attr(String key):根据属性名称获取属性值
String text():获取文本内容
String html():获取标签体所有内容
Node
节点对象，Document和Element的父类
快捷查询
selector：选择器
使用方法：Elements select(String cssQuery)
语法：参考selector类中的例子
public class Demo02 {
public static void main(String[] args) throws IOException {
String path = Demo01.class.getClassLoader().getResource("users.xml").getPath();
Document document = Jsoup.parse(new File(path), "utf-8");
//查询name标签
Elements element1 = document.select("name");
System.out.println(element1);
//查询id值为24底下的子标签
Elements elements2 = document.select("user[id=\"24\"]>num");
System.out.println(elements2);
}
}