JQuery基础知识

最新推荐文章于 2024-10-16 10:17:39 发布

我学不会前端啊！！！

最新推荐文章于 2024-10-16 10:17:39 发布

阅读量100

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_50696999/article/details/109563632

版权

JQuery

JQuery简介

JQuery是js的封装库，提供了大量的APL，是目前使用最流行最广泛的js库。

引用方式

在head和body中都可以引入，注意放在页面的标签后面必须添加入口函数

$(function(){})

DOM节点关系

父节点 parent（）
子节点 children（）
所有的兄弟节点 Siblings（）
后面的一个兄弟节点 next（）
前面的一个兄弟节点 prev（）
后面的所有兄弟节点 nextAll（）
前面的所有兄弟节点 prevAll（）
添加类名 addClass（‘类名’）
移出类名 removeClass（“类名”）
切换类名 toggleClass（“类名”）

DOM 增删语法

$("#box").append("我是尾部追加的元素")  ；
$("#box").prepend("我是头部追加的元素"）;
$("#box").after("我是外部末尾添加的元素"）;
$("#box").before("我是外部头部追加的元素"）;
$("我是内部追加的元素").appendTo($("#box"));
$("#box").remove();//删除自身的所有的子元素
$("#box").empty();//删除子元素但是保留自身
$("#box").html("");//和上面的empty的用法相同

JQuery动画

hide（）隐藏 show（）隐藏
$(selector).animate(styles,speed,easing,callback)

掉钱案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.box{
				width: 100%;
				height: 100%;
				background-color: black;
			}
			span{
				position:relative;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<script src="jquery.min.js">
		</script>
		<script>
			function money(){
				// 我们要创建span标签放在div里面去
				var $span=$("<span>王宇</span>")
				// 随机数
				var left=Math.random()*1300
				$span.css({
					"fontSize":"30px",
					"color":"red",
					"left":left+"px"
				})
				$(".box").append($span);
				$span.animate({
					"top":"600px"
				},1000,function(){
				
					$(this).remove();
				})
			}
			setInterval(money,1000)
		</script>
	</body>
</html>