3.jQuery选择器

1.jQuery基础选择器
    ID选择器     $("#id") 
    全选选择器   $("*")
    类选择器     $(".class")
    标签选择器   $("div")
    并集选择器   $("div,p,li")
    交集选择器   $("li.current")
    子代选择器   $("ul>li")
    后代选择器   $("ul li")  获取ul下所有后代
2.jQuery设置样式
    $('div').css('属性',值)
3.隐式迭代
    遍历内部DOM元素(伪数组存储)的过程
4.jQuery筛选选择器
    $("li:first")  获取第一个li元素
    $("li:last")   获取最后一个li元素
    $("li:eq(2)")  获取li索引为2的元素
    $("li:odd")    获取索引号是奇数的元素
    $("li:even")   获取索引号是偶数的元素
5.jQuery筛选方法
    $("li").parent();                最近一级父级元素
    $("ul").children("li");          最近一级的子元素,相当于$("ul>li")
    $("ul").find("li");              后代选择器(选择所有后代),相当于$("ul li")
    $(".first").siblings("li");      查找兄弟节点,不包括本身
    $(".first").nextAll();           查找当前元素之后的所有同辈元素
    $("div").hasClass("proteced");   检查当前的元素是否含有某个特定的类,有就返回true
    $("li").eq(2);                   相当于$("li:eq(2)");

注(重点):
    parent()  children()  find()  siblings()  eq()

代码示例

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            console.log($('nav'));
            console.log($("ul>li"));
            console.log($("ul li:first")); 

            $("div").css("background","pink");   //隐式迭代,会给所有div添加背景色       
            $("ul li:first").css("color","red");  //将ul的第0个子元素原色改为红色
            $("ul li:eq(1)").css("color","blue");//将ul的第1个子元素原色改为红色   等于
            $("ul li").eq(2).css("color","blue");//将ul的第1个子元素原色改为红色   (更推荐)
            $("ul li:odd").css("color","red");//将ul的奇数子元素原色改为红色
            $("ul li:even").css("color","blue");//将ul的偶数子元素原色改为蓝色   
            $("ol .item").siblings("li").css("color","red");//将ol中item的兄弟节点都设置为红色 
            console.log($("div:first").hasClass("current"));  //首个div中是否有current这个类名
            console.log($("div:last").hasClass("current"));  //最后个div中是否有current这个类名 


        })
    </script>
<body>
    <div class="current">1</div>
    <div>1</div>
    <nav></nav>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li class="item">2</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ol>
</body>

你可能感兴趣的:(jQuery)