jQuery的:parent选择器定义和用法


Posted in Javascript onJuly 01, 2014

:parent选择器的定义和用法:

此选择器匹配含有子元素或者文本的元素。
注意:空格也算是含有的元素。

语法结构:

$(":parent")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:

$("div:parent").animate({width:"300px"})

以上代码能够将含有文本或者元素的div的宽度设置为300px。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":parent")等同于$("*:parent")。

实例代码:

实例一:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
list-style-type:none; 
width:150px; 
height:30px; 
border:1px solid red; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("div:parent").animate({width:"300px"}) 
}) 
}) 
</script> 
</head> 
<body> 
<div>我是文本</div> 
<div></div> 
<button>点击查看效果</button> 
</body> 
</html>

以上代码能够将含有文本或者元素的div的宽度以自定义动画的方式设置为300。

实例二:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
list-style-type:none; 
width:150px; 
height:30px; 
border:1px solid red; 
} 
span{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(){ 
$("button").click(function(){ 
$("*:parent").animate({width:"300px"}) 
}) 
}) 
</script> 
</head> 
<body> 
<div>我是文本</div> 
<div></div> 
<span>大家好</span> 
<button>点击查看效果</button> 
</body> 
</html>

由于以上代码并没有指定与:parent选择器相配合使用的选择器,所以就默认和*选择器配合使用,于是代码能够将含有文本和元素的元素的宽度以自定义动画方式设置为300px。

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 #Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 #Javascript
jquery实现图片按比例缩放示例
Jul 01 #Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
Visual Studio中js调试的方法图解
Jun 30 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
探讨php中header的用法详解
2013/06/07 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
php数组使用规则分析
2015/02/27 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python转码问题的解决方法
2008/10/07 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python 定义只读属性的实现方式
2020/03/05 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
应届生污水处理求职信
2013/11/06 职场文书
党员自我评价分享
2013/12/13 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
小学家长会邀请函
2014/01/23 职场文书
《钱学森》听课反思
2014/03/01 职场文书
企业业务员岗位职责
2014/03/14 职场文书
家长对学生的评语
2014/04/18 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
演讲稿的写法
2014/05/19 职场文书
社区服务活动报告
2015/02/05 职场文书
防暑降温通知书
2015/04/27 职场文书