33-jQuery-Day03

最新推荐文章于 2024-07-25 14:02:05 发布

哥，你好猛

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量54

点赞数

分类专栏：前端三件套+jQuery 文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/wy1511861159/article/details/120054756

版权

前端三件套+jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery-Day03

第一节、jQuery常见的事件

1.1、预加载事件

当DOM文档（HTML）加载完成后会执行方法。

注意：浏览器会自动的调用

回忆JS中的预加载事件

window.onload = function(){
    //预加载完成执行的动作
}

1.2、jQuery中预加载写法

$(document).ready(function(){
    readPText();
});

$(function(){
    readPText();
})

1.3、jQuery中常用事件

jQuery中事件的绑定

方式一：

元素.on(“事件名”，事件处理函数)

方式二：函数式编程

元素.事件方法名(事件处理函数)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51QwWBc6-1630548017735)(https://i.loli.net/2021/08/26/6ijuJTq23gZmCkD.png)]

submit方法

$(function(){
    $("form").submit(function(e){
        e.preventDefault();//阻止页面的自动刷新
        console.log("表单被提交")
    })
});

为什么阻止form表单的自动刷新：

页面资源只有小部分发生变化，我们每次提交完请求后不需要对整个页面刷新。如果不阻止则会跳转或刷新本页面。为了提高效率，我们只需要对小部分数据重新更新（发请求），我们就需要阻止自动刷新。

同一个元素绑定多个事件

/*			$("#btn1").click(function(){
					console.log("被单击");
				});

				$("#btn1").hover(function(){
					console.log("鼠标悬停了");
				});*/

$("#btn1").on("click",function(){
    console.log("被单击");
});

$("#btn1").on("mouseover",function(){
    console.log("悬停");
});

事件的移除

元素.off(“事件1 事件2…”)

$("#btn1").off("mouseover click");

事件的冒泡

什么是事件冒泡：子元素的事件，后往上层传播。事件冒泡是一直存在的，如果父元素有子元素的事件的监听则会被捕捉。

<body>
    <ul>
    <li>取消</li>
</ul>
</body>

$("ul li").click(function(){
    console.log("取消");
});

$("ul").click(function(){
    console.log("ul");
});

$("body").dblclick(function(){
    console.log("body");
})

输出的结果是：取消 ul

为什么：单击事件在li发生，li本身不具备事件处理。事件后往上冒泡，首先li绑定的click捕捉到行为，触发li的单击事件。紧接着继续往上冒泡，冒泡ul, ul也有一个单击事件的监听，会捕捉这个click行为。再进行往上冒泡，冒泡到body,但是body没有对单击的监听，所有不会触发任何的行为。

阻止事件的冒泡：

e.stopPropagation(); 
或者
return false;

事件的委托

什么是委托：

比如现实生活中，租房

委托人将事件委托给中介（受理人）。中介去帮你去受理这件事情，最后只需要告你即可

JS事件委托：我们可以将事件委托给其父元素，不需要对每一个子元素都绑定事件。

jQuery实现事件的委托

$("ul").on("click","li",function(){
	$(this).css("background-color","red");
});

了解

$("ul").delegate("li","click",function(){
	$(this).css("background-color","red");
});

应用场景：

父元素下每一个子元素都有相同的事件，我们不需要对每一个子元素都绑定事件。
某一个父元素下的子元素是动态添加，我们也将子元素的事件委托给父元素。

jQuery对元素的操作

1、创建元素

$(“字符串”)

var str = "<p class='p1'>我是一段文本</p>";
//将字符串转为jQuery的对象
console.log($(str));

2、添加元素

父元素.append(待添加元素) //待添加元素可以是jQuery ，字符串，原生DOM对象

参数：待添加元素会添加到复原中–在后面添加

父元素.prepend(“待添加的元素”)在指定元素的内部最前面添加

<script type="text/javascript">
    $(function(){
    //往ul中添加元素
    //1.先对button绑定事件
    $("#btn1").click(function(){
        //找到父元素
        //$("ul").append("<li>重庆</li>");
        /*var str = "<li>重庆</li>";
					$("ul").append($("#li1"));*/


        $("body").append( $("<ul></ul>").append("<li>重庆</li>").append("<span>aa</span>"));
    });
});

</script>
</head>
<body>
    <!--	<ul>
    </ul>
<ul>
    <li id="li1">我是另一个li</li>
</ul>-->
<button id="btn1">添加添加元素</button>
</body>

兄弟元素.after(“指定元素”)//添加指定元素的相连的兄弟元素后面

兄弟元素.before(“指定元素”)//添加指定元素的相连的兄弟元素前面

$(function(){
    //往ul中添加元素
    //1.先对button绑定事件
    $("#btn1").click(function(){
        //$("ul").after("<p>我是添加的P标签</p>");
        $("ul").before("<p>我是添加的P标签</p>");
    });
});

</script>
</head>
<body>
    <ul>
    <li id="li1">重庆</li>
<li id="li1">深圳</li>
</ul>

<span>我是一个span</span>
<button id="btn1">添加添加元素</button>
</body>

3、删除元素

/*empty:清空元素中的内容
			 * remove：删除元素自身
			 */
$(function(){
    $("#btn1").click(function(){
        //$("#div1").empty();
        $("#div1").remove();
    });
})

id=“btn1”>添加添加元素

```

3、删除元素

/*empty:清空元素中的内容
			 * remove：删除元素自身
			 */
$(function(){
    $("#btn1").click(function(){
        //$("#div1").empty();
        $("#div1").remove();
    });
})

哥，你好猛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
33-jQuery-Day03

jQuery-Day03第一节、jQuery常见的事件1.1、预加载事件当DOM文档（HTML）加载完成后会执行方法。注意：浏览器会自动的调用回忆JS中的预加载事件window.onload = function(){ //预加载完成执行的动作}1.2、jQuery中预加载写法$(document).ready(function(){ readPText();});$(function(){ readPText();})1.3、jQuery中常用事件
复制链接

扫一扫

专栏目录