《锋利的jQuery》读书笔记 —— jQuery选择器

·JQuery完善的处理机制
document.getElementById("test").style.color = "red"; //如果test不存在，则页面出现异常
$("#test").css("color","red"); //哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象

·判断页面是否选择的对象
if( $(".class").length > 0 ){
    // todo something
}

·基本选择器
$("#myDiv")    //根据给定的ID选择匹配的元素，返回：单个元素
$(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素
$("div") //根据给定的元素名称选择匹配的元素，返回：集合元素
$("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素
$("*") //选择页面所有元素，返回：集合元素

·层次选择器
$("div span") //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素
$("div>span") //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素
$(".myClass+div") //选择样式名称为myClass的下一个DIV元素，返回：集合元素
$(".myClass+div") //等价于 $(".myClass").next("div");
$(".myClass~div") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
$(".myClass~div") //等价于 $(".myClass").nextAll();
$(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

·过滤选择器（index从0开始）
$("div:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素
$("div:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
$("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素
$("div:even") //选择所有索引是偶数的DIV元素，返回：集合元素
$("div:odd") //选择所有索引是奇数的DIV元素，返回：集合元素
$("div:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素
$("div:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素
$("div:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素
$(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素
$("div:animated") //选择所有正在执行去画的DIV元素，返回：集合元素

·子元素过滤选择器（index从1开始）
$(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素
$(":first-child") //选择每个父元素下的第一个子元素，返回：集合元素
$(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素
$("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

·内容过滤选择器
$(":contains(text)") //选择所有内容包含text的元素，返回：集合元素
$("div:empty") //选择所有内容为空的DIV元素，返回：集合元素
$("div:has(span)") //选择所有含有SPAN子元素的DIV元素，返回：集合元素
$("div:parent") //选择所有含有子元素的DIV元素，返回：集合元素

·可见性选择器
$(":hidden") //选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素
$(":visible") //选择所有可见的元素，返回：集合元素

·属性过滤选择器
$("[id]") //选择所有含有id属性的元素，返回：集合元素
$("[class=myClass]") //选择所有class属性值是myClass的元素，返回：集合元素
$("[class!=myClass]") //选择所有class属性值不是myClass的元素，返回：集合元素
$("[alt^=begin]") //选择所有alt属性值以begin开始的元素，返回：集合元素
$("[alt^=end]") //选择所有alt属性值以end结束的元素，返回：集合元素
$("[alt*=some]") //选择所有alt属性值含有some的元素，返回：集合元素
$("div[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素

·表单对象属性选择器
$("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回：集合元素
$("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
$("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
$("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

·表单选择器
$(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素
$(":text") //选择所有单行文本框元素，返回：集合元素
$(":password") //选择所有密码框元素，返回：集合元素
$(":radio") //选择所有单选框元素，返回：集合元素
$(":checkbox") //选择所有复选框元素，返回：集合元素
$(":submit") //选择所有提交按钮元素，返回：集合元素
$(":image") //选择所有图片按钮元素，返回：集合元素
$(":reset") //选择所有重置按钮元素，返回：集合元素
$(":button") //选择所有按钮元素，返回：集合元素
$(":file") //选择所有上传域元素，返回：集合元素
$(":hidden") //选择所有不可见域元素，返回：集合元素
$(":text") //选择所有单选文本框元素，返回：集合元素