前端基础知识总结,前端开发总结

摘要：

网页文件扩展名：。html或。htm网页文件扩展名：。html或Htm我们根据规则编写网页，浏览器根据规则呈现网页。不同的浏览器可能对同一标签有不同的解释——这个lang代表语言，zh-CN代表中文，也就是说，整个文档的内容主要是中文--˃：html文件声明，声明为HTML5文档，：它是文档的开始标记和结束标记。它是HTML页面的根元素。它们之间是文档的标题和正文和，它们定义了HTML文档的开头。它们之间的内容不会显示在浏览器的文档窗口中。

HTML初识

△HTML:

超文本标记语言，是一种用于创建网页的标记语言，不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）

网页文件的扩展名：.html或.htm（没有区别）

我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm（没有区别）

△css：
层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言

JavaScript：
简称“JS”，是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

△jQuery：
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码

△boodstarp(JQ+css):
bootstrap：简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

△B/S (前端/后端)

Web服务的本质：
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->
服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端，默认TCP链接

△浏览器自带socket客户端，自己编写的服务端也可以为浏览器服务

from socket import *
jd_server = socket()

jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()

按照HTTP协议加载浏览器能看懂的数据：

conn.send(b"HTTP/1.1 200 OK

")
conn.send(b"nihao")

HTTP/1.1 200 OK:
HTTP/1.1 是一个规范
200 代表请求成功
OK 表示一切正常

conn.send(b"<h1>nihao</h1>")  #用标题包裹数据，更好看一些

标签一般形成一个结构写在文件里，这个文件就是HTML文件

HTTP/1.1 是一个规范

conn.send(b"HTTP/1.1 200 OK

")
conn.send(b"nihao")

pycharm中创建一个html文件（英文名，不要空格）
你会发现，整个结构都直接生成好了,因为不管什么浏览器，文档结构都是这样的

html文件可以在pycharm中就能打开

△自己写一个服务器
当浏览器来连服务器时,把HTML文件发送给浏览器

from socket import *

s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK

")

with open("test.html","rb") as f:
    data = f.read()
    new_s.send(data)
new_s.close()
s.close()

HTML文档结构

△最基本的HTML文档：

<!DOCTYPE html>     
<html lang="zh-CN">   
<!--这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主-->
<!--如果以英文为主，就写成lang='en'，用谷歌之类打开，它会认为是英文的，自动给翻译（如果设置了自动翻译的话）-->
<head> 
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body> 
</body>
</html>



<!DOCTYPE html>:HTML文件声明，声明为HTML5文档
<html>、</html>:是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）

<head>、</head>:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的

<title>、</title>:定义了网页标题，在浏览器标题栏显示
<body>、</body>:之间的文本是可见的网页主体内容

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码
有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">

△浏览器页面调试工具 F12
Elements（元素）：对浏览器看来，所有标签都是元素
标签对文本进行了标记，所以HTML叫超文本标记语言
浏览器有识别标签的机制

HTML标签格式

标签分类定义

块级/内联:判断依据为显示的web中独占至少一行的body中的标签

块级标签(行外标签,独占一行):

块级标签能够包含内联标签,和某些块级标

<h1>一级标题</h1>        标题标签 
<br>	 换行标签
<hr>     换行横线标签

<p>              段落标签
    第一章内容
</p>


<div style="color:green">  </div>        换行文档分区标签


<ul>           无序列表标签
     <li>茶</li>    列表内容标签
</ul>


<ol type="I" start="2">  有序列表标签
    li>梅</li>             
</ol>


<dl>                 无标识标签
    <dt>河北省</dt>	
    <dd>邯郸</dd>		  
</dl>


<table border="1">   表格线框宽度      表格标签    
  <tr> 定义行   第一行
    <th>Month</th>  表头加粗的内容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表内容
    <td>$100</td>
  </tr>
</table>

内联标签(行内标签,不独占一行):
不能包含块级标签

<img     src="http://t.zoukankan.com/timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签
<a href="https://tool.4xseo.com/article/225274.html">跳到底部</a>  超链接标签
<span style="color:blue">蓝色</span>  文档标签

全封闭标签:

<title>网头</title>     网头标签
<h1>一级标题</h1>        标题标签 
<a href="https://tool.4xseo.com/article/225274.html">跳到底部</a>  超链接标签

<p>我的车是 <span style="color:blue">蓝色</span> 的。</p>   段落标签  文档分区标签
<div style="color:green">  </div>        换行文档分区标签


<p>              段落标签
    第一章内容
</p>



<ul>           无序列表标签
     <li>茶</li>
</ul>


<ol type="I" start="2">  有序列表标签
    li>梅</li>             
</ol>


<dl>                 无标识标签
    <dt>河北省</dt>	
    <dd>邯郸</dd>		  
</dl>



<table border="1">   表格线框宽度      表格标签    
  <tr> 定义行   第一行
    <th>Month</th>  表头加粗的内容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表内容
    <td>$100</td>
  </tr>
</table>

自封闭标签:

<meta>   元信息标签
<link rel="icon" href="http://t.zoukankan.com/图标文件路径">  网头图标标签
<br>	 换行标签
<hr>     换行横线标签
<img     src="http://t.zoukankan.com/timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签

head内常用标签（了解）：

`<meta />` 标签元信息

用处:标签位于文档的头部,提供的信息是用户不可见的,是一个自封闭标签,全封闭标签,可提供有关页面的元信息（meta-information）

有一下关键字:

charset=

ontent="3"

定义文档字符编码和更新频度的描述:

<meta charset="utf-8"   content="3"/> 
                          三秒刷新
<meta http-equiv="Refresh"  content="2;url=https://www.baidu.com"/>
										   自动跳转

http-equiv=

浏览器内核（渲染引擎）：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因，大部分渲染效果差不多

<meta http-equiv="Refresh">

<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比较个色

name="keyword" content="搜索关键字"

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类

<meta name="keywod" content="古风，武侠，悟道"/>

name="description" content="网站描述信息"

设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息

<meta name="description" content="这是一个古风网站"/>

触屏缩放

name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>

device-width：设备宽度
- initial-scale=1.0，初始显示缩放比例。
- minimum-scale=0.5，最小缩放比例。
- maximum-scale=1.0，最大缩放比例。
- user-scalable=yes，是否支持可缩放比例（触屏缩放）

`<title>网头</title>` 标签

link 标签网头图标

<link rel="icon" href="http://t.zoukankan.com/图标文件路径"/>

body内常用标签

`<h1> <h1>`标签标题

<body>
	hehe  #body中没有包裹的就是普通文本显示
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题,大圣</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

br标签换行

<h1>123</h1>
<br>
<h2>4<br>5</h2>
 
 123
 
 4
 5

注意点:直接回车、空格等空白内容都被认为是一个空格

hr 标签一行横线

<h2>1<hr>2</h2>

1
----------------------------------
2

form标签表单

使用 <form> 标签可以通过浏览器向服务器传输数据
<form action="http://127.0.0.1:8001">
</form>
action属性: 指定提交路径,提交到哪里去

<form action="http://192.168.3.18:8001">
用户名：<input type="text" name="uname">   <!--uname:输入的内容 -->
密码: <input type="password" name="pw">     <!--pw:输入的内容 -->
    <input type="submit" value="登陆">
    <!--submit 生成提交按钮-->
</form>

input标签

text/password 输入框

用户名：<input type="text"> 
<!--普通文本输入框-->

密码: <input type="password">
<!--密文输入框-->


<input type="reset">        <!--生成重置按钮，清空输入内容-->

<input type="button" value="按钮">     <!--普通按钮，不会触发提交-->

 <input type="date">、                  <!--时间日期输入框-->

<input type="file">        <!--文件输入框，了解即可后面讲，需要特殊设置-->

<input type="number">                 <!--纯数字输入框-->

radio 单选框

性别
<input type="radio" name="sex" value="1">男  
<input type="radio" name="sex" value="2">女

checkbox 多选框

喜欢的明星:
<input type="checkbox" name="hobby" value="1"> baby   
<input type="checkbox" name="hobby" value="2"> 热巴
<input type="checkbox" name="hobby" value="3"> 艺昕

textarea标签多行文本输入框

多用于评论

<textarea name="携带用户输入"></textarea>

select标签下拉框

单选

<select name="city" id="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">惠州</option>
</select>

multiple="multiple" 多选

ctrl键多选

<select name="citys"   multiple="multiple">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">惠州</option>
</select>

a 标签超链接

锚点：页面内容进行跳转（在自己的页面跳）

<body>

<a href="https://tool.4xseo.com/article/225274.html">第一章</a>
<a href="https://tool.4xseo.com/article/225274.html">第二章</a>
<a href="https://tool.4xseo.com/article/225274.html">第三章</a>

<h1 id="i1">第一章 XXX</h1>
<p>   #段落标签
    第一章内容
</p>

不加href属性,就是普通文本显示

<a>古风</a>

加上href属性,不加值文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面

<a href="https://tool.4xseo.com/article/225274.html">跳到底部</a>

加上href属性,并且加上值

<a href="http://www.baidu.com" target="_self" >baidu</a>

跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址

p标签段落

<p>  
    第一章内容
</p>

span标签文档分区

<p>我的车是 <span style="color:blue">蓝色</span> 的。</p>
如果不对 div和span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异

div标签换行文档分区

div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分

<div style="color:green">  #字体为绿色
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<div style="background: red">内容</div> #背景为绿色

ul标签无序列表

兴趣爱好:
    <ul>               #<ul>作为无序列表的声明
        <li>茶</li>
        <li>酒</li>
        <li>棋</li>
    </ul>

ol标签有序列表

君子:
    <ol type="I" start="2">     #<ol> 标签定义有序列表,有序列表的各个列表项有先后顺序，
        <li>梅</li>             #所以会使用数字进行标识
        <li>兰</li>
        <li>竹</li>
        <li>菊</li>
    </ol>

dl标签无标识表(缩进)

    <dl>
        <dt>河北省</dt>	表头
        <dd>邯郸</dd>		 内容 
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>

河北省
	邯郸
	石家庄
山西省
	太原
	平遥

tble标签表格

<table border="1">   表格线框宽度
  <tr> 定义行   第一行
    <th>Month</th>  表头加粗的内容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表内容
    <td>$100</td>
  </tr>
</table>

表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元

border:规定表格边框的宽度


写法二：
第二种写法:
<table>

<thead>
    <!--表头-->
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
	</thead>
    
    <tbody>
    <!--表内容-->
    <tr>
        <td>1</td>
        <td>xiaoming</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xiaoli</td>
        <td>18</td>
    </tr>
    </tbody>
   
</table>

img标签图片

<img     src="http://t.zoukankan.com/timg.jpg" alt="稍等片刻" title="李孝利"/>

src属性:图片路径  必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容

# 不常用,通过css来控制
设置宽度
height:设置高度

css

层叠样式表,作用是为标签加效果

<div style="background: red">123</div>

基本选择器

元素选择器

标签名称{css属性:值}

div{100px;}

id选择器

id{}

html代码:
<div id="d1">

    </div>

css写法:
    #d1{
        background-color: green;
         100px;
        height: 100px;
    }

类选择器

.class1{属性:值}

html代码:
<div   class="c1">
    baby
</div>

<div   class="c2">
   热巴
</div>

<div   class="c1">
    唐艺昕
</div>


css写法:
.c1{
    background-color: green;
     100px;
    height: 100px;
}

属性选择器

html代码:
<div     xx="ss">
    baby
</div>

<div     xx="kk">
   热巴
</div>

css写法:
[xx]{
           /*属性查找*/
           background-color: green;
     100px;
    height: 200px;
       }


        [xx='ss']{
            /*属性带属性值查找*/
    background-color: green;
     100px;
    height: 200px;
}

后代选择器

html代码:

div     xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div     xx="kk">
        <a href="http://www.baidu.com">热巴</a>
    </div>
    <div   class="c1">
        唐艺昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>

div a{    color: yellow;}

组合选择器

div,a{ color: yellow;}

html代码:
div     xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div     xx="kk">
        <a href="http://www.baidu.com">热巴</a>
    </div>
    <div   class="c1">
        唐艺昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
    
    
css代码: 
注意:a标签字体颜色设置,必须找到a标签才能设置
	#d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

css样式引入方式

head标签中引入

<style>
    /* 选择器{css属性名称:属性值;css属性名称:属性值;} */
    div{                               用了基本选择器中的元素选择器
         200px;
        height: 200px;
        background-color: red;
    }
</style>
给所有div标签加样式

外部文件引入

（工作中常用的）

创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码
div{
    /* css注释 */
     200px;
    height: 200px;
    background-color: red;
}

在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="http://t.zoukankan.com/test.css"> href对应的是文件路径

内联样式

<div style="background-color: red;height: 100px; 100px;"></div>

multiple="multiple"?

css样式相关

display属性

改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏（了解，后面用）

html代码

 <span>
        我是span标签
    </span>
    <div class="c1">
        鹅鹅鹅,曲项向天歌!
    </div>

    <div class="c2">
        白毛浮绿水
    </div>

css写法

span{display: block;}             将内联标签变成块级标签
    .c1{
        background-color: red;    内容背景颜色
        height: 100px;            内容背景高度
         100px;			  内容背景宽度
        display: inline;		  将块级标签变成内联标签
        /*display: inline-block;*/  同时具备内联标签和块级标签的属性
         }

颜色设置

英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);

背景颜色透明度: rgba(255, 0, 0,0.3);      
单纯的就是颜色透明度

标签透明度（例如背景图片透明度）: opacity: 0.3;         
0到1的数字,这是整个标签的透明度

盒子模型

标签占空间总大小=margin+border+padding+content

html代码

<div>
	窗前明月光
</div>

css写法

div{  200px;   		 		         内容宽度
     height: 100px;  		 		         内容高度
     background-color: rgba(255, 0, 0,0.3);  内容背景颜色
     background-image: url("fage.png");      内容背景图片 url写图片路径,也可以是网络地址路径
	 margin: 10px 15px		 		外边距:上下 左右  距离无颜色
     border: 4px solid red;  		边框:大小 样式 颜色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  内边距       
}

margin 外边距

距离其他标签或者自己父级标签的距离

html代码

	<div>
        窗前明月光
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css写法

  .c1{
        background-color: red;
        height: 100px;
         100px;
	 /*margin: 10px 15px;*/     上下10，左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
         20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

让外边距为零

body{
	margin: 0;
}

border 边框

html代码

<div>
	窗前明月光
</div>

css写法

边框简写方式,对四个边框进行设置
<div style="border:1px solid red; ">           /*宽度/样式/颜色*/
窗前明月光
</div>                                         

order-left: 1px solid green;  单对左边边框设置   
border-top: 1px solid blue;   上边边框       


细写
border- 5px;  边框宽度
border-style: dashed;  边框样式
border-color: aqua; 边框颜色

padding 内边距

内容和边框之间的距离

html写法

<div style="padding:1px solid red; ">   /*宽度/样式/颜色*/
窗前明月光
</div>

padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 内容部分

背景

html代码

<div>
	窗前明月光
</div>

css写法

background-color: #ff746d;            背景颜色
background-color: rgba(255, 0, 0,0.3);背景颜色
background-image: url("fage.png");   url写图片路径,也可以是网络地址路径

background-repeat: no-repeat;        不重复
background-repeat: repeat-y;		 y方向上
background-position: right top;      右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px;  	 离左边边多少,离右边多少  一般通过css设置

简写方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;

高度宽度

css写法:
	div{
        height: 100px;
         100px;
        background-color: pink;
    }
    span{                        ！！！行级标签不能设置高度宽度
        height: 100px;
         100px;
        background-color: green;
    }

可以设置百分比，会按照父级标签的高度宽度来计算

<div class="c1"><div class="c2">234</div></div>

css写法:
	    .c1{
         200px;
        height: 100px;
        background: red;
    }
        .c2{
             50%;
            height: 50%;
            background: gold;
        }

字体相关

html代码

<div>
	窗前明月光
</div>

css写法

font-size: 50px;  1.5em 	/* 默认字体大小是16px=1em */
color:green; 		/* 字体颜色 */

font-family: 		'楷体', '宋体';      浏览器如果不支持第一个选第二个。。。

font-weight: 400;    /* 字体粗细 100-900,默认是400 */

字体对齐

html代码:
    <div>
        窗前明月光
    </div>

css写法

div{  height: 100px;
      200px;
  	  background-color: yellow;
	  text-align: center;  标签文本水平居中于块级标签  
	  line-height: 100px;  和height高度相同,标签文本垂直居中于块级标签
		/*垂直居中*/ 
	  text-align: right;右对齐

浮动

浮动的元素,不独占一行,并且可以设置高度宽度

html代码

<div class="cc"> 

<div class="c1"></div>
<div class="c2"></div>
</div> 

<div class="c3"></div>

scc写法

body{ margin: 0; }   要浮动,先让默认为8的外边距为0

c1{
background-color: red;  height: 100px;
 200px;  float: left;
}
.c2{
background-color: green;  height: 100px;
 200px;  float: right;
}

.c3{
background-color: pink;
height: 100px;
 100%;}

塌陷解决

父级标签没有高度了,子标签一浮动,会让下面的标签顶上来

方式1：给父级标签加高度不常用

方式2：清除浮动(clear属性) 不常用

.c3{
background-color: pink;  height: 100px;
 100%;
clear: both;	（这个标签上面不允许有浮动的元素）
}

方式3：子标签底下加一个空白的带clear属性的div标签常用

html代码:

<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div style="clear: both;"></div>
</div>
<div class="c3"></div>

方式4:div标签后面用after拼一个内容为空的带clear属性的块

需要先用伪元素选择器

html代码:

<div class="cc clearfix">
	<div class="c1"></div>
	<div class="c2"></div>
</div>
<div class="c3"></div>

css代码:

.clearfix:after{
	content:'';         设置内容
	display:block;       设置块
	clear:both;			设置clear属性
}

伪元素 after

在原内容上增加元素

html代码:

<div>
	一段文字
<div>

css代码:

div{
	background-color:pink;
	height:100px;
	200px;}
div:after{
content:'?';
color:white;}

伪类 hover

添加鼠标放上之后的效果

html代码:

<divclass="c1">

</div>

css写法:

.c1{
	background-color:red;
	height:300px;
	300px;}

.c1:hover{                                     /*鼠标悬浮时设置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor: pointer;}      pointer 手
                      default 箭头，crosshair 十字，progress 箭头和沙漏

悬浮显示其他标签效果

html代码:

<divclass="c1">
<divclass="c2">  </div>

</div>

css写法:

.c1{background:black;
	height:400px;
	400px;
}

.c2{background:aqua;
	height:40px;
	40px;
	display:none;          改display为隐藏属性
}

.c1:hover.c2{
	display:block;          鼠标悬浮时显示c2,改display为块属性
}

positon 定位

做一些小的范围布局

html代码:

<div class="cc ">
	<div class="c1"></div>
	<div class="c2"></div>
</div>
<div class="c3"></div>

static 静态定位

也就是标签默认

relative 相对定位

相对于父级标签移动,原来的位置还占着,不会造成下面的标签顶上去的情况

css代码:

position:relative;
left:100px;   离左边
top:-100px;   离上面
/*bottom:*/	  离下面
/*right:*/    离右边

absolute 绝对定位

相对于父级标签移动,原来的位置不占着,会造成下面的标签顶上去的情况

css代码:

position:absolute;
top:20px;
left:80px;

fixed 固定定位

按照浏览器窗口的位置进行移动

html代码:

<spanclass="s1"><ahref="">返回顶部</a></span>

css代码:

.s1{
position:fixed;
left:40px;
bottom:20px;
}

优先级

!important>行内样式>ID选择器>类选择器>标签

越精准的定位优先级越高

继承

类

id

!important

无敌

练习（下周一之前完成即可）：

通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页

面展示效果就可以（https://www.mi.com/）

注意：前端页面效果可以通过很多种方式实现，没有标准答案，大家

可以参考小米官网源码，也可以根据自己想法去实现

Brendan（布兰登） Eich

轻量级的编程语言（ECMAscript5或6）,
是一种解释性脚本语言（代码不进行预编译）,
主要用来向HTML页面添加交互行为,
目前是互联网上最流行的脚本语言,
支持面向对象、命令式和声明式（如函数式编程）风格,

JavaScript，他和Python一样是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行,
DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等（非重点）,
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。

BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。

三种js代码引入方式

1 head标签的script标签里面(alert('xx'), confirm('xx'))

2 body标签的script标签里面 (建议底部)

3 外部文件引入的方式来使用
创建一个.js结尾的文件,写上js代码
比如:

alert('are you ok?');

在想使用这个js代码的html文件中,body标签底部导入

<script src="http://t.zoukankan.com/test.js"></script>

js基础内容(会继续更新)

alert("daoyou");
confirm("daoyou?");

JavaScript语法规则

变量

变量定义 var a = 100；

var 变量名,,

变量声明,但没有赋值的时候,变量的值为undefined

数据类型

number 整数,浮点数

var n = 11;
var n2 = 11.11;

string 字符串

var a = 'abcdef';
var a = new String('ss');

字符串操作

var s = 'hello'; 
索引取值:  s[1] -- 'e'     s.charAt(4); -- 'o' : s.substring(1,3); -- "el"

获取长度：s.length;
移除两端空格: s.trim();   s.trimLeft(); s.trimRight();

boolean 布尔

var a = true;
var b = false;

undefined和null类型

undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型
null : 变量不用了,就可以给变量赋值为null,--- object类型

array 数组

var names = [11,22,33];

数组常用方法

names[0]	// 索引,索引也是从0开始的

names.push(ele)       // 尾部追加元素
示例:a.push('xx');       --  [11, 22, 33, "xx"]
names.pop()     	// 尾部移除一个元素
示例:a.pop(); -- [11, 22, 33]
names.unshift(ele)  			// 头部插入元素
示例:a.unshift('ssss'); --  ["ssss", 11, 22, 33]
var ele = obj.shift()         	// 头部移除一个元素
示例:a.shift(); --  [11, 22, 33]    


names.splice(index,0,ele) 		// 在指定索引位置插入元素
names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个)) 

names.splice(index,1,ele) 		// 指定索引位置替换元素
names.splice(index,1)     		// 指定位置删除元素
var names = [11,22,33];
names.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]

names.slice(start,end)        	// 切片
示例:a.slice(1,3);	

names.reverse()      		// 原数组反转
示例:a.reverse(); 

names.join(sep)       		// 将数组元素连接起来以构建一个字符串
示例: var a = ['ni','hao','ma',18]
a.join('+'); -- "ni+hao+ma+18"

names.concat(val,..)  		// 连接数组
示例: var a = [11,22]; var b = ['aa','bb']
var c = a.concat(b); c -- [11, 22, "aa", "bb"]

names.sort()    （辣鸡）     	// 对原数组进行排序  a.sort(compare); 升序排列

解决数组中数字排序的问题

a = [2,3,5,2,22,4,2,3,234,1]
function com(a,b){return a-b};    // 自定义排序规则   

a.sort(com);

当a-b大于0时，会交换数组中的这两个元素
一直交换直到返回值没有大于0的

字典

自定义对象Object

JavaScript中其实没有字典类型，字典是通过对象object构造出来的

info = {
    name:'迪丽热巴',      
    "age":18
    1:123
}

var a = {username:'xx',password:'123'}; //键可以不加引号 
                                     // 键可以是数字,但取值时必须是info["1"]
var a = info['name']/a = info.name // 通过键取值必须加引号(info.name) 
info['age'] = 20			// 修改
info['gender'] = 'male'		// 新增
delete info['age']			// 删除

