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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
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
PHP使用数组实现队列
2012/02/05 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php解析url的三个示例
2014/01/20 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python样条插值的实现代码
2018/12/17 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
pytorch实现线性拟合方式
2020/01/15 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
昆虫记读书笔记
2015/06/26 职场文书
养成教育工作总结
2015/08/13 职场文书