A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© TTwawa 初级黑马   /  2019-1-10 09:41  /  863 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

# 今日内容
        1. JavaScript基础


## JavaScript:
        * 概念:        一门客户端脚本语言
                * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
                * 脚本语言:不需要编译,直接就可以被浏览器解析执行了

        * 功能:
                * 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
       
        * JavaScript发展史:
                1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C--        ,后来更名为:ScriptEase
                2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
                3. 1996年,微软抄袭JavaScript开发出JScript语言
                4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

                * JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

        * ECMAScript:客户端脚本语言的标准
                1. 基本语法:
                        1. 与html结合方式
                                1. 内部JS:
                                        * 定义<script>,标签体内容就是js代码 alert("hello word")
                                2. 外部JS:
                                        * 定义<script src="js/aa.js">,通过src属性引入外部的js文件

                                * 注意:
                                        1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
                                        2. <script>可以定义多个。
                        2. 注释
                                1. 单行注释://注释内容
                                2. 多行注释:/*注释内容*/
                        3. 数据类型:
                                1. 原始数据类型(基本数据类型):
                                        1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
                                        2. string:字符串。 字符串  "abc" "a" 'abc'
                                        3. boolean: true和false
                                        4. null:一个对象为空的占位符
                                        5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
                                       
                                2. 引用数据类型:对象
                               
                        4. 变量
                                * 变量:一小块存储数据的内存空间
                                * Java语言是强类型语言,而JavaScript是弱类型语言。
                                        * 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
                                        * 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
                                * 语法:
                                        * var 变量名 = 初始化值;
                               
                                * typeof运算符:获取变量的类型。
                                        * 注:null运算后得到的是object
                        5. 运算符
                                1. 一元运算符:只有一个运算数的运算符
                                        ++,-- , +(正号)  
                                        * ++ --: 自增(自减)
                                                * ++(--) 在前,先自增(自减),再运算
                                                * ++(--) 在后,先运算,再自增(自减)
                                        * +(-):正负号
                                    * 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
                        * 其他类型转number:
                            * string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
                            * boolean转number:true转为1,false转为0
                                2. 算数运算符
                                        + - * / % ...

                                3. 赋值运算符
                                        = += -+....

                                4. 比较运算符
                                        > < >= <= == ===(全等于)
                                        * 比较方式
                          1. 类型相同:直接比较
                              * 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
                          2. 类型不同:先进行类型转换,再比较
                              * ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
                                       

                                5. 逻辑运算符
                                        && || !
                                        * 其他类型转boolean:
                           1. number:0或NaN为假,其他为真
                           2. string:除了空字符串(""),其他都是true
                           3. null&undefined:都是false
                           4. 对象:所有对象都为true
                               
                                6. 三元运算符
                                        ? : 表达式
                                        var a = 3;
                                var b = 4;
                       
                                var c = a > b ? 1:0;
                                        * 语法:
                                                * 表达式? 值1:值2;
                                                * 判断表达式的值,如果是true则取值1,如果是false则取值2;
                               
                        6. 流程控制语句:
                                1. if...else...
                                2. switch:
                                        * 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
                                                * switch(变量):
                                                        case 值:
                                        * 在JS中,switch语句可以接受任意的原始数据类型
                                3. while
                                4. do...while
                                5. for
                        7. JS特殊语法:
                                1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
                                2. 变量的定义使用var关键字,也可以不使用
                            * 用: 定义的变量是局部变量
                        * 不用:定义的变量是全局变量(不建议)

                        8. 练习:99乘法表
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <title>99乘法表</title>
                            <style>
                                td{
                                    border: 1px solid;
                                }
                       
                            </style>
                       
                            <script>
                       
                                document.write("<table  align='center'>");
                       
                       
                                //1.完成基本的for循环嵌套,展示乘法表
                                for (var i = 1; i <= 9 ; i++) {
                                    document.write("<tr>");
                                    for (var j = 1; j <=i ; j++) {
                                        document.write("<td>");
                       
                                        //输出  1 * 1 = 1
                                        document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
                       
                                        document.write("</td>");
                                    }
                                    /*//输出换行
                                    document.write("<br>");*/
                       
                                    document.write("</tr>");
                                }
                       
                                //2.完成表格嵌套
                                document.write("</table>");
                       
                            </script>
                        </head>
                        <body>
                       
                        </body>
                        </html>

                2. 基本对象:
                        1. Function:函数(方法)对象
                1. 创建:
                    1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                    2.
                            function 方法名称(形式参数列表){
                            方法体
                        }

                    3.
                           var 方法名 = function(形式参数列表){
                            方法体
                       }
                2. 方法:

                3. 属性:
                    length:代表形参的个数
                4. 特点:
                    1. 方法定义是,形参的类型不用写,返回值类型也不写。
                    2. 方法是一个对象,如果定义名称相同的方法,会覆盖
                    3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
                    4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
                5. 调用:
                    方法名称(实际参数列表);
                       
                        2. Array:数组对象
                1. 创建:
                    1. var arr = new Array(元素列表);
                    2. var arr = new Array(默认长度);
                    3. var arr = [元素列表];
                2. 方法
                    join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                    push()        向数组的末尾添加一个或更多元素,并返回新的长度。
                3. 属性
                    length:数组的长度
                4. 特点:
                    1. JS中,数组元素的类型可变的。
                    2. JS中,数组长度可变的。
                        3. Boolean
                        4. Date:日期对象
                1. 创建:
                    var date = new Date();

                2. 方法:
                    toLocaleString():返回当前date对象对应的时间本地字符串格式
                    getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
                        5. Math:数学对象
                1. 创建:
                    * 特点:Math对象不用创建,直接使用。  Math.方法名();

                2. 方法:
                    random():返回 0 ~ 1 之间的随机数。 含0不含1
                    ceil(x):对数进行上舍入。
                    floor(x):对数进行下舍入。
                    round(x):把数四舍五入为最接近的整数。
                3. 属性:
                    PI
                        6. Number
                        7. String
                        8. RegExp:正则表达式对象
                                1. 正则表达式:定义字符串的组成规则。
                                        1. 单个字符:[]
                                                如: [a] [ab] [a-zA-Z0-9_]
                                                * 特殊符号代表特殊含义的单个字符:
                                                        \d:单个数字字符 [0-9]
                                                        \w:单个单词字符[a-zA-Z0-9_]
                                        2. 量词符号:
                                                ?:表示出现0次或1次
                                                *:表示出现0次或多次
                                                +:出现1次或多次
                                                {m,n}:表示 m<= 数量 <= n
                                                        * m如果缺省: {,n}:最多n次
                                                        * n如果缺省:{m,} 最少m次
                                        3. 开始结束符号
                                                * ^:开始
                                                * $:结束
                                2. 正则对象:
                                        1. 创建
                                                1. var reg = new RegExp("正则表达式");
                                                2. var reg = /正则表达式/;
                                        2. 方法       
                                                1. test(参数):验证指定的字符串是否符合正则定义的规范       
                        9. Global
                                1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();
                                2. 方法:
                                    encodeURI():url编码
                                    decodeURI():url解码

                                    encodeURIComponent():url编码,编码的字符更多
                                    decodeURIComponent():url解码

                                    parseInt():将字符串转为数字
                                        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
                                    isNaN():判断一个值是否是NaN
                                        * NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

                                    eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
                3. URL编码
                   传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

        * BOM

        * DOM

