jQuery中parent()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中parent()方法用法。分享给大家供大家参考。具体分析如下:

此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素。
所取得的父元素集合也可以使用表达式进行筛选。

语法结构:

$(selector).parent(expr)

参数列表:
参数 描述
expr 可选。用来筛选的表达式

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/> 

<meta name="author" content="https://3water.com/" />

<title>parent()函数-三水点靠木</title>

<style type="text/css">

ul{

  height:200px;

  width:200px;

  border:1px solid green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

})

</script>

</head>

<body>

<div>

  <p>我是p元素</p>

</div>

<ul>

  <li>

    <p>我是p元素</p>

  </li>

</ul>

</body>

</html>

取得p元素的各自紧邻的父元素,并将其边框颜色设置为红色。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/> 

<meta name="author" content="https://3water.com/" />

<title>parent()函数-三水点靠木</title>

<style type="text/css">

ul{

  height:200px;

  width:200px;

  border:1px solid green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("p").parent("div").css("border","1px solid red")

})

</script>

</head>

<body>

<div>

  <p>我是p元素</p>

</div>

<ul>

  <li>

    <p>我是p元素</p>

  </li>

</ul>

</body>

</html>

取得p元素紧邻的div父元素,并将其边框颜色设置为红色。

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

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
详解Angular2响应式表单
Jun 14 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
You might like
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php随机输出名人名言的代码
2012/10/07 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
用python做游戏的细节详解
2019/06/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
init进程的作用
2015/08/20 面试题
运动会表扬稿大全
2014/01/16 职场文书
食品安全演讲稿
2014/09/01 职场文书
个人委托书范本汇总
2014/10/01 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年教育工作总结
2014/11/26 职场文书
离婚财产分割协议书
2015/08/11 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
python开发飞机大战游戏
2021/07/15 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers