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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
js获取微信版本号的方法
May 12 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
图片按比例缩放函数
2006/06/26 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python格式化日期时间操作示例
2018/06/28 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python实现ip地址的包含关系判断
2020/02/07 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
自荐信怎么写好
2013/11/11 职场文书
求职自我推荐信
2014/06/25 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers