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 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
python Django模板的使用方法
2016/01/14 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
python如何调用百度识图api
2020/09/29 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
应届大学生的推荐信
2013/11/20 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
《大海那边》教学反思
2014/04/09 职场文书
植物生产学专业求职信
2014/08/08 职场文书
小学生读书笔记范文
2015/06/30 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书