基于jQuery对象的查询
访问量:3608

我们通过jQuery选择的元素,是经过jQuery包装处理后的jQuery对象,下面我们将学习一下怎样对jQuery对象进行相应的操作。

一、jQuery对象与Javascript对象相互转换

通过$()可以将Javascript对象转为jQuery对象,通过数组下标或是get(index)可以将jQuery对象转为Javascript对象,具体如下

var oDiv = document.getElementById('oDiv');
var $oDiv = $(oDiv); //将Javascript对象转为jQuery对象
var $footer = $("#footer"); 
var oFooter = $footer[0]; //将jQuery对象转为Javascript对象
//var  oFooter = $footer.get(0);  //将jQuery对象转为Javascript对象

二、基于jQuery对象的查询

从jQuery对象中查找需要的元素,往往使用find()、filter()、first()、last()、eq()、siblings()等,其中,find代表从当前元素的子元素中去查找,filter代表从当前选择集中去查找。如下代码,说明了二者的区别。

<div id="header">
    <span class="title">title</span>
    <span class="author">author</span>
</div>
<script type="text/javascript">
var $header = $("#header");
var $title = $header.find('.title'); //从$header子类中获取class为title的元素
 
var $allSpan = $("span");
var $author = $allSpan.filter('.author');//从$allSpan中获取class为author的元素
</script>

案例描述,当点击某个li的时候,添加一个active类,并移除其同类中的active类,使用到了siblings函数。

<ul id="subNav">
	<li class="active">left1</li>
	<li>left2</li>
	<li>left3</li>
	<li>left4</li>
	<li>left5</li>
</ul>

<script type="text/javascript">
	//给subNav下面的每个li添加点击事件
	$("#subNav li").click(function(){
		if (! $(this).hasClass('active')) {
			$(this).addClass('active').siblings(".active").removeClass('active');
		} 
	});
</script>


请在下面输入需要执行的语句