jQuery学习笔记(一)——jQuery选择器和元素属性操作

写在前面：

从零学起jQuery，来源于网课整理的笔记。

一、基本

ID选择器：

<!-- HTML -->
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

<!-- js -->
$("#myDiv");

<!-- return -->
[ <div id="myDiv">id="myDiv"</div> ]

Element选择器：

<!-- HTML -->
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

<!-- js -->
$("div");

<!-- return -->
[ <div>DIV1</div>, <div>DIV2</div> ]

Class选择器：

<!-- HTML -->
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

<!-- js -->
$(".myClass");

<!-- return -->
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

组合选择器：

<!-- HTML -->
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

<!-- js -->
$("div,span,p.myClass")

<!-- return -->
[ <div>div</div>, <p class="myClass"><p class="myClass"</p>, <span>span</span> ]

 

二、组合选择器

Parent->Child选择器

<!-- HTML -->
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

<!-- js -->
$("form > input")

<!-- return -->
[ <input name="name" /> ]

三、操作元素属性

获取：

对象名.attr("属性名");
//无法获取value属性值，value值使用对象名.val()获取

修改：

对象名.attr("属性名", "属性值");