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制作可编辑的表格特效
Dec 23 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
javascript学习之json入门
Dec 22 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
详解Puppeteer 入门教程
May 09 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
详解Django解决ajax跨域访问问题
2018/08/24 Python
Django之模型层多表操作的实现
2019/01/08 Python
python实现电子书翻页小程序
2019/07/23 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python使用re模块验证危险字符
2020/05/21 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
移风易俗倡议书
2014/04/15 职场文书
党员年终个人总结
2015/02/14 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Go 中的空白标识符下划线
2022/03/25 Golang
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL