网站基础html javascript jquery

时间 2019-12-09
原文原文链接
第二章HTML
HBuilder的使用
边改边看模式
chrome浏览器看.
HTML的基本格式
超文本标记语言
HyperText Markup Language
HyperText 超文本
Markup 标记<><><>为标记.
<head> 头部信息    </head>
<body> 主体内容 </body>

<taitle>写在头部内</taitle>

1.标记成对出现
2.空白字符不影响显示.

3.写在<body>里面注释 <!--
            做者：offline
            时间：2018-12-29
            描述：
        -->

源码与执行
源码:HBuilder里面写的.
执行:用户在浏览器里面打开网页
在这里,浏览器是一个解释执行HTML源码的工具.

2.2文本与段落
<h1> header,1级标题.
<h2> header 2级标题.
<p> paragraph 段落
<br>break 换行.

通常把文本放在某个标签下面.
有的标签不成对出现好比<br/>或者<br>

2.3插入图片
<img src="img/XXX"/>格式
标签的属性
<img>标签应指定src属性,表示图片地址

--属性的值用单引号或者双引号包.
--多个属性用空格隔开

记住如下原则:
1.不能访问项目目录外的资源
2.使用相对路径访问

src属性不能使用本地路径.

2.4超连接
使用<a href="xxx.html"> xxx  </a>

超连接的做用,进入网站首页后,不须要输入地址.



第三章URL
3.1URL
统一资源定位器,描述Internet上的一个资源地址

例如:https://baike.baidu.com/item/mySQL/471251?fr=aladdin

前半段https://baike.baidu.com/:描述该资源在哪一个服务器上

item/mySQL/471251?fr=aladdin:描述该资源的相对路径.

项目目录外的文件不对internet开放.

3.2相对路径
.表示同级目录
..表示上级目录

相对路径的解析
计算过程
1.当前路径
http://127.0.0.1:8020/html0202/index.html
2.目标路径
http://127.0.0.1:8020/html0202/index.html/pp/p3.html

3.3URL的错误写法
1.带本地地址.
2.本站的资源不要带IP

本站资源是不能带IP地址的!

开发时服务器地址不稳定.
为何不带IP,若是多人开发,难道各写各的地址?


第四章 样式
添加样式 Style
        <style>
            .poem
            {
                color: blue;
                font-family:"微软雅黑";
                font-size:16px;
                line-height:180%;
            }
        </style>

        <p class="poem">
            啊啊啊啊啊
        </p>
样式写在style标签内
.poem是样式的名字

标题 段落均可以修改.

4.2样式的检查.
谷歌浏览器F12右边鼠标标记能够查看.
每项都是name:value格式.注意冒号和分号


4.3经常使用样式,
如下为经常使用样式，务必熟练使用。
背景 background
background-color: 背景颜色
background-image:
颜色表示:  
rgb  如 
#F00 表示红色  
#FFF 白色 
#000 黑色
rgba  如 #F008 最后一个8表示透明度
rrggbb 如 #FF9309
rrggbbaa 如 #FF930988 其中 88表示透明度

边距与填充margin / padding
例：
margin: 10px
margin: 20px  auto  auto  auto ;    按 上 右  下 左 顺序
padding: 8px

上右下左均可以分别设置，如padding-left: 8px

边框 border 
例 border : 1px  solid  #ff0900;
其中，1px是宽度，solid是线型， #ff0900 是颜色

上下左右的边框能够分别设置
border-top / border-right / border-bottom / border-left

边框圆角 border-radius
border-radius: 4px;
上下左右4个角能够分别设置

宽度 width / min-width / max-width
例：
width: auto
width: 800px
width: 90%
百分比表示占父元素宽度的百分比

高度 height / min-height / max-height
例：
height: 400px
min-height: 300px;


文字样式 
color: #444  ;  文字颜色
font: italic bold 14px "微软雅黑" ;  
font-size: 字高
font-family : 字体名称
text-align : 段落对齐

4.4样式单CSS
层叠样式单.
好比新建一个poem.css
在HTML文件内引入这个css
新建一个css
使用<link rel="stylesheet" href="css/poem.css" />

<h1 class="poem">
<p class="poem">

使用样式单.css,能够统一修改网站的风格.

除此以外,可使用style属性临时修改样式

例如:<p style="font-size:20px;">

        <p class="poem" style="font-size:20px;">
            <p style="font-size:20px;">    //或者另外加一行.
            啊啊啊啊啊
        </p>

5.1    dom
文档对象模型
HTML页面内根据<body>下每一个节点,称为元素Element
例如:html0501
bady
  |
  |-->p-->a
  |
  |-->p-->img

元素的通用属性
id:给该元素设置一个全局惟一ID
name:给该元素设置一个名字
class:设置样式类名
style:设置零时样式
<img id="logo".../>

不要把显示的内容放在body以外.

5.2类选择器
Class Selector 类选择器        .short-text{}
ID Selector ID选择器        #login-panel{}
Type Selector 标签类型选择器    img{}
Descendant Selector 子选择器    #login-panel .row{}
Pseudo-Class Selector伪类选择器    button:hover{}


Class Selector 类选择器
.my-button

            /* 普通按钮 */
            .my-button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            
            /* 默认按钮 */
            .my-button-default{
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }

<p>
        <button class='my-button'> 新建 </button>
        <button class='my-button'> 删除 </button>
        <button class='my-button'> 添加图片  </button>
        <button class='my-button'> 添加连接  </button>     
