jQuery的parent > child选择器

一 介绍

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="">
  姓&nbsp;&nbsp;名：<input type="text" name="name" id="name" />
  <br />
  籍&nbsp;&nbsp;贯：<input name="native" type="text" id="native" />
  <br />
  生&nbsp;&nbsp;日：<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>

 

四 运行效果