jQuery:节点操作(清空/删除节点) 特殊属性操作/jQuery事件机制

最新推荐文章于 2020-12-22 19:07:13 发布

℡清欢

最新推荐文章于 2020-12-22 19:07:13 发布

阅读量688

点赞数

本文链接：https://blog.csdn.net/weixin_44695219/article/details/89365727

版权

节点操作:

empty():清空节点 ----- $("div").empty();

html():清空节点------$("div").html("")//内存泄露

remove():删除节点------$("div").remove()

clone():克隆节点-------

  $(".cls").click(function () {
        alert(111);
    });
    //clone():有一个bool类型的参数：false:不是深度复制，不会复制事件，默认的就是false
    // true:深度复制，事件也会复制
    var $p = $(".cls").clone();
    $p.appendTo($("div"));
});

val()方法:

js获取文本内容：
普通标签的文本内容：innerText textContent innerHTML
表单元素的文本内容：value

jquery获取文本内容：
普通标签：text() html()
表单标签：val()

val():
获取值：对象.val()
设置值：对象.val("值")

焦点获取:focus

焦点失去:blur

例:

$(function () {
        console.log($("#txt").val());

        $("#btn").click(function () {
            $("#txt").val("燃烧我的卡路里");
        })

        //焦点获取，如果文本框有默认值内容，则清空
        //焦点失去，如果文本框没有内容，则显示默认内容
        $("#txt").focus(function () {
            if ($(this).val() == "你好吗我很好") {
                $(this).val("");
            }
        });

        $("#txt").blur(function () {
            if ($(this).val() == "") {
                $(this).val("你好吗我很好");
            }
        });

    });

html()获取文本:

html方法相当于innerHTML

<div>
    <h1>标题标签</h1>
</div>

console.log($("div").html());//可以获取到标签名

console.log($("div").text()); //没有标签名

区别:html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

width方法与height方法:

 //获取div的宽度:width()----不带参数
 console.log($("div").css("width"));//200px 带单位的
 console.log($("div").width());//200 没有单位

 //获取width的值---获取的数值
 console.log($("div").width());//width:200
 console.log($("div").innerWidth());//width+padding
 console.log($("div").outerWidth()); //width +padding +border
 console.log($("div").outerWidth(true)); //width +padding +border +margin

//获取页面可是区域的宽度和高度
//resize():当大小发生改变时触发
$(window).resize(function () {
    console.log($(window).width());
    console.log($(window).height());
})

scrollTop与scrollLeft:

//scrollLeft()  scrollTop()
    //当浏览器中的滚动条滚动时，获取页面滚动上面的距离和左边的距离
    $(window).scroll(function(){
        console.log($(window).scrollLeft());
        console.log($(window).scrollTop());
    });

});

offset方法与position方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .fa {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative; /*子绝父相*/
            margin: 100px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: #f60;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="fa">
    <div class="son"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //获取元素相对于document的距离：offset()----返回是一个对象{top:值，left：值}
        console.log($(".son").offset());{top:300,left:300})

        //获取元素相对于第一个定位的父级元素的位置：position()
        console.log($(".son").position());{top:200,left:200})
    })

</script>
</body>
</html>

jQuery事件发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册 "

click(handler)           单击事件
mouseenter(handler)       鼠标进入事件
mouseleave(handler)       鼠标离开事件

缺点：不能同时注册多个事件

例:

//第一个阶段：简单事件绑定

    //注册简单事件，缺陷：一次只能注册一个事件
     $("p").click(function () {
        alert("给自己打个气！");
     });
     // $("p").click(function () {
          alert("燃烧我的卡路里！");
      });
    $("p").mouseenter(function () {
        alert("哈哈哈哈")
    });

bind方式注册事件:bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});

缺点：不支持动态事件绑定

例:

  //第二阶段：bind()
    //缺点：新增的元素不能使用事件
    
      $("p").bind("click mouseenter",function(){
         alert("周杰伦的歌很好听")
   })
    
     $("p").bind({
         click: function () {
             alert("p标签的点击事件");
         },
         mouseenter: function () {
             alert("p标签的鼠标移入事件");
         }
     });

delegate注册委托事件 :delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

例:

  $("#btn").click(function () {
        $("#box").append($("<p>新增的p标签</p>"));
    });

    // 第三个阶段：委托  缺点:只能注册委托事件,不能给自己注册事件
    // delegate()
    //第一个参数：选择器：事件由谁来执行
    //第二个参数：事件的类型
    //第三个参数：事件处理函数
    $("#box").delegate("p", "click", function () {
        alert("p标签的点击事件");
    });

on注册事件(重点)

 on()注册事件：
 第一个参数：事件类型
 第二参数：要让谁执行
 第三个参数：传入的值
 第四个参数：事件处理函数

例:

 //注册简单事件：
    // $("p").on("click", function () {
    //     alert("p哈哈");
    // })

    //注册委托事件
    $("#box").on("click", "p", function () {
        alert("嘻嘻");
    })

    $("#btn").on("click", function () {
        $("<p>新增的p标签</p>").appendTo($("div"));
    })

事件解绑:off

$("p").off();//取消p所有的事件
$("p").off("click"); //取消p标签的所有的点击事件

触发事件:trigger

$("p").click();
$("p").trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY   对应屏幕最左上角的值
//clientX和clientY   距离页面左上角的位置（忽视滚动条）
//pageX和pageY   距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode 按下的键盘代码
//event.data    存储绑定事件时传递的附加数据

//event.stopPropagation()   阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

return false;//既可以阻止浏览器的默认行为，也可以阻止事件冒泡

例:

<a href="http://www.baidu.com" id="aa">百度</a>

<script src="jquery-1.12.4.js"></script>
<script>
    $("#aa").on("click", function (e) {

        alert("你好");
        // e.preventDefault();//阻止浏览器的默认行为
        // e.stopPropagation();//阻止事件冒泡

        return false;//既可以阻止浏览器的默认行为，也可以阻止事件冒泡

    })

    $("body").on("click", function () {
        alert("body的事件")
    })

</script>

℡清欢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery:节点操作(清空/删除节点) 特殊属性操作/jQuery事件机制

节点操作:empty():清空节点 ----- $("div").empty();html():清空节点------$("div").html("")//内存泄露remove():删除节点------$("div").remove()clone():克隆节点------- $(".cls").click(function () { alert(111); ...
复制链接

扫一扫