HTML——jQuery—盒子模型

最新推荐文章于 2020-10-28 11:04:38 发布

Jhinhua

最新推荐文章于 2020-10-28 11:04:38 发布

阅读量142

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104952290

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				background-color: plum;
				padding: 10px;
				border: solid 2px cadetblue;
				margin: 10px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
		盒子模型包含四个部分：
			内容区  内边距  边框  外边距
		
		width()/height()  --- 内容区的大小
		innerWidth()/innerHeight() 内容区+内边距
		outerWidth()/outerHeight() 内容区+内边距+边框
		outerWidth(true)/outerHeight(true) 内容区+内边距+边框+外边距
		 -->
		 
		 <div></div>
		 
		 
		 <script>
			 console.log("内容区大小：(" + $("div").width() + "," + $("div").height() + ")") 
			 console.log("内容区+内边距大小：(" + $("div").innerWidth() + "," + $("div").innerHeight() + ")") 
			 console.log("内容区+内边距+边框大小：(" + $("div").outerWidth() + "," + $("div").outerHeight() + ")") 
			  console.log("内容区+内边距+边框+外边距大小：(" + $("div").outerWidth(true) + "," + $("div").outerHeight(true) + ")") 
		 </script>
	</body>
</html>

jQuery语法部分总结

JQ语法
		$(选择器).action()
		
		操作文本的
			html
			text  
			val 
		操作属性的
			attr
			移除属性
				removeAttr
		操作css 
			css()
		html-css 的方法 
			 操作类的
					addClass
					removeClass
					hasClass 判断是否有指定类
			操作节点的
				作为子节点添加的
					prepend/prependTo
					append / appendTo
				平级的
					after
					before
					insertBefore
					insertAfter
				替换
					replaceWith
					replaceAll
				移除
					remove
					empty
						前面的选择器是谁 要操作的就是谁
							$("div").remove()
								要找到所有的div  都给删除掉
							$("div").remove(".box")
								找到所有的div  删除类为box的div
				包裹节点
					wrap -- 给自己添加父节点
					unwrap 去除包裹
					wrapAll --- 根据选择器匹配到的标签包裹在一个父节点下
					wrapInner --- 给自己添加一个子节点

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——jQuery—盒子模型

盒子模型 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 300...
复制链接

扫一扫