jQuery中children()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中children()方法用法。分享给大家供大家参考。具体分析如下:

此方法取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。

注意:find()将查找所所有子元素,而children()只获取一级子元素。

语法结构:

$(selector).children(expr)

参数列表:

参数 描述
expr 可选。用以过滤子元素的表达式

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>children()函数-三水点靠木</title>

<style type="text/css">

p{

  border:1px solid blue

} 

.children{

  border:1px solid green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".father").children().css("height","100px");

})

</script> 

</head>

<body>

<div class="father">

<div class="children">

   <p>我是孙子p</p>

</div>

<p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

此方法只匹配一级子元素。

实例二:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>children()-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".father").children(".children").css("color","red"); 

}) 

</script>  

</head> 

<body> 

<div class="father"> 

<div class="children"> 

   <p>我是孙子p</p> 

</div> 

<p>我是儿子p</p> 

</div> 

<p>我是兄弟p</p> 

</body> 

</html>

以上代码可以将处class属性值为children的子元素中的字体颜色设置为红色。

Javascript 相关文章推荐
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
angular.element方法汇总
Jan 07 #Javascript
jQuery中slice()方法用法实例
Jan 07 #Javascript
angularJS中$apply()方法详解
Jan 07 #Javascript
jQuery中not()方法用法实例
Jan 06 #Javascript
jQuery中has()方法用法实例
Jan 06 #Javascript
jQuery中map()方法用法实例
Jan 06 #Javascript
jQuery中is()方法用法实例
Jan 06 #Javascript
You might like
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python编码类型转换方法详解
2016/07/01 Python
python 修改本地网络配置的方法
2019/08/14 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
如何一键升级Python所有包
2020/11/05 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
animation和transition的区别
2020/10/12 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
大学生自我鉴定
2013/12/08 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
高中班主任评语大全
2014/04/25 职场文书
文明倡议书
2015/01/19 职场文书
草房子读书笔记
2015/06/29 职场文书
孙振耀退休感言
2015/08/01 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
2016国培学习心得体会
2016/01/08 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
详解Python描述符的工作原理
2021/06/11 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android