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 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
bootstrap实现tab选项卡切换
Aug 09 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 curl 并发最佳实践代码分享
2012/09/05 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue cli2.0单页面title修改方法
2018/06/07 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python压缩和解压缩zip文件
2015/02/14 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python openpyxl模块的使用详解
2021/02/25 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
护理专科毕业生自荐书范文
2014/02/19 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
团组织推荐意见
2015/06/05 职场文书
详解Python函数print用法
2021/06/18 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python