Jquery搜索父元素操作方法


Posted in Javascript onFebruary 10, 2015

本文实例讲述了Jquery搜索父元素操作方法。分享给大家供大家参考。具体分析如下:

1. parents()方法

格式:

parents([selector])
用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选。
如:
$("p").parents().css("border", "1px solid blue);

2. cloest方法

格式:

closest(selector[, context])
该方法从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
如:
$("a").closest("div").css("border", "1px solid blue");

cloest()和parents()方法的主要区别如下:

① 前者从当前元素匹配查找,后者从父元素开始匹配查找

② 前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。

③ 前者返回0或者1个元素,后者可能包含0个、1个或者多个元素。

3. parent()方法

格式:

parent([selector])
用于获取当前匹配元素集合中每个元素的父元素,根据需要,还可以使用一个选择器进行筛选。

如:

$("p").parent().css("border", "1px solid blue");

4. parentsUtil()方法

格式:

parentsUtil([selector])
用于获取当前匹配元素集合中每个元素的祖先元素,直至给定选择器匹配的元素(但不包括该元素)

如:

$("li#li2").parentsUtil("#ul1_li2").css("background", "#FCF");

5. offsetParent()方法

用于搜索第一个匹配元素的已定位的父元素,仅对可见元素有效,语法格式如下:

offsetParent()

该方法查找第一个匹配元素的已定位元素,并返回由该元素包装成的jQuery对象。

综合例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>从文档中搜索指定元素的祖辈元素和父元素</title>  

<script src="jquery-1.4.2.js" type="text/javascript"></script>  

<script language="javascript" type="text/javascript">  

  $(document).ready(function(){  

    $("p").parent().css("border","1px solid #999");  //给p元素的父元素添加边框样式  

    $("p").closest("div").css("color","blue");       //给指定p元素的第一个匹配的上级元素设置字体颜色  

    $("li").parents("div").css("background","#FCF").css("height","40px");//设置li祖辈元素中div元素的样式。  

    $("p").css("background","#99C");  

    })  

</script>  

<style type="text/css">  

   #top_div{ margin-top:4px; margin-left:30px;}  

   #top_div ul{ display:inline; list-style-type:none; margin:0px;}  

   #top_div li{ float:left; display:block; text-align:left; margin-left:2px; width:80px; padding-top:10px;}  

   #main_div{ margin-top:50px; margin-left:30px;}  

</style>  

</head>  

  

<body>  

<div id="top_div">  

 <ul>  

    <li>新闻</li>  

    <li>网页</li>  

    <li>贴吧</li>  

    <li>知道</li>  

    <li>MP3</li>  

    <li>图片</li>  

    <li>视频</li>  

    <li>地图</li>  

 </ul>   

</div>  

<div id="main_div">  

   <h3>标题一</h3>  

   <p>段落一</p>  

   <h3>标题二</h3>  

   <p>段落二</p>  

   <h3>标题三</h3>  

   <p>段落三</p>  

</div>  

  

</body>  

</html>

运行效果如下图所示:

Jquery搜索父元素操作方法

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

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 #Javascript
jQuery子属性过滤选择器用法分析
Feb 10 #Javascript
jQuery内容过滤选择器用法分析
Feb 10 #Javascript
jQuery过滤选择器用法分析
Feb 10 #Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
10个实用的PHP代码片段
2011/09/02 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
数控专业应届生求职信
2013/11/27 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
高中地理教学反思
2014/01/29 职场文书
《风筝》教学反思
2014/04/10 职场文书
初中生期末评语大全
2014/04/24 职场文书
工作评语大全
2014/04/26 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
python之基数排序的实现
2021/07/26 Python
MySQL数据库 安全管理
2022/05/06 MySQL