查看数据类型

typeof 变量名;
typeof n;

注释

单行//

多行 /**/

流程控制

if判断

if (a == 1){       //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容
	console.log('1111');      （类似print）
}
else{
   console.log('222');
}

多条件判断

if(a > 1){
	// console.log('1111');
	// var hhhh = document.getElementById('d1');
	// hhhh.innerText = '彭于晏';
}else if(a<1){

	console.log('2222');
}else {
	console.log('3333');
}

运算符

比较运算

    > < == !=  >=  <=   ===  !==

var a = 2;
var b = '2';
a == b;  true  弱等于
a === b;  false  强等于
a != b;  false
a !== b;   true

算术运算

+  -  * / %   ++  --  
++ 自增 1  
-- 自减 1

var a = 2;
a++  先执行逻辑  +1
++a  先+1 再执行逻辑
简单示例:
	if (++a === 4){                 //（a++ === 3）
        console.log('xxx');}
    else{
        console.log('ooo');};

switch判断

用于判断等于某些值（只能放数字）

var num = 200;
switch(num++){
    case 10:
        console.log('未成年');
        break;
    case 18:
        console.log('成年');
        break;
    case 35:
        console.log('老年');
        break;
    case 100:
        console.log('....');
        break;
    default:
        console.log('太大了');};

