05-jQuery对象(CSS)

最新推荐文章于 2022-08-15 21:20:12 发布

guardwhy

最新推荐文章于 2022-08-15 21:20:12 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/111515630

版权

4.3 CSS相关

4.3.1 jQuery操作类

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery操作类相关</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.class1{
		width: 100px;
		height: 100px;
		background: red;
	}
	.class2{
        border: 10px solid #000;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>添加操作</button>
<button>删除操作</button>
<button>切换操作</button>


<div></div>
<script type="text/javascript">
  $(function (){
    /*
	1.addClass(class|fn)
	作用: 添加一个类要添加多个, 多个类名之间用空格隔开即可.
	2.removeClass([class|fn])
	作用: 删除一个类,想删除多个, 多个类名之间用空格隔开即可。
	3.toggleClass(class|fn[,sw])
	作用: 切换类有就删除, 没有就添加。
	*/
	let btns = document.getElementsByTagName("button");
	// 添加类
	btns[0].onclick = function (){
	  $("div").addClass("class1 class2");
	}
    // 删除类
    btns[1].onclick = function (){
      $("div").removeClass("class2 class1");
    }
	// 切换操作
	btns[2].onclick = function (){
	  $("div").toggleClass("class2 class1")
	}

  });
</script>
</body>
</html>

执行结果

4.3.2 jQuery文本值

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery文本值相关</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 100px;
		height: 100px;
        border: 1px solid #000;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
<script type="text/javascript">
	$(function (){
      /*
	  1.html([val|fn])
	  和原生JS中的innerHTML一模一样
	  2.text([val|fn])
	  和原生JS中的innerText一模一样
	  3.val([val|fn|arr])
	  */
	  let btns = document.getElementsByTagName("button");
	  btns[0].onclick = function (){
	    $("div").html("<p>我亦飘零久，十年来，深恩负尽，死生师友。</p>");
	  }
	  btns[1].onclick = function (){
	    console.log($("div").html());
	  }
	  btns[2].onclick = function (){
        $("div").text("绿蚁新醅酒，红泥小火炉。晚来天欲雪，能饮一杯无?");
	  }
	  btns[3].onclick = function (){
	    console.log($("div").text());
	  }

	  btns[4].onclick = function (){
	    $("input").val("请输入内容");
	  }
	  btns[5].onclick = function (){
	    console.log($("input").val());
	  }
	});
</script>
</body>
</html>

执行结果

4.3.3 jQuery操作CSS样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery操作CSS样式</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div></div>
<script type="text/javascript">
  $(function (){
    // 1.每个设置
	$("div").css("width", "100px");
	$("div").css("height", "100px");
	$("div").css("background", "red");

	// 2.链式设置
	$("div").css("width", "100px").css("height", "200px").css("background", "green");
	// 3.批量设置
	$("div").css({
	  width:"200px",
	  height:"100px",
	  background: "green"
	});

	// 4.获取CSS样式值
	console.log($("div").css("background"));
  });
</script>
</body>
</html>

执行结果

4.3.4 jQuery位置和尺寸操作

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery位置和尺寸操作</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.father{
		width: 150px;
		height: 150px;
		background: green;
        border: 30px solid #000;
		margin-left: 50px;
		position: relative;
	}
	.son{
		width: 100px;
		height: 100px;
		background: blueviolet;
		position: absolute;
		left: 50px;
		top: 50px;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<script type="text/javascript">
  $(function (){
	// 1.拿到button
	let btns = document.getElementsByTagName("button");
	// 2.监听获取
	btns[0].onclick = function (){
	  // 2.1 获取元素的宽度
	  console.log("元素宽度:" + $(".father").width());
	  // 2.2 offset：获取元素距离窗口的偏移位
	  console.log("元素距离窗口的偏移位:" + $(".son").offset().left);
	  // 2.3 position：获取元素距离定位元素的偏移位
	  console.log("元素距离定位元素的偏移位:" + $(".son").position().left);
	}
	// 3.监听设置
	btns[1].onclick = function (){
	  // 3.1 设置元素的宽度
	  $(".father").width("500px");
	  // 3.2 元素距离窗口的偏移位
	  $(".son").offset({
		left:10
	  });
	  // 3.3 position方法只能获取不能设置,只能通过CSS设置
	  $(".son").css({
		left: "10px"
	  });
	}
  });
</script>
</body>
</html>

执行结果

4.3.5 jQuery的scrollTop

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery的scrollTop</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.scroll{
		width: 200px;
		height: 200px;
        border: 1px solid #000;
		overflow: auto;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="scroll">
  1.我亦飘零久，十年来，深恩负尽，死生师友。——顾贞观《金缕曲二首》2.桃李春风一杯酒，江湖夜雨十年灯。——黄庭坚《寄黄几复》
  3.雨中黄叶树，灯下白头人。——司空曙《喜外弟卢纶见宿》4.人间有味是清欢。——苏轼《浣溪沙 从泗州刘倩叔游南山》
  5.绿蚁新醅酒，红泥小火炉。晚来天欲雪，能饮一杯无？——白居易《问刘十九》6.我有一瓢酒,可以慰风尘。——韦应物《简卢陟》
  7.少年听雨歌楼上，红烛昏罗帐。壮年听雨客舟中，江阔云低、断雁叫西风。而今听雨僧庐下，鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。——蒋捷《虞美人 听雨》
  8.君埋泉下泥销骨，我寄人间雪满头。——白居易《梦微之》9.直道相思了无益，未妨惆怅是清狂。——李商隐《无题六首其三》
  10.欲买桂花同载酒，终不似，少年游。——刘过《唐多令·芦叶满汀洲》11.人言落日是天涯，望极天涯不见家。已恨碧山相阻隔，碧山还被暮云遮。——李觏《乡思》
  12.以色事他人，能得几时好。——李白《妾薄命》13.山有木兮木有枝，心悦君兮君不知。——《越人歌》14.从此无心爱良夜，任他明月下西楼。——李益《写情》
  15.故园便是无兵马，犹有归时一段愁。——陈与义《送人归京师》16.我是人间惆怅客，知君何事泪纵横，断肠声里忆平生。——纳兰性德《浣溪沙 残雪凝辉画冷屏》
</div>
<button>获取</button>
<button>设置</button>
<script type="text/javascript">
  $(function (){
    // 1.拿到button
	let btns = document.getElementsByTagName("button");
	// 2.监听获取
	btns[0].onclick = function (){
	  // 2.1 获取滚动的偏移位
	  // console.log($(".scroll").scrollTop());
	  // 2.2 获取网页滚动的偏移位
      console.log($("body").scrollTop()+$("html").scrollTop());
	}
	// 3.设置网页偏移
	btns[1].onclick = function (){
	  // 3.1 设置滚动的偏移位
	  // $(".scroll").scrollTop(200);
	  // 3.2 设置网页滚动偏移位
	  $("html,body").scrollTop(300);
	}
  })
</script>
</body>
</html>

guardwhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-jQuery对象(CSS)

4.3 CSS相关4.3.1 jQuery操作类代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery操作类相关</title> <style type="text/css"> *{ margin: 0; padding: 0; } .class1{ width: 100px; h
复制链接

扫一扫