Jquery-选择器

1.2层级选择器

原理：通过DOM嵌套关系结构来实现准确匹配

<form>
    <input type="button" value="按钮"/>
    <p>我是文本3</p>
    <h1>我是文本4</h1>
</form>
<h1>我是文本1</h1>
<h1>我是文本2</h1>
<h2>我是文本3</h2>

1.2.1包含选择器
            ：就是在给定的祖先选择器下匹配所有的后代元素 

$("form input").css({"border":"solid 2px red","background":"red"})//包含选择器匹配<from>标签中包含的所有<input>标签，并定义被包含的文本框边框显示为红色

注意：如果一次性设置多个属性，所有属性用大括号抱起来，然后每个属性与属性值之间用冒号相连，每个属性之间用逗号

1.2.2子选择器
            就是在匹配的父元素下选择所有的匹配的子元素
$("form>p").css("color","red")//只会匹配form标签下的p标签
注意：子选择器与包含选择器在匹配结果集中有重合的地方，但包含选择器能够匹配更多的元素，除了子元素，还包含所哟的潜逃的元素
1.2.3相邻选择器
就是在所有匹配的元素后选择同级的相领元素
$("form+h1").css("border","solid 2px red")//这句话就只会匹配from便签外面的第一个h1标签并给h1添加边框并且为红色
注意：相邻选择器和子选择器，包含选择器不同，从结构上看相邻选择器实在同级结构上进行匹配和过滤元素，而子选择器和包含选择器是在包含内部结构中过滤元素
1.2.4兄弟选择器
实在所有的匹配元素后选择同级的所有元素
$("form~h1").css("border","solid 2px red")//匹配与from同级的所有h1标签
注意：相邻 选择器只会匹配与它相邻的第一个标签，而兄弟选择器选择与它同级的所有一样的标签