jquery对象与js对象的相互转换的应用和两个div只选中其中一个的操作

最新推荐文章于 2024-03-17 00:24:05 发布

CongBird

最新推荐文章于 2024-03-17 00:24:05 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CongBird/article/details/52954908

本文介绍了如何在jQuery中实现jQuery对象与DOM对象之间的转换，包括两种主要转换方式：使用[index]和.get(index)，并提供了具体示例。此外，还讨论了如何将DOM对象转换为jQuery对象。

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

废话少说，先直接上代码！

<script type="text/javascript">
	$(function() {
		$("[id^=plan_]").each(function() { //^选择器，选择以paln_开头的所有div进行遍历 
			$(this).click(function() {
				$("[id^=plan_]").attr("class", "radio_unselect2"); //把以paln_开头的所有div都先设置一种样式	                      
				$(this).attr("class", "radio_selected2"); //再把选中的div设置成特定的一个样式         
				if ($(this)[0].id == "plan_1") { //通过下标[0]把jquery对象转成了js对象再做比较
					$("[name=offerId]").val("48");
				} else {
					$("[name=offerId]").val("53");
				}
			});
		});
	});
</script>

其中也可以用hasclass()这个函数实现功能。

if ($(this).hasClass("radio_selected2")) {
$("#call").val($(this).html());
}

详细说明如下：

jQuery对象转成DOM对象：

首先说下jQuery：它是jquery对象其实是一个javascript的数组

这个数组对象包含125个方法和4个属性

4个属性分别是

jquery 当前的jquery框架版本号

length 指示该数组对象的元素个数

context 一般情况下都是指向HtmlDocument对象

selector 传递进来的选择器内容如：#yourId或.yourClass等

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 因为jquery对象返回的是一个数组对象，所以$v[0]指的是当前的js对象。
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。