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 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Vue js with语句原理及用法解析
Sep 03 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
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
分享php邮件管理器源码
2016/01/06 PHP
php车辆违章查询数据示例
2016/10/14 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
python执行get提交的方法
2015/04/29 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
淘宝店铺营销方案
2014/02/13 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
租房协议书
2014/04/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2014年劳动部工作总结
2014/12/11 职场文书