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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
浅谈JS的二进制家族
May 09 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文档更新介绍
2011/07/22 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
vue百度地图 + 定位的详解
2019/05/13 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
光声世纪笔试题目
2012/08/25 面试题
高级编程求职信模板
2014/02/16 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技