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+"<br>");
        document.write(s2)
    </script>

2.2 基本对象

2.2.1 Function

函数对象

    <script>
        //创建
        function fun1(a,b){
    
    
            document.write(a+b);
        }
        fun1("Hello","World");
        document.write("<br>");
        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+"<br>")
        document.write(arr2+"<br>")
        document.write(arr3+"<br>")
    </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+"<br>");
        document.write(reg2+"<br>");
        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+="    <tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+num+"</td>\n" +
            "        <td>"+city+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this)\">删除</a></td>" +
            "    </tr>";
    }

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 文档声明

<?xml 属性列表 ?>

属性列表：
version：版本号
encoding：编码方式。告知解析引擎当前稳当使用的字符集
standalone：是否独立

6.3.2 指令

结合CSS

<?xml-stylesheet type="text/css" href="users.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="<?xml version='1.0' encoding=\"UTF-8\" ?>\n" +
                "<users>\n" +
                "    <user number=\"1\">\n" +
                "        <name>Kobe</name>\n" +
                "        <num>24</num>\n" +
                "    </user>\n" +
                "    <user number=\"2\">\n" +
                "        <name>Jordan</name>\n" +
                "        <num>23</num>\n" +
                "    </user>\n" +
                "</users>";
        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);
    }
}