# 今日内容:
        1. JavaScript:
                1. ECMAScript:
                2. BOM:
                3. DOM:
                        1. 事件


        javaScript = ECMAScript + javaScript(bom+dom)



## DOM简单学习:为了满足案例要求
        * 功能:控制html文档的内容
        * 获取页面标签(元素)对象:Element
                * document.getElementById("id值"):通过元素的id获取元素对象

        * 操作Element对象:
                1. 修改属性值:
                        1. 明确获取的对象是哪一个?
                        2. 查看API文档,找其中有哪些属性可以设置
                2. 修改标签体内容:
                        * 属性:innerHTML
                        1. 获取元素对象
                        2. 使用innerHTML属性修改标签体内容

## 事件简单学习
        * 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
                * 造句:  xxx被xxx,我就xxx
                        * 我方水晶被摧毁后,我就责备对友。
                        * 敌方水晶被摧毁后,我就夸奖自己。

        * 如何绑定事件
                1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
                        1. 事件:onclick--- 单击事件

                2. 通过js获取元素对象,指定事件属性,设置一个函数

                * 代码:
                        <body>
                                <img id="light" src="img/off.gif"  onclick="fun();">
                                <img id="light2" src="img/off.gif">
                               
                                <script>
                                    function fun(){
                                        alert('我被点了');
                                        alert('我又被点了');
                                    }
                               
                                    function fun2(){
                                        alert('咋老点我?');
                                    }
                               
                                    //1.获取light2对象
                                    var light2 = document.getElementById("light2");
                                    //2.绑定事件
                                    light2.onclick = fun2;
                               
                               
                                </script>
                        </body>
       
        * 案例1:电灯开关
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>电灯开关</title>
               
                </head>
                <body>
               
                <img id="light" src="img/off.gif">
               
                <script>
                    /*
                        分析:
                            1.获取图片对象
                            2.绑定单击事件
                            3.每次点击切换图片
                                * 规则:
                                    * 如果灯是开的 on,切换图片为 off
                                    * 如果灯是关的 off,切换图片为 on
                                * 使用标记flag来完成
               
                     */
               
                    //1.获取图片对象
                    var light = document.getElementById("light");
               
                    var flag = false;//代表灯是灭的。 off图片
               
                    //2.绑定单击事件
                    light.onclick = function(){
                        if(flag){//判断如果灯是开的,则灭掉
                            light.src = "img/off.gif";
                            flag = false;
               
                        }else{
                            //如果灯是灭的,则打开
               
                            light.src = "img/on.gif";
                            flag = true;
                        }
               
               
                    }
                    
                </script>
                </body>
                </html>


