4.操纵节点样式

最新推荐文章于 2024-07-10 21:37:49 发布

「已注销」

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量199

点赞数

分类专栏： jQuery 文章标签： java 开发语言

本文链接：https://blog.csdn.net/qq_67192586/article/details/123959038

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQ上传文件案例

<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		function test(){
			// 将填充的html代码转为jQ对象
			var div = $('<div><input type="file" /><input type="button" value="删除" onclick="del(this)"/></div>');
			$('#mydiv').before(div);
		}
		
		function del(obj){	// obj是传过来的那个按钮---js的对象
			$(obj).parents("div").remove();
		}
	
	</script>
  </head>
  <body>
	<h1>上传文件</h1>
	<input type="button" value="上传文件" onclick="test()"/>
	<div id="mydiv"></div>
  </body>
</html>

操纵节点样式

常用方法

1.操纵style样式

操作css样式

css(css)

css(css,val)

css({css1:val,css2:val2,....})

2.操纵class样式:

操作类样式

hasClass(class)

addClass(class) ----->这个样式是追加,不是覆盖

removeClass(class)

toggleClass(class)

<style>
		div{
			border:1px black solid;
			font-size:15px;
			height:160px;
			width:160px;
			padding-top:140px;
			padding-left:140px;
		}
	</style>
	<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		function testover(){
			$("#mydiv01").css("background-color","yellowgreen");
			$("#mydiv01").css("font-size","30px");
		}
		
		function testout(){
			/* $("#mydiv01").css("background-color","white");
			$("#mydiv01").css("font-size","15px");*/
			$("#mydiv01").css({"background-color":"white","font-size":"15px"});
		}
	</script>
  </head>
  <body>
		<div id="mydiv01" onmouseover="testover()" onmouseout="testout()">点我</div>
  </body>
</html>

方式2

	<style>
		div{
			border:1px black solid;
			font-size:15px;
			height:160px;
			width:160px;
			padding-top:140px;
			padding-left:140px;
		}
		.over{
			background-color:yellowgreen;
			font-size:30px;
		}
		.out{
			background-color:white;
			font-size:15px;
		}
	</style>
	<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		function testover(){
			$("#mydiv01").removeClass("out").addClass("over");
		}
		
		function testout(){
			$("#mydiv01").removeClass("over").addClass("out");
		}
	</script>
  </head>
  <body>
		<div id="mydiv01" onmouseover="testover()" onmouseout="testout()">点我</div>
  </body>
</html>

<style>
		div{
			border:1px black solid;
			font-size:15px;
			height:160px;
			width:160px;
			padding-top:140px;
			padding-left:140px;
		}
		.over{
			background-color:yellowgreen;
			font-size:30px;
		}
		.out{
			background-color:white;
			font-size:15px;
		}
	</style>
	<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		function testclick(){
		/*
			if($("#mydiv01").hasClass("over")){	// 如果有样式,就删除
				$("#mydiv01").removeClass("over");
			}else{	// 如果没有样式,就添加
				$("#mydiv01").addClass("over");
			}
			*/
			// toggleClass等同于上面的功能,有就添加样式,没有就删除
			$("#mydiv01").toggleClass("over");
		}
	</script>
  </head>
  <body>
		<div id="mydiv01" onclick="testclick()">点我</div>
  </body>
</html>