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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
react redux入门示例
Apr 19 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
微信小程序自定义单项选择器样式
Jul 25 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 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
全国中波电台频率表
2020/03/11 无线电
神族 PROTOSS 概述
2020/03/14 星际争霸
30个php操作redis常用方法代码例子
2014/07/05 PHP
YII路径的用法总结
2014/07/09 PHP
php实现上传图片文件代码
2015/07/19 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
浅谈php调用python文件
2019/03/29 PHP
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
裁员通知
2015/04/25 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python