jquery中获取元素里某一特定子元素的代码

之前做的一些JQUERY应用都是些很基础的编程，对于选择器要求不高，像类似于“$('.class')”、“$('#id')”、“$('#id>.class')”、“$(this)”、“$(this).parent()”、“$(this).children()”这些简单的语句都能解决的。

问题的出现是我要选择一个ul里某个的li中的一个span，因为要利于编程，li是用 $('ul>li').eq(i) 来做的选择，虽然问题还是能用之前的方法解决，但总感觉代码有点臃肿,而且效率也很低下。既然JQUERY被誉为目前所有JS框架中最高效的代码，不可能连这个问题都要用一大坨代码来解决吧！

回头再翻翻JQUERY的API，才发现有一个非常适合这个场合使用的语句我一直没有注意过。那就是：$(选择器一).find(选择器二)。之前虽然读过find这段介绍，但一直因为用不到而被忽视。

这里说说find()的使用方法
API提供的的解释：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

使用方法：$(选择器一).find(选择器二)；

以小剧客栈首页的焦点图,查找类为“.focusphoto”的DL下DD中的span并将其作淡出处理为例：

代码如下:

$('.focusphoto>dl>dd).eq(i).find(”span”).fadeOut('slow');

谈谈小剧对find()的理解

我这个应用实际上完全可以用children()来代替，但这并不是说find()和children()的用法是一样的，如果是这样的话find()的存在便没有了意义。在查询深度为一级的时候，这两者有相同之处，但区别就在于：find()是子查询选择器，它可以深入到子级的下层进行查询选择；而children():只是子级选择器，它只能选择下一层级的元素。

当然，以上仅仅是剧中人的一点拙见，如有错误或不完善的地方，请给于指正，谢谢！

赞 (0)

相关推荐

  • 使用jquery判断一个元素是否含有一个指定的类(class)实例

    在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能. 2 种方法如下: 1. is('.classname') 2. hasClass('classname') 以下是一个div元素是否包含一个redColor的例子: 1. 使用is('.classname')的方法 $('div').is('.redColor') 2. 使用hasClass('classname')的方法(注意jquery的低版本可能是hasClass('.classna

  • jquery判断元素的子元素是否存在的示例代码

    jquery判断子元素是否存在 一.判断子元素是否存在   //一级子元素 if($("#specialId>img").length==0)     if ($( "#specialId:has(img)" ).length==0)          {      //-----没有img子标记-----     }    else     {      //-------有img子标记------     } 二.选择特定id元素下的特定id子元素   

  • jQuery 判断页面元素是否存在的代码

    例如: 复制代码 代码如下: document.getElementById("someID").innerText("hi"); 如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法应该是: 复制代码 代码如下: obj = document.getElementById("someID&quo

  • jQuery 选择同时包含两个class的元素的实现方法

    jQuery 选择同时包含两个class的元素的实现方法 <element class="a b"> 1. 交集选择: $(".a.b")--选择同时包含a和b的元素. 2. 并集选择:$(".a, .b")--选择包含a或者包含b的元素. 以上这篇jQuery 选择同时包含两个class的元素的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery判断元素是否存在的可靠方法

    最简单的办法是判断元素匹配长度 譬如HTML代码: 复制代码 代码如下: <div class='mydiv'></div> 通常我们的做法是 复制代码 代码如下: if($('.mydiv').length>0) 比较可靠且不会出错的做法是: 复制代码 代码如下: if($('.mydiv').length && $('.mydiv').length>0)  return true; 使用传统javascript方法,如下: 复制代码 代码如下: if

  • jQuery判断数组是否包含了指定的元素

    要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等, 复制代码 代码如下: var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr);  //返回 3, 如果不包含在数组中,则返回 -1; 以上就是本文的全部内容了,有需要的小伙伴参考下吧

  • jQuery检测某个元素是否存在代码分享

    代码中可能有这样的情况,根据元素是否存在来执行不同的操作,这样就需要判断指定的元素是否存在. 使用$(selector)可以获得匹配元素集合,而匹配元素集合的length属性可以获得集合中匹配元素的个数,所以只要判断length属性值是否为零,就可以判断元素是否存在.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</title&

  • jquery如何判断某元素是否具备指定的样式

    分为以下2种情况: 1.如果css写成行内样式,可以通过获取style属性的值来判断,示例如下: 判断id为divid的div元素是否有font-size样式: 复制代码 代码如下: <div id="divid" style="float:left; font-size:12px;"></div> jquery代码如下: jQuery("#divid").each(function(){ var fontSize = $

  • jquery中获取元素里某一特定子元素的代码

    之前做的一些JQUERY应用都是些很基础的编程,对于选择器要求不高,像类似于"$('.class')"."$('#id')"."$('#id>.class')"."$(this)"."$(this).parent()"."$(this).children()"这些简单的语句都能解决的. 问题的出现是我要选择一个ul里某个的li中的一个span,因为要利于编程,li是用 $('ul&

  • js和jquery中获取非行间样式

    js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性) 那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取? js中 1.行间样式: 相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style: 这种利用style的方式获取的只能是行间样式. 2.非行间样式

  • jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示:  具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"

  • Jquery中获取iframe的代码

    父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:window.parent.document 那么,用如果想用jquery的方法,我们怎么用jquery来获取iframe呢?下面是一下收集来的方法. 获取页面的对象其实就是dom方法外面加上jquery的选择符: 父窗口中操作iframe:$(window.frames["iframeChild&qu

  • jQuery中获取checkbox选中项等操作及注意事项

    jQuery中获取checkbox选中项等操作及注意事项

    1. 获取checkbox的选中项 2. checkbox选项的全选 反选操作 用于测试的checkbox代码段: 复制代码 代码如下: <div>            <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">

  • Android在OnCreate中获取控件的宽度和高度的实现代码

    在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高度. 可惜的是,根据我的验证,利用网上转载的那些方法在OnCreate函数中获取到的仍然是0(希望搞技术的能自己验证过再转载),例如Measure方法之后调用getMeasuredWidth的值还是0. 原因是因为当OnCreate函数发生时,只是提供了数据初始化的机会,此时还没有正式绘制图形.而绘

  • Android中获取网页表单中的数据实现思路及代码

    MainActivity如下: 复制代码 代码如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundle; import android.webkit.WebView; import android.app.Activity; /** * Demo描述: * 在Android中获取网页里表单中的数据 */ public class MainActivity extends Ac

  • jquery中获取元素的几种方式小结

    1 从集合中通过指定的序号获取元素 html: 复制代码 代码如下: <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 复制代码 代码如下: <script ty

  • jQuery中获取Radio元素值的方法

    又发现自己写的JavaScript代码在FireFox下运行出错,原因很郁闷,在获取一个Radio元素的值的时候只得到了 undefind.谷歌了一下,大多跟我用的方法是一样的 复制代码 代码如下: var value = $("input[name='radio1'][type='radio'][checked]").val(); 这句在IE.Safari(3.2)下测试通过,但是在FireFox.Chrome下却得不到选中的值.仔细再看手册,发现"表单对象属性"

  • jquery中获取id值方法小结

    复制代码 代码如下: <div id="product_shift_out_{m}"> </div><script language = "JavaScript" type="text/javascript">$(document).ready(function(){name = $('div').eq(0).attr('id');alert(name)});</script> eq(0)是取第一个

随机推荐