Python系统学习-16

1.jquery的DOM文档操作

1.1兄弟之间插入

$('p').after('<h3>alex</h3>');
$('<h3>女神</h3>').insertAfter('p');
$('p').replaceWith('结婚了');
$('<h5>哈哈哈</h5>').replaceAll('h3');

初始化的时候，有初始化渲染开销对于文档 DOM 如果是频繁性的切换建议使用 display：block|none addClass

少量的切换建议使用创建元素删除元素性能消耗创建->销毁

###1.2父.append(子) 子元素可以是 string js对象 jquery对象

追加到父元素中的第一个元素
js $(子).appendTo(父)
prepend() 方法在被选元素的开头（仍位于内部）插入指定内容

$('.box').prepend('<h5>哈哈哈2</h5>')

删除节点事件保留

$('button').detach();

detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。

2.事件对象

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！

//a form  event.preventDefault();阻止默认事件
           event.preventDefault();
           //阻止冒泡
           event.stopPropagation();

3.换肤

<a href="javascript:void(0)">单击此处什么也不会发生</a>

z-index:属性设置元素的堆叠顺序。z-index对应的值比另一个大的话，大的值对应的图在上面。

4.jquery的位置信息

innerWidth innerHeight 内部宽和高不包含border

outerHeight outerWidth 外部宽和高包含border

$('.box').innerHeight()
$('.box').outerWidth()

5.滚动固定导航栏

$(document).scroll(function () {
            //获取黄色的盒子到顶部的距离
           var top =  $('.content').offset().top;
           var docScrollTop = $(document).scrollTop()

            if (docScrollTop > top){
               $('.fix_header').show();
            }else {
                 $('.fix_header').hide();
            }
        });

6.事件委托

<body>
<ul>

    <li>alex1</li>
    <li>alex2</li>
    <li>alex3</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
       $('ul li').click(function () {
           alert($(this).text());
       })

        //事件委托
        $('ul').on('click','li',function () {
            alert($(this).text())
        })
        });
</script>
</body>

数组遍历使用forEach

var arr = ['alex','etaibai','nv'];
        arr.forEach(function (el,index) {
            console.log(el,index);
        });

jquery伪数组遍历,使用each

$('li').each(function (index,el) {
            console.log(el);
            console.log(index);
        })

7.json的使用

//后端响应回来的数据 json字符串
    var a={"name":"tom","sex":"男","age":"24"};  //json
    var b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr
    console.log(JSON.parse(b));     #变成json对象
    console.log(JSON.stringify(a));  #变成json字符串

1.Less是css高级语言
gulp webpack上线