JS CSS 学习

1.页面加载

js如何实现 
$("#page-wrapper").load("./flow_path/flow_path.html");

2.nesttable学习

class标签
    dd 修饰拖拽的最外层div
    dd-list 修饰列表ol
    dd-item 修饰li
    dd-handle 修饰列表中的父级div
属性
    data-id 自定义id

3.jquery

1. 选择器
   1.1 不选择not 
$("form input[type=text]").not("#create_id").not("#create_date").val("");
   1.2 属性选择器[attribute=name]  下下标eq() 修改属性prop
$("form input[type=radio]").eq(0).prop("checked","true");
   1.3 清空子元素 empty() ，清空选中元素及子元素 remove()
$("#device-set").empty();
   1.5 单选框选中用checked为true 下拉框选中 直接用val()修改值即可
   1.6 选择子元素第一个div  parent_div.children("div:first").remove();
   1.7 选择上一个兄弟元素 prev() ；prevAll() 可入参数
   1.8 选择下一个兄弟元素 next() ; nextAll() 可入参数
   
   1.9 选择父元素 parent() parents("param")
   1.10 从当前元素向上找最近一个tr $(e.target).closest("tr")
   1.11 第几个子元素 nth-child()
   1.12 获取所有兄弟元素 siblings   可入参数
2. 追加元素的几个方法   
   2.1 添加子元素在最后 append
   2.2 添加子元素在最前 prepend
   
3. 绑定点击事件
   $(".main-container .steps-container .step .icon i").on("click",function () {}）
4. 获取当前点击对象 $(this);
5. 判断元素是否在数组里存在 参数1要判断的字符串 参数2在这个数组里查找判断 
    $.inArray("fa-check",class_list) >= 0 ? flag=0 : flag=1; 
6. each循环数组
$.each(数组,(下标,值) =>{}）
7. select联动
select_linkage:() =>{
    $('#customer-name').on('change',()=>{
        let selected = $('#customer-name option:selected').text();
        if ("因特尔" == selected){
            $('#cn-attribute').val('非铜');
        }
    })
}
8.获取自定义属性
$(e.target).data("title");

4.css

display: flex;//布局类型
justify-content；//元素位于容器对齐方式
position：relative; //相对定位
position：absolute; //绝对定位
align-items: center; //属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
linear-gradient(to right, red, yellow)//从左侧开始的线性渐变，从红色开始，转为蓝色
border-left-color:transparent; //左边框颜色为透明
margin:3% 0 0 4%; //外边距
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14); //阴影
border-radius:5px; //圆角
overflow: hidden; 超出隐藏
opacity 不透明的级别

动画
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计
animation-iteration-count: n|infinite;  动画播放次数 n次或者无限次
animation-timing-function: linear; 动画从头到尾的速度是相同的
white-space:nowrap; 强制不换行
@keyframes spin {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
}
transformtransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
rotate 2D旋转
deg 角度

display: flex
//对齐方式
flex-direction:row （横向）
flex-direction:column （纵向）
flex-wrap: wrap  （元素换行   默认是不换行nowrap）
justify-content （元素在页面上的排序）
align-items : flex-start;  （元素上对齐）
align-items : flex-end;  
align-items : center;    
align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠
align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

5.vue

绑定样式
.thin{
        color:red;
    }
    .size{
        font-size: 20px;
    }
<p :class=['thin',{size:flag}]></p>

 var vm=new Vue({
        el:'#app',
        data:{
            flag:false
        },
        methods:{

        }
    })

//阻止默认行为prevent
<a @click.prevent=""></a>
//字符串过滤
this.llist.filter(item =>{
    if (item.name.includes(keywords)){//包含返回true

    }
})