# BOM:
        1. 概念:Browser Object Model 浏览器对象模型
                * 将浏览器的各个组成部分封装成对象。

        2. 组成:
                * Window:窗口对象
                * Navigator:浏览器对象
                * Screen:显示器屏幕对象
                * History:历史记录对象
                * Location:地址栏对象

        3. Window:窗口对象
            1. 创建
            2. 方法
                 1. 与弹出框有关的方法:
                    alert()        显示带有一段消息和一个确认按钮的警告框。
                    confirm()        显示带有一段消息以及确认按钮和取消按钮的对话框。
                        * 如果用户点击确定按钮,则方法返回true
                        * 如果用户点击取消按钮,则方法返回false
                    prompt()        显示可提示用户输入的对话框。
                        * 返回值:获取用户输入的值
                 2. 与打开关闭有关的方法:
                    close()        关闭浏览器窗口。
                        * 谁调用我 ,我关谁
                    open()        打开一个新的浏览器窗口
                        * 返回新的Window对象
                 3. 与定时器有关的方式
                    setTimeout()        在指定的毫秒数后调用函数或计算表达式。
                        * 参数:
                            1. js代码或者方法对象
                            2. 毫秒值
                        * 返回值:唯一标识,用于取消定时器
                    clearTimeout()        取消由 setTimeout() 方法设置的 timeout。
       
                    setInterval()        按照指定的周期(以毫秒计)来调用函数或计算表达式。
                    clearInterval()        取消由 setInterval() 设置的 timeout。
       
            3. 属性:
                1. 获取其他BOM对象:
                    history
                    location
                    Navigator
                    Screen:
                2. 获取DOM对象
                    document
            4. 特点
                * Window对象不需要创建可以直接使用 window使用。 window.方法名();
                * window引用可以省略。  方法名();


        4. Location:地址栏对象
                1. 创建(获取):
                        1. window.location
                        2. location

                2. 方法:
                        * reload()        重新加载当前文档。刷新
                3. 属性
                        * href        设置或返回完整的 URL。


        5. History:历史记录对象
        1. 创建(获取):
            1. window.history
            2. history

        2. 方法:
            * back()        加载 history 列表中的前一个 URL。
            * forward()        加载 history 列表中的下一个 URL。
            * go(参数)        加载 history 列表中的某个具体页面。
                * 参数:
                    * 正数:前进几个历史记录
                    * 负数:后退几个历史记录
        3. 属性:
            * length        返回当前窗口历史列表中的 URL 数量。




