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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
js 函数调用模式小结
Dec 26 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
js 颜色选择插件
2017/01/23 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
医院实习介绍信
2014/01/12 职场文书
生产厂长岗位职责
2014/02/21 职场文书
大学生暑期实践感言
2014/02/26 职场文书
烹饪自我鉴定
2014/03/01 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
文书工作总结(范文)
2019/07/11 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang