前端学习之路—html标签cssjs

Posted 2021-01-15 xuedingwangluo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习之路—html标签cssjs相关的知识，希望对你有一定的参考价值。

一、html标签

　　1. head标签中

- - <meta> — 编码，跳转，刷新，关键字，描述，IE兼容
  - <title> — 加标题显示内容
  - <link> — 加小图标
  - <style> — 写css样式
  - <script> — 写js动态效果

　　2. body标签中

　　　　1）特殊符号：

　　　　　　空格：&nbsp;
　　　　　　大于号：&gt;
　　　　　　小于号：&lt;
　　　　　　参考网址：www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

　　　　2）常用标签（块级标签/行内标签）：

　　　　　　　　# 块级标签：

- - - 换行：<br>
    - 段落：<p></p>
    - h标签：<h1></h1> — <h6></h6>
    - div标签：<div></div>
    - form标签：<form></form>
    - 列表标签：ul ol dl

　　　　　　　　　　　　　　　　无序标签
    　　　　　　　　　　　　　　　　<ul>
       　　　　　　　　　　　　　　　　 <li></li>
       　　　　　　　　　　　　　　　　 <li></li>
    　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　　有序标签
    　　　　　　　　　　　　　　　　<ol>
        　　　　　　　　　　　　　　　　<li></li>
       　　　　　　　　　　　　　　　　 <li></li>
    　　　　　　　　　　　　　　　　</ol>

　　　　　　　　　　　　　　　　错位标签
    　　　　　　　　　　　　　　　　<dl>
        　　　　　　　　　　　　　　　　<dt>1</dt>
       　　　　　　　　　　　　　　　　 <dd>1.1</dd>
        　　　　　　　　　　　　　　　　<dd>1.2</dd>
        　　　　　　　　　　　　　　　　<dd>1.3</dd>
    　　　　　　　　　　　　　　　　</dl>
    　　　　　　　　　　　　　　　　<dl>
        　　　　　　　　　　　　　　　　<dt>2</dt>
       　　　　　　　　　　　　　　　　 <dd>2.1</dd>
      　　　　　　　　　　　　　　　　  <dd>2.2</dd>
       　　　　　　　　　　　　　　　　 <dd>2.3</dd>
    　　　　　　　　　　　　　　　　</dl>

- - - 表格标签：thead tbody tr td th colspan rowspan

            　　　　　　　　<table border="1">
            　　　　　　　　<thead>
                　　　　　　　　<tr>
                    　　　　　　　　<th>表头1</th>
                    　　　　　　　　<th>表头2</th>
                    　　　　　　　　<th>表头3</th>
                　　　　　　　　</tr>
            　　　　　　　　</thead>
            　　　　　　　　<tbody>
                　　　　　　　　<tr>
                   　　　　　　　　 <td>第二行，第一列</td>
                    　　　　　　　　<td>第二行，第二列</td>
                    　　　　　　　　<td>第二行，第三列</td>
               　　　　　　　　 </tr>
                　　　　　　　　<tr>
                    　　　　　　　　<td rowspan="2">第三行，第一列，纵向合并单元格</td> <!--删除纵向多的个数-->
                    　　　　　　　　<td colspan="2">第三行，第二列，横向合并单元格</td> <!--删掉横向多的个数-->

                　　　　　　　　</tr>
                　　　　　　　　<tr>

                   　　　　　　　　 <td>第四行，第二列</td>
                   　　　　　　　　 <td>第四行，第三列</td>
                　　　　　　　　</tr>
            　　　　　　　　</tbody>
        　　　　　　　　　　</table>

　　　　　　　　# 行内标签：

- - - span标签：<span></span>（行内标签设置高度宽度没有用，要用display：inline-block）

                　　　　　　<span style="height: 200px;width: 200px;display: inline-block"></span>
                　　　　　　# 如果不加display:inline-block浏览器不会显示这个span这个200*200的蓝色区域

- - - lable标签：for

                    　　　　<label for="username">用户名：</label>
                   　　 　　<input id="username" type="text" name="user"> # 点击用户名input获取光标

多行文本标签：<textarea >默认值</textarea> # 有name属性，后台拿name，默认值直接写内容

fieldset标签：

　　<fieldset>
      <legend>登录</legend>
　　</fieldset>

input标签：<input> 包含的属性中含有name供后台获取的，所有的name和值是以字典形式表现的

　　　　　　　　　　　　　　常用的属性
    　　　　　　　　　　　　　　<input type="text"> # 普通文本框
    　　　　　　　　　　　　　　<input type="password"> # 密码框
    　　　　　　　　　　　　　　<input type="button" value="登录1">
    　　　　　　　　　　　　　　<input type="submit" value="登录2">
    　　　　　　　　　　　　　　<input type="reset" value="重置"> # 重置还原
    　　　　　　　　　　　　　　<input type="file"> # 文件上传，依赖form表单的一个属性enctype="multipart/form-data"
　　　　　　　　　　　　　　单选属性
    　　　　　　　　　　　　　　男：<input type="radio" name="gender" value="1"> # name相同，后台拿其中一个value值
    　　　　　　　　　　　　　　女：<input type="radio" name="gender" value="2">
　　　　　　　　　　　　　　多选属性
    　　　　　　　　　　　　　　<p>爱好</p>
    　　　　　　　　　　　　　　篮球：<input type="checkbox" name="favor" value="1"> # name相同，后台获取value变为列表
    　　　　　　　　　　　　　　足球：<input type="checkbox" name="favor" value="2"> # 默认选中加属性checked="checked"
    　　　　　　　　　　　　　　排球：<input type="checkbox" name="favor" value="3">
    　　　　　　　　　　　　　　网球：<input type="checkbox" name="favor" value="4">
    　　　　　　　　　　　　　　<p>技能</p>
    　　　　　　　　　　　　　　撩妹：<input type="checkbox" name="skill" value="1">
   　　　　　　　　　　　　　　 写代码：<input type="checkbox" name="skill" value="2">

- - - select标签：

    　　　　　　　　　　　　单选下拉框
        　　　　　　　　　　　　<select name="city" size="3">
            　　　　　　　　　　　  <option value="1">北京</option>
            　　　　　　　　　　　　<option value="1">上海</option>
            　　　　　　　　　　　　<option value="1">广州</option>
        　　　　　　　　　　　　</select>
        　　　　　　　　　　另：
        　　　　　　　　　　<select>
            　　　　　　　　　　 <optgroup label="山东省"> # 只能选择到下面的option
               　　　　　　　　 <option>济南</option>
               　　　　　　　　 <option>德州</option>
                　　　　　　　　<option>泰安</option>
            　　　　　　　　</optgroup>

            　　　　　　　　<optgroup label="河南省">
                　　　　　　　　<option>郑州</option>
                　　　　　　　　<option>商丘</option>
                　　　　　　　　<option>新郑</option>
            　　　　　　　　</optgroup>
        　　　　　　　　　　</select>
    　　　　　　　　　　　　复选下拉框
        　　　　　　　　　　　　<select name="city" multiple>
           　　　　　　　　　　　　 <option value="1">北京</option>
           　　　　　　　　　　　　 <option value="1">上海</option>
           　　　　　　　　　　　　 <option value="1">广州</option>
       　　　　　　　　　　　　 </select>

- - - a标签：<a></a>

    　　　　　　　　　　　　跳转
        　　　　　　　　　　　　<a href="http://www.baidu.com" target="_blank">百度</a> # target属性有多个
    　　　　　　　　　　　　锚
        　　　　　　　　　　　　<a href="#i1">第一章</a> # 点击直接跳到第一章内容的顶部
        　　　　　　　　　　　　<a href="#i2">第二章</a>
        　　　　　　　　　　　　<a href="#i3">第三章</a>
            　　　　　　　　　　　　<div id="i1" style="height: 600px">第一章内容</div>
            　　　　　　　　　　　　<div id="i2" style="height: 600px">第二章内容</div>
            　　　　　　　　　　　　<div id="i3" style="height: 600px">第三章内容</div>

- - - img标签：

    　　　　　　　　　　　　src属性：地址
   　　　　　　　　　　　　 alt属性：图片加载不出来时显示的名字
    　　　　　　　　　　　　title属性：鼠标放上自动显示标题

　　3. 其他事项：

注释：

　　　　PS：标签之间可以嵌套

二、css样式

　　1、在标签上设置style属性：    
    　　height: 48px;
   　　···
　　2、编写css样式：
    　　1.标签的style属性
    　　2.写在head里面，style标签中写样式
        　　-标签选择器
                    div{
                        background-color: blue;
                    }
        　　-id选择器
                    #id名称{
                        background-color: blue;
                    }
        　　-class选择器
                    .class名称{
                        background-color: blue;
                    }
        　　-层级选择器
                    span div{
                        background-color: blue;
                    } # span标签下的div标签，中间加空格，用id和class都可
        　　-组合选择器
                    #i1,#i2,#i3{
                        background-color: blue;
                    } # 中间用逗号
        　　-属性选择器
                    input[type=‘text‘]{
                        background-color: blue;
                    } # 注意用[]，也可以用自定义属性
        　　PS：标签css样式的优先级按就近原则，先标签内，后style中的顺序
    　　3.css样式写在单独文件中
        　　在head标签中引入<link rel="stylesheet" href="css文件名">

　　3、注释：/*   */
　　4、边框和文本
    　　# 边框样式
    　　- border: 1px dotted red;
    　　- height: 48px;
    　　- width: 80%;
    　　- border-top/right/left/bottom
    　　# 文本内容样式
    　　- color: blue;
    　　- font-size: 20px;
    　　- font-weight: bolder;
    　　- text-align: center; /* 水平居中 */
    　　- vertical-align: middle; /* 垂直居中 */
    　　- line-height: 48px;  /* 同是垂直居中，常用这个，需要和height一样 */
　　5、float
    　　让标签飘起来，让块级标签堆叠起来
            <div style="width: 20%;float: left">1</div>
            <div style="width: 80%;float: right">2</div>
            对比上下两个
            <div style="float: left">1</div>
            <div style="float: right">
                <a>登录</a>
                <a>注册</a>
            </div>
            当父标签边框未撑起来是，在父标签内加入这个属性
            <div style="clear:both;"></div>
                   示例：
                    <div style="width: 300px;border: 1px solid red;">
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
                        <div style="clear:both;"></div>
                    </div>
　　6、display
    　　display:inline; # 变为行内标签
    　　display:block # 变为块级标签
    　　display:inline-block; # 具有inline，默认自己与多少占多少
                          　　# 具有block，可以设置高度，宽度，padding，margin
    　　display:none; # 隐藏标签
        　　<div style="display: inline">asdf</div>
        　　<span style="display: block">asdf</span>
        　　******
        　　行内标签：无法设置高度，宽度，padding，margin
        　　块级标签：可以设置高度，宽度，padding，margin
　　7、padding margin
    　　边距：
        　　padding：内边距 （自动生长）
            　　<div style="border: 1px red solid;height: 70px;width: auto">
                　　<div style="height: 50px;width: auto;padding-top: 10px"></div>
            　　</div>
        　　margin：外边距 （自动移动） margin:0 auto;—> 表示上下为0，左右居中
            　　<div style="border: 1px red solid;height: 70px;width: auto">
                　　<div style="height: 50px;width: auto;margin-top: 10px"></div>
            　　</div>
        

　　8、position
    　　a、fixed
        　　翻页保持原处
        　　positon:fixed; 固定在当前浏览窗口的右下角
        　　bottom:0px;
        　　right:0px
    　　b、relative + absolute 混合使用
        　　用于相对位置的设置
        　　<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
            　　<div style="position: absolute;left: 0;bottom: 0;height: 30px;width: 30px"></div>
        　　</div>
        　　<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
            　　<div style="position: absolute;right: 0;bottom: 0;height: 30px;width: 30px"></div>
        　　</div>
        　　<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
            　　<div style="position: absolute;left: 0;top: 0;height: 30px;width: 30px"></div>
        　　</div>

    　　c、通过使用z-index和以上功能设置模态对话框（未加js）
        　　<div style="z-index:9;position: fixed;top: 0;bottom: 0;left: 0;right: 0;
            　　opacity:0.3;"></div> /*建立遮罩层*/
        　　<div style="z-index:10;position:fixed;top:50%;left:50%;
            　　margin-top: -100px;margin-left: -250px;  /*使用这两个功能把对话框调整到中间*/
            　　height: 200px;width: 500px;"></div>
　　9、overflow
    　　对比使用：
        　　<div style="height: 100px;width: 100px;">
            　　<img src="1.jpg">
        　　</div>

        　　<div>
            　　<img src="1.jpg" style="height: 500px;width:500px;">
        　　</div>

        　　<div style="height: 100px;width: 100px;overflow: auto">
            　　<img src="1.jpg">
        　　</div>

        　　<div style="height: 100px;width: 100px;overflow: hidden">
            　　<img src="1.jpg">
        　　</div>
　　10、hover
    　　使用方式：
            .pg-header .menu:hover{
                
                cursor: pointer; /*  鼠标移到标签上变为小手 */
            }
    　　使用示例：
        　　<head>
            　　<meta charset="UTF-8">
            　　<title>Title</title>
            　　<style>
                　　.pg-header{
                    　　position: fixed;
                    　　top: 0;
                    　　left: 0;
                    　　right: 0;
                    　　height: 48px;
                    　　background-color: #2459a2;
                    　　line-height: 48px;
                　　}
                　　.pg_body{
                    　　margin-top: 50px;
                　　}
                　　.w{

                    　　width: 980px;
                    　　margin: 0 auto;
                　　}
                　　.pg-header .menu{
                    　　color: white;

                    　　display: inline-block; /*  这个属性可以使标签上下充满 */
                    　　padding: 0 10px; /* 上下为0 ，左右边距为10*/
                　　}
                　　{#当鼠标移动到当前标签上时，以下css属性才生效#}
                　　.pg-header .menu:hover{
                    　　background-color: blue;
                    　　cursor: pointer; /*  鼠标移到标签上变为小手 */
                　　}
            　　</style>
        　　</head>
        　　<body>

        　　<div class="pg-header">
            　　<div class="w">
                　　<a class="menu">LOGO</a>
                　　<a class="menu">全部</a>
                　　<a class="menu">42区</a>
                　　<a class="menu">段子</a>
                　　<a class="menu">1024</a>
            　　</div>
        　　</div>
        　　<div class="pg_body">
            　　<div class="w">222</div>
        　　</div>

        　　</body>
        　　</html>

　　11、background-image
    　　<div style="background-image: url(10.jpg);height: 2000px">
        　　# 注意这里的路径url，参考https://blog.csdn.net/qq_37811638/article/details/78353409
    　　</div> # 默认，div大，图片重复铺垫

    　　<div style="background-image: url(10.jpg);height: 2000px;
        　　background-repeat: no-repeat/repeat-x/repeat-y/"></div> # 不重复；横向重复；垂直重复
        　　以下两个属性是扣洞，让图片的位置变换
        　　background-position-x:
        　　background-positon-y:

三、js动态效果

基础知识
    1、编程语言
        独立的编程语言，浏览器具有js解释器
        存在于html中

    2、javascript代码存在形式：
        - 在head中
            <script>
            </script>
        - 保存中文件中
            <script src=‘js文件路径‘></script>

        PS：js代码需要放置在<body>标签内部的最下方
            也可临时在浏览器的终端console中写

    3、注释：
        单行注释：//
        多行注释：/*  */

    4、语法
        1) 变量：
            python：
                name= ‘alex‘
            JavaScript:
                name = ‘alex‘       # 全局变量
                var name = ‘alex‘   # 局部变量

        2)基本数据类型：
            数字
                <script>
                    age = 18; // 数字类型
                    age = ‘18‘; // 字符串类型
                    i = parseInt(age); // 字符串转换成数字
                </script>
            字符串
                a = ‘alex‘
                a.charAt(索引位置)
                a.substring（起始位置,结束位置）
                a.length    获取当前字符串长度
                a.concat(value,...)     拼接
                a.indexOf(substring,start)             子序列位置
                a.lastIndexOf(substring,start)          子序列位置
                a.substring(from,to)            根据索引获取子序列
                a.slice(start,end)              切片
                a.toLowerCase()                 大写
                a.toUpperCase()                 小写
                a.split(delimiter,limit)        分割
            数组（类似python中的列表）
                l = [11,22,33]
                l.push(ele)     尾部追加元素
                l.pop()         尾部获取一个元素
                l.unshift(ele)  头部插入元素
                l.shift()       头部移除元素
                l.splice(start,deleteCount,value)   插入、删除或替换数组的元素
                        l.splice(n,0,val)   指定位置插入元素
                        l.splice(n,1,val)   指定位置替换元素
                        l.splice(n,1)       指定位置删除元素
                l.slice()   切片
                l.reverse() 反转
                l.join(sep) 将数组元素连接起来以构建一个字符串
                l.sort()    对数组元素进行排序
            字典
                dict = {‘k1‘:‘v1‘,‘k2‘:‘v2‘}
            布尔类型
                true
                false

        3)条件语句
            if(条件){

            }else if(条件){

            }else{

            }
                特殊：
                    if(1 === 1) # 值和类型都相等
                    if(1 !== 1)
                    &&  and
                    ||  or

        4)for循环
            1、循环时，循环的元素是索引
                a = [11,22,33,44]
                for (var item in a){
                    console.log(item); // 取值用a[item]
                }

                a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘}
                for (var item in a){
                    console.log(item) // 取值用a[item]
                }
            2、循环次数限定的循环
                for(var i=0;i<10;i++){

                }
                此时不支持字典的循环

        5)函数：

    　　　　普通函数：
        　　　　function 函数名(a,b,c){

        　　　　}
        　　　　函数名(1,2,3)
    　　　　匿名函数：
        　　　　setInterval(function(){
            　　　　console.log(‘123‘)
        　　　　},5000)
    　　　　自执行函数（创建函数并且自动执行）：
        　　　　(function(){
            　　　　console.log(arg)
        　　　　})(123)