## DOM:
        * 概念: Document Object Model 文档对象模型
                * 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

        * W3C DOM 标准被分为 3 个不同的部分:

                * 核心 DOM - 针对任何结构化文档的标准模型
                        * Document:文档对象
                        * Element:元素对象
                        * Attribute:属性对象
                        * Text:文本对象
                        * Comment:注释对象

                        * Node:节点对象,其他5个的父对象
                * XML DOM - 针对 XML 文档的标准模型
                * HTML DOM - 针对 HTML 文档的标准模型





        * 核心DOM模型:
                * Document:文档对象
                        1. 创建(获取):在html dom模型中可以使用window对象来获取
                                1. window.document
                                2. document
                        2. 方法:
                                1. 获取Element对象:
                                        1. getElementById()        : 根据id属性值获取元素对象。id属性值一般唯一
                                        2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
                                        3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                                        4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
                                2. 创建其他DOM对象:
                                        createAttribute(name):创建属性
                        createComment() 创建注释
                        createElement():创建标签
                        createTextNode():创建文本
                        3. 属性
                * Element:元素对象
                        1. 获取/创建:通过document来获取和创建
                        2. 方法:
                                1. removeAttribute():删除属性
                                2. setAttribute():设置属性


                * Node:节点对象,其他5个的父对象
                        * 特点:所有dom对象都可以被认为是一个节点
                        * 方法:
                                * CRUD dom树:
                                        * appendChild():向节点的子节点列表的结尾添加新的子节点。
                                        * removeChild()        :删除(并返回)当前节点的指定子节点。
                                        * replaceChild():用新节点替换一个子节点。
                        * 属性:
                                * parentNode 返回节点的父节点。


        * HTML DOM
                1. 标签体的设置和获取:innerHTML
                2. 使用html元素对象的属性
                3. 控制元素样式
                        1. 使用元素的style属性来设置
                                如:
                                         //修改样式方式1
                                div1.style.border = "1px solid red";
                                div1.style.width = "200px";
                                //font-size--> fontSize
                                div1.style.fangsi fontSize = "20px";
                        2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。


## 事件监听机制:
        * 概念:某些组件被执行了某些操作后,触发某些代码的执行。       
                * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
                * 事件源:组件。如: 按钮 文本输入框...
                * 监听器:代码。
                * 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。


        * 常见的事件:
                1. 点击事件:
                        1. onclick:单击事件
                        2. ondblclick:双击事件
                2. 焦点事件
                        1. onblur:失去焦点
                        2. onfocus:元素获得焦点。

                3. 加载事件:
                        1. onload:一张页面或一幅图像完成加载。

                4. 鼠标事件:
                        1. onmousedown        鼠标按钮被按下。
                        2. onmouseup        鼠标按键被松开。
                        3. onmousemove        鼠标被移动。
                        4. onmouseover        鼠标移到某元素之上。
                        5. onmouseout        鼠标从某元素移开。
                       
                       
                5. 键盘事件:
                        1. onkeydown        某个键盘按键被按下。       
                        2. onkeyup                某个键盘按键被松开。
                        3. onkeypress        某个键盘按键被按下并松开。

                6. 选择和改变
                        1. onchange        域的内容被改变。
                        2. onselect        文本被选中。

                7. 表单事件:
                        1. onsubmit        确认按钮被点击。
                        2. onreset        重置按钮被点击。
