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 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
详解javascript new的运行机制
Jan 26 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
原生js编写2048小游戏
Mar 17 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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生成N个不重复的随机数实例
2013/11/12 PHP
PHP生成唯一订单号
2015/07/05 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
javascript 闭包疑问
2010/12/30 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
理解python正则表达式
2016/01/15 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python中一般处理中文的几种方法
2019/03/06 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python tkinter实现连连看游戏
2020/11/16 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
前台文员职责范本
2014/03/07 职场文书
工商管理自荐书
2014/07/06 职场文书
会员活动策划方案
2014/08/19 职场文书
安全生产标语大全
2014/10/06 职场文书
努力学习保证书
2015/02/26 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
离职告别感言
2015/08/04 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书