　　　　 6)序列化：
    　　　　JSON.stringify() # 将对象转换为字符串
    　　　　JSON.parse() # 将字符串还原成对象类型
        　　　　li = [11,22,33,44]
        　　　　>>(4) [11, 22, 33, 44]
        　　　　new_li = JSON.stringify(li)
        　　　　>>"[11,22,33,44]"
        　　　　new_li
        　　　　>>"[11,22,33,44]"
        　　　　li = JSON.parse(new_li)
        　　　　>>(4) [11, 22, 33, 44]
        　　　　li
        　　　　>>(4) [11, 22, 33, 44]

　　　　 7)转义：
    　　　　encodeURL()             # URL将字符进行转义(将汉字转义)
    　　　　decodeURL()             # URL恢复字符转义
    　　　　encodeURLComponent()    # 转义URL组件中的字符（将汉字、特殊字符都转义）
    　　　　decodeURLComponent()    # 给转义字符解码
    　　　　escape()                # 对字符串转义
    　　　　unescape()              # 给转义字符串解码
    　　　　URLerror()              # 由URL的编码和解码方法抛出

        　　　　encodeURI(‘https://www.sogou.com/web?query=理解‘)
        　　　　>>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
        　　　　new_url = encodeURI(‘https://www.sogou.com/web?query=理解‘)
        　　　　>>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
        　　　　new_url
        　　　　>>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
        　　　　url = decodeURI(new_url)
        　　　　>>"https://www.sogou.com/web?query=理解"

        　　　　encodeURIComponent(‘https://www.sogou.com/web?query=理解‘)
        　　　　>>"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3"
        　　　　new_url = encodeURIComponent(‘https://www.sogou.com/web?query=理解‘)
        　　　　>>"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3"
        　　　　url = decodeURIComponent(new_url)
        　　　　>>"https://www.sogou.com/web?query=理解"

　　　　 8)eval：
    　　　　python：
        　　　　val = eval(表达式)
              　　　　exec(执行代码)
    　　　　JavaScript：
        　　　　eval(表达式执行代码)

　　　　 9)时间:
    　　　　需要用Date类
        　　　　var d = new Date()
        　　　　d.get×××   # 获取×××
        　　　　d.set×××   # 设置×××

　　　　 10)作用域：
    　　　　# 其他语言：以代码块为作用域
        　　　　public void Func(){
            　　　　if(1==1){
                　　　　string name = ‘Java‘;
            　　　　}
            　　　　console.writeline(name);
        　　　　}
        　　　　Func()
        　　　　// 报错
    　　　　# python：以函数为作用域
        　　　　情况一：
            　　　　def func():
                　　　　if 1 == 1:
                    　　　　name = ‘python‘
                　　　　print(name)
            　　　　func()
            　　　　// 成功
        　　　　情况二：
            　　　　def func():
                　　　　if 1 == 1:
                    　　　　name = ‘python‘
            　　　　func()
            　　　　print(name)
            　　　　// 报错
    　　　　# JavaScript：
        　　　　1.在JavaScript中是以函数作为作用域（除let）
            　　　　function func(){
                　　　　if(1==1){
                    　　　　var name = ‘js‘
                　　　　}
                　　　　console.log(name)
            　　　　}
            　　　　func()

        　　　　2.函数的作用域在函数未被调用之前，已经创建
        　　　　3.函数的作用域存在作用域链，也是在被调用之前创建
            　　　　示例一：
                　　　　xo = ‘Alex‘
                　　　　function func(){
                    　　　　var xo = ‘Eric‘
                    　　　　function inner(){
                        　　　　var xo = ‘Tony‘
                        　　　　console.log(xo)
                    　　　　}
                    　　　　inner()
                　　　　}
                　　　　func()// console.log由内向外找xo的值

            　　　　示例二：
                　　　　xo = ‘Alex‘
                　　　　function func(){
                    　　　　var xo = ‘Eric‘
                    　　　　function inner(){
                        　　　　console.log(xo)
                    　　　　}
                    　　　　return inner;
                　　　　}
                　　　　var ret = func() // 返回的是inner地址
                　　　　ret() // 执行的是inner() 打印的是Eric

            　　　　示例三：
                　　　　xo = ‘Alex‘
                　　　　function func(){
                    　　　　var xo = ‘Eric‘
                    　　　　function inner(){
                        　　　　console.log(xo)
                    　　　　}
                    　　　　var xo = ‘Tony‘
                    　　　　return inner;
                　　　　}
                　　　　var ret = func() // 返回的是inner地址
                　　　　ret() // 执行的是inner() 打印的是Tony
        　　　　4.函数内部局部变量提前声明（解释过程中只声明，不赋值，执行时才赋值）
            　　　　示例一：
                　　　　function func(){
                    　　　　console.log(xxoo)
                　　　　}
                　　　　func() // 程序直接报错
            　　　　示例二：
                　　　　function func(){
                    　　　　console.log(xxoo)
                    　　　　var xxoo = ‘alex‘
                　　　　}
                　　　　// 解释过程中：先在func()中找到所有的局部变量声明但是不会赋值，即var xxoo；
                　　　　func() // undefined

　　　　 11)JavaScript面向对象
    　　　　情况一：
        　　　　function Foo(n){
            　　　　this.name = n
            　　　　this.sayName = function(){
                　　　　console.log(this.name)
            　　　　}
        　　　　}
        　　　　var obj1 = new Foo(‘we‘); // 创建对象
        　　　　obj1.name
        　　　　obj1.sayName()

        　　　　var obj2 = new Foo(‘wee‘);
        　　　　obj2.name
        　　　　obj2.sayName()

        　　　　1.this代指对象，相当于python中的self
        　　　　2.创建对象时，用new关键字
        　　　　以上this.SayName为对象中的函数，但是此时两个对象调用时都自身创建同一个函数，
        　　　　不如把函数直接封装在类中，对象调用时直接用类中的方法，由此引出情况二

    　　　　情况二：
        　　　　原型的引入
        　　　　function Foo(n){
            　　　　this.name = n;
        　　　　}
        　　　　Foo.prototype = {
            　　　　‘sayName‘:function(){
                　　　　console.log(this.name)
            　　　　}
        　　　　} # Foo的原型
        　　　　obj1 = new Foo(‘we‘)
        　　　　obj1.sayName()
        　　　　obj2 = new Foo(‘wee‘)


Dom（注意节点和元素两个概念）
    1、找到标签
        1）直接找：
            获取单个元素
                document.getElementById(‘i1‘)
            获取多个元素(数组形式返回)
                document.getElementsByTagName(‘div‘)
                document.getElementsByClassName(‘cls‘)
        2）间接找：
            parentElement       父节点标签元素
            children            所有子标签(以元组形式返回)
            firstElementChild   第一个子标签元素
            lastElementChild    最后一个子标签元素
            nextElementSibling  下一个兄弟标签元素
            previousElementSibling  上一个兄弟标签元素

    2、操作标签

