jQuery中find()方法用法实例


Posted in Javascript onJanuary 07, 2015

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

此方法获得匹配元素集合中所有元素的子元素,并通过选择器、jQuery 对象或元素删选。
find()方法是获取匹配元素后代元素的好方法。

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

语法结构一:

$(selector).find(expr)

参数列表:

参数 描述
expr 字符串值,定义筛选表达式。

实例代码:

<!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").find("p").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>

以上代码可以将father元素下的所有p元素的字体颜色设置为红色。

语法结构二:

$(selector).find(element)

可以查找匹配元素下指定的元素。

参数列表:

参数 描述
element 用于匹配元素的DOM对象或者jQuery对象。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

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

<style type="text/css">

.father{

  height:200px;

  width:200px;

  border:1px solid blue;

}

</style>

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

<script type="text/javascript">

$(document).ready(function(){

  $(".father").find(document.getElementById("myp")).css("border","1px solid red");

})

</script>

</head>

<body>

<div class="father">

  <div class="children">

    <p id="myp">我是孙子p</p>

  </div>

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

</div>

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

</body>

</html>

以上代码可以将father元素下id属性值为myp的元素的边框设置为一像素红色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现简单二级下拉菜单
Apr 12 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
jQuery中children()方法用法实例
Jan 07 #Javascript
angular.element方法汇总
Jan 07 #Javascript
You might like
用php过滤危险html代码的函数
2008/07/22 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript类型转换示例
2014/04/29 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python3 操作符重载方法示例
2017/11/23 Python
python如何定义带参数的装饰器
2018/03/20 Python
python实现C4.5决策树算法
2018/08/29 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
详解Python的三种可变参数
2019/05/08 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
教师自我评价范例
2013/09/24 职场文书
自我鉴定四大框架
2014/01/17 职场文书
小学毕业感言300字
2014/02/19 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers