写h5常用到的一些js，css，jq以及常遇到的一些问题

1. h5的自适应

<script>
        // 动态计算 rem 换算px和rem  px:rem 100:1
        document.addEventListener("DOMContentLoaded",function(){
            document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
        });
        window.onresize = function(){
            document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
        }
    </script>

2. h5封装组件即使用

封装组件：

<style>
    .page-footer{
        background-color: #247AD0;
        height: 4.65rem;
        color: #fff;
        font-size: 0.24rem;
        text-align: center;
    }
    .page-footer .linkArr a{
        text-decoration: none;
        color: #fff;
        position: relative;
        line-height: 0.16rem;
    }
    .page-footer .linkArr a:not(:first-child) {
        margin-left: 0.4rem;
    }
    .page-footer .linkArr a:not(:first-child):before{
        content: '|';
        position: absolute;
        left: -0.2rem;
        top: 0.03rem;
    }
    .page-footer .tel{
        margin-top: 0.45rem;
    }</style>
<footer class="page-footer b-center">
    <div>
        <div class="linkArr">
            <a href="javascript:;">首页</a>
            <a href="javascript:;">产品功能</a>
            <a href="javascript:;">联系我们</a>
        </div>
        <p class="tel">全国免费热线：400-0033-166</p>
        <p>版权所有 2019 万商云集 蜀ICP备12001963号</p>
    </div>
</footer>

使用组件：

<div id="header-page"></div>

<script>
    // 初始化组装公用组件
    $('#footer-page').load('./components/footer');
</script>

3. 函数的封装及使用

<script>

    $(function(){
        getLinkList();
    })

    function getLinkList() {
      $.ajax({
        type: 'POST',
        url: lanh.apiHost.replace(/:\d+/g, '') + 'marketcase/market_case/list',
        data: { },
        dataType: 'json',
        success: function(res){
        
        },
        error: function(xhr, type){
　　　　　　　alert(xhr.responseJSON.message)
 　　　　}

      });
    }
</script>

4. 页面间的跳转

window.location.href = './about-us'

5. 模板字符串

let linkhtml = '';
for(let i = 0; i < list.length; i++){
     linkhtml += `<div>
                   <a href="${ list[i].outLink }" target="_blanck">
                    <img src="${ list[i].logo }" alt="">
                   </a>
                  </div>`;
}

6. jq在元素末尾插入子节点

$('#outlink').append(linkhtml);

 7. jq搜索所p元素中的后代 span 元素，并将其颜色设置为红色

$("p").find("span").css('color','red');

8. jq遍历li元素绑定点击事件

    $('.sub-menu li').each(function () {
      $(this).click(function () {
        
      })
    })

9. jq事件on和click

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

为.li元素的后代.deleteon元素添加点击事件

$(".li").on('click', ".deleteon", function(){
    $(this).parent().remove(); 
})

10. jq隐藏可见的 <p> 元素

$(".btn1").click(function(){
  $("p").hide();
});

11. jq显示出隐藏的 <p> 元素

$(".btn2").click(function(){
  $("p").show();
});

12. jq添加删除class，获取自定义属性

        let linkLi = $('.link-box-top li'); //获取所有的li
        linkLi.each(function () { //遍历li
            $(this).click(function () { //为每个li绑定点击事件
                let id = $(this).attr('data-id'); //获取自定义data-id属性值
                linkLi.removeClass('link-me-active'); //所有li移除link-me-active的class属性
                $(this).addClass('link-me-active'); //为点击的li元素添加link-me-active的class属性
            })
        })    

13. jq检查被选元素是否包含指定的 class

$(selector).hasClass(class)

 14. 从任何 p 元素中移除 id 属性

$("button").click(function(){
  $("p").removeAttr("id");
});

15. 伪元素关闭X按钮

    <div class="close"></div>

    /* 菜单关闭按钮*/
    .page-header .close{
        position: relative;
        width: 0.435rem;
        height: 0.435rem;
        display: none;
    }
    .page-header .close:after{
        content: '';
        width: 0.07rem;
        height: 0.435rem;
        position: absolute;
        left: 0;
        background-color: #fff;
        transform: rotate(-45deg);
    }
    .page-header .close:before{
        content: '';
        width: 0.07rem;
        height: 0.435rem;
        position: absolute;
        left: 0;
        background-color: #fff;
        transform: rotate(45deg);
    }

16. 非第一个元素前添加伪元素‘|’

    <div class="linkArr">
        <a href="./index">首页</a>
        <a href="./list">客户案例</a>
        <a href="./about-us">联系我们</a>
    </div>

   .linkArr a:not(:first-child):before{
        content: '|';
        position: absolute;
        left: -0.2rem;
        top: 0.03rem;
    }