# 今日内容
        1. Bootstrap




## Bootstrap:
        1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
                * 框架:一个半成品软件,开发人员可以在框架基础上,再进行开发,简化编码。
                * 好处:
                        1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
                        2. 响应式布局。
                                * 同一套页面可以兼容不同分辨率的设备。


        2. 快速入门
                1. 下载Bootstrap
                2. 在项目中将这三个文件夹复制
                3. 创建html页面,引入必要的资源文件


                <!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 HelloWorld</title>
               
                    <!-- Bootstrap -->
                    <link href="css/bootstrap.min.css" rel="stylesheet">
               
               
                    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
                    <script src="js/jquery-3.2.1.min.js"></script>
                    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
                    <script src="js/bootstrap.min.js"></script>
                </head>
                <body>
                <h1>你好,世界!</h1>
               
                </body>
                </html>

## 响应式布局
        * 同一套页面可以兼容不同分辨率的设备。
        * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
        * 步骤:
                1. 定义容器。相当于之前的table、
                        * 容器分类:
                                1. container:两边留白
                                2. container-fluid:每一种设备都是100%宽度
                2. 定义行。相当于之前的tr   样式:row
                3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
                        * 设备代号:
                                1. xs:超小屏幕 手机 (<768px):col-xs-12
                                2. sm:小屏幕 平板 (≥768px)
                                3. md:中等屏幕 桌面显示器 (≥992px)
                                4. lg:大屏幕 大桌面显示器 (≥1200px)
   
                * 注意:
                        1. 一行中如果格子数目超过12,则超出部分自动换行。
                        2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
                        3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

## CSS样式和JS插件
        1. 全局CSS样式:
                * 按钮:class="btn btn-default"
                * 图片:
                        *  class="img-responsive":图片在任意尺寸都占100%
                        *  图片形状
                                *  <img src="..." alt="..." class="img-rounded">:方形
                                *  <img src="..." alt="..." class="img-circle"> : 圆形
                                *  <img src="..." alt="..." class="img-thumbnail"> :相框
                * 表格
                        * table           无样式表格
                        * table-bordered  加上下方分割线
                        * table-hover     加上两侧分割线
                * 表单
                        * 给表单项添加:class="form-control"
        2. 组件:
                * 导航条
                * 分页条
        3. 插件:
                * 轮播图

