jQuery的parent > child选择器

痛定思痛。 2022-05-12 00:36 187阅读 0赞

**一 介绍**

parent > child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素。

使用该选择器只能选择父元素的直接子元素。parent > child选择器的使用方法如下：

$("parent > child");

parent是指任何有效的选择器。

child是用以匹配元素的选择器，并且它是匹配元素的选择器，并且它是parent元素的子元素。

例如，要匹配表单中所有的子元素input，可以使用下面的jQuery代码：

$("form > input");

**二 应用**

为表单的直接子元素input换肤。

**三 代码**

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
    <style type="text/css">
    input
    {
         margin:5px;                    /*设置input元素的外边距为5像素*/
    }
    .input 
    {
    	font-size: 12pt;              /*设置文字大小*/
    	color: #333333;               /*设置文字颜色*/
    	background-color:#cef;        /*设置背景颜色*/
    	border: 1px solid #000000;    /*设置边框*/
    }
    </style>
    <form id="form1" name="form1" method="post" action="">
      姓  名：<input type="text" name="name" id="name" />
      <br />
      籍  贯：<input name="native" type="text" id="native" />
      <br />
      生  日：<input type="text" name="birthday" id="birthday" />
      <br />
      E-mail：<input type="text" name="email" id="email" />
      <br />
      <span>
      <input type="button" name="change" id="change" value="换肤"/>
      </span>
      <input type="button" name="default" id="default" value="恢复默认"/>
      <br />
    </form>
    <script type="text/javascript">
    $(document).ready(
    function()
    {
    	$("#change").click(
    	function()
    	{                            //绑定"换肤"按钮的单击事件
    	   $("form > input").addClass("input");    //为表单元素的直接子元素input添加样式
    	});
    	$("#default").click(
    	function()
    	{                            //绑定“恢复默认”按钮的单击事件
    	   $("form > input").removeClass("input");     //移除为表单元素的直接子元素input添加的样式
    	});
    });
    </script>

**四 运行效果**

![b4165696-aacd-3ea4-b2ed-ba54a48b7e01.png][]

[b4165696-aacd-3ea4-b2ed-ba54a48b7e01.png]: /images/20220512/5f8a1a42769e4fd5896bee202819b468.png

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 50 阅读

相关 :nth-child选择器

:nth-child [概述][Link 1] `:nth-child(an+b)` 这个 [CSS 伪类][CSS]首先找到所有当前元素的兄弟元素，然后按照位置先

小咪咪/ 2023年09月30日 12:23/ 0 赞/ 13 阅读

相关前端4-1-7：HTML：＜parent＞＜child＞content＜/child＞＜/parent＞实现child内容垂直居中

【问题】假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？假设HTML结构为<pa

客官°小女子只卖身不卖艺/ 2022年11月15日 14:21/ 0 赞/ 138 阅读

相关 > 子元素选择器（Child selector）

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为 <div>元素子元

╰+攻爆jí腚メ/ 2022年09月30日 09:46/ 0 赞/ 241 阅读

相关 css的nth选择器,CSS3 :nth-child() 选择器

CSS3 :nth-child() 选择器实例指定每个 p 元素匹配的父元素中第 2 个子元素的背景色： p:nth-child(2) \{ background:\

绝地灬酷狼/ 2022年09月03日 01:27/ 0 赞/ 167 阅读

相关 jQuery parent>child

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

港控/mmm°/ 2022年07月13日 10:26/ 0 赞/ 182 阅读

相关 jQuery的parent > child选择器

一介绍 parent > child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素

痛定思痛。/ 2022年05月12日 00:36/ 0 赞/ 188 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 452 阅读

相关 jQuery 父元素选择器 parent() 和 parents()

> jQuery 的父元素选择器小编很少使用，但却看到不少 web开发者们经常使用。 > > 小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下，在循环时可以将当前

布满荆棘的人生/ 2021年11月23日 15:34/ 0 赞/ 550 阅读

相关使用jQuery获取表格内容、:nth-child() 选择器用法

<table border="1"> <thead> <tr> <th>月份</th> <th>甲</th>

小灰灰/ 2021年09月26日 15:44/ 0 赞/ 344 阅读