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 获取服务器控件值的代码
Mar 05 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
javascript实现控制div颜色
Jul 07 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
在vue中获取wangeditor的html和text的操作
Oct 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
JavaScript实现移动端轮播效果
2017/06/06 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python 实现A*算法的示例代码
2018/08/13 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
2015年扶贫帮困工作总结
2015/05/20 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书