</p>


指定多个class
        <button class='my-button my-button-default'> 发布 </button>    

优先级问题
多个样式出现冲突(重复指定),和指定顺序没有关系.
覆盖规则:后出现的样式优先级较高,
因为my-button先于my-button-default,全部my-button-default的优先级较高

5.3标签类型选择器
Type Selector
button
{
}

button.my-default
{
}

button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
        <p>
            <button > 新建 </button>
            <button > 删除 </button>
            <button > 添加图片  </button>
            <button > 添加连接  </button>     
        </p>

        <p>
            <button > 放弃编辑 </button>
            <button class="my-default"> 发布 </button>
        </p>

5.4ID选择器
每一个元素均可以设置一个id属性.
<button id="ok">...
ID应该在页面惟一.为了不重复,通常命名应该比较长.

            #ok
            {
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }
            #cancel
            {
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }

        <p>
            <button id="cancel"> 放弃编辑 </button>
            <button id="ok"> 发布 </button>
        </p>

优先级问题
ID Selector优先级比较高.
优先级顺序(数字表示权重)
内联样式1000 <p style="xxxx">
ID选择器100 <p id="xxxx">
类选择器10 <p class="xxxx">
标签选择器1 


5.5伪类选择器
即元素的每一种状态定义一个样式
xxx        普通状态显示
xxx:hover    鼠标移上去时的状态显示
xxx:active    鼠标点下时的状态显示
xxx:focus    焦点状态下的状态显示
其中,xxx能够是ID/class/Type Selector都可支持

            /* 普通按钮 */
            button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            /*鼠标移过期显示 */
            button:hover
            {
                
                border-color:#0078D7 ;
                background-color: #F1F1F1;
            }
            /* 鼠标按下时到抬起前*/
            button:active
            {
                border-color: #0078D7;
                background-color:#0078D7 ;
                color: #fff;
            }
            
            /*元素处理焦点时*/
            button:focus
            {
                border-color: #0078D7;
                background-color:#0078D7 ;
                color: #fff;
            }
5.6子选择器
#login-panel button{}
在id="login-panel"元素下,全部<button>的样式
.xxx .yyy .zzz{}
在class="xxx"下的子元素class="yyy"下的class="zzz"


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #login-panel label
            {
                color: #444;
                padding: 6px;
            }
            #login-panel input
            {
                color: blue;
                padding: 6px;
            }
        </style>
    </head>
    <body>
        <div id="login-panel">
            <label>用户名</label>
            <input type="text" /><br>
            
            <label>密码</label>
            <input type="text" /><br>
            
            <button>登陆    </button>
        </div>
    </body>
</html>

6.1网页布局

<div>,division 划分,层
<div>是网页布局的主要工具,使用div把网页划分为一块一块的区域

布局相关的属性
width/height
margin/padding
display
position
z-index

6.2padding 填充 :子元素与本身的距离
margin 边距:本身与外部元素的距离


6.3box模型
            .test1
            {
                border: 4px solid blue;
                margin: 8px;
                padding: 16px;
                width: 200px;
                height: 50px;
            }

box-sizing(box的尺寸)
box-sizing:border-box;
(content+padding+border)一共的长200px高50px

box-sazing:content-box;
指文本区200px*50px


浏览器的兼容性
.test1
    {
        box-sizing:border-box;        /*标准属性Chrome,IE*/
        -moz-box-sizing:border-box;    /*FireFox*/
        -webkit-box-sizing:border-box;    /*Safari*/
        width:200px;
        height:50px;    
    }
不一样标签默认的box-sizing是不一样的


6.4行内元素与块元素
为何<lable>等标签没法设置widht和height?/
为何<div>默认能占满一行?

display属性
display用于控制行内元素,仍是块元素
常见的4种设置:
inline:行内元素,不可设置宽高
block:块元素独占一行.
inline-block:行内块元素,能够设置大小,并且不占一行,
none:不占用任何空间(隐藏)

        <label style="border:1px solid blue; display:block;">
            Java
        </label>
        <label style="border:1px solid black; display:inline-block;width: 200px;">
            C
        </label>
        
        <div style="border:1px solid black">xxxx</div>
        <div style="border: 1px solid black; display: none;">hhhh</div>

6.5行内元素对齐
text-align:right 右对齐
text-align:left 左对齐
text-align:center 居中对齐

竖直对齐
1.指定父容器的height 和line-height等高
2.指定子元素的vertical-align属性

            .container
            {
                width: 600px;
                height: 300px;
                border: 1px solid black;
                text-align: center;
                line-height: 300px;
            }
        <div class='container'>
            <button style="vertical-align: top;">按钮1</button>
            <button style="vertical-align: middle;">按钮2</button>
            <button style="vertical-align: bottom;">按钮3</button>
        </div>

本质上是说父元素的文字基线同高

6.6相对位置定位
position定位
position:static 默认
position:relative 相对位置
position:absolute 绝对位置
position:fixed    固定位置

position:static 默认
按各个<div>出现顺序依次布局
正常文档流(Normal Flow)

position:relative 相对位置
position:relative;
left:50px;
top:50px;
相对于正常位置,添加偏移,偏移由left/top/right/bottom属性指定
没有脱离Normal Flow,该占的位置仍是占着
不是相对于父元素,而是相对于本身原有的位置.

