jq获取元素以及Class设置和焦点事件和只读设置

最新推荐文章于 2025-07-01 19:47:14 发布

原创最新推荐文章于 2025-07-01 19:47:14 发布 · 777 阅读

0 ·

CC 4.0 BY-SA版权

归纳总结集专栏收录该内容

21 篇文章

订阅专栏

本文展示了一个使用JavaScript操作HTML DOM元素的例子，包括通过事件触发修改DOM属性，如取消输入框的只读状态并聚焦，以及在失焦时恢复只读状态。同时，通过jQuery简化了DOM操作和事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例：


<html>

<tr><td>
<input  class="tx1"  type="text" readonly="true"/>
<a onclick="clickFun(this)"></a>
<a id="ida" class="hidden"></a>
</td></tr>

</html>

<script>
function clickFun(obj){
		//获取该a元素同级别的第一个input标签
		var s=$(obj).parent().children("input").eq(0);      
		 //input标签取消只读
		 s.attr("readOnly",false);
		 //并且激活该input标签的焦点
		 s.focus();
		  //获取该a元素同级别的下一个元素#ida
		 var a = $(obj).next(); 
		 //让该a标签可见
		 a.removeClass("hidden");
	}


	//input标签失焦事件
	$(".tx1").blur(function(){
		//该input标签设为只读
		$(this).attr("readOnly","true");
		//获取它同级别的第二个a标签
		var s=$(this).parent().children("a").eq(1);
		//设置那个a标签隐藏
		s.addClass("hidden");
	});



	</script>