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代码在页面加载时的执行顺序介绍
May 03 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 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
用文本作数据处理
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
django中的ajax组件教程详解
2018/10/18 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
python django集成cas验证系统
2014/07/14 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
使用python绘制常用的图表
2016/08/27 Python
python操作mysql数据库
2017/03/05 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python requests库用法实例详解
2018/08/14 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
自荐书格式
2013/12/01 职场文书
大学生学习自我评价
2014/01/13 职场文书
《在家里》教后反思
2014/03/01 职场文书
教师远程培训感言
2014/03/06 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
小学生安全保证书
2015/05/09 职场文书
2015年政教主任工作总结
2015/07/23 职场文书