异常捕获

try{
	console.log(xx);
}
catch(e){
	console.log(e);
}
finally{
	console.log('sssss');
}

循环

for循环

var names = ['老男孩', '肖峰', '吴超']

for(var i=0;i<names.lenght;i++){    js里for变例的i为索引
    console.log(i, names[i])
}



循环自定义对象--python字典
	for (var i in d){
        console.log(i,d[i]);     #不要用d.i来取值，没有 i 属性
    }

函数

普通函数

function f1(a,b){
	return a+b;
}
//   执行: f1(1,2) -- 3

function f1(a,b){
	return a,b;
};

f1(1,2);    //不能返回多个值:  2

匿名函数

一般用于当做参数使用
function (arg){
    return arg + 1;
}
——————————————————————————————

var a = function (a,b){
	console.log('xxx');
}

var d = {'xx':'oo','f':function (a,b){
	console.log('xxx');
}};
执行:d.f(1,2);    -------'xxx'

自执行函数

一般用于做数据隔离使用，因为JS中是以函数为作用域，所以当js代码比较多时，通过自执行函数做数据隔离

(function () {
        alert('自执行函数!')
    })()

JSON

JSON.stringify 序列化

var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) # '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'

JSON.parse 反序列化

//反序列化时键不能是数字且必须有双引号
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}' 
var info = JSON.parse(infoStr)
console.log(info)

应用场景：
网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，
就需要对对象进行序列化然后发送。（ajax会经常使用）
各语言之间数据类型不一定互通，需要一个中间人（json）  python->json->...->json->java

DOM对象文档对象模型

是一种用于HTML的编程接口
它给文档（HTML文件）提供了一种结构化的表示方法
可以改变文档的内容和呈现方式
DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能（动态调整文档中的元素）

选择器

直接查找选择器

html代码:

<div   id="d1"></div>
<div   id="d2"></div>

js代码

document：代表HTML文档对象

document.getElementById(arg)             // 根据ID获取一个标签对象
document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
document.getElementsByName(arg)     	// 根据name属性值获取标签对象集合
document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合

示例1: var d1 = document.getElementById('d1');
d1.style.height = '600px';

示例2：
创建几个div标签，统一设置为黄色
然后通过JavaScript代码将第一个div标签改为红色
var a = document.getElementsByTagName("div")
a[0].style.backgroundColor="red"

间接查找选择器

js代码:

var div1 = document.getElementsByClassName('c1')[0]; 

div1.nextElementSibling.style.color = 'red';  找下一个兄弟标签,并改了色
div1.previousElementSibling;  找上一个兄弟
div1.firstElementChild;  找第一个儿子
div1.lastElementChild;  找最后一个儿子
div1.children;  找所有儿子,是一个数组
div1.parentElement;  找到自己的父级标签

文本操作

