jquery 选择器及循环

1. 基本选择器

//标签
$("div").css("background","red");

//id
$("#active").css("background","orange");

//类
$(".box").css("background","green");

//群组
$(".box,#active").css("width",200);

//jq里面没有优先级，只有先后顺序

2. 层次选择器

//1. 后代选择器 所有的后代
$("div span").css("font-size",20);
//2. 直接后代选择器
$("div>span").css("color","red");
//3.相邻兄弟选择器：紧跟在后面的一个
$("h2+ul").css("background","pink");
//4.后面所有的兄弟选择器
$("h2~ul").css("background","red");

jquery里也有this

$("h2").click(function(){
	$(this).next("ul").css("background","Red"); //紧跟在后面的一个
	$(this).nextAll("ul").css("background","Red"); //后面所有的兄弟
   	$(this).prev("ul").css("background","red"); //上一个兄弟
    $(this).prevAll("ul").css("background","red"); //上面所有的兄弟
    $(this).siblings("ul").css("background","red");//所有的兄弟 ul 元素
})

3.基本过滤选择器

//:first :第一个子元素
$("ul li:first").css("background","pink");

//:last :最后一个子元素
$("ul li:last").css("background","pink");

//:first-child 第一个子元素
$("ul :first-child").css("background","red");

//:eq(下标)：获取对应下标的元素
$("p:eq(2)").css("color","red");

//:even 偶数 :odd
$("li:even").css("background","red");
$("li:odd").css("background","pink");

//:gt(下标)：获取下标大于某个数的元素   lt
$("li:lt(3)").css("background","red");
$("li:gt(2)").css("background","gray");

//:not(选择器) ：除了
$("li").not("#box").css("background","orange");

4. 内容过滤选择器

//:contains(内容) 匹配包含特定内容的标签
$("li:contains(内容)").css("color","red");

//:has(选择器) 匹配包含特定标签的标签
$("li:has(span)").css("color","red");

//empty 匹配空标签 任何东西都没有
//$(":empty").remove();

//:parent 获取有子元素的li标签
$("li:parent").remove();

5.属性选择器

//有type类型的input标签
$("input[type]");
//有type类型的并且值为radio input标签
$("input[type=radio]");
//有type类型的并且值  不为radio input标签
$("input[type!=radio]");
//有type类型的并且值  以开头 input标签
console.log($("input[type^=r]"));
//有type类型的并且值以  结尾 input标签
console.log($("input[type$=x]"));
//有type类型的并且值包含某个值 input标签
console.log($("input[type*=o]"));

6.表单相关选择器

//1.快速获取表单元素
console.log($(":input"));  //获取到所有表单元素
console.log($(":radio")); //获取radio类型的元素
console.log($(":text")); //获取text类型的元素
console.log($("checkbox")); //获取checkbox类型的元素

//2. enabled:可用 disable：禁用
$(":disabled").css("background","red");

//3.visible：显示  hidden：隐藏
console.log($("input:hidden"));

//4.checked:获取选择的input标签
console.log($(":radio:checked"));

7.循环

1.map

$.map : 有返回值，返回值会组成一个新的数组
//语法：$.map(循环的对象,function(value,index){})
//语法：$(选择器).map(function(value,index){})

2.each

$.each:没有返回值
语法：$.each(循环的对象,function(index,value){})
语法：$(选择器).each(function(index,value){})