## 案例
        <!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 HelloWorld</title>
       
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
       
       
            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
            <script src="js/jquery-3.2.1.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="js/bootstrap.min.js"></script>
            <style>
                .paddtop{
                    padding-top: 10px;
                }
                .search-btn{
                    float: left;
                    border:1px solid #ffc900;
                    width: 90px;
                    height: 35px;
                    background-color:#ffc900 ;
                    text-align: center;
                    line-height: 35px;
                    margin-top: 15px;
                }
       
                .search-input{
                    float: left;
                    border:2px solid #ffc900;
                    width: 400px;
                    height: 35px;
                    padding-left: 5px;
                    margin-top: 15px;
                }
                .jx{
                    border-bottom: 2px solid #ffc900;
                    padding: 5px;
                }
                .company{
                    height: 40px;
                    background-color: #ffc900;
                    text-align: center;
                    line-height:40px ;
                    font-size: 8px;
                }
            </style>
        </head>
        <body>
       
           <!-- 1.页眉部分-->
           <header class="container-fluid">
               <div class="row">
                   <img src="img/top_banner.jpg" class="img-responsive">
               </div>
               <div class="row paddtop">
                   <div class="col-md-3">
                       <img src="img/logo.jpg" class="img-responsive">
                   </div>
                   <div class="col-md-5">
                       <input class="search-input" placeholder="请输入线路名称">
                       <a class="search-btn" href="#">搜索</a>
                   </div>
                   <div class="col-md-4">
                       <img src="img/hotel_tel.png" class="img-responsive">
                   </div>
       
               </div>
               <!--导航栏-->
               <div class="row">
                   <nav class="navbar navbar-default">
                       <div class="container-fluid">
                           <!-- Brand and toggle get grouped for better mobile display -->
                           <div class="navbar-header">
                               <!-- 定义汉堡按钮 -->
                               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                   <span class="sr-only">Toggle navigation</span>
                                   <span class="icon-bar"></span>
                                   <span class="icon-bar"></span>
                                   <span class="icon-bar"></span>
                               </button>
                               <a class="navbar-brand" href="#">首页</a>
                           </div>
       
                           <!-- Collect the nav links, forms, and other content for toggling -->
                           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                               <ul class="nav navbar-nav">
                                   <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                                   <li><a href="#">Link</a></li>
                                   <li><a href="#">Link</a></li>
                                   <li><a href="#">Link</a></li>
                                   <li><a href="#">Link</a></li>
                                   <li><a href="#">Link</a></li>
       
                               </ul>
                           </div><!-- /.navbar-collapse -->
                       </div><!-- /.container-fluid -->
                   </nav>
       
               </div>
       
               <!--轮播图-->
               <div class="row">
                   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                       <!-- Indicators -->
                       <ol class="carousel-indicators">
                           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                       </ol>
       
                       <!-- Wrapper for slides -->
                       <div class="carousel-inner" role="listbox">
                           <div class="item active">
                               <img src="img/banner_1.jpg" alt="...">
                           </div>
                           <div class="item">
                               <img src="img/banner_2.jpg" alt="...">
                           </div>
                           <div class="item">
                               <img src="img/banner_3.jpg" alt="...">
                           </div>
       
                       </div>
       
                       <!-- Controls -->
                       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                           <span class="sr-only">Previous</span>
                       </a>
                       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                           <span class="sr-only">Next</span>
                       </a>
                   </div>
       
       
       
               </div>
       
           </header>
           <!-- 2.主体部分-->
           <div class="container">
                <div class="row jx">
                    <img src="img/icon_5.jpg">
                    <span>黑马精选</span>
                </div>
       
               <div class="row paddtop">
                   <div class="col-md-3">
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                   </div>
                   <div class="col-md-3">
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
       
                   </div>
                   <div class="col-md-3">
       
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
                   <div class="col-md-3">
       
                       <div class="thumbnail">
                           <img src="img/jiangxuan_3.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
       
       
               </div>
               <div class="row jx">
                   <img src="img/icon_6.jpg">
                   <span>国内游</span>
               </div>
               <div class="row paddtop">
                   <div class="col-md-4">
                       <img src="img/guonei_1.jpg">
                   </div>
                   <div class="col-md-8">
                       <div class="row">
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
       
                           </div>
                           <div class="col-md-4">
       
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
       
                       </div>
                       <div class="row">
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
       
                           </div>
                           <div class="col-md-4">
       
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
       
       
                       </div>
       
                   </div>
       
               </div>
           </div>
           <!-- 3.页脚部分-->
           <footer class="container-fluid">
               <div class="row">
                   <img src="img/footer_service.png" class="img-responsive">
               </div>
               <div class="row company">
                   江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
               </div>
       
           </footer>
       
       
        </body>
        </html>
# 今日内容
        1. XML
                1. 概念
                2. 语法
                3. 解析


## XML:
        1. 概念:Extensible Markup Language 可扩展标记语言
                * 可扩展:标签都是自定义的。 <user>  <student>

                * 功能
                        * 存储数据
                                1. 配置文件
                                2. 在网络中传输
                * xml与html的区别
                        1. xml标签都是自定义的,html标签是预定义。
                        2. xml的语法严格,html语法松散
                        3. xml是存储数据的,html是展示数据

                * w3c:万维网联盟

        2. 语法:
                * 基本语法:
                        1. xml文档的后缀名 .xml
                        2. xml第一行必须定义为文档声明
                        3. xml文档中有且仅有一个根标签
                        4. 属性值必须使用引号(单双都可)引起来
                        5. 标签必须正确关闭
                        6. xml标签名称区分大小写
                * 快速入门:
                        <?xml version='1.0' ?>
                        <users>
                                <user id='1'>
                                        <name>zhangsan</name>
                                        <age>23</age>
                                        <gender>male</gender>
                                        <br/>
                                </user>
                               
                                <user id='2'>
                                        <name>lisi</name>
                                        <age>24</age>
                                        <gender>female</gender>
                                </user>
                        </users>
                       
                * 组成部分:
                        1. 文档声明
                                1. 格式:<?xml 属性列表 ?>
                                2. 属性列表:
                                        * version:版本号,必须的属性
                                        * encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1
                                        * standalone:是否独立
                                                * 取值:
                                                        * yes:不依赖其他文件
                                                        * no:依赖其他文件
                        2. 指令(了解):结合css的
                                * <?xml-stylesheet type="text/css" href="a.css" ?>
                        3. 标签:标签名称自定义的
                                * 规则:
                                        * 名称可以包含字母、数字以及其他的字符
                                        * 名称不能以数字或者标点符号开始
                                        * 名称不能以字母 xml(或者 XML、Xml 等等)开始
                                        * 名称不能包含空格

                        4. 属性:
                                id属性值唯一
                        5. 文本:
                                * CDATA区:在该区域中的数据会被原样展示
                                        * 格式:  <![CDATA[ 数据 ]]>

       
                * 约束:规定xml文档的书写规则
                        * 作为框架的使用者(程序员):
                                1. 能够在xml中引入约束文档
                                2. 能够简单的读懂约束文档
                       
                        * 分类:
                                1. DTD:一种简单的约束技术
                                2. Schema:一种复杂的约束技术


                        * DTD:
                                * 引入dtd文档到xml文档中
                                        * 内部dtd:将约束规则定义在xml文档中
                                        * 外部dtd:将约束的规则定义在外部的dtd文件中
                                                * 本地:<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
                                                * 网络:<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">


                        * Schema:
                                * 引入:
                                        1.填写xml文档的根元素
                                        2.引入xsi前缀.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                                        3.引入xsd文件命名空间.  xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
                                        4.为每一个xsd约束声明一个前缀,作为标识  xmlns="http://www.itcast.cn/xml"

                                <students   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                                        xmlns="http://www.itcast.cn/xml"
                                        xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd">
       
       

        3. 解析:操作xml文档,将文档中的数据读取到内存中
                * 操作xml文档
                        1. 解析(读取):将文档中的数据读取到内存中
                        2. 写入:将内存中的数据保存到xml文档中。持久化的存储

                * 解析xml的方式:
                        1. DOM:将标记语言文档一次性加载进内存,在内存中形成一颗dom树
                                * 优点:操作方便,可以对文档进行CRUD的所有操作
                                * 缺点:占内存
                        2. SAX:逐行读取,基于事件驱动的。
                                * 优点:不占内存。
                                * 缺点:只能读取,不能增删改


               
                * xml常见的解析器:
                        1. JAXP:sun公司提供的解析器,支持dom和sax两种思想
                       
                        2. DOM4J:一款非常优秀的解析器
                       
                        3. Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
                        4. PULL:Android操作系统内置的解析器,sax方式的。


                * Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
                        * 快速入门:
                                * 步骤:
                                        1. 导入jar包
                                        2. 获取Document对象
                                        3. 获取对应的标签Element对象
                                        4. 获取数据

                        * 代码:
                                 //2.1获取student.xml的path
                        String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
                        //2.2解析xml文档,加载文档进内存,获取dom树--->Document
                        Document document = Jsoup.parse(new File(path), "utf-8");
                        //3.获取元素对象 Element
                        Elements elements = document.getElementsByTag("name");
               
                        System.out.println(elements.size());
                        //3.1获取第一个name的Element对象
                        Element element = elements.get(0);
                        //3.2获取数据
                        String name = element.text();
                        System.out.println(name);

                * 对象的使用:
                        1. Jsoup:工具类,可以解析html或xml文档,返回Document
                                * parse:解析html或xml文档,返回Document
                                        * parse​(File in, String charsetName):解析xml或html文件的。
                                        * parse​(String html):解析xml或html字符串
                                        * parse​(URL url, int timeoutMillis):通过网络路径获取指定的html或xml的文档对象
                        2. Document:文档对象。代表内存中的dom树
                                * 获取Element对象
                                        * getElementById​(String id):根据id属性值获取唯一的element对象
                                        * getElementsByTag​(String tagName):根据标签名称获取元素对象集合
                                        * getElementsByAttribute​(String key):根据属性名称获取元素对象集合
                                        * getElementsByAttributeValue​(String key, String value):根据对应的属性名和属性值获取元素对象集合
                        3. Elements:元素Element对象的集合。可以当做 ArrayList<Element>来使用
                        4. Element:元素对象
                                1. 获取子元素对象
                                        * getElementById​(String id):根据id属性值获取唯一的element对象
                                        * getElementsByTag​(String tagName):根据标签名称获取元素对象集合
                                        * getElementsByAttribute​(String key):根据属性名称获取元素对象集合
                                        * getElementsByAttributeValue​(String key, String value):根据对应的属性名和属性值获取元素对象集合

                                2. 获取属性值
                                        * String attr(String key):根据属性名称获取属性值
                                3. 获取文本内容
                                        * String text():获取文本内容
                                        * String html():获取标签体的所有内容(包括字标签的字符串内容)
                        5. Node:节点对象
                                * 是Document和Element的父类

                       
                * 快捷查询方式:
                        1. selector:选择器
                                * 使用的方法:Elements        select​(String cssQuery)
                                        * 语法:参考Selector类中定义的语法
                        2. XPath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言
                                * 使用Jsoup的Xpath需要额外导入jar包。
                                * 查询w3cshool参考手册,使用xpath的语法完成查询
                                * 代码:
                                        //1.获取student.xml的path
                                String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
                                //2.获取Document对象
                                Document document = Jsoup.parse(new File(path), "utf-8");
                       
                                //3.根据document对象,创建JXDocument对象
                                JXDocument jxDocument = new JXDocument(document);
                       
                                //4.结合xpath语法查询
                                //4.1查询所有student标签
                                List<JXNode> jxNodes = jxDocument.selN("//student");
                                for (JXNode jxNode : jxNodes) {
                                    System.out.println(jxNode);
                                }
                       
                                System.out.println("--------------------");
                       
                                //4.2查询所有student标签下的name标签
                                List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
                                for (JXNode jxNode : jxNodes2) {
                                    System.out.println(jxNode);
                                }
                       
                                System.out.println("--------------------");
                       
                                //4.3查询student标签下带有id属性的name标签
                                List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
                                for (JXNode jxNode : jxNodes3) {
                                    System.out.println(jxNode);
                                }
                                System.out.println("--------------------");
                                //4.4查询student标签下带有id属性的name标签 并且id属性值为itcast
                       
                                List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
                                for (JXNode jxNode : jxNodes4) {
                                    System.out.println(jxNode);
                                }



       

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马