12月19号：jquery 选择器

1，ID 选择器 $( "#id" ):选择一个具有给定id属性的单个元素。

<div id="demo1">我是demo1</div>
<script>
   var demo1 = $('#demo1').css("background-color","red");
   console.log(demo1); //文字变成红色
</script>

2，标签选择器 $( "p" )：根据给定（html）标记名称选择所有的元素

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>
$("div"); //选中的是所有div标签
</script>

3，class选择器 $( ".class" )：选择给定样式class类名的所有元素。

<div class="demo1">div class="demo1"</div>
<div class="demo1">div class="demo1"</div>
<span class="demo2">span class="demo2"</span>
<script>
$(".demo1"); //选择的是前2个类名是demo1的标签
</script>

4，后代选择器 $( "div span" )：选择给定的祖先元素的所有后代元素。

<div>
    <span>第一个s1</span>
    <span>第二个s2</span>
    <p><span>第三个s3</span></p>
    <span>第四个s4</span>
</div>
<script>
$("div span"); //会把4个span全部选中
</script>

5，子代选择器 $( ".class > p" )：选择所有指定“parent”元素中指定的”child”的直接子元素。

<ul class="topnav">
     <li>Item 1</li>
     <li>Item 2
       <ul>
           <li>son 1</li>
           <li>son 2</li>
           <li>son 3</li>
       </ul>
     </li>
    <li>Item 3</li>
</ul>
<script>
$(".topnav > li"); //Item 1,Item 2,Item 3  被选中
</script>

6，同级相邻选择器 $( "label + input" )：选择所有紧接在 “label” 元素后的 “input” 元素，label紧跟着的第一个input。

<form>
  <label>Name:</label>
  <input name="name" />
  <input name="password" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
<script>
$("label + input"); //<input name="name" /> <input name="newsletter" />  被选中
</script>

7，同级所有选择器$(form ~ input):匹配 “form” 元素之后的所有 兄弟元素。

<input name="aaa" />
<form>
  <label>Name:</label>
  <input name="name" />
  <input name="password" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="one" />
<input name="two" />
<script>
$("form ~ input"); //<input name="one" /> <input name="two" /> 被选中
</script>