第十七次作业 jquery和dom的支持添加删除图片 css属性

最新推荐文章于 2024-07-29 13:58:45 发布

0(>^ω^<)0

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量560

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_66328839/article/details/123687039

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery-1.12.4xxxxc).js" type="text/javascript" charset="utf-8"></script>
	<style>
		.hello {
			height: 50px;
			width: 50px;
			background-color: #9932CC;
		}
	</style>

</head>

<body>
	<!-- =========================================//课堂笔记===================================================== -->
	<button id="btn">简单的一个按钮</button>
	<div id="div1" class="hello"></div>
	<div id="div2"></div>
	<button id="color">隔行变色</button>
	<h1>你喜欢的女明星</h1>
	<ul>
		<li>甜甜</li>
		<li>仅仅</li>
		<li>欢欢</li>
		<li>丽丽</li>
	</ul>
	<hr>
	用户名：<input type="text" id="s"><span id="span"></span><br>
	<script type="text/javascript">
		//两种声明方式
		$("#btn").click(function () {

			$("#div2").addClass("hello")
		})


		$("#btn").bind("click", function () {
			// addClass方法来实现帮某一个标签添加class的属性值
			$("#div2").addClass("hello")
		})

		//两种声明方式
		$("#color").bind("click", function () {
			//设置样式的
			$("li:even").css("background-color", "bisque")
			$("li:odd").css("background-color", "azure")
		})

		$("#color").click(function () {
			$("li:even").css("background-color", "bisque")
			$("li:odd").css("background-color", "azure")
		})


		//获取用户输入信息

		$("#s").blur(function () {
			var uname = ["lili", "lala"]
			var names = $("#s").val(); //获得信息
			console.log(names)
			console.log(uname)
			var index = -1;
			for (i in uname) {
				if (uname[i] == names) {
					var index = 1;
					break;
				}
			}
			//判断有无

			if (index == -1) {
				//没找到，可用
				//添加数据
				$("#span").html("<font color='green'>√</font>")
			} else {
				//找到重复了 不可用
				$("#span").html("<font color='red'>X</font>")
			}
			//添加数据
		})

	</script>

	<!-- ====================================================分割符====================================================================== -->

	<button id="aa">点我添加图片</button>
	<button id="vv">删除图片</button>
	<div id="dd">
		<img src="img/hsidh.jpg" width='200px' height='150px' id="ss" />
	</div>
	<div id="erzi"></div>


	<script>
		$("#aa").click(function () {
			var uimg = $("<img src='img/下载.jpg' width='200px' height='150px'/>");
			$("#erzi").append(uimg)
		})


		$("#vv").click(function () {
			var l = $("#ss").val();
			$("#dd").remove();
		})


	</script>




	<!-- ====================================================分割符====================================================================== -->


	请输入行<input id="row" name="row" />
	请输入列<input id="col" name="col" /><br />
	<button id="que">生成</button>

	<div id="tab"></div>
	<script type="text/javascript">
		jQuery || require("jquery")



		$("#que").click(function () {
			var row = $("#row").val();
			var col = $("#col").val();

			var table = $("<table border='1px' width='200px' height='200px '></table>");//创建table标签

			for (var i = 0; i < row; i++) {
				var tr = $("<tr></tr>")   //创建tr标签
				for (var j = 0; j < col; j++) {
					var td = $("<td></td>");//创建td标签
					$(tr).append(td);
				}
				$(table).append(tr);
			}
			$("#tab").append(table);

		})

			//----------------------------------------------第二遍--------------------------------------
			// $("#que").click(function(){
			// 	//获得用户输入的值

			// 	var row = $("#row").val();
			// 	var col = $("#col").val();

			// 	var table = $("<table border='1px' height='200' width='200'></table>")//新建table文件

			// 	for (var i = 0; i < row; i++) {
			// 		var tr = $("<tr></tr>")
			// 		for (var j = 0; j <col; j++) {
			// 			var td = $("<td></td>")
			// 			$(tr).append(td);
			// 		}
			// 		$(table).append(tr);
			// 	}
			// 	$("#tab").append(table);
			// })
			
	</script>
	<button><a href = "#btn" style = "font-size: 10px;" > 点我回去</a></button>
</body>

</html>

0(>^ω^<)0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十七次作业 jquery和dom的支持添加删除图片 css属性

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.12.4xxxxc).js" type="text/javascript" charset="utf-8"></script> <style> .hello { height: 50px;
复制链接

扫一扫