JQ选择器

JQ选择器

基础选择器

    $(function () {
        //1.id
		$("#box")
		
        //2.class
		$(".box")
		
        //3.标签名
		$("div")
		
        //4.通用选择器
        $("*").css("color","red");

        //5.层级选择器
       $("div>span").html();

        //6.后代选择器和 find()方法
        $("p span").html("我被html方法改了");

        //搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
        $("p").find("span").css("background","red");

        //7.  子元素选择器和 children 方法
        $("p>span").css("color","blue");
        
        // 取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合
        //   描述:p标签中的每个子元素。
        $("p").children().css("fontSize","30px");

        // 描述：在每个div中查找 .selected 的类
        $("div").children(".selected")
        
        // 连续的子代
        $("div>span>span").html("呵呵");

        //8.群组选择器
        $("div,p").html("我是新增的");

        //9.交叉选择器
        //两个条件必须同时满足
        $("#btn.box").css("background","pink");

        //10. 紧邻选择器和 next()方法 nextAll 方法  prev 方法 prevAll 方法
        // 条件1: 紧挨着指定目标  (这里的指定目标： .d)
        // 条件2： 需要在目标的下方书写
        $(".d+button").html("点我");
        
        // nextAll 方法
        $(".d").next().css("color","blue");
        
        // nextAll 方法
        $(".d").nextAll("button").html("哈哈哈");
        
        // prev 方法
        $(".d").prev().html("我是新来的div");

        // prevAll 方法
        $(".d").prevAll().html("我是新来的div");  // innerHTML
        $(".d").prevAll("span").text("我是新来的div"); // innerText
        $("input").val(); //input框的 value

        // siblings 方法
        console.log($(".d").siblings("button"));

        //11. 同辈选择器（同级选择器,同胞选择器)
        // 可以获取到目标下方 所有的元素(无论是否紧邻)
        $(".box~p").css("background","yellow");
		
		//12. 过滤选择器
		//  需要匹配的条件:first   匹配到第一个符合条件的元素
		$('li:first').css("background","yellow");

		// :last   匹配到最后一个符合条件的元素
		$('li:last').css("background","red");

		// :not 除了()中指定的条件，获取:前指定的所有元素，
		$("li:not(.list)").html("我是一个Li");

		// :even 索引为偶数的
   		$("li:even").css("background","blue");

     	// :odd  索引为奇数
     	$("li:odd:not(.list)").css("background","pink");

     	// :eq(指定索引值)
	    $("li:eq(0)").html("我是一个开头");

     	// :gt(大于索引值)
     	$("li:gt(1)").html("我是被修改的");

     	// :lt(小于索引值)
     	$("li:lt(5)").css("color","black");
     	
    })

属性选择器

    $(function () {
    
        //1. 获取具有id属性的div
        // 目标[属性名]  当目标具备这个属性时，会被选中
        console.log($("div[id]"));

        //2.目标[属性名='属性值']
        // 当目标具有  指定属性的属性值时 被选中
        $("div[id='div2']").css("color","red");

        // 3. 目标[属性名!='属性值']
        // 选取目标中 不具有指定属性值 的所有元素
        $("div[id!='div2']").css("color","yellow");

        // 4. 目标[属性名^='属性值']
        // 目标指定的属性名， 是以指定的属性值开头的
        $("div[id^='d']").css("background","blue");

        // 5. 目标[属性名$='属性值']
        // 目标指定的属性名  是以指定的属性值结尾的
        $("div[id$='2']").css("fontSize","30px");

        // 6. 目标[属性名*='属性值']
        // 目标指定的属性名  只要包含指定的属性值
        $("div[id*='iv']").html("我们都被改了");
        
    })