position:absolute 绝对位置
position:absolute;
left:50px;
top:50px;
相对于谁? 向上级找父级或者父级的父级,第一个有position:absolute/relative属性的...
一般都给父元素添加relative属性
脱离Normal Flow,原有位置被后来者挤占.
必须给父元素添加position:absolute;属性.


position:fixed    固定位置
position:fixed;
left:0px;
top:50px;
相对于谁? 相对于浏览器
脱离normal flow
一般与z-index联用,防止被其余div遮盖(分层)
fixed:用于实现悬浮框.

7.1居中布局
1.添加<div>,水平方向占满
2.添加<div>,水平方向占1000px,并居中显示

水平占满
<div>是块元素,默认将占满一行空间
.top{
    height:41px;
    border:1px solid blue;
    }
注意:
1.将<body>的margin设为0px
2.若是设为100%,则要设置box-sizing:border-box

        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            .top{
                    height:41px;
                    border:1px solid blue;
                    background-color:cornflowerblue;
                }
            .main
            {
                width: 1000px;
                height: 400px;
                margin: 0px auto;    /*水平居中*/
                background-color:greenyellow;
            }
        </style>
    </head>
    <body>
        <div class=top>
            顶部区
        </div>
        <div class="main">
            底部区
        </div>
    </body>

水平居中
如下Style设置可让<div>水平居中
.main
{
width:1000px;
margin:0px auto;
}
<div>是块元素,自动占满一行,浏览器会根据margin:auto自动计算左右距离


使用居中布局时注意:
1.通常须要对<body>设置样式,去掉margin-> margin:0px;
2.宽度若要设置为100%,考虑box-sizing.
3.margin的几种设置方式
margin:10px; /*top=right=bottom=left=10px*/
margin:10px 20px;/*top=bottom=10,left=right=20*/
margin:10px 20px 30px 40px /*top,right,bottom,left*/

7.2分栏布局
display:inline-block
            .main{
                width: 640px;
                height: 400px;
                border: 1px solid mediumblue;
                margin: 10px auto;
            }
            .div1{
                display: inline-block;
                width: 200px ;
                height: 300px;
                background-color: #B22222AA;
            }

只有行内元素才能实现分栏.
为何<div>之间有间距
缘由:有空白字符,如换行.tab,空格等
可写成
            <div class="div1">
                11111
            </div><div class="div2">
                22222
            </div><div class="div3">
                33333
            </div>

若是一行被排满,则自动挤到下一行显示.

注意.1.应该设置display:inline-block
2.注意空白字符宽度
3若是被挤到下一行,注意box-sizing和空白宽度,margin也要设置为0px

7.3动态计算
使用calc()能够实现布局的动态计算
.div1{
    display:inline-block;
    width:200px;
    }
.div2{
    display:inline-block;
    width:calc(100% - 200px);
    }

注意:+-号两侧必须加上空格(与正负号区分)
calc()兼容写法
width:-moz-calc(100% - 200px)  /*FireFox*/
width:-webkit-calc(100% - 200px) /*Safari*/
width:calc(100% - 200px) /*标准写法IE Chrome*/

margin:0px;
box-sizing:border-box;
<div>之间不留空白


7.4固定布局
margin-top:80px ;   /*margin-top和顶部高度相同*/
box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 扩展5px的阴影 */

            body{
                margin: 0px;
            }
            #top{
                position: fixed;
                top: 0px;
                z-index: 101;
                width: 100%;
                height: 60px;
                box-sizing: border-box;
                
                background-color: #6089D4;
                box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 扩展5px的阴影 */
            }
            
            #left{
                position: fixed;
                z-index: 100;
                top: 60px;
                left: 0px;
                bottom: 0px;
                
                width: 187px;
                background-color: #FAF8F5;
                border-right: 1px solid #D3D5D5;
            }
            
            #main{
                min-height: 800px;
                background-color: #fff;
                margin-top: 60px; /* 高度应该和顶部高度一致 */
                margin-left: 187px; /* 左侧应空出一段空间 */
            }

第八章
8.1表格
表格<table>,用于显示表格形式的数据
<table>表格
<tr>table row,一行
<th>table head,一个标题单元格
<td>tbale data,一个数据单元格


        <style>
            table{
                border-collapse:collapse ;   /*边框收缩*/
            }
            /*逗号指定多个目标样式*/
            table,td,th{
                border: 1px solid #ccc;
            }
        </style>

    <body>
        <table>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>13</td>
            </tr>
        </table>
    </body>

合并单元格
使用rowspan和colspan能够指定合并单元格
例如:
<td rowspan='3'>xxx</td>

8.2标题行与数据行
能够用<thead> <tbody> <tfoot>,但不是全部浏览器都支持
<table>
    <thead><tr>...</tr></thead>
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
</table>

可使用class替代,

