DaiXT:Jquery-html网页的数据获取和展示

最新推荐文章于 2021-11-02 19:30:50 发布

与子何如

最新推荐文章于 2021-11-02 19:30:50 发布

阅读量219

点赞数

分类专栏： Jquery 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/dai_xt/article/details/120642662

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>
		<script>
			$(function() {
				//总结jqurey取值的两种方式：$("#id")或者$(".class")
				
				//将内容展示-div
				$("#main").html("利用id进行显示");
				$(".remain").html("利用class进行显示");

				//简单取值
				//分别通过div的id和class进行取值
				var jd1 = document.getElementById('m9').textContent;
				var jd2 = $("#m9").html();
				var jd3 = $(".m9_c").html();
				console.log("简单查询:"+jd1+"---"+jd2+"---"+jd3);
				
				
				//嵌套取值
				//方式1：inputObj-通过class定位范围，然后通过范围内的name锁定value。（input可省略，防止不同类型标签重名）
				//方式2：inputObj2-通过id定位范围，然后通过范围内的name锁定value（button可省略，防止不同类型标签重名）
				var inputObj = $(".main3_class input[name='mm4']").val();
				var inputObj2 = $("#main3 button[name='bb8']").val();
				console.log(inputObj+"-----"+inputObj2);	
				
				
				//标签相同的情况下，进行按照id取值
				var index = $("#m4").index(this);
				var m = $("#m5").eq(index).val()
			    console.log("#m5的value为"+m);
			    
			    //标签相同的情况下，进行按照class取值
			    var index = $(".m4_c").index(this);
				var m = $(".m5_c").eq(index).val()
			    console.log(".m5_c的value为"+m);
				
				
				//格式为：$("class").eq(index).val(); 
				//$("class") 取某个标签的class的值，定位取值范围。
				//eq(index)  然后选取同类型的标签的位置（正向取（index>=0），反向取（index<0））
				//val()      取value值          
				var m1 = $(".main3_class button").eq(-1).val();
				var m2 = $(".main3_class input").eq(-2).val();
				var m3 = $(".main3_class input").eq(0).val();
				var m4 = $(".main3_class input").eq(1).val();
				var m5 = $("#main3 input").eq(1).val();
				
				
				
				console.log(".main3_class button的反向选取的第一个----"+m1);
				console.log(".main3_class input的反向选取的第二个----"+m2);				
				console.log(".main3_class input的正向选取的第一个----"+m3);				
				console.log(".main3_class input的正向选取的第二个----"+m4);
				console.log("#main3 input的正向选取的第二个----"+m4);
				
				
				//按钮练习
				//给按钮赋值名称
				//btn1 通过div的id确定范围，类型[name].html("内容")完成内容的展示
				  var btn1 = $("#main3 button[name='bb8']").html("展示");
				  var btn2 = $(".main3_class button[name='bb8']").html("展示2");
				  //btn3 因为该div下只有一个按钮，所以可以不指定名称
				  var btn3 = $(".main3_class button").html("展示3");
				  
				  //取按钮的value值和名称
				  //通过class 类型[name].val()取按钮的value值
				  var btn4 = $(".main3_class button[name='bb8']").val();
				   //通过class 类型eq(0).val()取按钮的value值，这里只有一个按钮所以可以是0或者-1
				  var btn5 = $(".main3_class button").eq(0).val();
				  //内容展示
				  var btn6 = $("#main3 button").html();
				  var btn7 = $("#main3 button").eq(0).html();
				  var btn8 = $(".main3_class button[name='bb8']").html();
				  alert(btn8);
				
			});
		</script>
	</head>

	<body id="body">
		<div id="main"></div>
		<div class="remain"></div>
		<div id="main3" class="main3_class">
			<input id="m4" class="m4_c" value="h4" name="mm4"/>
			<input id="m5" class="m5_c" value="h5" />
			<input id="m6" class="m6_c" value="h6" />
			<input id="m7" class="m7_c" value="h7" />
			<input id="m8"  class="m8_c" value="h8" name="bb8"/>
			<button id="m8" class="m8_c" value="btn1" name="bb8"></button>
			<span id="m9" class="m9_c">无value无name的查询</span>
		</div>
		<div id="n1">
			<div id="n2">
				<span id="n3"></span>
				<ul id="n4" class="ul">
					<li id="n5">item1</li>
					<li id="n6" class="li6" value="s"></li>
					<li id="n7">item3</li>
				</ul>
				<span id="n8"></span>
			</div>
		</div>

		</div>
	</body>

</html>

在这里插入图片描述

与子何如

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DaiXT:Jquery-html网页的数据获取和展示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script> <script> $(function() { //总结jqurey取值的两种方式：$
复制链接

扫一扫