JQuery入门(2)

1、基础选择器

 <script type="text/javascript">
        $(function(){ //id匹配元素
        $("#divOne").css("display","none");
    })
    $(function(){ //元素名匹配元素
            $("div span").css("display","none");
    })
    $(function(){ //类匹配元素
        $(".clsFrame .clsOne").css("display","none");
    })
    $(function(){ //匹配所有元素
        $("*").css("display","none");
    })
    $(function(){ //合并匹配元素
        $("#divOne,span").css("display","none");
    })
    </script>
    ...jQuery控制的代码
    <div class="clsFrame">
        <div id="divOne">ID</div>
    <div class="clsOne">CLASS</div>
    <span>SPAN</span>
    </div>

2、层次选择器

<script type="text/javascript">
$(function(){ //匹配后代元素
    $("div span").css("display","none");//隐藏div中所有的<span>标记
})
$(function(){ //匹配子元素
    $("div>span").css("display","none");//隐藏div中子span标记
})
$(function(){ //匹配后面元素
    $("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div
    $("#divMid").next().css("display","none");
})
$(function(){ //匹配所有后面元素
    $("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div
    $("#divMid").nextAll().css("display","none");
})
$(function(){ //匹配所有相邻元素
    $("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div
})
</script>

3、简单过滤选择器

<script type="text/javascript">
$(function(){ //增加第一个元素的类别
    $("li:first").addClass("GetFocus");//
})
$(function(){ //增加最后一个元素的类别  
    $("li:last").addClass("GetFocus"); //
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别
    $("li:not(.NotClass)").addClass("GetFocus");//
})
$(function(){ //增加所有索引值为偶数的元素类别，从0开始计数
    $("li:even").addClass("GetFocus"); //
})
$(function(){ //增加所有索引值为奇数的元素类别，从0开始计数
    $("li:odd") .addClass("GetFocus"); // 
})
$(function(){ //增加一个给定索引值的元素类别，从0开始计数
    $("li:eq(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有大于给定索引值的元素类别，从0开始计数
    $("li:gt(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有小于给定索引值的元素类别，从0开始计数
    $("li:lt(4)").addClass("GetFocus"); // 
})
$(function(){ //增加标题类元素类别
    $("div h1").css("width","238"); // 
    $(":header").addClass("GetFocus"); // 
})
$(function(){ //增加动画效果元素类别
    animateIt();
    $("#spanMove:animated").addClass("GetFocus"); // 
})
function animateIt() {//动画效果
    $("#spanMove").slideToggle("slow",animateIt);
}
</script>

4、内容过滤选择器

<script type="text/javascript">
$(function(){ //显示包含给定文本的元素
    $("div:contains('Div')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素  
    $("div:empty").css("display","block"); 
})
$(function(){ //显示含有选择器所匹配的元素
    $("div:has(span)").css("display","block");//显示含有span标记的元素
})
$(function(){ //显示含有子元素或者文本的元素
    $("div:parent").css("display","block"); 
})
</script>

5、可见性过滤选择器

<script type="text/javascript">
$(function(){ //增加所有可见元素的类别
    $("span:hidden").show()
    $("div:visible").addClass("GetFocus");
})
$(function(){ //增加所有不可见元素类别
    $("span:hidden").show().addClass("");
})</script>