8.3表格的列宽和换行
table-layout:fixed;  /*自动布局仍是固定宽度*/
word-break:break-all; /*换行设定*/
word-wrap:break-word; /*换行折断设定*/

        <style>
            table{
                border-collapse:collapse ;/*边线缩进*/
                table-layout: fixed;/*自动布局仍是固定宽度*/
                word-break: break-all;/*换行设定*/
                word-wrap: break-word;/*换行折断*/
            }
            table,td,th{
                padding: 10px;
                text-align: center;
            }
            
            tr.head{
                border: 0px solid #aaa;
                border-width:2px 0px ;
            }
            tr.data{
                border: 0px solid #ccc;
                border-width:1px 0px ;
            }
            table{
                width:100%;
            }
            table .c1{width: 60px;}
            table .c2{width: 100px;}
            table .c3{width: 60px;}
            table .c4{width: 120px;}
            table .c5{
                width:calc(100% - 60px - 100px - 60px - 120px);
                text-align: left;
            }
            
        </style>
    </head>
    <body>
        <table>
            <tr class='head'>
                <th class='c1'>学号</th>
                <th class='c2'>姓名</th>
                <th class='c3'>性别</th>
                <th class='c4'>手机号</th>
                <th class='c5'>地址</th>
            </tr>
            <tr class='data'>
                <td>20190001</td>
                <td>赵</td>
                <td>女</td>
                <td>13000000000</td>
                <td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
            </tr>
             <tr class='data'>
                <td>20190001</td>
                <td>赵</td>
                <td>女</td>
                <td>13000000000</td>
                <td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
            </tr>

        </table>

第九章.
JavaScript
在html中添加一段javascript
写在body后面.
    <script>
        var name="xxxx"
        console.log("个人"+name);
    </script>
当浏览器加载网页时,会执行JavaScropt里的代码.
<script>标签没有特别指定的位置.

2.能够嵌入多段<script>
从上到下依次执行

9.2JS数据结构
JS是一种弱类型语言,
不能指定类型
var id=123123
var name="xxxx"
var sex=true
不管什么类型都用var来指定
弱类型不是没有类型,自动识别
经常使用类型:
number:数字
String:字符串
Boolean:布尔类型
Object:
Array:数组

9.3JS的方法
function定义方法.
function test2(a,b)
{
    return a*b;
}
其中a,b是参数.

    <script>
        function test1()
        {
            console.log("asdasd");
        }
        function test2(a,b)
        {
            return a*b;
        }
        test1(); //方法的调用
        
        var result = test2(10,20);
        console.log(result);
    </script>

注意:
1.参数不要加类型 function test2(var a,var b)不行
2.方法重载不行,之后一个为准.
3.每页的代码中相互独立,没有影响.

9.4JS的调试.
1.单步调试
2.打印调试console.log()
若是有语法错误,浏览器便是解释器,又是调试器.

第十章
10.1    JS对象
1.建立一个对象
2.添加属性和方法.

    <script>
        //建立一个对象,并不须要先声明一个Student类型
        var stu = new Object();
        //直接添加属性
        stu.id = 20190103;
        stu.name="xxx";
        stu.sex=true;
        //直接添加方法
        stu.introduce = function(){
            console.log("hi,i am"+this.name);
        };
        //调用方法
        stu.introduce();
        //能够直接把一个Object 输出到控制台
        console.log(stu);
    </script>

1.方法的形式记住
2.访问属性时,不能省略this.

10.2    JS自定义类型
js也能够先定义一个类,可是不多这么作.
    <script>
        function Student(id,name,sex)
        {
            this.id=id;
            this.name=name;
            this.sex=sex;
            
            this.introduce=function()
            {
                console.log(this.name);
            };    //注意结尾;号
        }
        function Teacher()
        {
            this.name=null;
            this.start=function(){
                console.log(this.name + "skl");
            };    //注意结尾;号
        }
        
        var s= new Student(10,"xx",true);
        s.introduce();
        
        var t=new Teacher();
        t.name="老师";
        t.start();
        
    </script>

10.3    浏览器对象BOM
浏览器对象模型
使用它们能够在JS代码中操做浏览器.
经常使用BOM对象包括:
window:当前窗口
screen:屏幕对象
history:访问历史
location:地址栏
localStorage:本地存储
sessionStorage:会话级存储

控制浏览器跳转
    <body>
        <!--
            描述:按钮跳转测试
        -->
        <button onclick="test()"> 跳转 </button>
    </body>
    <script>
        function test()
        {
            //控制浏览器跳转
            location.href= "https://www.baidu.com/"
        }
    </script>
全部的全局对象和方法(global)都属于Window
例如:
var a=10;
至关于
window.a=10;

全部浏览器对象都基本属于window下面.

10.4文档对象DOM
文档对象模型.
当浏览器加载HTML后,<body>内全部都显示.
例如:body第一层 div第二层, button第三层,a.href第三层.

    <body>
        <!--
            描述:按钮转换
        -->
            <div>
            <button onclick="test()"> 跳转 </button><br />
            <a id='website' href="index.html">xxxx</a> <br />
            <p id="abc">abcd</p>
        </div>
        
    </body>
    
    <script>
        function test()
        {
            //经过元素ID找到元素
            var elem =document.getElementById("website");
            //修改元素内容
            elem.innerHTML="aaaa"
            //经过元素ID找到元素
            var elem =document.getElementById("abc");
            //修改文本内容
            elem.innerText="1234"
        }
    </script>

第11章    DOM事件处理
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .ppp{
                display: inline-block;
                padding: 10px;
                border: 1px solid #ccc;
                background-color:#f1f1f1 ;
                cursor: pointer;/*鼠标形状设置*/
            }
        </style>
    </head>
    
    <body>
        <div class="ppp" onclick="test(this)">xx</div>
    </body>
    
    <script>
        window.test = function(elem)
        {
            elem.innerHTML="aa";
        };
    </script>

