jquery选择器学习

jquery选择器

学习方式, 照着列表一个个敲一遍, 记个大概, 知道有这么个选择器. 之后使用的时候查查w3c, 就会用了

元素选择器

$("p"); // 取得p标签
$("#p1"); // 取得id为p1的元素
$(".p1"); //取得class=p1的元素

属性选择器

$("[href]"); //选择属性带有href的元素
$("[href]='#'"); //选择href=#的元素
$("[href]!='#'"); //选择href!=#的元素
$("[href]$='.jpg'"); //选择所有href属性以.jpg结尾的元素

css选择器

$("#p1").css("background-color", "red"); //将背景色设置为红色

其他选择器

$(".class1.class2"); //选择 class=class1 且 class=class2 的元素

$("p:first"); //第一个p元素
$("p:last"); //最后一个p元素
$("p:even"); //偶数p元素 从0开始
$("p:odd"); //奇数p元素 从0开始

$("p:empty"); //无子元素节点或者无文本节点的所有元素
$("p:not(:empty)");//所有不为空的元素

$("p:eq(4)"); //下标为4的p元素, 从0开始
$("p:gt(2)"); //下标大于2的p元素, 从0开始
$("p:lt(3)"); //下标小于3的p元素, 从0开始

$(":header"); // 所有标题元素, <h1>-<h6>
$("p:contains(text)"); //包含指定字符串的元素
$("p:hidden"); //隐藏的p元素
$("p:visible"); //可见的p元素

$("#p1, #p2, #p3"); // 分组选择, 选取id为p1, p2, p3的元素, 也可为标签, class等

$(":input"); //所有input元素
$(":text"); //所有input[type=text]的元素 text可更换为password,radio,checkbox,submit,reset,image...等
$(":selected"); //用于下拉列表被选中
$(":checked"); //用于单选框或多选框被选中