JS/jquery/CSS总结

1. 小div在大div中水平垂直居中

方法一：使用定位的方法

            //大div
            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }

            //小div
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position:absolute;
                top: 50%;
                left:50%;
                margin-top: -50px;     /*这里是小盒子高的一半*/
                margin-left: -50px;    /*这里是小盒子宽的一半*/
            }   

方法二:利用定位及margin:auto实现

           .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

方法三:使用display:table-cell;

           .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                display: inline-block;
            }

方法四:使用伸缩布局display:flex

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                justify-content: center;  /*水平居中*/
                align-items: center;      /*垂直居中*/
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
            }

方法五:计算四周的间距设置子元素与父元素之间的margin-top和margin-left;

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                margin-top: 50px;
                margin-left: 100px;
            }

最后一个不支持使用哦！！！

为什么使用浮动？如何清除浮动

为什么会使用浮动？

块级元素往往独自占一行的位置，如果我们想要两个、三个甚至多个块级元素在一行上显示怎么办？
这时候我们就要用到浮动float，float浮动后块级和块级之间是紧紧挨着的，不会有间距存在，而inline-block虽然也能在一行显示，但中间会有间距存在，且不好去除。

为什么清楚浮动

我们想要这种效果

实际效果

所以为了解决父级高度塌陷问题，就需要清除浮动
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

方法一：在父元素的最后加一个冗余元素并为其设置为clear:both；

效果：

方法二：采用伪元素，这里我们使用：after。添加一个类clearfix：（推荐此方法)

效果：

方法三：给父级元素单独定义高度

效果：

方法四：父级div定义overflow：hidden

效果：

有几种定位方式？参考点是什么？

js中获取DOM元素有几种方式

JS获取DOM元素的方法（8种）

document.getElementById('id');                  通过ID获取
document.getElementsByName('name');             通过name属性
document.getElementsByTagName('div');           通过标签名
document.getElementsByClassName('classname');   通过类名
document.querySelector('.animated');            通过选择器获取一个元素
document.querySelectorAll('.animated');         通过选择器获取一组元素
document.documentElement                        获取html的方法document.documentElement是专门获取html这个标签的
document.body                                   获取body的方法document.body是专门获取body这个标签的。  

js和jquery的节点操作·

js中节点操作

document.createElement()   创建节点

node.removeChild()         从当前节点移除该子节点

node.appendChild()         追加子节点

obj.parentNode             获取父节点

obj.childNodes             获取子节点 

obj.firstChild             第一个子节点

obj.lastChild              最后一个子节点

obj.previousSibling        获取前一个兄弟节点

obj.nextSibling            获取后一个兄弟节点


obj.parentElement             获取父元素

obj.children                  获取子元素

obj.firstElementChild         获取第一个子元素

obj.lastElementChild          最后一个子元素

obj.previousElementSibling    获取前一个兄弟元素

obj.nextElementSibling        获取后一个兄弟元素

属性操作

node.getAttribute()           返回当前元素节点的指定属性

node.setAttribute()           为当前元素节点新增属性

node.hasAttribute()           返回一个布尔值，表示当前元素节点是否包含指定属性

node.removeAttribute()        从当前元素节点移除属性

parent只能找一层父元素，parents能找多级

jq中节点操作

创建节点 $('<div></div'> ）创建一个div标签

append()        在被选元素的结尾插入内容 父.append(子)  作为他的最后一个子元素

appendTo        在被选元素的结尾插入内容 子.appendTo(父)
  
prepend         在被选元素的开头插入内容 父.prepend(子) 
   
prependTo       在被选元素的开头插入内容 子.prependTo(父)

before          在被选元素之后插入内容 后.before(前) 

insertBefore    在被选元素之后插入内容  前.insertBefor(后)

after           在被选元素之前插入内容 前.after(后) 

insertAfter     在被选元素之前插入内容  后.insertAfter(前)

peopend（） 将参数内容插入到每个匹配元素前面 元素内部  也就是当前元素中的第一个子元素

清空节点与删除节点
empty：清空指定节点的所有元素，自身保留(清理门户)
remove：相比于empty，自身也删除（自杀）

C3之2D转换

一、2D转换

1.translate 移动（左负右正，上负下正）

 （1）transform：translate（300px,200px）;
     表示水平向右平移300px,竖直向下平移200px

 （2）transform：translateX（300px）；/ transform：translateY（200px）；
     表示只有一个方向的移动

2.rotate 旋转（顺时针为正，逆时针为负）
   transform：rotate（50deg）;
   表示顺时针旋转50度

3.scale（x） 缩放
 （1）transform:scale（x,y）; x表示水平，y表示垂直

 （2）transform：scaleX（0.8）；/ transform：scaleY（1.2）；

4.skew 倾斜、扭曲

5.transition 过渡效果
  用法：transition:transform(属性名) 1s(时间) linear(频率) 1s(延时)；

jQery中的ajax里面的东西能省略着写嘛 可以

操作小题

<body>
    <!-- 点击定位  左边100 上50 宽100 背景红色 字体14 边框 -->
    <button class="btn">定位</button>

    <script>
        //获取 按钮 
        var btn=document.querySelector('.btn');
        var body=document.querySelector('body');
        //为按钮添加单击事件
        btn.addEventListener('click',function(){
            var div=document.createElement("div");
            body.appendChild(div);
            div.style.width='100px';
            div.style.height='100px';
            div.style.backgroundColor='red';
            div.style.fontSize='14px';
            div.style.border='1px solid #000';
            div.style.position='absolute';
            div.style.top='50px';
            div.style.left='100px';
        })
    </script>

</body>

## js中的window.onload和jQuery中的ready()的区别
     window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
     $(document).ready()是DOM结构绘制完毕后就执行，不必等到页面所有元素加载完毕。

jquery中的筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

另一个

jquery中让元素显示隐藏

方法一：

$('#id').css('display','none');

$('#id').css('display','block');

方法二：

$('#id').hide();

$('#id').show();

方法三：

$("#div1").attr("display","block"); 

$("#div1").attr("display","none"); 

append Aftre befor prapend的区别

append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点）
after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）

选择器权重

选择器	权重
!important	Infinity(无限大)
行列样式	1000
Id选择器	0100
Class选择器/属性/伪类	0010
标签选择器	0001
*通配符选择器	0000 (大于默认样式与继承验样式)
继承样式	权重最小(比*通配符还小)