<!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>
DaiXT:Jquery-html网页的数据获取和展示
最新推荐文章于 2024-07-29 03:40:05 发布
这篇博客详细介绍了如何使用jQuery进行元素的选择和值的获取,包括通过ID、Class以及属性进行选择,并展示了在多标签相同情况下如何精确获取值。同时,文章还涵盖了按钮的值和内容操作,以及不同索引位置的元素取值方法。
摘要由CSDN通过智能技术生成