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 04 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
AM/FM收音机的安装与调试
2021/03/02 无线电
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Python脚本按照当前日期创建多级目录
2019/03/01 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python numpy存取文件的方式
2020/04/01 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python如何对齐字符串
2020/07/30 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
简单的JAVA编程面试题
2013/03/19 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
赡养老人协议书范本
2015/08/06 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
python pyhs2 的安装操作
2021/04/07 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers