• 前端简介


    前端基础知识

    根据视频教程总结:视频地址

    HTML

    head 标签

    head 标签的内容,不会显示在web页面上,它只是定义了一些浏览器标签标题,页面编码等信息。

    title 标签

    title 标签定义了浏览器标签的标题

    <head>
        <title>窗口1</title>
    </head>
    

    meta 标签

    meta 标签是一个自闭合标签,可以定义页面的编码格式,页面的定时刷新和跳转,以及一些其他信息

        <head>
    <!--        页面编码-->
            <meta charset="UTF-8">
    <!--        定时两秒刷新一次页面-->
            <meta http-equiv="Refresh" content="2">
    <!--        2秒后跳转到百度-->
            <meta http-equiv="Refresh" content="2; Url=http://www.baidu.com"/>
            
            <title>Title</title>
        </head>
    

    link 标签可以定义引用外界 CSS 样式。也可以定义浏览器标签页标题旁边的小图标。

    定义CSS

    href 属性是本地 css 文件的相对路径

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    

    定义小图标

    icon.png 是本地的一个小图片

    <head>
           <link rel="shortcut icon" href="icon.png">
    </head>
    

    style 标签

    style 标签内部写的是 CSS 代码。

    <style>
        div{
             20px;
        }
    </style>
    

    script 标签

    script 标签内部,写的是 JavaScript 代码(最好是放在body标签里面的最底下!!!)

    <script>
    	var x=10;
    </script>
    

    也可以直接导入一个 js 脚本:

    <script src="common.js"></script>
    

    body 标签

    在网页上我们能看到的主体内容,都存放在 body 标签里面。

    标签的 name, value 属性

    很多标签都有 name,value属性,它们的作用主要是用来向服务器后台发送数据用的。因为很多标签都是让用户输入数据的,譬如登陆时的用户名和密码。name 属性的值,会作为键(键值对的键),value属性的值(当然,用户名这种文本框不需要手动写value属性,因为它会自动将用户输入字符作为value,但是像单选框这种类型,就需要手动定义value属性),会作为键值对的值,传递给服务器。这样服务器就可以拿这个键值对,处理用户的数据了。所以name,value属性的值,是和服务器后台挂钩的。

    简单来说,name和value定义了键值对的键和值,方便服务器后台获取。

    常见标签

    特殊符号

    在html中,一些特殊符号是用特殊代码表示的,如 &nbsp; 表示空格,&lt; 表示 <, &gt; 代表 > 等等。

    div 标签

    div 标签没有自身特殊的格式,一个文字加上这个标签和不加这个标签,外表看上去没有任何变化。但是我们可以通过给 div 标签加上特殊样式,就可以改变这个标签内部的元素的样式。(div 标签占据屏幕一整行,属于块级标签)

    span 标签

    span 标签本身也没什么特殊样式。和div 类似(但是span 标签不会占据屏幕一整行,而是根据 span 标签中的内容,自适应大小)

    内联标签,块级标签

    块级标签(block),这种标签自己独占一行,写在它后面的其他标签会被挤到下一行。

    内联标签(inline),它的大小就是内容的大小,不会自动换行,也无法单纯的设置标签的宽度和高度。

    inline-block ,这种标签具有上面两种的属性。它不会自动换行,但是也可以设置宽度和高度等属性。

    p 标签

    p 标签代表一个段落,它本身是有格式的!(段落间距)

    <body>
        <p>
            这是一个段落。
        </p>
        <p>
            这是第二个段落。
        </p>
    </body>
    
    

    br 标签

    br 标签是一个自闭合标签,它代表一个换行符。

    <body>
        <p>
            这是一个段落的第一句话。<br /> 这是第一段的换行后的第二句话。
        </p>
    </body>
    

    img 标签

    显示一个图片, src 属性代表图片的地址。

    <img src="icon.png" style="heifht: 500px;">
    

    a 标签

    链接跳转

    a 标签代表一个超链接。可以给文字等设置超链接,可以实现点击的跳转。它有两个重要的属性:href, target

    href 代表了链接的地方。target 代表如何打开这个链接:_blank 代表在新标签页打开。

    <body>
        <a href="http://www.baidu.com" target="_blank">点击我跳转</a>
    </body>
    
    
    <!-- 如果你不想要跳转到任何地方,可以在 href 处写上: -->
    <body>
        <a href="javascript:void(0)">点我没反应</a>
    </body>
    

    锚相当于一个锚点,点击这个锚点,就可以直接跳转到锚点指向的位置(譬如你想从当前网页顶部,直接跑到页面的底部,就可以在页面顶部创建一个锚点,指向页面底部的某个元素)

    格式:href="#id"

    将想要跳转到的元素的 id 属性值,放到 a 标签的 href 属性中(记住要加 #)

    <body>
        	<!-- 格式: #id -->
             <a href="#1">跳转到底部</a>
    
            <div style="height: 1000px">模拟网页中间的大段内容</div>
        
        	<!-- 要有id 属性,切记网页所有标签的 id 都应该不重复!!! -->
            <div id="1">底部</div>
        
    </body>
    

    h 标签

    h 标签代表标题。类似于 word 中的一级标题,二级标题...

    h有6个等级。分别为: h1, h2, h3, h4, h5, h6

    <body>
        <h1>
            标题一
        </h1>
        <h2>
            标题二
        </h2>
    </body>
    

    form 标签

    form 标签通常用来放置用户输入的内容,然后可以将用户输入的内容,发送给服务器后台。它有两个属性:method, action

    action 定义了发送的地址,通常是一个 url 链接。

    method 定义了发送的方法:get,post

    enctype 如果不需要上传文件,可以不写。需要上传文件时,必须要写。

            <form action="http://www.baidu.com/" method="post" enctype="multipart/form-data">
                <p>用户名:<input type="text"></p>
                <p>密码:<input type="password"></p>
    
                <input type="submit" value="提交">
                <input type="button" value="按钮">
                <input type="reset" value="重置">
            </form>
    

    input 标签

    input 标签可以创建让用户输入的内容。譬如文本框,密码框,单选项,多选项等等。

    type 属性定义了标签的类型。

    文本框

    <!-- 文本输入框 -->
                <p>
                    name : <input type="text" name="user_name">
                </p>
    

    密码框

    <!-- 密码输入框,会自动隐藏真实密码 -->
                <p>
                    password : <input type="password" name="password">
                </p>
    

    单选项

    针对单选项,value 属性定义了发送给服务器后台数据的值,假设用户选择了 '男' ,那么form表单会发送:

    {'gender': 1} 这种类型的数据。

                <!-- 单选框,单不加 name 属性无法实现单选,可以选中多个选项,并且无法取消选择 -->
                <p>
                    gender:
                    男:<input type="radio">
                    女:<input type="radio">
                </p>
                <!-- 单选框,加了相同的 name 属性(一定要相同),就变成了互斥的单选项 -->
                <p>
                    gender:
                    男:<input type="radio" name="gender" value="1">
                    女:<input type="radio" name="gender" value="0">
                </p>
    			
    			<!-- checked 属性可以将此单选框变成选中的状态 -->
    			<p>
                    <input type="radio" checked="checked">
    			</p>
    

    多选项

     <!-- 多选项,可以同时勾选多个,也可以取消. checked属性可以设置默认选中。-->
                <p>
                    多选项:<br>
                    唱歌:<input type="checkbox" name="favor" value="1"><br>
                    看电影:<input type="checkbox" name="favor" value="2"><br>
                    打游戏:<input type="checkbox" name="favor" value="3" checked="checked">
                </p>
    

    文件上传

                <!-- 文件上传选项 -->
                <p>
                    <input type="file"/>
                </p>
    

    提交

    submit 类型,可以提交一个form 表单中用户填写的数据。 value 是按钮显示出来的名字

    例子见下方。

    按钮

    按钮类型,对 form 表单没有什么影响(需要用户自己写一些函数,绑定在按钮上才有用)

    例子见下方。

    重置按钮

    重置按钮,可以将用户在 form 表单中填写的所有数据清空。

            <form>
                <p>用户名:<input type="text"></p>
                <p>密码:<input type="password"></p>
                
                <!-- value 属性是按钮在网页上显示的文字 -->
                <input type="submit" value="提交">
                <input type="button" value="按钮">
                <input type="reset" value="重置">
            </form>
    

    textarea 标签

    这个标签可以让用户输入一大串文本。(可以换行,多段落)

    <textarea name="user_info"></textarea>
    
    <textarea>我是文本区域内的默认值。</textarea>
    

    select 标签

    select 标签可以实现下拉选项。

    option 标签设置每个选项。option 标签的 selected 属性,可以将此选项设置成默认值。

    <body>
          <div>
                <!-- 下拉选项,option 定义了每一个选项内容 -->
                <p>城市:
                    <select name="city">
                        <option value="1">上海</option>
                        <option value="2">北京</option>
                        <option value="3">广州</option>
                    </select>
                </p>
    
                <!-- multiple 可以让下拉选项变成展开的样式。 size 定义了展示几个 -->
                <p>城市:
                    <select multiple size="3">
                        <option>上海</option>
                        <option>北京</option>
                        <option>广州</option>
                        <option>广州</option>
                        <option>广州</option>
                    </select>
                </p>
    
                <p>
                    <!-- 带有分组的下拉菜单,optgroup 定义了分组,label属性定义了分组的名称。这个名称是无法选中的 -->
                    <select>
                        <optgroup label="安徽省">
                            <option>黄山</option>
                            <option>六安</option>
                        </optgroup>
                        <optgroup label="山东省">
                            <option>枣庄</option>
                            <option>济南</option>
                        </optgroup>
                    </select>
                    
                    <!-- 默认选中某个选项 -->
                    <select>
                        <option>上海</option>
                        <option selected="selected">广东</option>
                        <option>上海</option>
                    </select>
                    
                </p>
            </div>
    </body>
    

    label 标签

    label 可以让一个 label 和后面的内容相关联。下面的例子中,用户点击 用户名 这三个字,鼠标光标就会自动放到用户名的输入框中,相当于点击文字和点输入框是一样的效果。

    <p>
        <label for="2">用户名:
            <input id="2" type="text">
        </label>
    </p>
    <p>
        <label>密码:
            <input type="password">
        </label>
    </p>
    

    ul,ol 标签

    ul,ol 标签都是代表列表。ul 标签的 li 用 · 表示每一项。 ol 用数字放在列表前代表每一项。

        <ul>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </ul>
    
        <ol>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </ol>
    

    table 标签

    table 标签声明一个表格。它是由行和列组成的。一个表格包含多行(<tr>), 每行又包含多列(<td>)。

    <table> 声明一个表格

    <thead> 声明表格的表头(可以忽略不写)

    <tbody> 表格的内容 (可以忽略不写)

    <th> 表头的每一列

    <tr> 一行

    <td> 一列

        <table>
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>列1的值</td>
                    <td>列2的值</td>
                </tr>
                <tr>
                    <td>列1的值</td>
                    <td>列2的值</td>
                </tr>
            </tbody>
        </table>
    

    合并单元格

    两个属性:

    colspan="2" 代表横跨两列,即水平方向合并两个单元格

    rowspan="2" 代表纵跨两行,即竖直方向合并两个单元格

    下面的例子是一个3行2列的表格。

    表头的第一列占据了2个单元格,所以我们只写一个 <th> 就行了

    表格body里 第一行的第一列单元格纵跨了2行,所以下一行保留一个 <td> 就够了

    总之就是表格的大小是固定的,只要有人占多了位置,被占据的就要被踢出去。

        <table border="1">
            <thead>
                <tr>
                    <!-- 横跨两列 -->
                    <th colspan="2">列1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- 纵跨两行 -->
                    <td rowspan="2">列1的值</td>
                    <td>列2的值</td>
                </tr>
                <tr>
                    <td>列2的值</td>
                </tr>
            </tbody>
        </table>
    
    

    iframe 标签

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

    <iframe src="https://www.baidu.com/"></iframe>
    

    CSS

    CSS 指层叠样式表 (Cascading Style Sheets)。

    三种设置方式和优先级

    有三种设置它的方式:

    标签内部的 style 属性

    仅作用于当前标签

    <div style="color: green;">我的世界</div>
    

    html的 head 头部 style 标签

    <head>
        
        <style>
            div{
                color: green;
            }
        </style>
    </head>
    

    html的 hread 头部 link标签

    在head 标签中,通过 link 标签引入外部 css 文件,实现样式。

    <head>
        
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    

    优先级:标签内部 > 头部 style 标签 > link 外部文件

    语法

    如果是写在标签内部,则给标签添加一个 style 属性:使用键值对的方式,填写想要施加的属性样式和值。并且多个属性之间,用 ; 分隔开。

    <div style="color:red;">
        ....
    </div>
    

    如果是写在 <head><style> 标签中,或者是外部 css 文件中。则:

    选择器{
    	属性:值;
    	...
    }
    

    选择器 是你想要施加样式的对象,如 div, a, p 或者是一些 class 属性的值,等等。

    譬如:

    <style>
        /* 这是注释 */
        div{
            color: red;
        }
    </style>
    

    CSS选择器

    我们想要对标签设置样式,自然需要先选中标签,css 有多种方式可以给你想要的标签添加样式。

    标签选择器

    直接定义一个固定的标签,给页面所有的这个标签添加样式。

    给所有 div 标签设置颜色红色。

    <style>
        /* 这是注释 */
        div{
            color: red;
        }
    </style>
    

    id选择器

    给某 id 的标签设置样式,使用:#id 的格式。因为 html 中所有标签的 id 不能重复,所以这个选择器不常用。

            <style>
                #i1{
                    color: green;
                }
            </style>
    
    <!-- 分隔符 -->
    
    <body>
        <div id="i1">
            id=1的标签
        </div>
    </body>
    

    class 选择器

    html 中每一个标签都可以有一个 class 属性,并且 class 的值可以相同。我们可以通过设置某个 class 的样式,对这些标签设置样式。

    <style>
        .class_1{
            color: red;
        }
    </style>
    

    属性选择器

    选择某个标签后,还可以筛选响应的属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* 筛选 class='c1',并且此标签的 abc 属性值为 'a' 的标签 */
            .c1[abc='a']{
                color: red !important;
            }
        </style>
    </head>
    <body>
        <!-- 自定义了一个属性 abc -->
        <div class="c1" abc="a">111</div>
        <div class="c1" abc="b">111</div>
        <div class="c1" abc="c">111</div>
        <div class="c1" abc="a">111</div>
    </body>
    </html>
    

    层级选择器

    如果嵌套多个标签,我们可以给定标签层的路径,设置某一层的标签的样式

    每一个层级,都用空格隔开

    	<style>
            .class_1 div p a{
                color: red;
            }
            
            /* 上面的和下面的样式,两者等效 */
            
            .class_1 div p .class_2{
                color: red;
            }
    	</style>
    
    
    
    
        <body>
            <div class="class_1">
                <div>
                    <p>
                        <a class="class_2">就是这里</a>
                    </p>
                </div>
            </div>
        </body>
    

    组合选择器

    我们想要对多个标签或者 class 选择器施加相同的样式,可以将这些选择器用 , 分隔开:

    <style>
        .class_1,a,p,.class_2{
                        color: red;
                    }
    </style>
    

    小知识:

    !important

    如果一个标签,施加了多个样式,可能某个样式的优先级比较低,没有成功施加样式,可以这样做:

    !important 会无视别的样式的优先级,确保当前样式一定会执行。

        <style>
            .c1{
                color: red !important;
            }
        </style>
    

    :after

    :after 可以给所选择的标签的内容后面,添加新的内容。新内容用 'content' 定义

    /* 给 p 标签内容的后面,添加一个 '。' */
    p:after{
    	content: '。';
    }
    

    :before

    同上。

    常见属性

    color

    color可以设置字体颜色,有三种设置方式:颜色名称,16进制rgb颜色,rgb(255,255,255,0.5)

    div{
        color: red;
        color: #FFB6C1;
        color: rgb(0,255,200,0.6);  /* 前三个值代表 rgb,最后一个代表透明度
    }
    

    background-color

    设置元素的背景颜色,同样支持三种颜色方式(见 color 属性)

    font-size

    设置字体大小。

    div{
        font-size: 50px;
        font-size: 100%;  /* 相对父元素的大小 */
    }
    

    height, width

    元素的高度,不支持百分比。width宽度,支持百分比

    div{
        height: 500px;
         150%;  /* 相对父元素的宽度 */
    }
    

    background-image

    设置背景图片。

    高和宽是在网页上显示的图片的大小(如果图片宽高大于设置的宽高,则只会显示图片的局部)。

    background-repeat 可以设置是否重复显示图片(如果图片真实高宽小于设置的宽高,则默认重复显示图片铺满这块区域)

    background-position: 设置图片的位置(以图片左上角为基准点,放到某个位置。屏幕左上角是0,0)

    .img{
        background-image: url(icon.png);
        height: 50px;
         100px;
        background-repeat: no-repeat;
        background-position: -100px -200px;
    }
    

    border

    border设置边框线条。想要设置单独某个边框,可以使用:

    border-left, border-right, border-top, border-bottom

    后面跟的值分别是:边框粗细,边框线条样式,边框颜色(有一个特殊的透明色:transparent)

    table{
        border: 1px solid red;
    	border-left: 2px dotted green;
    }
    

    利用border实现特殊小三角效果:

    会沿着两个对角线,将标签填充成四个颜色小三角形。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .icon{
                display: inline-block;
                border-top: 20px solid red;
                border-right: 20px solid green;
                border-bottom: 20px solid yellow;
                border-left: 20px solid magenta;
            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>
    </html>
    

    display

    display可以改变一个元素的展示方式

    div{
        display: none;  /* 顾名思义,彻底隐藏一个元素,就好像它不存在一样 */
        display: inline;  /* 将一个块级标签转换成内联标签 */
        display: block;  /* 将一个内联标签转换成块级标签 */
    }
    

    margin, padding

    margin 控制一个元素的外边距(元素仅仅移动,保持一个边距)。(margin-left, -top, -right, -bottom可以分别调节四个边距)

    margin 后面可以跟1-4个值:

    div{
        margin: 0 auto;   /* 0代表上下间距为0,左右间距自动(通常会自动居中) */
        margin: 0 10px;   /* 0代表上下间距为0,左右间距10px */
        margin: 10px 20px 30px 40px;   /* 分别代表上边距,右边距,下边距,左边距 */
        margin: 10px 20px 30px;   /* 分别代表上边距10px,左右边距都是20px,下边距30px */
        margin: 0;   /* 上下左右边距都是0 */
        
        margin-left: 0;
    }
    

    padding 控制一个元素的内边距(元素会向某个方向扩大),同样有 -left,-top, -right, -bottom

    <div style="height: 100px; border:1px solid green;">
            <input style="margin-top:20px; padding-bottom:10px;" type="text" />
    </div>
    

    margin 设置的是标签的外边距,增加一个边距,会让整个标签移动(相当于整个标签平移了)。

    padding 设置的是标签的内边距,增加它会增加标签的大小(一个标签的大小包含了可供放置内容的区域和内边距,扩大内边距会增大标签的大小,但是不会增加可供放置内容区域的大小)

    top,bottom等设置的是标签的边缘,它们会将标签的边缘放置在相应的位置,通过top,left,right,bottom的结合,可以肆意拉伸一个标签,变大或变小。

    float

    float:left,right,top,bottom

    float,顾名思义,可以让一个标签悬浮起来。譬如下面的例子中,div 标签有三个子标签。我们想让前两个子标签放在一行(它们的宽度加起来刚好100%,所以能放在一行。但是div标签是块级标签,每个单独占一行,没法放在一行),所以我们就需要让他们靠 left float 起来,这样它们就会自动填充空隙(跑到一行中)。但是它们悬浮以后,父级 div 就无法囊括住这两个子标签了,所以需要第三个 div ,设置 style="clear: both" , 让它们依然和父标签在一起。

            <div style="border:1px solid red;">
                <div style="20%; background-color:gray; float:left">a</div>
                <div style="80%; background-color:black; float:left">b</div>
                <div style="clear: both"></div>
            </div>
    

    上面我们用了一个 clear: both 来重新撑起父级标签。现在有个更好的做法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* 这个选择器,可以让拥有 float 样式子标签的标签,重新被撑满 */
            .ui-helper-clearfix:after{
                content: '.';  /* 在当前类选择器的标签内容的后面,添加一个 . */
                clear: both;  /* 让子标签的悬浮状态,重新撑起父标签 */
                display: block;  /* 变成 块级标签 */
                visibility: hidden;  /* 隐藏上面添加的 . */
                height: 0;  /* 消除 . 带来的高度 */
            }
        </style>
    </head>
    <body style="margin:0">
    <!--    添加了一个清除塌缩的类 ui-helper-clearfix-->
        <div style="background-color: lightgray; 980px" class="ui-helper-clearfix">
            <div style=" 20%; float: left;">part1</div>
            <div style=" 80%; float: left;">part2</div>
        </div>
    </body>
    </html>
    

    position

    这个属性可以设置一个元素的位置。它有三种定位方式:

    position: fixed / absolute / relative

    fixed: 固定位置。不管如何滚动页面,永远显示在那个位置。

    absolute: 单独使用也可以固定位置,但是会随着页面的滚动而滚动。如果有别的标签使用了 relative,则当前使用了 absolute 的标签,会根据 那个 relative 的标签进行定位。

    relative:给别的标签作为相对定位用的。

        <body>
        <!-- 最外层div使用了 relative -->
            <div style="border:1px solid red; height: 1000px; 500px; position:relative">
                <!-- 使用了 fixed,会一直固定在这个位置 -->
                <div style="position: fixed; top:0px; left:0px;">顶部</div>
                <div style="margin-top:200px; height:300px;background-color:gray;">
                    <!-- 使用了 absolute,它会一层一层往上找 relative,找到后会根据 relative 标签,设置位置 -->
                    <div style="position:absolute; bottom:0px; right:0px;">相对定位</div>
                </div>
            </div>
    
        </body>
    

    bottom, top, right, left

    四种设置元素位置的属性

    <div style="top:0px; left: 0px; ">
        顶部
    </div>
    

    opacity

    设置不透明度。取值范围 0-1。1代表不透明,0代表透明

    .shadow{
        background-color: black;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0.4;
    }
    

    z-index

    设置不同选择器样式的优先级,值越大,优先级越高。想要 z-index 生效,必须使用 position,或者父元素使用了 positoin。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .shadow{
                    position: fixed;
                    background-color: black;
                    top:0px;
                    left:0px;
                    right:0px;
                    bottom:0px;
                    opacity:0.5;
                    z-index:1;
                }
                .show{
                    position: fixed;
                    color:red;
                    background-color:white;
                    z-index:11;
                }
            </style>
        </head>
    
        <body>
            <input type="submit" name="submit" >
            <!-- 遮罩层 -->
            <div class="shadow" style=""></div>
            <!-- 显示层 -->
            <div class="show">
                <input type="text"/>
            </div>
        </body>
    </html>
    

    list-style-type

    设置 <ul>, <li> 标签前面的 · 样式

    ul{
        list-style-type: none;  /* 将列表前面的小圆点设置为无 */
    }
    

    line-height

    设置行高,设置了此属性的标签,它的子标签会自动垂直方向居中

    div{
        line-height: 50px;
    }
    

    cursor

    设置鼠标的样式(小手,指针,十字等)

    div{
        cursor: pointer; /* 鼠标小手的样式 */
    }
    
    

    hover

    设置鼠标悬停的样式,针对一个标签,如果设置了 hover,当鼠标悬停在此标签上时,会自动应用设置的样式

    div:hover{  /* 设置鼠标悬停在div标签上时,此div的背景色变成 红色 */
        background-color: red;
    }
    

    font

    设置字体大小,是否是斜体,

    div{
        font-size: 10px;
        font-size: 1em;  /* 1em =16px, 16px是浏览器默认大小 */
        font-style:normal;  /* 设置文字正常还是斜体。italic 是斜体文字,oblique 是倾斜的文字 */
        font-weight:normal; /* 字体粗细。normal, bold */
    }
    

    text-align

    设置文字左右对齐方式,譬如 center, left, right

    span{
        text-align: center;
    }
    

    overflow

    假设一个标签的内容太多,超出了标签的大小,overflow 会生成一个滑动条,实现标签内部的内容滑动,而不是无限扩大标签的大小。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*清除body默认的边距*/
            body{
                margin: 0;
            }
            .title{
                height: 50px;
                background-color: green;
            }
    
            .left_menu{
                position: absolute;  /*使用 absolute 让菜单固定在左侧*/
                 200px;
                left: 0;
                top: 50px;
                bottom: 0;  /* 下边缘为0(拉长标签) */
                background-color: red;
            }
            .content{
                position: absolute;  /*使用 absolute 让内容固定*/
                top: 50px;
                right: 0;
                bottom: 0;
                left: 200px;
                overflow: auto;  /* overflow 会让超出标签区域的内容,生成一个下拉滑动条,而不是让网页往下增长 */
            }
    
        </style>
    </head>
    <body>
        <div class="title">Title</div>
        <div class="left_menu">sss</div>
        <div class="content">
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
            ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
        </div>
    </body>
    </html>
    

    @media 响应式布局

    @media 可以针对不同的屏幕尺寸设置不同的样式,当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

    如果文档宽度小于 300 像素则修改背景颜色(background-color):

    @media screen and (max- 300px) {
        body {
            background-color:lightblue;
        }
    }
    

    JavaScript

    常见符号

    ==  // 判断两个变量的值是否相等(不判断类型,数字的 123 和字符串的 '123' 会认为相等)
    !=  // 不相等(同样不判断类型)
    ===  // 判断两个变量的值和类型是否相等
    !==   // 判断类型和值是否不相等
    &&   // 并且;类似于 python 的 and
    ||  // 或
    
    
    
    

    变量类型

    变量和注释

    var 关键字声明局部变量。不加关键字声明的是全局变量。

    // 单行注释
    /* 多行注释
    */
    var x = 10;
    a = 20;
    

    特殊变量

    null

    null 代表一个特殊的变量,类似于 python 中的 None

    var a = null;
    

    undefined

    undefined 代表一个暂未赋值的变量。

    var a;  // 此时 a 就是 undefined
    var b = undefined;  // 这样也行
    

    数字类型

    javascript 中不区分整数型和浮点型数字,所有数字都用浮点型表示

    类型转换

    • parseInt() 将一个值转换成数字,不成功返回 Nan
    • parseFloat() 将一个之转换成浮点型,不成功返回 Nan

    特殊值

    • Nan 代表一个非数字的值;可以通过 isNaN() 判断。
    • Infinity 代表一个无穷数;可以通过 isFinite() 判断。

    字符串类型

    常用方法:

    var a = ' ab  abcde      ';
    var b = '123456'
    
    a.trim()         	// 去除左右空白符号
    a.trimLeft()		// 去除左边空白符号
    a.trimRight()		// 右边
    a.charAt(0)			// 获取某个索引位置的字符
    a.concat(a,b)		// 拼接 a,a,b 这三个字符串
    a.indexOf('a', 2)	// 获取索引2位置后面的第一个a的索引
    a.lastIndexOf('a', 2)
    a.substring(2,3)	// 返回一个2-3索引的字符串(不包含3)
    a.slice(2,3)		// 切片
    a.toLowerCase()		// 转换成小写
    a.toUpperCase()		// 大写
    a.split('b', 2)		// 按照 'b' 分割,返回列表的前两个。
    
    
    

    数组类型

    声明数组:

    var a = [];
    a.push(1)			// 末尾追加
    a.pop()				// 末尾弹出
    a.unshift(2)		// 头部追加
    a.shift()			// 头部删除
    a.slice(2,3)		// 切片
    a.reverse()			// 反转
    a.join(sep)			// 使用 sep 这个符号来拼接;类似于python: sep.join(list)
    a.concat(val,...)	// 拼接
    a.sort()
    
    a.splice(index, deleteCount, value1,value2...)  // 从索引 index的地方开始,删除 deleteCount 个元素,然后插入 value1,value2...
    
    

    字典对象

    JavaScript中没有字典这个概念,它有一个类似于字典的对象,我们姑且叫它字典。它的表现形式和字典起始一样。

    var a = {"k1": 1; "k2": 2}
    a["k1"]
    

    时间类型

    d = new Date()
    // 可以自己在 chrome 浏览器的控制台上试试,有代码自动提示功能。
    d.getYear();
    d.setYear(2022);
    d.setHours(d.getHours()+2);
    

    条件判断语句

    if...else

    if(condition){
        
    } else if(){
        
    } else{
        
    }
    

    switch

    switch(name){
        case "wnag":
            console.log('wang');
        	break;
        case "zhang":
            ...
    }
    

    while

    while (condition){
        ...
        break;
        continue;
    }
    

    for

    第一种样式:和 java 中的语法很像

    var a = [1,2,3];
    for(var i=0; i<a.length; i++){
        console.log(a[i]);
    }
    

    第二种:

    var a = [1,2,3];
    var b = {"k1": 1; "k2": 2};
    
    // 针对数组,遍历的是索引
    for(var item in a){
        console.log(a[item]);  // 记住,这里的 item 依然是索引!不是里面的元素!
    }
    
    // 针对字典对象,遍历的是 key
    for(var key in b){
        console.log(key)  // 这里的遍历的是 key,可以通过 b[key] 取值。
    }
    

    异常处理

    try...catch...finally

    捕获异常。

    try{
        code;
    }catch(e){
        code;
    }finally{
        code;  // finally 无论有无异常,都会执行。
    }
    

    throw new Error

    抛出异常

    throw new Error('Error with ....')
    

    函数

    普通函数

    function func1(args){
        code;
        return xxx;
    }
    

    匿名函数

    var func1 = function(args){
        args = args + 1;
        return args;
    }
    

    类似于 python 中的 lambda:

    func1 = lambda x: x+1
    

    自执行函数

    创建一个匿名函数,并执行它

    格式:(匿名函数)(传递的参数值)

    (function(args){return args+1})(123)
    
    // 上面的自执行函数可以分解如下:
    // 1. 声明函数
    function func1(args){
        return args+1;
    }
    // 2. 执行函数
    func1(123)
    
    

    对象序列化

    var a = [1,2,3]
    
    a = JSON.stringify(a)  // 将a序列化成字符串
    JSON.parse(a)  // 将字符串反序列化成对象
    

    转义

    url转义

    将 URL 中的特殊符号,转义

        <script>
            var url = 'http://www.baidu.com/?name="我的世界"';
            // 将url进行转义(汉字变成特殊符号)
            url = encodeURI(url)
            console.log(url)
            // 将特殊符号的url,解码
            url = decodeURI(url)
            console.log(url)
            // 不仅将汉字转义,对 / 等这个符号也转义
            url = encodeURIComponent(url)
            console.log(url)
            // 将其解码
            url = decodeURIComponent(url)
            console.log(url)
        </script>
    

    值转义

    仅仅将值转义,不针对URL

    var name = "我的"
    name = escape(name)  // 编码
    
    unescape(name)  // 解码
    
    

    eval

    可以将一段字符串,当成可执行命令执行

    var a = 'alert(123)'
    eval(a)
    

    DOM 元素查找

    直接查找

    document.getElementById("i1")                 // 根据ID获取一个标签
    document.getElementsByName("xxx")             // 根据name属性获取标签集合
    document.getElementsByClassName("class1")     // 根据class属性获取标签集合
    document.getElementsByTagName("div")          // 根据标签名获取标签集合
    

    根据标签的上下文查找

    var tag = document.getElementsByTagName("div");  // return an array of all div.
    ele = tag[0]
    
    // 查找 Node(譬如一个标签元素。它会有文本内容,会有属性。内容和属性都各属于一个Node,链接到这个元素上),所以我们查找Node,会返回标签的各个Node,然后从Node中获取文本内容等。
    ele.parentNode          // 父节点
    ele.childNodes          // 所有子节点
    ele.firstChild          // 第一个子节点
    ele.lastChild           // 最后一个子节点
    ele.nextSibling         // 下一个兄弟节点
    ele.previousSibling     // 上一个兄弟节点
    
    // 查找 Element,查询出来标签元素。
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素
    

    查找标签的内容值

    value

    针对带有 value 属性的标签(譬如输入框,勾选框等),我们可以通过 value 取值

    var tags = document.getElementByTagName("input")
    tag = tags[0]
    
    tag.value
    

    innerHTML, innerText

    对于包含春文本形式的标签(不带value属性)我们可以通过 innerHTML 或者 innerText 取值

    它们的不同之处是:假设内容中嵌套了 html 标签,innerHTML 可以将其原样返回。innerText 只会返回内部的值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>这是内容<span>(嵌套了内容)</span>,还是内容。</div>
        
        <script>
            var tags=document.getElementsByTagName("div");
            var tag = tags[0];
            console.log(tag.innerText); // 这是内容(嵌套了内容),还是内容。
            console.log(tag.innerHTML); // 这是内容<span>(嵌套了内容)</span>,还是内容。
        </script>
    
    </body>
    </html>
    

    标签的 class 属性

    获取标签的 class 属性值。

    className 可以获取一个标签的 class 属性(作为一个字符串)

    classList 也可以获取一个标签的 class 属性(作为一个数组)

    var tag = document.getElementByClassName("div")[0];
    tag.className  // return the string type class value of the div.
    tag.classList // return an array of all classes of the div.
    
    // 添加或删除某个值
    tag.classList.remove("c1") // remove a class value of the tag.
    tag.classList.add("c1") // add a class value of the tag.
    

    标签的样式

    tag.style.attribute 可以动态的修改标签的样式。

    var tag = document.getElementByClassName("div")[0];
    
    tag.style.color='red';
    tag.style.fontSize='20px';
    

    标签的属性

    简单粗暴的获取,设置,删除一个标签的属性的值。

    tag.getAttribute("attribute_name")
    tag.setAttribute("attribute_name", "value")
    tag.removeAttribute("attribute_name")
    
    tag.setAttribute('class', 'c1') // 将标签的 class 设置为 c1;
    tag.removeAttirbute("class")  // 删除标签的 class 属性
    

    更多例子

    创建HTML标签

    方式一:创建标签对象

    var tag = document.createElement('a')  // 创建 a 标签
    // 设置内容和 class,href 属性
    tag.innerText = "链接文字"
    tag.className = "c1"
    tag.href = "http://www.baidu.com"
    

    方式二:字符串方式

    var tag = "<a class='c1' href='http://www.baidu.com'>链接文字</a>"
    

    插入创建的标签

    插入纯文字标签

    tag.insertAdjacentHTML(where, str_obj)

    var div = document.getElementsByTagName("div")[0];
    var p2 = "<p>p2</p>";
    div.insertAdjacentHTML("beforeBegin", p2);
    

    插入标签对象

    tag.insertAdjacentElement(where, obj)

    var div = document.getElementsByTagName("div")[0];
    var tag = document.createElement('a');  // 创建 a 标签
    // 设置内容和 class,href 属性
    tag.innerText = "链接文字";
    tag.className = "c1";
    tag.href = "http://www.baidu.com";
    
    div.insertAdjacentElement("beforeBegin", tag);
    

    where 有如下四种选项:

    beforeBegin 当前元素的前面插入(关系是兄弟节点)
    beforeEnd 当前元素的内部的最后插入(关系是父子节点)
    afterBegin 当前元素的内部的开头插入(关系是父子节点)
    afterEnd 当前元素的后面插入(关系是兄弟节点)

    插入子节点

    将对象当成子节点,插入到末尾。

    tag.appendChild(obj)

    var div = document.getElementsByTagName("div")[0];
    var tag = document.createElement('a');  // 创建 a 标签
    // 设置内容和 class,href 属性
    tag.innerText = "链接文字";
    tag.className = "c1";
    tag.href = "http://www.baidu.com";
    
    div.appendChild(tag);
    

    在某个子节点的前面,插入子节点

    tag.insertBefore(tag1, children_tag)

    var div = document.getElementsByTagName("div")[0];
    var tag = document.createElement('a');  // 创建 a 标签
    // 设置内容和 class,href 属性
    tag.innerText = "链接文字";
    tag.className = "c1";
    tag.href = "http://www.baidu.com";
    
    div.insertBefore(tag, div.children[0]);  // 插入到 div 的第一个孩子节点之前
    

    查找 form 表单

    var tag = document.getElementById('form1')  // 通过 id 获取 form 表单
    tag.submit()  // 提交form表单
    

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body onscroll="bodyScroll();">
        <form action="www.baidu.com" id="form1" method="post">
            <input type="text">
            <a onclick="submit()">提交</a>  <!-- 使用a标签,绑定函数实现提交 -->
        </form>
    
        <script>
            function submit(){
                var form = document.getElementById('form1');
                form.submit();
            }
        </script>
    
    </body>
    </html>
    

    定时器

    setInterval(function, time)

    setInterval 可以间隔一段时间,一直循环执行一个函数。

    setInterval(function(){alert(123)}, 2000); // 每隔两秒,执行一次前面的匿名函数,返回一个对象
    

    clearInterval(interval)

    清除 setInterval 设置的定时任务。

    var interval = setInterval(function(){alert(123)}, 2000); // 每隔两秒,执行一次前面的匿名函数,返回一个对象
    clearInterval(interval)
    

    setTimeout(function, time)

    setInterval 类似,等待多久后,执行一次前面的函数(只执行一次)

    setTimeout(function(){alert(111)}, 2000)  // 2秒后,执行一次前面的匿名函数
    

    clearTimeout(ojb)

    var interval = setTimeout(function(){alert(111)}, 2000);
    clearTimeout(interval);
    

    url 刷新,重定向

    location.href               // 获取当前url
    location.href = "url"       // 重定向到指定 url
    location.reload()           // 刷新
    

    弹出框

    确认弹出框

    var result = confirm('确定关闭?')
    console.log(result)  // true or false;
    

    警告框

    alert('出现错误!')
    

    文档标签高度

    文档高度

    文档总高度

    获取文档总高度(加上滚动条)

    document.documentElement.offsetHeight
    

    当前屏幕显示的文档高度

    document.documentElement.clientHeight
    

    标签高度

    标签自身高度

    tag.offsetHeight
    

    标签最近的一个祖宗元素

    父级元素应该要 positioned,否则会一层层网上找,直到找到 body 标签。

    tag.offsetParent  // 返回一个元素
    

    标签到 offsetParent 标签的高度

    tag.offsetTop
    

    滚动高度

    tag.scrollTop
    

    html 事件

    事件不仅可以针对某个单独的标签,还可以针对整个窗口window

    针对标签:

    <div onclick="func1();">
        点击会触发 func1 这个函数。
    </div>
    

    针对窗口:

    window.onclick = function(){  // 在窗口上任意位置点击,都会触发这个函数
    	alert(1234);
    }
    

    针对一些特殊事件,函数会接受一个包含所有信息的 event 对象:

    window.onkeydown = function(event){  // event 是按下的事件
        console.log(event.keyCode);  // 打印事件的按键的代码
    }
    

    onfocus

    onfocus 会在鼠标聚焦在当前标签时,运行 onfocus 属性值指定的函数

    onblur

    会在鼠标失去聚焦当前标签时,执行指定的函数

    onclick

    会在鼠标点击当前标签时,执行指定的函数

    onscroll

    滚动事件

    jQuery

    语法和选择器

    基础语法:

    $(selector).action()  // '$' 等同于 jQuery;selector代表选择器,通常是一个字符串或某个DOM元素。action是要采取的动作。
    

    常见选择器:来源w3school

    元素 元素
    选择器 实例 选取
    * $("*") 所有元素
    #id $("#lastname") id="lastname" 的元素
    .class $(".intro") 所有 class="intro" 的元素
    element $("p") 所有

    元素

    .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
    :first $("p:first") 第一个

    元素

    :last $("p:last") 最后一个

    元素

    :even $("tr:even") 所有偶数
    :odd $("tr:odd") 所有奇数
    :eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
    :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
    :lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
    :not(selector) $("input:not(:empty)") 所有不为空的 input 元素
    :header $(":header") 所有标题元素

    -

    :animated 所有动画元素
    :contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
    :empty $(":empty") 无子(元素)节点的所有元素
    :hidden $("p:hidden") 所有隐藏的

    元素

    :visible $("table:visible") 所有可见的表格
    s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
    [attribute] $("[href]") 所有带有 href 属性的元素
    [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
    [attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
    [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
    :input $(":input") 所有 元素
    :text $(":text") 所有 type="text" 的 元素
    :password $(":password") 所有 type="password" 的 元素
    :radio $(":radio") 所有 type="radio" 的 元素
    :checkbox $(":checkbox") 所有 type="checkbox" 的 元素
    :submit $(":submit") 所有 type="submit" 的 元素
    :reset $(":reset") 所有 type="reset" 的 元素
    :button $(":button") 所有 type="button" 的 元素
    :image $(":image") 所有 type="image" 的 元素
    :file $(":file") 所有 type="file" 的 元素
    :enabled $(":enabled") 所有激活的 input 元素
    :disabled $(":disabled") 所有禁用的 input 元素
    :selected $(":selected") 所有被选取的 input 元素
    :checked $(":checked") 所有被选中的 input 元素

    自动展开折叠菜单栏实例

    查找节点

    父节点和祖先节点
    parent()			// 查找当前节点的父节点
    parents()			// 当前节点的所有祖先节点
    parentsUntil('xxx') // 当前节点直到 xxx 的所有祖先节点
    

    譬如:

    $("span").parent()
    $("span").parents()
    $("span").parentsUntil("body")
    
    子孙节点
    $("xxx").children()     // 只会查找xxx 的儿子节点。
    $("xxx").find()			// 会查找当前节点的所有子孙...
    
    兄弟节点
    $("span").siblings()		// 当前节点的所有兄弟节点
    
    $("span").next()			// 当前节点的下一个兄弟节点
    $("span").nextAll()		// 当前节点的剩下的所有兄弟节点
    $("span").nextUntil("div") // 介于当前节点和div兄弟节点之间的,所有兄弟节点
    
    $("span").prev()			// 和上面类似,方向相反
    $("span").prevAll()
    $("span").prevUntil("xxx")
    
    过滤
    $('div').find(".xxx")		// 查找当前div下面所有class='xxx'的标签。
    
    $("div p").last();			// div标签下面的最后一个 p标签
    $("p").eq(1);				// 当前页面的第二个 p 标签(索引为1)
    $("p").filter(".intro");	// class="intro" 的所有 p 标签
    $("p").not(".intro");		// class不是 intro 的 p 标签
    

    修改文档:来源w3school

    方法 描述 实例 解释
    addClass() 向匹配的元素添加指定的类名。 $("p:first").addClass("intro"); 向第一个 p 元素添加一个类
    after() 在匹配的元素之后插入内容。(兄弟节点) $("p").after("<p>Hello world!</p>"); 在每个 p 元素后插入内容
    append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 $("div").append(" <b>Hello world!</b>"); 在每个 div 元素内部的末尾插入内容
    appendTo() 向目标结尾插入匹配元素集合中的每个元素。 $("<b>Hello World!</b>").appendTo("div"); 把内容,添加到 div 标签内部的末尾
    attr() 设置或返回匹配元素的属性和值。(只写一个参数,取值。两个参数,设置值) $("img").attr("width","180"); 改变图像的 width 属性
    before() 在每个匹配的元素之前插入内容。(兄弟节点) $("p").before("<p>Hello world!</p>"); 在每个 p 元素前插入内容:
    clone() 创建匹配元素集合的副本。 $("body").append($("p").clone()); 克隆并追加一个 p 元素
    detach() 从 DOM 中移除匹配元素集合。 $("p").detach(); 移除所有 p 元素
    empty() 删除匹配的元素集合中所有的子节点。 $("p").empty(); 移除 p 元素的内容
    hasClass() 检查匹配的元素是否拥有指定的类。 alert($("p:first").hasClass("intro")); 检查第一个 p 元素是否包含 "intro" 类
    html() 设置或返回匹配的元素集合中的 HTML 内容。 $("p").html("Hello <b>world</b>!"); 设置所有 p 元素的内容
    insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。 $("<span>Hello world!</span>").insertAfter("p"); 在每个 p 元素之后插入 span 元素
    insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。 $("<span>Hello world!</span>").insertBefore("p"); 在每个 p 元素之前插入 span 元素
    prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。 $("p").prepend("<b>Hello world!</b>"); 在 p 元素的开头插入内容
    prependTo() 向目标开头插入匹配元素集合中的每个元素。 $("<b>Hello World!</b>").prependTo("p"); 在每个 p 元素的开头插入内容
    remove() 移除所有匹配的元素。 $("p").remove(); 移除所有 p 元素
    removeAttr() 从所有匹配的元素中移除指定的属性。 $("p").removeAttr("id"); 从任何 p 元素中移除 id 属性
    removeClass() 从所有匹配的元素中删除全部或者指定的类。 $("p:first").removeClass("intro"); 移除所有 p 的 "intro" 类
    replaceAll() 用匹配的元素替换所有匹配到的元素。 $("p").replaceAll("<b>Hello world!</b>"); 用粗体文本替换每个段落
    replaceWith() 用新内容替换匹配的元素。 $("p").replaceWith("<b>Hello world!</b>"); 用粗体文本替换每个段落
    text() 设置或返回匹配元素的内容。(不写参数取值。写参数设置值) $("p").text("Hello <b>world</b>!"); 设置所有 p 元素的内容
    toggleClass() 从匹配的元素中添加或删除一个类。
    unwrap() 移除并替换指定元素的父元素。
    val() 设置或返回匹配元素的值。 $(":text").val("Hello World"); 设置输入文本框的值
    wrap() 把匹配的元素用指定的内容或元素包裹起来。
    wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
    wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

    事件

    click

            // $(function(){}); 这个是在 dom 文档树刚生成时,就执行内部的匿名函数。不用等待网页所有资源加载完毕。
            $(function (){
                $("div").click(function (){  // obj.click(func(){});当点击某个对象时,会自动触发内部的 func(){} 函数。
                    alert($(this).text())
                })
            })
    

    bind

    $("div").bind("click",function(){  // 主动给 click 事件,添加一个处理函数。
      alert($(this).text())
    });
    

    delegate

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。(它可以动态的给元素添加处理程序,譬如当文档已经加载完毕,但是用户出发了其他事件,产生了一些新的标签,delegate也可以给这些新产生的标签,添加这些功能。)

    语法:

    $(selector).delegate(childSelector,event,data,function)
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>123</div>
        <div>145</div>
    
        <script src="jquery-3.6.0.js"></script>
        <script>
            $(function (){
                $("body").delegate('div', 'click', function (){
                    alert($(this).text())
                })
            })
        </script>
    </body>
    </html>
    

    循环

    $.each([...], function(){})

    $(selector).each(function(){})

    each 可以循环处理一个数组,在 each 里的 function 中,return false 代表 break 中止循环。return 仅仅代表 continue 继续循环。

    插件

    font awsome

    easyUI

    jqueryUI

    bootstrap

    bxslider

    示例

    文字滚动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style=" 100%; line-height: 50px;">
            <div id="i1" style="background-color: red;  200px; margin: 0 auto;">欢迎领导莅临指导</div>
        </div>
        
        <script>
            // 设置自动执行某个函数的间隔,单位毫秒
            setInterval("func1()", 1000);
    
            function func1(){
                // 通过 id 获取某个标签
                var tag = document.getElementById('i1');
                // innerText 获取标签的内部文本
                var text = tag.innerText;
                // 字符串拼接
                var newText = text.substring(1, text.length) + text.charAt(0);
                // 设置标签的内部文本为xxx
                tag.innerText = newText;
            }
        </script>
    
    </body>
    </html>
    

    输入框提示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- onfocus 在光标聚焦在当前标签时触发。onblur 是光标移出当前标签时触发。-->
        <input id='i1' type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
    
        <script>
            function Focus(){
                var tag = document.getElementById("i1");  // 通过 id 值获取标签
                if(tag.value === "请输入关键字"){  // 通过标签的 value 属性,获取它的值。
                    tag.value = "";  // 给标签设置内容
                }
            }
    
            function Blur(){
                var tag = document.getElementById("i1");
                if(tag.value.length === 0){
                    tag.value = "请输入关键字";
                }
            }
        </script>
    
    </body>
    </html>
    

    动态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .shadow{
                position: fixed;  /* 固定位置,填充一个黑色的遮罩层 */
                top:0;
                left:0;
                right:0;
                bottom:0;
                background-color: black;
                opacity: 0.6;
                z-index: 1000;  /* 设置 css 层级的优先级 */
            }
            .model{
                position: fixed;
                background-color: white;
                top: 50%;
                left: 50%;
                400px;
                height:300px;
                margin-left: -200px;
                margin-top: -150px;
                z-index: 1001;
            }
            .hide{
                display: none;
            }
    
        </style>
    </head>
    <body>
        <!--login 按钮,触发一个事件-->
        <input type="button" value="login" onclick="login()"/>
        <!--遮罩层-->
        <div class="shadow hide"></div>
        <!-- 模型层,用户输入用户名密码-->
        <div class="model hide">
            <input type="text" name="user_name" /> <br/>
            <input type="password" name="user_pwd" /> <br/>
            <!-- 点击提交按钮,恢复 -->
            <input type="submit" value="login" onclick="show()"/>
        </div>
    
    
        <script>
            function login(){
                // 根据 className 获取标签
                var shadow = document.getElementsByClassName('shadow')[0];
                var model = document.getElementsByClassName('model')[0];
                // 对标签的 class 属性,删除 hide 值
                shadow.classList.remove('hide');
                model.classList.remove('hide');
            }
    
            function show(){
                var shadow = document.getElementsByClassName('shadow')[0];
                var model = document.getElementsByClassName('model')[0];
                shadow.classList.add('hide');
                model.classList.add('hide');
            }
        </script>
    
    </body>
    </html>
    

    复选框的全选,取消,反选

    普通版

    有点小问题。我们知道 checkbox 有个特殊属性checked, 它可以设置选中的状态。我们可以在html中写死这个值,让它选中或者不选中。但是当我们在网页上真的勾选或者取消勾选,它的真实的状态是由 标签的一个内部属性决定的,不会动态的给标签添加这个 'checked' 属性。所以我们通过 'checked' 这个属性,很难获取它的真实状态。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
            <style>
            .c1{
                background-color: white;
            }
            .c2{
                200px;
            }
        </style>
    </head>
    <body>
    
        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="取消" onclick="checkNull()">
        <input type="button" value="反选" onclick="checkReverse()">
    
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>吃饭</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>睡觉</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>豆豆</td>
                </tr>
            </tbody>
        </table>
    
    
    
        <script>
            function checkAll(){
                var tags = document.getElementsByTagName("input")
                for(var i=0;i<tags.length;i++){
                    tags[i].setAttribute('checked', 'checked');
                }
            }
    
            function checkNull(){
                var tags = document.getElementsByTagName("input")
                for(var i=0;i<tags.length;i++){
                    tags[i].removeAttribute('checked', 'checked');
                }
            }
    
            function checkReverse(){
                var tags = document.getElementsByTagName("input")
                for(var i=0;i<tags.length;i++){
                    if(tags[i].checked === true){
                        tags[i].checked = false;
                    }else{
                        tags[i].checked = true;
                    }
                }
            }
        </script>
    
    </body>
    </html>
    

    jquery 版

    需要导入 jquery

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.6.0.js"></script>
    </head>
    <body>
    
        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="取消" onclick="checkNull()">
        <input type="button" value="反选" onclick="checkReverse()">
    
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>吃饭</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>睡觉</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>豆豆</td>
                </tr>
            </tbody>
        </table>
    
    
        <script>
            function checkAll(){
                // each 函数可以遍历查询出来的元素列表中的每一个元素。
                // 它可以接受一个函数参数,会自动传递给这个函数一个索引值,说明当前处理的哪个元素
                $("td :checkbox").each(function(i){
                    $(this).prop('checked', true);  // this 这个特殊值,代表了当前处理的那个元素。通过 prop 函数,设置 'checked' 的状态。
                })
            }
    
            function checkNull(){
                $("td :checkbox").each(function(i){
                    $(this).prop('checked', false);
                })
            }
    
            function checkReverse(){
                $("td :checkbox").each(function(i){
                    if($(this).prop('checked')){  // prop 只给了一个参数,会获取 checked 的状态
                         $(this).prop('checked', false);
                    }else{
                        $(this).prop('checked', true);
                    }
                })
            }
        </script>
    
    </body>
    </html>
    

    点赞特效(+1 漂浮扩大)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                position: relative;  /* 提供一个相对位置,供以后使用 */
                padding: 50px;
            }
    
        </style>
    </head>
    <body>
        <div>
            <!-- favor函数传递了一个 this。这个 this 就代表当前标签 -->
            <a onclick="favor(this)">点赞</a>
        </div>
        <div>
            <a onclick="favor(this)">点赞</a>
        </div>
    
    
        <script>
            function favor(ele){
                var left = 92;
                var top = 50;
                var opacity = 1;
                var fontSize = 18;
                // 创建一个 span 标签,并设置它的内容和样式
                var span = document.createElement('span');
                span.innerHTML = '+1';  // 设置内容
    
                span.style.position = 'absolute';  // 根据 div 中的 relative,使用 absolute
                span.style.fontSize = fontSize;
                span.style.top = top + 'px';
                span.style.left = left + 'px';
                span.style.fontSize = fontSize;
                span.style.opacity = opacity;
    
                ele.parentElement.appendChild(span);  // 给传递过来的 ele 这个标签,添加一个兄弟节点
    
                var interval = setInterval(function (){  // serInterval 函数可以设置定时循环执行,它返回一个对象。通过清除这个对象,可以取消定时循环任务
                    // 在定时循环中,每次移动一下位置,放大字体大小,透明度减少
                    top -= 5;
                    left += 5;
                    fontSize += 5;
                    opacity -= 0.1;
                    // 重新给标签设置一下样式。
                    span.innerHTML = '+1';
                    span.style.position = 'absolute';
                    span.style.fontSize = fontSize;
                    span.style.top = top + 'px';
                    span.style.left = left + 'px';
                    span.style.fontSize = fontSize + 'px';
                    span.style.opacity = opacity;
    
                    // 当彻底透明后,取消这个定时任务,然后删除掉这个透明的标签。如果不取消任务,这个标签会一直往右侧飘,让网页无限变宽
                    if(opacity <= 0){
                        clearInterval(interval)
                        ele.parentElement.removeChild(span);
                    }
                }, 100)
    
            }
    
        </script>
    
    </body>
    </html>
    

    返回顶部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .back{
                position: fixed;  /* 固定位置 */
                right: 10px;
                bottom: 10px;
                cursor: pointer;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <!--body 标签添加一个滚动事件-->
    <body onscroll="bodyScroll();">
        <div id="i1" class="back hide" onclick="backTop()">返回顶部</div>
    
        <div style="height:2000px">
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
        </div>
    
        <script>
            //
            function backTop(){
                document.documentElement.scrollTop = 0;  // 通过设置文档到顶部的距离,来回到顶部
            }
    
            function bodyScroll(){
                var h = document.documentElement.scrollTop;  // 判断到顶部的距离
                var tag = document.getElementById('i1');
                // 如果当前文档距离顶部大于100像素,就显示 '返回顶部' 按钮
                if(h >= 100){
                    tag.classList.remove('hide');
                }else{
                    tag.classList.add('hide');
                }
            }
    
        </script>
    
    </body>
    </html>
    

    判断用户名不能为空

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body onscroll="bodyScroll();">
        <form action="http://www.baidu.com">
            <input type="text" id="userName">
            <!-- return XXX(), 是因为这个标签本身就有一个 submit 事件,如果 onclick 事件返回一个 false,就会停止剩下的提交事件 -->
            <input type="submit" value='提交' onclick="return checkValue()">
        </form>
    
        <script>
            function checkValue(){
                var user = document.getElementById('userName');
                if(user.value.length > 0){
                    return true;
                }else{
                    alert('用户名不能为空!')
                    return false;
                }
            }
        </script>
    
    </body>
    </html>
    

    自动展开折叠菜单栏

    注意:需要下载 jQuery

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.6.0.js"></script>
        <style>
            .menu{
                 200px;
                height: 600px;
                overflow: auto;
                border: 1px solid lightgray;
            }
            .title{
                background-color: green;
                color: white;
                line-height: 30px;
                font-weight: bold;
            }
            .hide{
                display: none;
            }
    
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="item" onclick="showMenu(this)">
                <div class="title">菜单一</div>
                <div class="content hide">
                    <p>content1</p>
                    <p>content2</p>
                    <p>content3</p>
                </div>
            </div>
            <div class="item" onclick="showMenu(this)">
                <div class="title">菜单二</div>
                <div class="content hide">
                    <p>content1</p>
                    <p>content2</p>
                    <p>content3</p>
                </div>
            </div>
            <div class="item" onclick="showMenu(this)">
                <div class="title">菜单三</div>
                <div class="content hide">
                    <p>content1</p>
                    <p>content2</p>
                    <p>content3</p>
                </div>
            </div>
            <div class="item" onclick="showMenu(this)">
                <div class="title">菜单四</div>
                <div class="content hide">
                    <p>content1</p>
                    <p>content2</p>
                    <p>content3</p>
                </div>
            </div>
        </div>
    
        <script>
            // jQuery("xxx") == $("xxx") 两种语法是相同的
            function showMenu(ele){
                // $(ele)  将Dom标签对象转换成 jquery 对象
                // $(ele)[0] 将jquery对象,重新转回 dom 对象。
    
                if($(ele).find('.content').hasClass('hide')){
                    $(ele).find(".content").removeClass('hide');
                }else{
                    $(ele).find(".content").addClass('hide');
                }
                $(ele).siblings().find(".content").addClass('hide')
    
            }
    
        </script>
    
    </body>
    </html>
    

    复制添加搜索条件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.6.0.js"></script>
    </head>
    <body>
        <div>
            <div>
                <a onclick="addItem(this)"> + </a>
                <input type="text">
            </div>
        </div>
    
        <script>
            function addItem(ele){
                // 复制当前标签的父标签
                var div = $(ele).parent().clone();
                // 给它的子节点 a 标签设置属性和值
                div.find('a').attr("onclick", "remItem(this)");
                div.find('a').text(' - ');
                // 在当前标签的父标签的父标签里的末尾,追加此标签
                $(ele).parent().parent().append(div);
            }
    
            function remItem(ele){
                // 删除此标签的父标签
                $(ele).parent().remove()
            }
        </script>
    
    </body>
    </html>
    

    编辑模式,退出编辑模式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .editing{
                background-color: red;
                color: white;
            }
        </style>
    </head>
    <body>
    
        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="取消" onclick="checkNull()">
        <input type="button" value="反选" onclick="checkReverse()">
        <input type="button" value="编辑" onclick="edit(this)">
    
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="content">吃饭</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="content">睡觉</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="content">豆豆</td>
                </tr>
            </tbody>
        </table>
    
        <script src="jquery-3.6.0.js"></script>
        <script>
            function edit(ele){
                if($(ele).hasClass('editing')){  // 说明正在编辑,要保存一下
                    $(ele).removeClass('editing')  // 移出这个 class,退出编辑模式
                    $(".content input").each(function (){  // 遍历 input 标签
                        var content = $(this).val();  // 获取 input 标签的值。this 代表当前遍历的 input 标签
                        $(this).parent().text(content);  // 将input的值,赋值给父标签
                        $(this).remove()    // 删除掉这个 input 标签
                    })
                }else{
                    $(ele).addClass("editing");     // 添加 class,意味着进入编辑模式
                    $(".content").each(function (){     // 遍历带有 content 类的标签
                        if($(this).parent().find(':checkbox').prop('checked')){  // 找到当前标签的父标签下的 checkbox类型的标签,获取它是否被勾选
                            var content = $(this).text();  // 当前标签的内容
                            var input = "<input type='text' value='" + content + "'/>";  // 将标签的内容,和 input 标签拼接在一起
                            $(this).text('')    // 删除当前标签内容
                            $(this).append(input);  // 添加拼接的 input 标签
                        }
                    })
                }
            }
    
            function checkAll(){
                // each 函数可以遍历查询出来的元素列表中的每一个元素。
                // 它可以接受一个函数参数,会自动传递给这个函数一个索引值,说明当前处理的哪个元素
                $("td :checkbox").each(function(i){
                    $(this).prop('checked', true);  // this 这个特殊值,代表了当前处理的那个元素。通过 prop 函数,设置 'checked' 的状态。
                })
            }
    
            function checkNull(){
                $("td :checkbox").each(function(i){
                    $(this).prop('checked', false);
                })
            }
    
            function checkReverse(){
                $("td :checkbox").each(function(i){
                    if($(this).prop('checked')){  // prop 只给了一个参数,会获取 checked 的状态
                         $(this).prop('checked', false);
                    }else{
                        $(this).prop('checked', true);
                    }
                })
            }
        </script>
    
    </body>
    </html>
    
  • 相关阅读:
    Mkdocs文档生成
    IntelliJ IDEA
    WPS中页眉设置
    ubuntu下的画图工具-dia
    接口测试详细过程
    ubuntu下安装jmeter
    互联网产品接入支付功能如何测试?
    Uiautomator自动化测试编写和调试
    Ubuntu下配置android环境
    UIAutomator环境配置与运行
  • 原文地址:https://www.cnblogs.com/wztshine/p/15713377.html
Copyright © 2020-2023  润新知