jQuery的:parent選擇器定義與用法_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery的:parent選擇器定義與用法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:42 PM

parent選擇器

: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。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

css中id选择符的标识是什么Sep 22, 2022 pm 03:57 PM

在css中，id选择符的标识是“#”，可以为标有特定id属性值的HTML元素指定特定的样式，语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的；ID属性值不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式，具体代码示例如下：HTML代码：<divid="container"><divclass="item">第一个子元素</div><divclass="item"&

如何在Python中访问父类属性？Aug 26, 2023 am 10:17 AM

Inobject-orientedprogramming,inheritanceallowsustocreatenewclassesthatinheritthepropertiesandmethodsofanexistingclass.Thispowerfulconceptenablescodereuse,modularity,andextensibilityinourprograms.Beforedivingintoaccessingparentclassattributes,let'shav

css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析》中，我们学习了伪元素选择器，而今天我们详细了解一下伪类选择器，希望对大家有所帮助！

javascript选择器失效怎么办Feb 10, 2023 am 10:15 AM

javascript选择器失效是因为代码不规范导致的，其解决办法：1、把引入的JS代码去掉，ID选择器方法即可有效；2、在引入“jquery.js”之前引入指定JS代码即可。

css中的选择器包括超文本标记选择器吗Sep 01, 2022 pm 05:25 PM

不包括。css选择器有：1、标签选择器，是通过HTML页面的元素名定位具体HTML元素；2、类选择器，是通过HTML元素的class属性的值定位具体HTML元素；3、ID选择器，是通过HTML元素的id属性的值定位具体HTML元素；4、通配符选择器“*”，可以指代所有类型的标签元素，包括自定义元素；5、属性选择器，是通过HTML元素已经存在属性名或属性值来定位具体HTML元素。

从入门到精通：掌握is与where选择器的使用技巧Sep 08, 2023 am 09:15 AM

从入门到精通：掌握is与where选择器的使用技巧引言：在进行数据处理和分析的过程中，选择器（selector）是一项非常重要的工具。通过选择器，我们可以按照特定的条件从数据集中提取所需的数据。本文将介绍is和where选择器的使用技巧，帮助读者快速掌握这两个选择器的强大功能。一、is选择器的使用is选择器是一种基本的选择器，它允许我们根据给定条件对数据集进

深度解析is与where选择器：提升CSS编程水平Sep 08, 2023 pm 08:22 PM

深度解析is与where选择器：提升CSS编程水平引言：在CSS编程过程中，选择器是必不可少的元素。它们允许我们根据特定的条件选择HTML文档中的元素并对其进行样式化。在这篇文章中，我们将深入探讨两个常用的选择器，即：is选择器和where选择器。通过了解它们的工作原理和使用场景，我们可以大大提升CSS编程的水平。一、is选择器is选择器是一个非常强大的选择

See all articles