onclick 当用户点击时调用的事件.
1.onclick里能够指定一大段代码
2.多元素都支持鼠标事件
3.单引号与双引号的混用，能够外层用双引号内层用单引号或者内存用双引号内层用单引号
4.onclick里可用的上下文参数:this,event        alert提示点击了什么.
<div class="ppp" onclick="test(this,event)">xx</div>  这两个参数能够直接使用.
5.运行时检查错误,不运行就不检查错误


11.2鼠标事件
    <body>
        <div class="ppp" 
            onmouseenter="test(this)"
            onmouseleave="test1(this)">xx</div>
    </body>
    
    <script>
        function test(Z)
        {
            Z.innerHTML="hello";
            Z.style.backgroundColor="#00ff00";
        }
        function test1(Z)
        {
            Z.innerHTML="welcome";
            Z.style.backgroundColor="#f1f1f2";
        }
    </script>

11.3    键盘事件
        <style>
            .login{
                width:300px;
                padding: 20px;
                height: 150px;
                margin: 100px auto;
                background-color:#f1f1f1 ;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #aaa;
            }
            
            .login .prompt{
                text-align: center;
                margin: 10px auto;
                color: #444;
            }
            input{
                width: 100%;
                padding: 6px;
                margin: 2px;
                box-sizing: border-box;
            }
        </style>
    </head>
    
    <body>
        <div class='login'>
            <div class="prompt">用户登陆</div>
            <input type='text' placeholder="用户名" /><br />
            <input type="password" placeholder="密码"
                onkeyup="if(event.keyCode==13){ enterPressed();}"  />
        </div>
    </body>
    
    <script>
        function enterPressed()
        {
            alert("输入回车")
        }
    </script>

alert提示点击了什么.
input type="password"  以password的形式*****显示.
<!--描述：type=password表示密码框  placeholder表示空置时的显示 -->

11.4事件监听器
    <script>
        //从DOM中取得目标元素
        var elem =document.getElementById("password");
        
        //给目标元素添加一个事件监听器:当'keyup'事件发生时,运行相应的function
        elem.addEventListener('keyup',function(event){
            if(event.keyCode==13)
            {
                alert("回车");
            }
        });
    </script>


elem.addEventListener('keyup',function(event){        });
第一个参数为事件名,如click,keyup
第二个参数是一个回调function,当对应事件发生时,此function被调用.  和匿名内部类写法类似.
本章要求不高,由于经常使用操做在下一章

12.1    JS文件
建立JS/* 文件名应为英文或者拼音 */

var number =102;
var example()
{
    console.log("this is a example");
}
//引入JS文件.
    <script type="text/javascript" src="js/sample.js"></script>

例如jQuery库的使用.
12.2引入jQuery库,对原生JS进行封装.是前端最经常使用的库
jquery.com

12.3使用jQuery
    <body>
        <label class="website">xxxxxxx</label>
        
        <button onclick="test()">测试</button>
    </body>
    <script>
        function test()
        {
            //取得class='website'的对象
            var j = $('.website');
            
            //修改目标对象的html内容
            j.html('aaaaa');

            //简写模式    $('.website').html("xx");
        }
    </script>

$('.website').html("xx");
$('.website'):取得class='website'对象
$:是一个function名称
html(str):修改目标对象里的html内容.

//从class='box1'的元素内取出html.
var str =$('.box1').html();
            
//设置class='box2'的元素的html
$('.box2').html(str);
            
//清空class='box1'的内容
$('box1').html('');

jQuery的api风格
j.html(str):带参数时表示设置 (setter)
str=j.html():不带参数时表示获取(getter)

12.4    认识jQuery对象
$(".java")实际返回了一个数组/集合同时操做全部匹配的目标元素.

jQuery对象和DOM对象的转换
DOM对象:原生对象,操做不方便
jQuery对象:封装了DOM对象,操做方法
二者能够互相转换,一般只使用jQuery对象.

//kecheng:可操做全部class='java'的元素
var kecheng =$(".java");
//e:原生DOM元素
var e=kecheng[0];
e.innerHTML="aaaaaa";
//je:jquery包装后的对象
var je=$(e);
je.addClass("ke")


    //选中全部的class='java'的元素
    var kecheng =$(".java");
            
    for(var i=0;i<kecheng.length;i++)
    {
        //遍历获得的是原生的DOM对象
        var e =kecheng[i];
        //转成jquery对象
        var je =$(e);
        console.log("课: "+je.html());
    }
在调试时DOM对象由标签,jQuery对象时数组
在运行时,xxx.html is not a function说明他是原生的DOM对象.

12.5选择器
选择器,用于DOM树中定位查询一个元素经常使用的选择器.
经常使用选择器
ID选择器,如$("#example")
Class选择器, $(".large")
标签类型选择器  $("img")
子选择器  $("#login .username")
属性选择器  $("input[type='checkbox']")

标签类型选择器  $("img")
var jelist=$("label");    

for(var i=0;i<jelist.length;i++)
{
    var e=jelist[i];
    var je=$(e);
    console.log(je.html());
}
//另外一种遍历方式
for(var e of jelist)
{
    var str=$(e).html();
    console.log(str);
}

子选择器  $("#login .username")
console.log($(".box1 .mark").html());
console.log($(".box2 .mark").html());

12.6显示和隐藏元素
显示 $(xxx).show()
隐藏 %(xxx).hide()
    <body>
        <div class="box">
        <button onclick="test1()">隐藏</button>
        <button onclick="test2()">显示</button>
        </div>
        
        <div class='box'>
            <img class='thumb' src="img/微信图片_20181229161713.png"/>
        </div>
    </body>
    <script>
        function test1()
        {
            //其实是动态添加了 style="display:none"
            //class选择器
            $(".thumb").hide();
        }
        function test2()
        {
            $('.thumb').show();
        }
    </script>

淡入淡出操做
淡入$(xxx).fadeIn()
淡出$(xxx).fadeOut()

"$('.mask',this).fadeIn()"
在这个父元素下选择.mask子元素.

        <style>
            /* 头像框 */
            .thumb {
                position: relative;
                width: 150px;
                height: 150px;
            }

            /* 头像框  / 图像 */
            .thumb img
            {
                width: 100%;
                height: 100%;
            }

            /* 头像框  / 下方遮罩层 */
            .thumb .mask
            {
                display: none;
                position: absolute;
                width: 100%;
                height:30px;
                bottom: 0px;
                background-color:#fff8 ;/*半透明*/
            }

            /* 头像框  / 下方遮罩层 / 按钮 */
            .thumb .mask button
            {        
                width: 50%;
                height: 100%;
                box-sizing: border-box;
                background-color:#fff0 ;/*半透明*/
                border: 1px solid #aaa;
            }

            .thumb .mask button:hover{
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <div class="thumb" onmouseenter="$('.mask',this).fadeIn()"
            onmouseleave="$('.mask',this).fadeOut()">
            <img src="img/微信图片_20190108111207.jpg" />
            <div class='mask'>
                <button>上传</button><button>删除</button>
            </div>
        </div>
    </body>

13.1jquery事件处理
使用jqueery能够给元素添加事件处理.
    <body>
        <button class="xxx">按钮1</button>
        <button class="xxx">按钮2</button>
        <button class="xxx">按钮3</button>
    </body>
    
    <script>
        $(".xxx").click(function(){
            var je=$(this);        //this为DOM对象,$(this)包装为jquery
            alert("点中了:"+je.html());
        });
    </script>

页面加载事件
等页面加载完成再执行:
$(document).ready(function(){
    //在此执行页面加载完成后的初始化.
});


    <script>
        function initEventSupport()
        {
            $('.xxx').click(function(){
                var je=$(this);
                alert("按钮为"+je.html());
            });
        }
        //ready 也是一个事件,表示页面完成加载.
        $(document).ready(function(){
            //页面加载完成了,再添加事件回调
            initEventSupport();
        });
    </script>

当script写在body前面时,dom元素尚未生存,须要这么写,等待页面加载完成.

13.4    单选列表

        <style>
            .meru{
                width: 300px;
                background-color: cornflowerblue;
            }
            /*菜单面板-单项*/
            .meru .item{
                padding: 8px;
                color: #fff;
                text-align: center;
                user-select:none;  /*文字不可选中(需考虑兼容)*/
            }
            /*hover模式*/
            .meru .item:hover{
                background-color: #eee4;
                border-color:#888 ;
                border-width:1px 0px ;
                color: #444;
            }
            /*选中状态(子选择器.menu元素下的.selected元素)*/
            .meru .selected{
                background-color:#eee8 ;
                border-color:#888 ;
                border-width:1px 0px ;
                color:#444;
            }
        </style>
    </head>
    <body>
        <div class='meru'>
            <div class='item'>快速入门</div>
            <div class='item selected'>c++入门</div>
            <div class='item'>java入门</div>
        </div>
    </body>
    <script>
        //给每一个.item 添加事件处理
        $('.meru .item').click(function(){
            //把旧的选中项去掉选中状态
            //注意:removeClass()参数里不须要添加点号
            $('.meru .selected').removeClass('selected');
            
            $(this).addClass('selected');
            var str=$(this).html();
            alert("选中了"+str);
        });
    </script>

13.03
对话框:
1.平时隐藏
2.对话框显示时,后面不能操做
3.对话框能够关闭
        <style>
            /* 全窗口背景 : 指定 left top right bottom */
            .af-dialog{
                display: none; /* 默认隐藏 */
                position: fixed;
                z-index: 1000; /*确保遮罩住全部后面的元素 */
                left: 0px;
                top: 0px;
                right: 0px;
                bottom: 0px;
                background-color: rgba(128,128,128,0.5); /* 半透明背景色 , 除老IE以外均支持 */    
            }
            
            /* 前景: 对话框窗口 */
            .af-dialog .frame{
                position: relative;
                width:  350px; 
                min-height: 150px;
                margin: 150px auto; /* 居中显示 */
                background-color: #fff;
                border-radius: 2px;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #aaa;
            }    
            
            /* 右上角的关闭按钮, 绝对定位 */
            .af-dialog .close{
                position: absolute;
                top: 0px;
                right: 0px;
                border: 1px solid #fff;
            }    
            .af-dialog .close:hover{
                border: 1px solid #ccc;
            }
            
            /* 用户自定义内容区 */
            .af-dialog .content {
                width: 100%;
                text-align: center;
                margin: 50px auto;
            }
        </style>
    </head>
    <body>
        <div>
            <button onclick='test1()'> 显示对话框 </button>
        </div>
        
        <!-- 对话框定义 -->        
        <div id='mydlg' class='af-dialog'>
            <div class='frame'>                
                <img class='close' src='img/ic_close.png'>
                <div class='content'>
                    Af-Dialog 对话框演示!
                </div>
            </div>            
        </div>
        

    </body>
    
    <script>
        function test1()
        {
            showDialog("#mydlg");
        }
        
        /* 能够传一个 jQuery对象，也能够传一个字符串 */
        showDialog = function(selector)
        {
            var dlg = selector;                //这3句没彻底理解.
            if(selector.constructor == String)         //这3句没彻底理解.
            dlg = $(selector);                //这3句没彻底理解.
            
            // 点击关闭时，关闭对话框  从父窗口dlg找到.close元素
            $(".close", dlg).click(function(){
                dlg.hide(); // Closure 闭包
            });
                        
            dlg.show();
        }
        
    </script>

1.全窗口背景af-dialog
2.左上角关闭按钮:绝对定位在右上角
3.在父元素下找子元素:$('.class',dlg)
4.添加事件处理.

编程全部图标能够在iconfot.cn上下载.


14.1 表单处理(文本框)
文本框<input type='text'/>
获取值str=$('xxx').val()
设置值$(xxx).val('new value')
和html()方法相似,一个是getter 一个是setter.
    <body>
        <div>
            <button onclick="test1()">获取值</button>
            <button onclick="test2()">设置值</button>
        </div>
        
        <div class='form' style='margin-top:10px ;'>
            <input type='text' class='username' />
        </div>
    </body>
    <script>
        //获取文本里的值
        function test1()
        {
            var str = $('.username').val();
            alert(str);
        }
        //设置文本的值
        function test2()
        {
            $('.username').val('xxx yyy zzz');
        }
    </script>

14.2表单处理(复选框)
<input type="checkbox">  复选框

    <body>
        <div>
            <button onclick="test1()">获取值</button>
            <button onclick="test2()">设置值</button>
        </div>
        
        <div class='form' style='margin-top:10px ;'>
            <input type="checkbox" class='like' onchange="userChanged()"/> 你喜欢这个课程吗.
        </div>
    </body>
    <script>
        //获取文本里的值
        function test1()
        {
            var like = $('.like').prop('checked');  //固定写法返回一个boolean的值
            if(like)
                alert('是的');
            else
                alert('为何不呢');
        }
        //设置文本的值
        function test2()
        {
            $('.like').prop('checked',true);
        }
        //事件处理
        function userChanged()
        {
            var like =$('.like').prop('checked');
            console.log("用户改变了选择"+like);
        }
    </script>


        //获取文本里的值
        function onSubmit ()
        {
            // 使用子选 器 + 属性选择器，选择全部的 checkbox
            var jelist = $(".form input[type='checkbox'] ");
            for(var e of jelist)
            {
                var je = $(e);
                if( je.prop('checked'))  // 判断它是否被勾选
                {
                    var data = je.attr('data'); // attr方法能够获取属性
                    console.log("选择了: " + data);
                }
            }
        }

14.3表单的处理,下拉列表
<select class='ke'>
    <option value='chinese'>语文</option>
    <option value='math'>数学</option>
    <option value='english'>英语</option>
</select>


例:设置2个按钮,一个获取下拉菜单的value值.一个设置.
    <body>
        
        <div>
            <button onclick="test1()">获取值</button>
            <button onclick="test2()">设置值</button>
        </div>
        
        <div class='form' style='margin-top: 10px;'>
            <select class='ke'>
                <option value="chinese">语文</option>
                <option value="math">数学</option>
                <option value="english">英语</option>
            </select>
            
        </div>
    </body>
    <script>
        function test1()
        {
            var ke = $('.ke').val();
            alert("你选择了"+ ke );
        }
        function test2()
        {
            $('.ke').val('english');
        }
    </script>

表单处理
获取选中的值:$(xxx).val()
设置选中的值:$(xxx).val('newvalue')

动态生成
<button onclick="test3()">动态添加</button>

function test3()
{
    var str="<option value='java'>Java编程</option>";
    $('.ke').append(str);
}

append方法.

15.1    认识js对象.
第一种
    <script>
        //建立一个对象,并不须要先声明一个Student类型
        var stu = new Object();
        //直接添加属性
        stu.id = 20190103;
        stu.name="xxx";
        stu.sex=true;
        //直接添加方法
        stu.introduce = function(){
            console.log("hi,i am"+this.name);
        };
        //调用方法
        stu.introduce();
        //能够直接把一个Object 输出到控制台
        console.log(stu);
    </script>
第二种
每一个属性以逗号隔开,最后属性不加对象.
var stu={
    id:xxx,
    name:"xxx",
    introduce:finction(){
        console.log("xxx");
    }
}
stu.introduce();    

第三种
//{}就是一个对象
var stu={};

//javascript里的对象,其实是个HashMap
stu['id']=20123;
stu['name']='xxx';
stu['introduce']=function(){
    console.log();
    };
//调用
stu.introduce();

第四种
function test(stu)
{
    console.log("学号:"+stu.id+",姓名:"+stu.name);
}
//括号包起来的就是一个对象.
    test({
    id:2010,
    name:'xxxx'
});

//另外一种遍历对象里全部属性
for(var key in stu)
{    
    var value=stu[key];
    //jquery判断该属性是否是function
    if(!$.isFuncion(value))
    {
        console.log(key+":"+value);
    }
}

15.2    认识JS数组
基本写法
var names=new Array();
names.push("a");
names.push("b");
names.push("c");
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}

在JS中中括号[]能够表示一个数组对象
var names =["a","b","c"];
//for循环遍历
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}

第三种
function Student(id,name)
{
    this.id=id;
    this.name=name;
}
var students[];
sutdents.push(new Student(2011,"a"));
sutdents.push(new Student(2012,"b"));
sutdents.push(new Student(2013,"c"));

for(var i=0;i<=names.length;i++)
{
var stu=students[i];
console.log('学号'+stu.id+"姓名"+stu.name);
}

JS里的数组至关于Java里的ArrayList
splice()插入元素/删除元素
concat()合并
join()合成一个字符串
reverse()反转
sort()排序


15.3JSON
如何将一个学生的信息传给网站后台.
必须把Object转换成String类型

使用jQuery里自带的JSON的支持
    var stu={
    id:1234,
    name:'xxx'
    };
    //Object->String
    var jsonstr=JSON.stringify(stu);
    console.log("转成JSON字符串:" + jsonstr);
        
    //String-> Object
    var obj =JSON.parse(jsonstr);
    console.log("转成对象:");
    console.log(obj);


    var names={"a","b","c"};

    //Object->String
    var jsonstr=JSON.stringify(names);
    console.log("转成JSON字符串:" + jsonstr);
        
    //String-> Object
    var arr =JSON.parse(jsonstr);
    console.log("转成对象:");
    console.log(arr);