nnerText 获取文本

var a = document.getElementById('d1')
a.innerText;  只获取文本内容

设置文本

a.innerText = '<a href="https://tool.4xseo.com/article/225274.html">校花</a>'; 不能识别标签,单纯的文本内容

获取文本包含标签

var d = document.getElementsByClassName('c1')[0];
d.innerHTML;  获取的内容包含标签

设置文本

d2.innerHTML = '<a href="https://tool.4xseo.com/article/225274.html">dream</a>'; 能够识别标签,生成标签效果

值操作

html

<input type="text" name="username"   >

示例

var inp = document.getElementById('username'); 找到标签
inp.value;  获取值   （value 用来进行值操作）
inp.value = 'XXX';  修改值

BOM对象浏览器对象模型

弹框

alert('xx');
confirm('are you sure?')

location对象

location.href;  获取当前页面的地址（url路径）
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload();  刷新当前页面

计时器

一段时间之后执行某个任务

var t = setTimeout("console.log('xxx')",1000);
var t = setTimeout(function(){confirm('alert('xx')')},5000);
t就是浏览器用来记录你的计时器的标识数字： 
清除:clearTimeout(t)

每隔一段时间执行某个任务

设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
清除:clearInterval(t);    //6

jQuery

jQuery：是一个javascript库
核心理念是write less,do more(写得更少,做得更多)
内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM的操作会更加简单，兼容性更好

jQuery引入

本身是一个js文件

网络地址引入
script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

本地文件引入
	<script src="http://t.zoukankan.com/jquery.js"></script>     
另起一个script标签来写script代码
或写在js文件里,
再
<script src="http://t.zoukankan.com/test3(3).js"></script>导入

最好的写法
<head>
    <script>
       $(function () {   // 文档 加载完 执行一次  能写多次  最好的写法
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="http://t.zoukankan.com/js1.js"></script>
      <script src="http://t.zoukankan.com/js2.js"></script>                 
        })
        
        window.onload = function () {  // 文档 图片 视频 音频 都加载完 执行一次  写多次会覆盖前面的
        }

        $(window).ready(function () {   // 文档 图片 视频 音频 都加载完 执行一次  能写多次
        })

        $(document).ready(function () {   // 文档 加载完 执行一次  能写多次
        })


    </script>
</head>

JQuery和dom对象的转换

$  ==  Jquery
dom对象 _>  jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]

选择

选择器

基本选择器

$('*') 通用选择器

$('#d1') id选择器

var d1 = $('#d1');       -- jquery对象  -- jQuery.fn.init [div#d1]
a.css({"background-color":"blue","height":"300px"})

var d = document.getElementById('d1');  -- 原生dom对象

jquery对象和dom对象之间不能调用互相的方法

a[0] -- dom对象
$(d) -- jquery对象

$('.c1') 类选择器

$('span') 元素选择器

$('标签名称')

$('#d1 , .c2') 组合选择

$('#d1,.c2').css('background-color','green');  并集
$('#d1.c2').css('background-color','green');   交集

$('#d1,.c2')[1];  -- 索引为1的dom对象

$('#d1,.c2').eq(1); -- 索引为1 的jquery对象

$('div span') 层级选择器

后代选择器    $('div span') 
子代选择器    $('#li>span') 
毗邻选择器    $('#li+span') 
弟弟选择器    $('#li~span')

$('[xx]') 属性选择器

$('[xx]').css('color','green');
$('[xx="oo"]').css('color','pink');
$('[属性^="值"]')  开头
$('[属性$="值"]')  结尾
$('[属性*="值"]')  包含
$('[属性!="值')    不等于

表单选择器

html代码

<form action="">
	<input type="text" id="username">
	<input type="password" id="pwd">
	<input type="submit">
</form>

jquery代码

$(":input")    找到所有input标签
$(':text')     找到所有input且type=text的标签
$(":password") 找到所有input且type=password的标签
$(":radio")    找到所有input且type=radio的标签
$(":checkbox") 找到所有input且type=checkbox的标签

进一步选择

$("选择器:筛选器") 优先

$("选择器:筛选器")

:first   第一个
:last    最后一个
:eq(index)  按照索引
:has(选择器)  包含某个子代的父标签
:not(选择器)  排除

$("选择器").筛选器方法

html代码

<ul>

	<li>迪丽热巴</li>
	<li class="c1">唐艺昕</li>
	<li>吴彦祖</li>
	<li class="c2">彭于晏</li>
	<li>
		<span>张天爱</span>
	</li>
	<li>吴亦凡</li>
</ul>

.parent() 找父标签

 var c = $('.c1');
c.parent();
父标签

c.parents();  
直系的祖先辈

c.parentsUntil('body'); 
往上找,直到找到哪个标签为止
不包含body标签

.children() 找子标签

var u = $('ul');
u.children();  找到所有儿子标签
u.children('.c1'); 找到符合 .c1 的儿子标签

.next() 找下面的兄弟

var c = $('.c1');
c.next();     
nextAll();  下面所有兄弟
c.nextUntil('.c2');  下面到某个兄弟为止,不包含那个兄弟

.prev() 找上面的兄弟

var c = $('.c1');
c.prev();
c.prevAll(); 上面所有兄弟,注意顺序都是反的
c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟

.siblings() 找兄弟

c.siblings();  找到自己的所有兄弟
c.siblings('.c1');  筛选兄弟中有class值为c1的标签（可以组合）

.find() 找后代

$('li').find('span'); 等同于css的 li span  层级选择器

.first()/.last()

$('li').first();  找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个

.eq(索引值)

$('li').eq(0);  按照索引取对应的那个标签,索引从0开始
$('li').eq(-1);  最后一个

.text() / .html() 取文本/标签

同js的innerText和innerHTML

取

c.text();  不带标签
c.html();  带标签

设置

c.text('文本')
c.html('标签'); -- 文本--"<a href='https://tool.4xseo.com/article/225274.html'>皇家赌场</a>"

.has() 包含某个子代的父标签

.filter('#l2') 包含某个选择器的当前标签

.not(选择器) 不包含某个选择器的当前标签

操作

标签的操作

创建标签

$('<a>')

append/prepend添加标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b0">添加</button>

jQuery代码:

$('#b2').click(function () {
    last = $('<li>')     //生成一个标签
     li.text('3')        //文本为3
     $('li:eq(2)').before(li) //在第..前加..
}) 
    // $('li:eq(1)').after(li)在第..后加..

父标签 . append(子标签) //子标签添加到父标签的子代的最后
子标签. appendTo(父标签) //子标签添加到父标签的子代的最后

父标签 . prepend(子标签)  //子标签添加到父标签的子代前面
子标签.prependTo(父标签)  //子标签添加到父标签的子代前面

a.after(b)   // 在a标签后面添加b标签
a.before(b)  // 在a标签前面添加b标签

父标签 . append(子标签)

子标签添加到父标签的子代的最后

子标签. appendTo(父标签)

子标签添加到父标签的子代的最后

父标签 . prepend(子标签)

子标签添加到父标签的子代前面

子标签.prependTo(父标签)

子标签添加到父标签的子代前面

a.after(b)

在a标签后面添加b标签

a.before(b)

在a标签前面添加b标签

detach/remove 删除标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b1">删除</button>

jQuery代码:

detach删除,可恢复事件:
$('#b1').click(function () {
	last = $('li:last').detach()
})



remove删除,不可恢复事件1:
$('#b3').click(function () {
	$('li').remove()
})

detach append 删除恢复标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b1">删除</button>
<button id="b2">恢复</button>

jQuery代码:

var last

$('#b1').click(function () {
    last = $('li:last').detach()
})

$('#b1').click(function () {
    last = $('li:last').detach()
})

empty append 清空恢复标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b3">清空</button>
<button id="b2">恢复</button>

jQuery代码:

var last

$('#b3').click(function () {
    last = $('ul').empty()
})
清空标签中的内容

$('#b2').click(function () {
    $('ul').append(last)
})

clone(ture) 克隆(和事件)标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b4">克隆</button>

jQuery代码:

$('#b4).click(function () {
    var li = $('li:last').clone(true)
    li.text(Number(li.text()+1))
	$('ul').append(li)
})

$('li').click(function () {
    alert($(this).text())
})

替换

a.replaceWith(b)    //  用b替换a
b.replaceAll(a)     //  用b替换a   a可以是标签 选择器

replaceWith(b) 替换标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>

    </ul>

</div>


<button id="b6">替换</button>

jQuery代码:

    $('#b1').click(function () {
        var l2 = $('li:last')
        var li = l2.clone()

        li.text(Number(li.text()) + 1)

        // l2.replaceWith(li)
        li.replaceAll('li:eq(1)')

    })


     $('li').click(function () {
        alert($(this).text())

    })

值操作

值的操作

val()

class类值操作

操作样式一般通过class而不是id

html代码

<div class="c1"></div>

css代码

.c1{
            background-color: red;
            height: 100px;
             100px; }
.c2{
            background-color: green; }

jquery代码

$('div').addClass('c2');   //动态增加类值
$('div').removeClass('c2');   //删除
$('div').toggleClass('c2');    //如果不存在则添加类，如果已设置则删除
var t = setInterval("$('div').toggleClass('c2');",500); //背景闪烁跳动

背景闪烁跳动

var t = setInterval("$('div').toggleClass('c2');",500);

val值操作

html代码：

    <input type="text" id="username">
    <input type="radio"   name="sex" value="1">男
    <input type="radio"   name="sex" value="2">女
    <input type="checkbox"   name="hobby" value="1">抽烟
    <input type="checkbox"   name="hobby" value="2">喝酒
    <input type="checkbox"   name="hobby" value="3">烫头
    <select name="city" id="s1">
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
    </select>
    <select name="lover"   multiple>
     <option value="1">波多</option>
     <option value="2">苍井</option>
     <option value="3">小泽</option></select>

jquery代码

获取值：
 文本输人框：$('#username').val();
 单选radio框：$('.a1:checked').val();    checked 代表被选中的

 多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
 var d = $(':checkbox:checked');
 for (var i=0;i<d.length;i++){
 console.log(d.eq(i).val());
 }

 单选select框：$('#city').val()；
 多选select框：$('#lover').val();

修改值:
 文本输入框：$('#username').val('一串文字');
 单选radio框：$('.a1').val([2]); #注意内容必须是列表，写的是value属性对应的值
 多选checkout框：$('.a2').val(['2','3'])
 单选select框：$('#city').val('1')；
 多选select框：$('#lover').val(['2','3'])

属性的操作

.attr('属性')         // 获取属性的值
.attr('属性','值')    // 设置把HTML元素我们自己自定义的DOM属性
.removeAttr('属性')   // 删除某个属性

.prop('checked')      //radio checkbox  select(option)   
.prop('checked',true)  //设置HTML元素本身就带有的固有属性

事件绑定

