当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery搜索子元素的方法

实例分析jQuery搜索子元素的方法

  • 发布时间:
  • 作者:码农之家
  • 点击:143

这篇文章主要知识点是关于jQuery、子元素、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

jQuery搜索子元素的方法

本文实例讲述了jQuery搜索子元素的方法。分享给大家供大家参考。具体分析如下:

1. children()方法

用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下:

复制代码 代码如下:
children([selector])
$("#menu_ul").children().css("color", "blue");

 

2. find()方法

用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下:

复制代码 代码如下:
find([selector])
$("ul").find("span").css("color", "blue");//将ul元素下的span元素的文本元素设置为蓝色

 

示例代码如下:

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>搜索指定元素的子元素</title> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
      $("#login").children("input").css("background","#FCF");//给div元素的直接子元素设置背景色 
      $("#login").contents().css("color","red");     //设置指定元素字节点的文本颜色 
      $("#tab").find("td").css("border","1px solid blue").css("color","Green");//设置指定div元素下的td元素的边框及字体颜色 
}) 
</script> 
</head> 
<body> 
<h3>搜索指定元素的子元素</h3> 
<div> 
    <div id="login"> 
        用户名:<input type="text"  value="用户名"/> 
        密码:<input type="password" value="密码" /> 
        <div><input type="submit"  value="登录"/><input type="reset"  value="重置"/></div> 
    </div> 
   <div id="tab">  
      <table width="452" height="176" border="1"> 
  <tr> 
    <td>单元格</td> 
    <td>单元格</td> 
  </tr> 
  <tr> 
    <td>单元格</td> 
    <td>单元格</td> 
  </tr> 
  <tr> 
    <td>单元格</td> 
    <td>单元格</td> 
  </tr> 
  <tr> 
    <td>单元格</td> 
    <td>单元格</td> 
  </tr> 
  <tr> 
    <td>单元格</td> 
    <td>单元格</td> 
  </tr> 
</table> 
</div> 
</div> 
</body> 
</html>

 

效果图如下:

jQuery搜索子元素的方法

希望本文所述对大家的jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.288389

jQuery获得子元素个数的方法

本文实例讲述了jQuery获得子元素个数的方法。分享给大家供大家参考。具体分析如下: //获取id=div1下的子元素的个数$('#div1').children().length;//获取id=div1下的span元素个数$('#div1').children('span').length; 希望本文所述对大家的jQuery程序设计有所帮助。 ……

网友NO.875054

jquery查找父元素、子元素(个人经验总结)

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titlejquery查找父元素子元素/title /head body div class="div1" id="div1" name="mydiv" p段落1 查找父元素/p table id="table1" tbody id="tbody1" tr td id="mytd1"11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)/td /tr tr id="mytr2" td id="mytd2"21parent()方法/td /tr tr td id="mytd3"31parent("选择器")方法/td /tr /tbody /table /div hr div id="div2" name="mydiv" p段落2 查找子元素/p table id="table2" tbody tr td id="se……

网友NO.976115

浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法

1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。 那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码: $("#desktop a img").each(function(index){ alert($(this)); alert(this); } 那么,这时候可以看出来: alert($(this)); 弹出的结果是[object Object ] alert(this); 弹出来的是[object HTMLImageElement] 也就是说,后者返回的是一个html对象(本例中是遍历HTML的img对象,所以为HTMLImageElement)。 很多人在使用jquery的时候,经常this.attr('src'); 这时会报错“对象不支持此属性……

网友NO.732595

JQuery查找子元素find()和遍历集合each的方法总结

1.HTML代码 div name="students" school="HK" input type="boy" name="ZhangSan" value="206" input type="girl" name="Lisi" value="108" /div 2.jquery script type="text/javascript" /* find() 查找子元素方法 */ var aaa = $("div[name='students'][school='HK']").find("input[type='boy'][name='ZhangSan']"); console.log(aaa.val()); /* $(".child",parent); 方法查找子元素*/ var bbb = $($("input[type='boy'][name='ZhangSan']"),$("div[name='students'][school='HK']")); console.log(aaa.val()); /* each()方法遍历数组 */ var arr = [ "one", "two", "three", "four" ]; $.each(arr, function() { console.log(this); }); /* each()方法处理json */ var obj = { one : 1, two : 2, three : 3, four : 4 }; $.each(obj, function(key, val) { console.log(obj[key]); }); /* each()方法处理二维数组 */ var arr1 = [ [ 11, 44, 33 ], [ 4, 6, 6 ], [ 7, 20, 9 ] ] $.each(arr1, function(i, item) { console.log(item[0]); }); /* each()方法处理HTML元素 */ $("div[name='students'][school='HK'] input").each(func……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com