　　　　a. innerText（仅文本）
    　　　　获取标签中的文本内容
        　　　　tag.innerText
    　　　　对标签内部文本进行重新赋值
        　　　　tag.innerText = ‘‘
　　　　b. innerHTML（全部内容）
    　　　　可以获取嵌套标签的内的标签
    　　　　obj.innerHTML = (‘<a href=‘http://www.baidu.com‘>百度</a>‘)


    　　　　示例：
    　　　　document.getElementById(‘i2‘)
    　　　　>><div id=?"i2">?我是i2?</div>?
    　　　　document.getElementById(‘i2‘).innerText
    　　　　>>"我是i2"
    　　　　document.getElementById(‘i2‘).innerText = ‘新内容‘
    　　　　>>"新内容"
    　　　　document.getElementsByTagName(‘a‘)
    　　　　>>HTMLCollection(3) [a, a, a]
    　　　　document.getElementsByTagName(‘a‘)[1]
    　　　　>><a>?hjkl?</a>?
    　　　　document.getElementsByTagName(‘a‘)[1].innerText
    　　　　>>"hjkl"
    　　　　document.getElementsByTagName(‘a‘)[1].innerText = ‘换新内容‘
    　　　　>>"换新内容"
    　　　　li = document.getElementsByTagName(‘a‘)
    　　　　>>HTMLCollection(3) [a, a, a]
    　　　　for (var i=0;i<li.length;i++){li[i].innerText = ‘循环换新内容‘}
    　　　　>>"循环换新内容"
　　　　c. value
    　　　　用于input、select、textarea 可以获取内部值
    　　　　select还有一个selectIndex

    　　　　搜索框示例（类似placeholder=""）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <button onclick="f1()">确定</button>
 9 <div id="ni" style="color: red">你好</div>
10 
11 <input id="i1" onfocus="f2()" onblur="f3()" type="text" value="请输入关键字">
12 
13 
14 <script>
15     function f1() {
16         alert(123)
17     }
18 
19     function f2() {
20         var tag = document.getElementById(‘i1‘);
21         var vl = tag.value;
22         if (vl == "请输入关键字"){
23             tag.value = ‘‘
24         }
25         console.log(1)
26     }
27     function f3() {
28         var tag = document.getElementById(‘i1‘);
29         var val = tag.value;
30         if (val.length == 0){
31             tag.value = ‘请输入关键字‘
32         }
33         console.log(2)
34     }
35 </script>
36 
37 </body>
38 </html>

View Code


　　　　d. className
    　　　　操作class属性名称
        　　　　tag.className = ‘c1‘ // 直接命名和修改class样式名(以字符串返回)
        　　　　tag.classList        // 获取class样式名（以数组返回）
            　　　　tag.classList.add(‘c2‘) // 增加class样式名
            　　　　tag.classList.remove(‘c1‘)  // 删除class样式名
　　　　f. style
    　　　　① 直接在标签内部或head中写
    　　　　② 在script中获取标签后写入
        　　　　var obj = document.getElementById(‘i1‘)
        　　　　obj.style.fontSize = 16px;(把原生style中的属性改为驼峰式)
        　　　　obj.style.backgroundColor = ‘red‘;
        　　　　obj.style.color = red;
　　　　g. 属性操作
    　　　　var obj = document.getElementById(‘i1‘)
    　　　　obj.setAttribute(‘name‘,‘Alex‘)
    　　　　obj.removeAttribute(‘value‘)
    　　　　obj.attributes
　　　　h. 创建标签
    　　　　其一：以字符串形式
    　　　　其二：以对象的方式
　　　　　　　　示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p><button onclick="addEle1()">+</button></p>
 9 <p><button onclick="addEle2()">+</button></p>
10 
11 <div id="i1">
12     <p><input type="text"></p>
13 </div>
14 
15 <script>
16 
17     function addEle1() {
18         // 创建一个标签
19         // 将标签添加到i1里面
20         var tag = "<p><input type=‘text‘></p>";
21         document.getElementById(‘i1‘).insertAdjacentHTML(‘beforeEnd‘,tag);
22         // 注意：第一个参数有四个：‘beforeBegin‘、‘afterBegin‘、‘beforeEnd‘、‘afterEnd‘
23     }
24 
25     function addEle2() {
26         var tag = document.createElement(‘input‘)
27         tag.setAttribute(‘type‘,‘text‘)
28         tag.style.border = ‘1px solid red‘;
29 
30         var p =document.createElement(‘p‘);
31         p.appendChild(tag);
32 
33         document.getElementById(‘i1‘).appendChild(p)
34     }
35 
36 
37 </script>
38 
39 
40 </body>
41 </html>

View Code

　　　　i. checkbox
    　　　　获取值
        　　　　checkbox对象.checked
    　　　　设置值
        　　　　checkbox对象.checked = true
　　　　j. 提交表单(通过DOM)
    　　　　在DOM中任何标签都可以提交数据
    　　　　document.getElementById(‘i1‘).submit()
　　　　k. 其他
    　　　　console.log()
    　　　　alert()
    　　　　confirm()
    　　　　location.href       # 获取当前url
    　　　　location.href = ‘‘  # 设置当前url
    　　　　location.reload()   # 页面刷新

    　　　　------------
    　　　　setInterval(funciton(){},5000) # 设置定时器

    　　　　var obj = setInterval(funciton(){
        　　　　console.log(1)
       　　　　 clearInterval(obj) # 清除定时器
   　　　　 },5000)
    　　　　-------------
    　　　　setTimeout(function(){
        　　　　console.log(‘timeout‘)
    　　　　},5000) # 表示5秒钟后执行一次就结束
    　　　　clearTimeout()
        　　　　示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="i1"></div>
 9 <input type="button" onclick="func()" value="删除">
10 
11 <script>
12 
13     function func() {
14         var tag = document.getElementById(‘i1‘);
15         tag.innerText = ‘已删除‘;
16         setTimeout(function () {
17             tag.innerText = ‘‘;
18         },3000)
19     }
20 
21 
22 </script>
23 
24 </body>
25 </html>

View Code


事件

    1、常用事件：
        onclick、onblur、onfocus、onmouseover、onmouseout等

    2、绑定事件：
        方式一：直接标签绑定（初级程序员事件绑定）
            <div onclick="函数()"></div>
            <script>
                function 函数(){
                    ...
                }
            </script>
        方式二：先获取Dom对象，然后绑定（中级程序员事件绑定）
            document.getElementById(‘i1‘).onclick = function(){
                console.log(123)
            }
            示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <table border="1px" width="300px">
 9     <tr>
10         <th>1</th>
11         <th>1</th>
12         <th>1</th>
13     </tr>
14 
15     <tr>
16         <th>2</th>
17         <th>2</th>
18         <th>2</th>
19     </tr>
20 
21     <tr>
22         <th>3</th>
23         <th>3</th>
24         <th>3</th>
25     </tr>
26 </table>
27 
28 
29 <script>
30     var mytags = document.getElementsByTagName(‘tr‘)
31     // console.log(mytags)
32     for (var i=0;i<mytags.length;i++){
33         mytags[i].onmouseover = function () {
34             this.style.backgroundColor = ‘red‘;
35         }
36     }
37 
38     for (var i=0;i<mytags.length;i++){
39         mytags[i].onmouseout = function () {
40             this.style.backgroundColor = ‘‘;
41         }
42     }
43 
44    
45 
46 
47 </script>
48 
49 
50 </body>
51 </html>

View Code



        方式三：多事件绑定（高级程序员事件绑定）
            document.getElementById(‘i1‘).addEventListener(‘click‘,function(){console.log(‘aaa‘),false})
            document.getElementById(‘i1‘).addEventListener(‘click‘,function(){console.log(‘bbb‘),false})

            示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <button id="bt">确定</button>
10 
11 <script>
12     document.getElementById(‘bt‘).addEventListener(‘click‘,function () {console.log(‘aaa‘)},false);
13     document.getElementById(‘bt‘).addEventListener(‘click‘,function () {console.log(‘bbb‘)},false)
14 
15 
16 </script>
17 
18 
19 </body>
20 </html>

View Code

            示例（注意冒泡[false]和捕捉[true]）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div id="main" style="height: 400px;width: 300px;background-color: red">
10     <div id="content" style="height: 200px;width: 150px;background-color: blue"></div>
11 </div>
12 
13 <script>
14     var mymain = document.getElementById(‘main‘);
15     var mycontent = document.getElementById(‘content‘);
16     mymain.addEventListener(‘click‘,function () {console.log(‘mian‘)},false); // 此时为冒泡，从下到上
17     // mymain.addEventListener(‘click‘,function () {console.log(‘mian‘)},true); // 此时为捕捉，从上到下
18     mycontent.addEventListener(‘click‘,function () {console.log(‘content‘)},false)
19     // mycontent.addEventListener(‘click‘,function () {console.log(‘content‘)},true)
20 </script>
21 
22 </body>
23 </html>

View Code

        注意：this的使用，当前触发事件的标签
            a. 第一种绑定方式
                <input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘>
                function ClickOn(self){
                    // self 当前点击的标签
                }
                示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <div onclick="f1(this)">确定</div>
10 
11 <script>
12     function f1(self) {
13         self.innerText = ‘取消‘;
14         self.style.backgroundColor = ‘red‘;
15     }
16 
17 </script>
18 </body>
19 </html>

View Code

            b. 第二种绑定方式
                <input id=‘i1‘ type=‘button‘>
                document.getElementById(‘i1‘).onclick = function(){
                    // this 代指当前点击的标签
                }

            c. JavaScript词法分析
                <script>
                    function func(age){
                        console.log(age);
                        var age = 27;
                        console.log(age);
                        function age(){
                            console.log(age);
                        }
                    }
                    func(3);
                </script>
                调用函数前有个活动对象（active object）按以下规则进行分析：
                    1.形式参数
                    2.局部变量
                    3.函数声明表达式
                拿以上为例：
                    1.形式参数
                        未调用之前
                        AO.age = undefined;
                        调用之后
                        AO.age = 3;
                    2.局部变量
                        AO.age = undefined;
                    3.函数声明表达式
                        AO.age = funciton()


    3、示例：
        模态对话框、多选、反选：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .shade{
  8             position: fixed;
  9             top: 0;
 10             bottom: 0;
 11             right: 0;
 12             left: 0;
 13             background-color: black;
 14             opacity: 0.5;
 15             z-index: 10;
 16         }
 17         .hide{
 18             display: none;
 19         }
 20         .module{
 21             height: 300px;
 22             width: 500px;
 23             background-color: white;
 24             position: fixed;
 25             top: 50%;
 26             left: 50%;
 27             margin-left: -250px;
 28             margin-top: -150px;
 29             z-index: 11;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34 <h1>实现模态对话框和全选、反选、取消功能</h1>
 35 <hr>
 36 <br>
 37 <br>
 38 <div>
 39     <span><button onclick="AddShade()">添加</button></span>
 40     <span><button onclick="ChooseAll()">全选</button></span>
 41     <span><button onclick="CancelAll()">取消</button></span>
 42     <span><button onclick="ReverseAll()">反选</button></span>
 43 </div>
 44 
 45 <div>
 46     <table border="1">
 47         <thead>
 48             <tr>
 49                 <th>主机名</th>
 50                 <th>地址</th>
 51                 <th>选择</th>
 52             </tr>
 53         </thead>
 54         <tbody>
 55             <tr>
 56                 <td>业务一</td>
 57                 <td>192.1</td>
 58                 <td><input class="ck" type="checkbox"></td>
 59             </tr>
 60             <tr>
 61                 <td>业务二</td>
 62                 <td>192.2</td>
 63                 <td><input class="ck" type="checkbox"></td>
 64             </tr>
 65             <tr>
 66                 <td>业务三</td>
 67                 <td>192.3</td>
 68                 <td><input class="ck" type="checkbox"></td>
 69             </tr>
 70 
 71         </tbody>
 72     </table>
 73 </div>
 74 
 75 <div id="i1" class="shade hide">
 76     <div class="module">
 77         <button>确定</button>
 78         <button onclick="RemoveShade()">取消</button>
 79     </div>
 80 </div>
 81 
 82 <script>
 83     function AddShade() {
 84         var tag = document.getElementById(‘i1‘)
 85         tag.classList.remove(‘hide‘) // 加强这里的标签内容和属性操作语句
 86 
 87     }
 88     function RemoveShade() {
 89         var tag = document.getElementById(‘i1‘)
 90         tag.classList.add(‘hide‘) // 加强这里的标签内容和属性操作语句
 91     }
 92 
 93     function ChooseAll() {
 94         var tags = document.getElementsByTagName(‘input‘);
 95         for (var i=0;i<tags.length;i++){
 96             tags[i].checked = true
 97         }
 98     }
 99 
100     function CancelAll() {
101         var tags = document.getElementsByClassName(‘ck‘);
102         for (var i=0;i<tags.length;i++){
103             tags[i].checked = false;
104         }
105     }
106     function ReverseAll() {
107         var tags = document.getElementsByClassName(‘ck‘);
108         for (var i=0;i<tags.length;i++){
109             if(tags[i].checked==true){
110                 tags[i].checked = false
111             }else if(tags[i].checked == false) {
112                 tags[i].checked = true;
113             }
114         }
115     }
116 </script>
117 
118 </body>
119 </html>

View Code

      定时器的制作：

 1 <script>
 2                 setInterval("alert(123)",2000)  // setInterval("函数名",时间间隔)
 3                                                 // 每两秒执行alert语句（可以放函数）
 4             </script>
 5 
 6             用定时器做跑马灯：
 7                 <head>
 8                     <meta charset="UTF-8">
 9                     <title>Title</title>
10                 </head>
11                 <body>
12 
13                 <div id="i1">-欢迎老男孩莅临指导-</div>
14 
15 
16                 <script>
17 
18                     function func() {
19                         var tag = document.getElementById(‘i1‘)
20                         content = tag.innerText;
21                         f = content.charAt(0);
22                         l = content.substring(1,content.length)
23                         var new_content = l + f;
24                         tag.innerText = new_content;
25                     }
26 
27                     setInterval(‘func()‘,500)
28 
29                 </script>

View Code

　　　　 左侧菜单折叠、展开：

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .header{
 9             height: 38px;
10             background-color: blue;
11             color: white;
12             line-height: 38px;
13             border-bottom: 0.5px solid white;
14         }
15         .hide{display: none}
16     </style>
17 </head>
18 <body>
19 <h1>实现左侧菜单折叠、展示功能</h1>
20 <hr>
21 <br>
22 <br>
23 
24 
25 <div>
26     <div class="item">
27         <div id="i1" class="header" onclick="ChangeMenu(‘i1‘);">菜单1</div>
28         <div class="content">
29             <div>内容1</div>
30             <div>内容1</div>
31             <div>内容1</div>
32         </div>
33     </div>
34 
35     <div class="item">
36         <div id="i2" class="header" onclick="ChangeMenu(‘i2‘);">菜单2</div>
37         <div class="content">
38             <div>内容2</div>
39             <div>内容2</div>
40             <div>内容2</div>
41         </div>
42     </div>
43 
44     <div class="item">
45         <div id="i3" class="header" onclick="ChangeMenu(‘i3‘);">菜单3</div>
46         <div class="content">
47             <div>内容3</div>
48             <div>内容3</div>
49             <div>内容3</div>
50         </div>
51     </div>
52 
53     <div class="item">
54         <div id="i4" class="header" onclick="ChangeMenu(‘i4‘);">菜单4</div>
55         <div class="content">
56             <div>内容4</div>
57             <div>内容4</div>
58             <div>内容4</div>
59         </div>
60     </div>
61 </div>
62 
63 
64 <script>
65     function ChangeMenu(nid) {
66         var tag = document.getElementById(nid);
67         var item_list = tag.parentElement.parentElement.children;
68         /*
69         for (var i in item_list){
70             item_list[i].children[1].classList.add(‘hide‘)
71         }
72 
73         */
74 
75 
76 
77         for (var i=0;i<item_list.length;i++){
78             var current_tag = item_list[i].children[1]
79             current_tag.classList.add(‘hide‘)
80         }
81 
82         tag.nextElementSibling.classList.remove(‘hide‘)
83 
84 
85     }
86 </script>
87 </body>
88 </html>

View Code

jQuery

基础知识：
    模块 《===》  类库
    DOM/BOM/JavaScript的集成类库
    http://jquery.cuishifeng.cn

作用：
    一、查找元素
        # 选择器
            1.id
                <div id=‘i1‘></div>
                $(‘#i1‘)
            2.class
                <div class=‘c1‘></div>
                $(‘.c1‘)
            3.标签
                <div></div>
                $(‘div‘)
            4.组合
                <div>
                    <a id=‘a1‘></a>
                </div>
                <div>
                    <a id=‘a2‘></a>
                    <div class=‘c1‘></div>
                </div>
                $(‘#a1,#a2,.c1‘)
            5.层级
                <div id=‘c1‘>
                    <p>
                        <a class=‘c1‘></a>
                    </p>
                </div>
                $(‘#c1 p .c1‘)
                $(‘parent>child‘) # 只找儿子
            6.属性
                <a ale=‘123‘></a>
                <a ale=‘456‘></a>
                $(‘[alex]‘)         # 具有alex属性的所有标签
                $(‘[alex="123"]‘)   # alex属性等于123的标签
            7.表单
                <input type=‘text‘/>
                <input type=‘password‘/>
                <input type=‘file‘/>
                $("input[type=‘text‘]")
                $(‘:text‘) # 等同于上面
            8. 绑定事件
                $(‘.header‘).click(function(){})
        # 筛选器
            $(‘#i1‘).next()         # 后一个标签
            $(‘#i1‘).nextAll()      # 下面所有的
            $(‘#i1‘).nextUntill(‘#i2‘) # 向下找到截止到id=i2的标签
            $(‘#i1‘).prev()         # 上一个标签
            $(‘#i1‘).prevAll()      # 上面所有的
            $(‘#i1‘).prevUntill(‘#i1‘) # 向上找到截止到id=i1的标签
            $(‘#i1‘).parent()       # 父标签
            $(‘#i1‘).parents()      # 找到父亲、爷爷等到祖宗
            $(‘#i1‘).parentsUntill(‘#i3‘)   # 找到祖宗辈的id=i3
            $(‘#i1‘).children()     # 孩子标签
            $(‘#i1‘).siblings()     # 兄弟标签
            $(‘#i1‘).find(‘‘)       # 找id=i1的子子孙孙中的符合要求的标签

            :first
            :last
            :even
            :odd
            ;eq(index)
            :gt(index)


        # 转换：
            jQuery对象[0]   ==》  Dom对象
            Dom对象         ==》  $(Dom对象)

    二、操作元素
        # 内容操作
            $(‘#i1‘).text()           # 获取文本内容
            $(‘#i1‘).text(‘asdf‘)     # 设置文本内容
            $(‘#i1‘).html()
            $(‘#i1‘).html(‘<p>asdf</p>‘) # 会解析标签
            <input id=‘i2‘ type=‘text‘ value=‘请输入关键字‘/>
            $(‘#i2‘).val()            # 获取值
            $(‘#i2‘).val(‘你好‘)      # 设置值

        # 样式操作
            $(‘#i1‘).addClass(‘hide‘)
            $(‘#i1‘).removeClass(‘hide‘)
            $(‘#i1‘).toggleClass(‘hide‘)  # 有就去掉hide，没有就加上hide，不用判断语句了

        # 属性操作
            attr：专门用于做自定义属性
                $(‘.c1‘).attr(‘type‘)   # 获取当前标签的类型
                $(‘.c1‘).attr(‘id‘,‘i1‘)   # 设置当前标签的id=i1
                $(‘.c1‘).removeAttr(‘value‘)   # 删除标签内vlue属性
            prop：专门用于checkbox，radio
                $(‘#i1‘).prop(‘checked‘,true)  # 选中
                $(‘#i1‘).prop(‘checked‘,false)  # 取消选中

            PS；
                index获取索引位置

        # 文档处理
            $(‘#u1‘).append()       # 在id=u1标签的孩子标签后添加
            $(‘#u1‘).prepend()      # 在id=u1标签的孩子标签前添加
            $(‘#u1‘).after()        # 在id=u1标签后添加
            $(‘#u1‘).before()       # 在id=u1标签前添加
            $(‘#i1‘).remove()       # 删除当前标签

            empty       # 清空内容，但标签还保留
            remove      # 标签内容全部删除
            clone       # 复制克隆

        # CSS处理
            $(‘t1‘).css(‘样式名称‘,‘样式值‘)
            点赞示例：
                - $(‘t1‘).append()
                - setInterval()
                - 透明度由强变弱
                - position
                - 字体大小
            位置：
                $(window).scrollTop()        # window代表浏览器窗口，此时代表获取滑轮高度
                $(window).scrollTop(345)     # 设置滑轮高度
                $(window).scrollLeft()       # 左右滑动的滑轮
                $(‘div‘).scrollTop()         # 某个div标签内设置overflow属性时，获取此时div内的滑轮高度
                $(‘#i1‘).offset()            # 获取指定标签在html中的坐标
                $(‘#i1‘).offset().left
                $(‘#i1‘).offset().top
                position()                   # 在position中应用offset时，时指定标签（absolute）相对父标签（relative）的位置

            尺寸：
                $(‘#i1‘).height()            # 获取标签的高度 纯高度
                $(‘#i1‘).innerheight()       # 获取边框 + 纯高度 + ？（待测）
                $(‘#i1‘).outerheight()       # 获取边框 + 纯高度 + ？（待测）
                $(‘#i1‘).outerheight(true)   # 获取边框 + 纯高度 + ？（待测）
                纯高度、边框、外边距、内边距


        # 事件及绑定
            第一种：
                $(‘.c1‘).click()
            第二种：
                $(‘.c1‘).bind(‘click‘,function(){})         # 绑定click事件
                $(‘.c1‘).unbind(‘click‘,function(){})       # 解除绑定click事件
            第三种：
                $(‘.c1‘).delegate(‘a‘,‘click‘,function(){})       # 给clss=c1标签下的a标签绑定click事件
                $(‘.c1‘).undelegate(‘a‘,‘click‘,function(){})     # 给clss=c1标签下的a标签解除绑定click事件
                委托绑定事件，当标签新创建后并不能立即产生原来的效果时，可以用此函数绑定事件
            第四种：
                $(‘.c1‘).on(‘click‘,function(){})
                $(‘.c1‘).off(‘click‘,function(){})
            阻止事件发生：
                return false
                    示例：
                        DOM操作下要在绑定函数的标签内加return关键字
                        jQuery操作下直接在函数中加return即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <a onclick="return clickOn()" href="http://www.baidu.com">走你1</a>
 9 <a id="i1" href="http://www.baidu.com">走你2</a>
10 
11 
12 <script src="jquery-3.1.0.js"></script>
13 <script>
14     function clickOn() {
15         alert(123);
16         // return false;
17         return true;
18     }
19 
20     $(‘#i1‘).click(function () {
21         alert(456);
22         return false;
23     })
24 </script>
25 </body>
26 </html>

View Code


                当页面框架加载完成之后，自动执行
                $(function(){})

　　　　　　  扩展方法：
    　　　　　　- $.extend      $.方法
    　　　　　　- $.fn.extend   $(‘#i1‘).方法
    　　　　　　(function(){
        　　　　　　var status = 1;  // 避免有全局变量冲突，最好用自定义函数包裹
    　　　　　　})(jQuery)
    　　　　　　示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <script src="jquery-3.1.0.js"></script>
10 <script>
11 
12     /* 第一种扩展方法的建立和调用    */
13     $.fn.extend({
14         ‘f1‘:function () {
15             return ‘db‘;
16         }
17     })
18     var v = $(‘#i1‘).f1();
19     alert(v)
20 
21     /* 第二种扩展方法的建立和调用    */
22     $.extend({
23         ‘func‘:function () {
24             return ‘sb‘;
25         }
26     })
27     var v = $.func();
28     alert(v);
29 </script>
30 </body>
31 </html>

View Code

实例：
    一、删选器功能:
        - prop属性（select和checkbox中的属性）
            $(:checkbox).prop(‘checked‘);       获取值
            $(:checkbox).prop(‘checked‘,true);  设置值
        - 批量操作
            jQuery方法内置循环： $(‘:checkbox‘).xxx
        - 循环功能
            $(:checkbox).each(function(k){
                // k为当前索引
                // this是Dom对象，代指当前循环的对象
                // $(this) 变为jQuery对象
            })
        - 三元运算
            var v=条件?真值:假值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <h1>删选器功能</h1>
 9 <hr>
10 <table id="tb" border="1 px" width="200px">
11     <div>
12         <input onclick="chooseAll()" type="button" value="全选">
13         <input onclick="reverseAll()" type="button" value="反选">
14         <input onclick="cancelAll()" type="button" value="取消">
15     </div>
16     <thead>
17         <tr>
18             <th>业务线</th>
19             <th>端口</th>
20             <th>选择</th>
21         </tr>
22     </thead>
23     
24     <tbody>   
25         <tr>
26             <td>开发部</td>
27             <td>192.1</td>
28             <th><input type="checkbox"></th>
29         </tr>
30         <tr>
31             <td>测试部</td>
32             <td>192.2</td>
33             <th><input type="checkbox"></th>
34         </tr>
35         <tr>
36             <td>销售部</td>
37             <td>192.3</td>
38             <th><input type="checkbox"></th>
39         </tr>
40     </tbody>
41 </table>
42 
43 
44 
45 <script src="jquery-3.1.0.js"></script>
46 <script>
47     function chooseAll() {
48         $(‘#tb :checkbox‘).prop(‘checked‘,true);
49     }
50     function cancelAll() {
51         $(‘#tb :checkbox‘).prop(‘checked‘,false);
52     }
53     function reverseAll() {
54         $(‘#tb :checkbox‘).each(function () {
55 
56             /* 第一种情况：通过Dom执行
57             // this 代指当前循环的每一个元素
58             // this 是Dom的对象
59             if (this.checked) {
60                 this.checked = false; // 由于是Dom对象，所以用这种语句
61             }else {
62                 this.checked = true;
63             }
64             */
65 
66 
67             /* 第二种情况：通过jQuery转换实现
68             if ($(this).prop(‘checked‘)){
69                 $(this).prop(‘checked‘,false);
70             } else {
71                 $(this).prop(‘checked‘,true);
72             }
73             */
74 
75 
76             /* 第三种情况：三元运算
77             var v = 条件?真值:假值 */
78             var v = $(this).prop(‘checked‘)?false:true;
79             $(this).prop(‘checked‘,v);
80 
81         })
82     }
83 
84 </script>
85 </body>
86 </html>

View Code

    二、左侧菜单折叠、展开功能：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .header{
 8             background-color: blue;
 9             color: white;
10         }
11         .content{
12             min-height: 50px;
13         }
14         .hide{
15             display: none;
16         }
17     </style>
18 </head>
19 <body>
20 
21     <div style="height: 400px;width: 200px;border: 1px solid gray">
22         <div class="item">
23             <div class="header">标题一</div>
24             <div class="content">内容</div>
25         </div>
26         <div class="item">
27             <div class="header">标题二</div>
28             <div class="content hide">内容</div>
29         </div>
30         <div class="item">
31             <div class="header">标题三</div>
32             <div class="content hide">内容</div>
33         </div>
34 
35     </div>
36 
37 
38     <script src="jquery-3.1.0.js"></script>
39     <script>
40         $(‘.header‘).click(function () {
41             // console.log(this);
42             // 获取某个标签的下一个标签
43             // 获取当前标签的父标签
44             // 获取所有的兄弟标签
45             // 添加样式和移除样式 $(‘#i1‘).addClass(‘hide‘)    $(‘#i1‘).removeClass(‘hide‘)
46             $(this).next().removeClass(‘hide‘);
47             $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘);
48             // 以上两句可以合成一句，即jQuery支持链式编程
49 
50         })
51     </script>
52 </body>
53 </html>

View Code

    三、模态对话框功能：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .shade{
  8             position: fixed;
  9             top: 0;
 10             left: 0;
 11             right: 0;
 12             bottom: 0;
 13             background-color: black;
 14             opacity: 0.6;
 15             z-index: 9;
 16         }
 17         .modal{
 18             position: fixed;
 19             top: 50%;
 20             left: 50%;
 21             width: 500px;
 22             height: 400px;
 23             background-color: white;
 24             margin-top: -250px;
 25             margin-left: -200px;
 26             z-index: 10;
 27             line-height: 400px;
 28             text-align: center;
 29         }
 30         .hide{
 31             display: none;
 32         }
 33     </style>
 34 </head>
 35 <body>
 36 <input type="button" id="bt" value="添加" onclick="addShade();">
 37 <table border="1px solid gray" width="300px">
 38     <thead>
 39         <tr>
 40             <th>业务线</th>
 41             <th>端口</th>
 42             <th>操作</th>
 43         </tr>
 44     </thead>
 45     <tbody>
 46         <tr>
 47             <td>开发部</td>
 48             <td>192.1</td>
 49             <th><a class="edit">编辑</a>|<a>删除</a></th>
 50         </tr>
 51         <tr>
 52             <td>测试部</td>
 53             <td>192.2</td>
 54             <th><a class="edit">编辑</a>|<a>删除</a></th>
 55         </tr>
 56         <tr>
 57             <td>销售部</td>
 58             <td>192.3</td>
 59             <th><a class="edit">编辑</a>|<a>删除</a></th>
 60         </tr>
 61     </tbody>
 62 </table>
 63 
 64 <div class="shade hide"></div>
 65 
 66 <div class="modal hide">
 67     <div>
 68         <input type="text" id="modal_i1">
 69         <input type="text" id="modal_i2">
 70 
 71             <input type="button" value="确定">
 72             <input type="button" onclick="cancel()" value="取消">
 73 
 74 
 75     </div>
 76 </div>
 77 
 78 <script src="jquery-3.1.0.js"></script>
 79 <script>
 80     function addShade() {
 81         $(‘.shade,.modal‘).removeClass(‘hide‘);
 82         // $(‘.modal‘).removeClass(‘hide‘)
 83     }
 84     function cancel() {
 85         $(‘.shade,.modal‘).addClass(‘hide‘);
 86         // $(‘.modal‘).addClass(‘hide‘)
 87     }
 88 
 89     $(‘.edit‘).click(function () {
 90         $(‘.shade,.modal‘).removeClass(‘hide‘);
 91         // console.log($(this).parent().prevAll()[0]);
 92         var tds = $(this).parent().prevAll();
 93         var v1 = $(tds[0]).text();
 94         var v2 = $(tds[1]).text();
 95         // console.log(v1,v2);
 96         $(‘#modal_i1‘).val(v2);
 97         $(‘#modal_i2‘).val(v1);
 98 
 99     })
100 
101 </script>
102 </body>
103 </html>

View Code

    四、tab切换功能：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .menu{
 8             height: 48px;
 9             width: 700px;
10             background-color: gray;
11             line-height: 48px;
12             margin: 0 auto;
13         }
14         .menu_item{
15             float: left;
16             border-left: 1px solid red;
17             border-right: 1px solid red;
18             padding: 0 10px;
19         }
20         .content{
21             margin: 0 auto;
22             height: 600px;
23             width: 700px;
24             border: 1px solid gainsboro;
25 
26         }
27         .hide{
28             display: none;
29         }
30         .active{
31             background-color: saddlebrown;
32         }
33     </style>
34 </head>
35 <body>
36 
37 <div class="menu">
38     <div class="menu_item active" a="1">菜单一</div>
39     <div class="menu_item" a="2">菜单二</div>
40     <div class="menu_item" a="3">菜单三</div>
41 </div>
42 
43 <div class="content">
44     <div b="1">内容一</div>
45     <div class="hide" b="2">内容二</div>
46     <div class="hide" b="3">内容三</div>
47 </div>
48 
49 <script src="jquery-3.1.0.js"></script>
50 <script>
51     $(‘.menu_item‘).click(function () {
52         $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
53 
54 
55         var target = $(this).attr(‘a‘);
56         var a = ‘[b="‘;
57         var b = ‘"]‘;
58         var n = a + target + b;
59         // console.log(n)
60         $(‘.content‘).children(n).removeClass(‘hide‘).siblings().addClass(‘hide‘)
61 
62     })
63 </script>
64 
65 </body>
66 </html>

View Code

    五、文档处理添加删除功能：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" id="in">
 9 <input type="button" id="i1" value=‘添加‘>
10 <input type="button" id="i2" value=‘删除‘>
11 <input type="button" id="i3" value=‘复制‘>
12     <ul id="u1">
13         <li>1</li>
14         <li>2</li>
15     </ul>
16 <script src="jquery-3.1.0.js"></script>
17 <script>
18     $(‘#i1‘).click(function () {
19         var v = $(‘#in‘).val();
20         var temp = ‘<li>‘+ v + ‘</li>‘;
21         $(‘#u1‘).append(temp);
22         // $(‘#u1‘).prepend(temp);
23         // $(‘#u1‘).after(temp);
24         // $(‘#u1‘).before(temp);
25     })
26 
27     $(‘#i2‘).click(function () {
28         var index = $(‘#in‘).val();
29         $(‘#u1 li‘).eq(index).remove();
30         // $(‘#u1 li‘).eq(index).empty();  // 标签还存在，内容已经删除
31     })
32 
33     $(‘#i3‘).click(function () {
34         var index = $(‘#in‘).val();
35         var v = $(‘#u1 li‘).eq(index).clone();
36         $(‘#u1‘).append(v);
37     })
38 
39 </script>
40 </body>
41 </html>

View Code

    六、点赞：s6代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .item{
 8             height: 200px;
 9             border-bottom: 1px solid gainsboro;
10         }
11         .zan{
12             position: relative;
13             bottom: 40px;
14             left: 100px;
15         }
16     </style>
17 </head>
18 <body>
19 
20 <div class="item">
21     <div class="zan">
22         <span>赞</span>
23     </div>
24 </div>
25 <div class="item">
26     <div class="zan">
27         <span>赞</span>
28     </div>
29 </div>
30 <div class="item">
31     <div class="zan">
32         <span>赞</span>
33     </div>
34 </div>
35 
36 <script src="jquery-3.1.0.js"></script>
37 <script>
38     $(‘span‘).click(function () {
39         addTag(this);
40     })
41     function addTag(self) {
42         // console.log(self)
43         var fontSize = 15;
44         var top = 0;
45         var left = 15;
46         var opacity = 1;
47 
48         var tag = document.createElement(‘span‘);
49         // tag.innerText = ‘+1‘;
50         $(tag).text(‘+1‘);
51         $(tag).css(‘color‘,‘green‘);
52         $(tag).css(‘position‘,‘absolute‘);
53         $(tag).css(‘fontSize‘,fontSize+‘px‘);
54         $(tag).css(‘top‘,top+‘px‘);
55         $(tag).css(‘left‘,left+‘px‘);
56         $(tag).css(‘opacity‘,opacity);
57         $(self).append(tag);
58 
59         var obj = setInterval(function () {
60             fontSize = fontSize + 5;
61             top = top - 10;
62             left = left + 2;
63             opacity = opacity - 0.2;
64 
65             $(tag).css(‘fontSize‘,fontSize+‘px‘);
66             $(tag).css(‘top‘,top+‘px‘);
67             $(tag).css(‘left‘,left+‘px‘);
68             $(tag).css(‘opacity‘,opacity);
69 
70             if (opacity<0){
71                 clearInterval(obj); // 要清除setInterval，否则会一直跑下去
72                 $(tag).remove();  // 还要将此标签清除，因为有标签会占用内容
73             }
74 
75         },100)
76     }
77 
78 </script>
79 
80 </body>
81 </html>

View Code

    七、表单提交：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action=‘s4.html‘ method="POST">
 9     <input type="text">
10     <input id="bt" type="submit" value="提交">
11 
12 </form>
13 
14 <script src="jquery-3.1.0.js"></script>
15 <script>
16     $(‘#bt‘).click(function () {
17             var v = $(this).prev().val();
18             if (v.length > 0){
19                 return true;
20             }else {
21                 alert(‘请输入内容‘);
22                 return false;
23             }
24         })
25 </script>
26 </body>
27 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .error{
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13 <form id="f1" action="s4.html" method="POST">
14     <div><input type="text"></div>
15     <div><input type="password"></div>
16     <div><input type="text"></div>
17     <div><input type="text"></div>
18     <div><input type="text"></div>
19     <input type="submit" value="提交">
20 </form>
21 
22 <script src="jquery-3.1.0.js"></script>
23 <script>
24     $(‘:submit‘).click(function () {
25         $(‘.error‘).remove();
26         var flag = true;
27         $(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
28             var v = $(this).val();
29             if (v.length<=0){
30                 var tag = document.createElement(‘span‘);
31                 tag.className = ‘error‘;
32                 tag.innerText = ‘必填‘;
33                 $(this).after(tag);
34                 flag = false;
35                 // return false;  这个语句是打断当前循环，直接从循环中跳出
36             }
37         });
38         return flag
39     })
40     
41     
42 </script>
43 </body>
44 </html>

View Code

　　

四、前端进阶

一、JS正则
    1.定义正则表达式
        /.../       # 用于定义正则表达式
        /.../g      # 表示全局匹配
        /.../i      # 表示不区分大小写
        /.../m      # 表示多行匹配
    2.匹配
        - test 判断字符串是否符合规定的正则
            rep = /d+/;
            >>/d+/
            rep.test(‘asdf89ghk‘)
            >>true
            rep.test(‘asdfghk‘)
            >>false
            rep = /^d+$/;
            >>/^d+$/
            rep.test(‘asdf45‘);
            >>false
            rep.test(‘12asdf‘);
            >>false
            rep.test(‘12asdf45‘);
            >>false
            rep.test(‘1245‘);
            >>true
        - exec 获取匹配的数据
            rep = /d+/;
            >>/d+/
            str = ‘wagn_67_sdf_20‘;
            >>"wagn_67_sdf_20"
            rep.exec(str);
            >>["67", index: 5, input: "wagn_67_sdf_20", groups: undefined] // 以数组形式返回
    3.示例
        单个单词的一级匹配和二级匹配：/Javaw*/;和/Java(w*)/;
            str = ‘JavaScript is more fun than Java or JavaBeans!‘
            >>"JavaScript is more fun than Java or JavaBeans!"
            var pattern = /Javaw*/;  // ... 表示进行单个单词的匹配
            >>undefined
            pattern.exec(str);  // 只拿到JavaScript
            >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            var pattern = /Java(w*)/; // 和上面差一个括号
            >>undefined
            pattern.exec(str);  // 拿到两个匹配了JavaScript后还把Script拿出来
            >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]

        全局单词的一级匹配：/Javaw*/g;
            str = ‘JavaScript is more fun than Java or JavaBeans!‘
            >>"JavaScript is more fun than Java or JavaBeans!"
            var pattern = /Javaw*/g;  // 加g是表示全局匹配
            >>undefined
            pattern.exec(str); // 拿到第一个JavaScript
            >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str); // 拿到第二个Java
            >>["Java", index: 28, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str); // 拿到第三个JavaBeans
            >>["JavaBeans", index: 36, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str); // 为空
            >>null
            pattern.exec(str); // 再从头循环
            >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]

        全局单词的一级匹配和二级匹配：/Java(w*)/g;
            str = ‘JavaScript is more fun than Java or JavaBeans!‘
            >>"JavaScript is more fun than Java or JavaBeans!"
            var pattern = /Java(w*)/g; // 加括号的w*
            >>undefined
            pattern.exec(str);
            >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str);
            >>(2) ["Java", "", index: 28, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str);
            >>(2) ["JavaBeans", "Beans", index: 36, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]
            pattern.exec(str);
            >>null
            pattern.exec(str);
            >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined]

        多行匹配应用
            str = ‘JavaScript is more fun than 
Java or JavaBeans!‘;
            >>"JavaScript is more fun than
            >>Java or JavaBeans!"
            var pattern = /^Java(w*)/g; // 无论有几行，只匹配一个字符串开头的Java
            >>undefined
            pattern.exec(str);
            >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined]
            pattern.exec(str);
            >>null
            var pattern = /^Java(w*)/gm; // 加上m后可以匹配多行以Java开头的字符串
            >>undefined
            pattern.exec(str);
            >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined]
            pattern.exec(str);
            >>(2) ["Java", "", index: 29, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined]

    4.JS验证（验证时会使用正则）
        总体验证：
            JS验证：包含各种验证，如注册时用户名、手机号、两次密码输入、验证码等（如果用JS实现代码量很大）
            后端验证：进行服务器数据库等验证

二、模板使用

    EasyUI（功能齐全，学习繁杂，主要做后台管理）
        - css
        - js

    jQueryUI（推荐使用，功能少，主要做后台管理）
        - css
        - js

    BootStrap（适用全栈）
        - css
        - js

以上是关于前端学习之路—html标签cssjs的主要内容，如果未能解决你的问题，请参考以下文章

python学习之路7 前端学习4 jQuery 学习

前端学习之路-CSS介绍，Html介绍，JavaScript介绍

前端学习之路一

转载前端基础知识体系一个新手的学习之路

前端学习之路-HTML

WEB前端进阶之路 HTML 全路线学习知识点梳理（上）