jQuery搜索子元素的方法


Posted in Javascript onFebruary 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
javascript每日必学之封装
Feb 23 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue中锚点的三种方法
Jul 06 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
js实现随机8位验证码
Jul 24 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
jQuery搜索同辈元素方法
Feb 10 #Javascript
Jquery搜索父元素操作方法
Feb 10 #Javascript
jQuery表单域属性过滤器用法分析
Feb 10 #Javascript
jQuery子属性过滤选择器用法分析
Feb 10 #Javascript
jQuery内容过滤选择器用法分析
Feb 10 #Javascript
jQuery过滤选择器用法分析
Feb 10 #Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
You might like
ftp类(example.php)
2006/10/09 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python3基础之list列表实例解析
2014/08/13 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Python制作数据导入导出工具
2015/07/31 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python:slice与indices的用法
2019/11/25 Python
python map比for循环快在哪
2020/09/21 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
造价工程师个人求职信
2013/09/21 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
植物生产学专业求职信
2014/08/08 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python