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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
基于layui内置模块(element常用元素的操作)
Sep 20 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
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
5 cool javascript apps
2007/03/24 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python实现三维拟合的方法
2018/12/29 Python
Numpy之random函数使用学习
2019/01/29 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python pygame实现球球大作战
2019/11/25 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
社区健康教育实施方案
2014/03/18 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
太行山上观后感
2015/06/05 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL