目录
基于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>
请在下面输入需要执行的语句
本文为原创文章,请尊重辛勤劳动,如需转载,请保留本文地址
若您感觉本站文章不错,读后有收获,不妨赞助一下?
我要赞助