前端day09（微博发布案例）

01- js获取dom节点的宽高

        var div = document.querySelector("div");
        console.log(div.offsetWidth);

div.offsetWidth包括width、padding、border，不包括margin

 02- jq获取宽高

$("div").width()是本身的width

$("div").innerWidth()是包括padding的width

$("div").outerWidth()是包括border的width

$("div").outerWidth(true)是包括margin的width

       $(function(){
        console.log($("div").width());
        console.log($("div").innerWidth());
        console.log($("div").outerWidth());
        console.log($("div").outerWidth(true));
       })

03- 获取被卷起来的部分

        $(function(){
            $("button").click(function(){
                console.log($(document).scrollTop(0));
            })
        })

在这段代码中，document 是指 HTML 文档对象，而 $ 是 jQuery 对象的缩写，表示 jQuery 的全局函数，$(document) 则是 jQuery 对 HTML 文档对象的包装，返回一个 jQuery 对象，可以继续使用 jQuery 函数对 HTML 文档进行操作。在这段代码中，$(document).scrollTop(0) 的作用是滚动到文档顶部，也就是让页面回到最上面。

04- 事件绑定（有3种方法）

 一、$("div").on("mouseenter click",function(){})

on中添加多个功能事件---------->方法优势1：用on同时绑定2个功能

// 方法优势1：用on同时绑定2个功能
            $("div").on("mouseenter click",function(){
                console.log("鼠标移入/点击");
                $("div").append("动态添加的");
            // on可以绑定多个功能，用逗号分割就可以
            })

二、$("ul").on("click","li",function(){}

on后接多个""，其中第一个为事件功能，第二个为被操作的节点元素------->方法优势2：可以委派，把原来加给子元素的事件绑定在父元素身上

            // 方法优势2：可以委派，把原来加给子元素的事件绑定在父元素身上
            $("ul").on("click","li",function(){
                console.log("点击到了li");
            })

三、$("div").on("click","a",function(){}给新添加的元素添加绑定事件功能

方法优势3：动态创建的元素,click()没法创建绑定事件

                    on()可以给动态生成的元素绑定事件

05- 解绑：$("div").off("click")--->解绑掉div的点击事件

        $(function(){
            $("div").on("click mouseout",function(){
                console.log("div的on绑定事件");
            })
            $("div").on("click","em",function(){
                console.log("em:div的on绑定事件的事件委托");
            })
            $("button").click(function(){
                $("div").off("click");
            })
        })

解绑后被div委托的em点击事件也被解绑，因为em的点击是基于div点击的前提下的

06- 自动触发事件

前端中的自动触发事件是指在特定条件下，通过程序或浏览器自动触发某个事件。常见的自动触发事件包括：

1. onload事件：当网页加载完成后触发。
2. onchange事件：当表单元素的value值发生改变时触发。
3. onsubmit事件：当表单提交时触发。
4. onclick事件：当鼠标点击某个元素时触发。
5. onmouseover事件：当鼠标移到某个元素上时触发。
6. onkeydown和onkeyup事件：当用户按下或释放某个键盘按键时触发。

这些事件可以通过JavaScript实现自动触发，比如可以通过调用元素的方法，或者动态改变某些属性值来触发事件。自动触发事件在前端开发中广泛应用，可以帮助开发者简化操作，提高用户体验。

    
    
    
    
    
    
    


    
    

    

        提交
    

这段代码的作用是：
当点击页面上的input按钮时，会触发它的click事件。在click事件中，调用triggerHandler方法来手动触发页面上的另一个button按钮的click事件。因此，点击input按钮后会自动提交form表单，跳转到百度页面。

其中，函数$("input").on("click",function(){...})表示注册一个事件监听器，在点击input元素时执行函数内的代码。$("button").triggerHandler("click")表示触发一个button点击事件。由于使用了triggerHandler方法，不会触发浏览器默认行为，即不会执行表单提交操作。

07- 全屏滚动

 fullpage为鼠标滑轮每滑动一下都会全屏滚动显示下一个section（整页）

案例8 微博发布案例

逻辑分为三步：

一、点击发布要获取文本域里的信息

var txt = $("textarea").val().trim();
                if(txt.length<=0){
                    alert("请重新输入")
                    // 并清空文本域
                    $("textarea").val("");
                    return;
                }

二、将获取到的文本信息添加到ul中新创建的li中

（1）创建li使用$("

")方法创建，这是jq方法创建li

（2）将li中传入新添加的内容：lis.html(txt + "删除")

（3） 并把li输入到ul中$("ul").append(lis);

 （4）发布成功后清空文本域里的val

// 创建li
                var lis = $("
");
                // 将li中传入新添加的内容
                lis.html(txt + "删除")
                // 并把li输入到ul中
                $("ul").append(lis);
                // 发布成功后清空文本域里的val
                $("textarea").val("");

三、删除时添加动画并进行删除

这里是新创建的a标签元素，故需要用on方法来对a标签添加点击功能，也就是绑定事件的委托

$("ul").on("click","a",function(){
                    $(this).parent().slideUp(500,function(){
                        $(this).remove();
                    })
                })