jquery查找div元素第一个元素id

在程序源码 标签 ,

为方便查询以及备忘，jquery的元素查找、取值赋值、属性添加等操作做了整理

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<div id="id1" class="class1">
测试
	<p>这是一段p文本后面将被添加class=blue的属性</p>
	<div id="id1-1" class="class1-1" dataxxxx-id="data1-1">
		<a id="http1" href="https://www.ranjuan.cn">超链接00</a>
		<a href="https://www.ranjuan.cn">超链接11</a>
		<input id="input1" name="username" type="text" value="text1"/>
	</div>
	<div id="id1-2" class="class1-2" dataxxxx-id="data1-2">
		<a href="https://www.ranjuan.cn">超链接22</a>
	</div>
	<div id="id1-3" class="class1-3">
		<a href="https://www.ranjuan.cn">超链接33</a>
	</div>
</div>

<script>
//alert('精确指定id下的页面内容：'+$("#id1").html());
//alert('精确指定class名字下的页面内容：'+$(".class1-1").html());
	
//alert('精确指定id的class属性值：'+$("#id1").attr("class"));
//alert('精确指定id的dataxxxx-id属性值：'+$("#id1-1").attr("dataxxxx-id"));

//alert('模糊查找所有超链接a标签名字：'+$(".class1  a").text());
//alert('模糊查找第一个超链接a标签名字：'+$(".class1  a").first().text());
//alert('模糊查找最后一个超链接a标签名字：'+$(".class1  a").last().text());

//alert('模糊查找div子列表最后一个div标签id：'+$(".class1  div").last().attr("id"));
//alert('模糊查找div子列表第一一个div标签下第一个a标签：'+$(".class1 div a:first-child").html());

//读取值  
//text() - 设置或返回所选元素的文本内容
//html() - 设置或返回所选元素的内容（包括 HTML 标记）
//val() - 设置或返回表单字段的值
	
//alert($("#input1").val());
//$("#input1").val('ranjuan.cn');
$("input[name='username']").val('ranjuan.cn2');
	
//隐藏指定id
//$("#input1").hide(); 
//$("#input1").show(); 
	
//指定单击事件
//alert($("#id1-1 a:first-child").attr("href"));
//$("#id1-1 a:first-child").click();

//设置属性

$("#http1").attr("href","https://www.baidu.com");	
$("#id1").attr("style","color:red;font-size:50px;");

//append() - 在被选元素的结尾插入内容
//prepend() - 在被选元素的开头插入内容
//after() - 在被选元素之后插入内容
//before() - 在被选元素之前插入内容
$("#id1").prepend("在开头追加++++");	
$("h1,h2,p").addClass("blue");

//文档准备完毕后执行
$(document).ready(function(){
   // 开始写 jQuery 代码...
	
	//$("#id1-1 a:first-child").click(function(){
	//	alert('你点击了第一个超链接');
   //});

	$("#http1").click(function(){
    // 动作触发后执行的代码!!
		alert('你点击了第一个超链接++');
   });
 
});

</script>
</head>

关于jquery查询或操作的更多内容可以前往菜鸟教程：https://www.runoob.com/jquery/jquery-ref-selectors.html

另外jquery的post/get操作亦做简单记录（摘录自菜鸟教程）

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

基于互联网精神，在注明出处的前提下本站文章可自由转载！

本文链接：https://ranjuan.cn/jquery-find-firstdiv/

赞赏

微信赞赏支付宝赞赏

发表评论