js的一些基本知识点

1、大盒子套小盒子 水平居中 垂直居中 水平且垂直居中

水平居中：
1）父元素：text-anign:center; 子元素：display:inline-block;
2）子元素：display:table; margin:0 auto;
3）父元素：position:relative; 子元素：position:absolute; left:50%; transform:translateX(-50%)
垂直居中：
1)父元素：display:table-ceil; vertical-align:middle;
2)父元素：position:relative; 子元素:position:absolute; transform:translateY(-50%); top:50%;
3)父元素：display:flex; align-items:center; 子元素：text-align:center;
水平且垂直居中：
1)父元素：text-alian:center; display:table-cell; vertical-align:middle;
子元素：display:inline-block:
2)父元素：position:relative; 子元素：position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
3)父元素：display:flex; justify-content:center; align-items:center;

2、为什么浮动 怎么请浮动

为什么浮动：
因为块元素独占一行，需要让他横向排列
清浮动：
(1)给父元素设置个边框
(2) overflow：hidden;
(3) 伪元素清除浮动 :before :after

3、定位有几种 参照点是什么

相对定位： position:relative;占有原来位置 以自身为参照点
绝对定位： position:absolute;不占原来位置，不保留原来位置 距离最近有相对定位的父元素
固定定位： position:fixed; 以网页为参照点

4、JS数据类型

基本类型： 数字，字符串，布尔
数据类型： 对象，数组
特殊数据类型： undefined，null

5、JS获取DOM元素的方式

document.getElementById(“id的名字”) 获取的是一个
document.getElementsByTagName(“标签的名字”) 获取的是数组
document.getElementsByClassName(“类的名字”) 获取的是数组
document.querySelector(“标签名或者id或者类名”) 获取的是一个
document.querySelectorAll(“标签名或者id或者类名”) 获取的是数组

6、JQ DOM节点操作

1）添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
2）删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
3）复制节点
clone(): 创建匹配元素集合的副本.
clone()方法返回被复制的节点.
4）替换节点
replaceAll(): 用指定的HTML内容或元素替换被选元素. 　　语法:
$(content).replaceAll(selector). replaceWith():
用新内容替换所匹配到的元素. 　　
语法: $(selector).replaceWith(content).

7、JS实现 点击按钮创建标签并动态添加样式

<button>按钮</button>
    <script>
        var btn = document.querySelector('button');
        var body = document.querySelector('body');
        btn.addEventListener('click', function () {
            var div = document.createElement('div');
            body.appendChild(div);
            div.style.width = '100px'
            div.style.height = '80px'
            div.style.border = '1px solid #000'
            div.style.backgroundColor = 'red'
            div.style.position = 'absolute'
            div.style.top = '100px'
            div.style.left = '50px'
        })
    </script>

8、宽 高 边框 背景色 背景图 水平居中 垂直居中 margin padding各个值的含义 边框圆角 阴影 三种定位 JQ显示或隐藏元素

宽： width
高： height
边框： border:1px solid(实线)/dashed(虚线) 颜色;
背景： background-color:; background-img:;url(路径)
水平居中： margin:0 auto; / text-align:center;
垂直居中： vertical-align:center;
Margin/padding： 一个值 上下左右； 两个值 上下 左右； 三个值 上 左右 下； 四个值；上 右 下 左；
边框圆角： border-radius:设置圆角的半径;
边框阴影： box-shadow:水平方向阴影、垂直方向阴影、模糊度、颜色;
Jq显示或隐藏元素：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

9、 AJAX 基础知识点

看看记个大概就行：（不必背会）
url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml： 返回XML文档，可用JQuery处理。
html： 返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script： 返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json： 返回JSON数据。
jsonp： JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text： 返回纯文本字符串。
success： 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}