click(function () 点击

jQuery绑定

jQuery中的click 当点击按钮时执行一段 JavaScript

点击事件绑定：
$('.c1').click(function () {
        //$(this)表示的就是它自己
        $(this).css('background-color','green');
        // $('.c1').css('background-color','green');
//    $("#d1").css({"background-color":"blue","height":"800px"})
    })



$('button').bind('click',function () {           另一种方法
    })    


$('button').unbind('click')                      解绑

js绑定

js中的onclick等同于jQuery中的click

var b1 = document.getElementById('b1');  用id获取doc对象
b1.onclick = function () {
	alert(456)
}

focus(function () 获取焦点

当字段获得焦点时发生 focus 事件

$('#i1').focus(function () {
	console.log('聚焦了')
	$(this).val('')
	$(this).next().remove()
})

blur(function () 失去焦点时触发

 $('#i1').blur(function () {
        console.log('失去焦点了')
        if ($(this).val() === '') {
            var sp = $('<span>')
            sp.text('不能为空')
            $(this).after(sp)

        }
    })

change(function () 内容变化

$('#s1').change(function () {
	console.log('内容变化了')
})

keyup(function (e) 按键启动

$('#i1').keyup(function (e) {     //function拿到的第一个参数是按键的键名
	// console.log(e.keyCode)
	if (e.keyCode === 27) {       //利用keyup中的keyCode方法拿键的ascii码
	alert(123)
}`
})

hover(function () 鼠标悬浮

$('.fa').hover(function () {
        console.log('悬停了')
    }, function () {
        console.log('不悬停了')
    })


同以下
$('.fa').mouseenter(function () {
    console.log('鼠标进来了')
})

$('.fa').mouseleave(function () {
    console.log('鼠标出去了')
})


或
$('.fa').mouseover(function () {
    console.log('鼠标过来了')
})


mouseenter  鼠标进入
mouseleave  鼠标离开
hover  =   mouseenter  + mouseleave

alert 添加事件

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b0">自增</button>

jQuery代码:

$('li').click(function () {
    alert($(this).text())
})
   // $('li:eq(1)').after(li)

模态框

js代码

$(function () {   // 页面  视频 图片 音频 加载好再调用函数
	var flag = true;
    // 全选 + 取消
    $('#a').click(function () {
        $('tbody :checkbox').prop('checked', flag)    //prop设置属性
        if (flag) {
            $(this).text('取消')
        } else {
            $(this).text('全选')
        }
        flag = !flag
    })
})

事件冒泡

儿子父亲都被绑定,会一层层网上冒泡出发父事件执行.

事件委托

利用事件冒泡原理,

bootstrap

导入顺序

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://t.zoukankan.com/bootstrap-3.3.7-dist/css/bootstrap.min.css">         <!--导入bootstarp的css-->
    <link rel="stylesheet" href="http://t.zoukankan.com/font-awesome-4.7.0/css/font-awesome.min.css">         <!--导入font-awesome的css-->

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>         <!--导入jquery的js-->
    <script src="http://t.zoukankan.com/bootstrap-3.3.7-dist/js/bootstrap.js"></script>                      <!--导入bootstarp的js-->
</head>

each 循环

$('选择器').each(function(index,dom){
	$(this)  //  循环出来的每个jq对象
	//  index 索引   dom dom对象
})

事件冒泡

儿子父亲都绑定事件,触发儿子的事件,会一层层往上冒泡触发父辈的事件执行.

阻止事件冒泡

$('.son').click(function (e) {
        alert('你是我儿子')
        return false  // 阻止事件冒泡
        //e.stopPropagation()   // 阻止事件冒泡
    })

事件委托

利用了事件冒泡的原理,将事件委托给父亲,儿子触发事件时,执行父亲的事件.

 // 事件委托
$('tbody').on('click','button',function () {
        $(this).parents('tr').remove()
})

bootstrap

https://v3.bootcss.com/

按钮

表格

表单

模态框

分页

面板

导航

图标

http://www.fontawesome.com.cn/faicons/

免责声明：文章转载自《前端基础总结》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

前端基础总结

标签分类定义

head内常用标签（了解）：

<meta /> 标签 元信息

charset=

ontent="3"

http-equiv=

name="keyword" content="搜索关键字"

name="description" content="网站描述信息"

触屏缩放

<title>网头</title> 标签

link 标签 网头图标

body内常用标签

<h1> <h1>标签 标题

br标签 换行

hr 标签 一行横线

form标签 表单

input标签

text/password 输入框

radio 单选框

checkbox 多选框

textarea标签 多行文本输入框

select标签 下拉框

单选

multiple="multiple" 多选

a 标签 超链接

p标签 段落

span标签 文档分区

div标签 换行文档分区

ul标签 无序列表

ol标签 有序列表

dl标签 无标识表(缩进)

tble标签 表格

img标签 图片

基本选择器

元素选择器

id选择器

类选择器

属性选择器

后代选择器

组合选择器

css样式引入方式

head标签中引入

外部文件引入

内联样式

css样式相关

display属性

颜色设置

盒子模型

margin 外边距

border 边框

padding 内边距

content: 内容部分

背景

高度宽度

字体相关

字体对齐

浮动

塌陷解决

伪元素 after

伪类 hover

悬浮显示其他标签效果

positon 定位

static 静态定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

优先级

继承

标签

类

id

!important

三种js代码引入方式

js基础内容(会继续更新)

JavaScript语法规则

变量

数据类型

number 整数,浮点数

string 字符串

`<meta />` 标签元信息

`<title>网头</title>` 标签

link 标签网头图标

`<h1> <h1>`标签标题

br标签换行

hr 标签一行横线

form标签表单

textarea标签多行文本输入框

select标签下拉框

a 标签超链接

p标签段落

span标签文档分区

div标签换行文档分区

ul标签无序列表

ol标签有序列表

dl标签无标识表(缩进)

tble标签表格

img标签图片

DOM对象文档对象模型

BOM对象浏览器对象模型