JQ 中特别注意的方法

data()

data() // 向元素附加数或者从元素获取数据
例：
$("a1").data("abc","123") // 实际是设置标签属性为data-abc = "123"
$("a1").data("abc") // 实际是获取标签的data-abc的值

使用data设置或获取值时，在审查元素节点上看不到属性节点

如果：
$("a1").attr("data-abc","123");
$("a1").data("abc"); // 能获取到data-abc的值

attr()和prop()的区别

<input id="1" type="checkbox" />
<input id="2" type="checkbox" checked="checked" />

$("#1").prop("checked") == false
$("#2").prop("checked") == true

$("#1").attr("checked") == undefined
$("#2").attr("checked") == "checked"

总结：
1.添加属性名该属性立即生效使用prop()
2.是否有true，false使用prop()
3.通过JS添加属性使用prop()
4.其他使用attr()

注意：prop不能获取H5的data-xxx属性，如获取则值为underfined

index()

$(selector).index() // 返回指定元素相对于其他指定同级元素的index位置 如未找到返回-1
<ul>
    <li>1</li>
    <li>2</li>
    <li>4</li>
</ul>
$(li).click(function(){
    alert($(this).index())
}) // 0 1 2

$(selector).index(element) // 获取元素相对于选择器的位置（获取element相对于$(selector)的位置）
<ul>
    <li>1</li>
    <li class="hot">2</li>
    <li class="hot" id="a1">4</li>
</ul>
$(li).click(function(){
    alert($(".hot").index($("#a1")))
}) // 1

$("p:first-child") // 属于其父元素的第一个子元素的所有 <p> 元素
$("p:first-of-type") // 属于其父元素的第一个 <p> 元素的所有 <p> 元素