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.ajax)
Nov 19 Javascript
JQuery live函数
Dec 24 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
js闭包的用途详解
2014/11/09 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
React 组件间的通信示例
2018/06/14 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python中的模块和包概念介绍
2015/04/13 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python实现简易云音乐播放器
2018/01/04 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
护理见习报告范文
2014/11/03 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Python中的嵌套循环详情
2022/03/23 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python