16.1    选择器优化
jQuery选择器问题:在selector写错时,没有任何提示.
function doChange()
{
    var target = $('.simple');
    if(target.length==0)         //若是target的长度为0.说明选中为null.
        throw'错误的选择器'; //javascript也能够抛出异常对象
    target.html('xxxx');
}

另外一个解决方案
jQuery对象的length为0,代表selector有误.


16.2    表单优化    
    <body>
        <div class='main'>
            <div class='row'>新用户注册</div>
            <div class='row'>
                <label>用户名</label><input class='username' />
            </div>
            <div class='row'>
                <label>密码</label><input class='password' type="password"/>
            </div>
            <div class='row'>
                <label>手机</label><input class='cellphone' />
            </div>
            <div class='row'>
                <button onclick="submit()">提交</button>
            </div>
        </div>
    </body>
    <script>
        function submit()
        {
            var req={};
            req.username = $('.main .username').val().trim(); //去掉两边空白字符
            req.password = $('.main .password').val().trim();
            req.cellphone = $('.main .cellphone').val().trim();
            console.log('用户提交信息:' );
            console.log(req);
        }
    </script>


使用afquery
    <script>
        
        function submit()
        {
            var f = new AfForm('.main');
            var req = f.get(); // 自动取值
            console.log("提交用户信息: ...");
            console.log( req );
        }
        
        function init()
        {
            var data = {
                username: '邵发',
                password: '123456',
                cellphone: '13810012345',
            };
            new AfForm('.main').set(data); // 自动设值
        }
        
        init();
        
    </script>

16.3    对话框优化



17.1    子页面加载
    function load(url)
    {
        $.get(url,t);
                    
        function t(data)
        {
            $('#con').html(data);
        }
    }


    function load(url)
    {
        $.get(url,function(data){
            $('#con').html(data);        //加载html内容,填充到#con里面去.
        });
    }



其中$.get() 和jQuery.get()是等效的.

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script>
            function load(url)
            {
                $.get(url,function(data){
                    $('#con').html(data);        //加载html内容,填充到#con里面去.
                });
            }
        </script>
    </head>
    <body>
        <div id='head'>
            <button onclick="load('test1.html')">1</button>
            <button onclick="load('test2.html')">2</button>
            <button onclick="load('test3.html')">3</button>
        </div>
        <div id='con'>
            <!--
                做者：offline
                时间：2019-01-10
                描述：内容区域
            -->
        </div>
    </body>

17.2 页面刷新问题.
使用hash
解决办法,将当前子页面路径记在hash里
当页面刷新时,取出hash,加载子页面.
地址栏的hash即为子页面路径


        // 取出全部<button>添加事件处理
        $('#head button').click(function(){
            // 取得button的page参数
            var page = $(this).attr('page');
            // 加载子页面 （封装到了afquery.js里）
            Af.loadPage('#content', page); 
            // 记到地址栏的hash里
            window.location.hash = page;
        });
        
        // 检查地址栏
        if(location.hash != null && location.hash.length>0)
        {
            // location.hash: 示例 #home.html
            var page = location.hash.substr(1); // 去掉#号
            Af.loadPage('#content', page); 
            window.location.hash = page;
        }
        

173.子页面JS调试

<div class='main'>
    <label> xxxx有限公司711</label>

    <p>
    地址：中国 北京市**区**街道**号 <br>
    邮编：100100 <br>
    电话：010-0000000 <br>
    </p>
    
    <div>
        <textarea class='message'></textarea>
        <button onclick='M.doSubmit()'> 提交反馈意见 </button>
    </div>
</div>

<script>
    
    var M = {};
    
    M.doSubmit = function()
    {
        var str = $('.main .message').val();
        console.log(str);
        alert('已提交!');
    }
    
    //@ sourceURL=about.js
</script>


经过最后一段//@ sourceURL=about.js 进行子页面调试.

18.纯静态网站发布.
没有后台支持,纯粹用于展现的网站.
只用html,css,javascript.
1.本机测试
(1),在Hbuilder里测试
(2)在WebServer里测试
2,部署到公网服务器
(1)申请一台公网服务器
(2)远程登陆上去,把WebServer.zip拷贝上去
(3)把网站项目拷贝到webapps\ROOT\下
(4)启动服务

cmd mstsc