06 Jquery 基础

前端学习之jquery：
jQuery：一个库

Jquery的基础语法: $(selector).action()

基本选择器：

<script>
    //基本选择器
    //$("*")    $("#id")    $("div")    $("p")    $("element")    $(".class")
    //层级选择器
    //$("*")    $("*")    $("*")    $("*")    $("*")
    <!--层级选择器-->
    // $(".outer p").css("color","red")       //后代选择器
    // $(".outer>p").css("color","red")       //子代选择器
    // $(".outer+p").css("color","red")        //紧挨着的？？？
    // $(".outer~p").css("color","red")        //

    //基本筛选器
    $(".li:first").css("color","red")       //
    $(".li:eq(1)").css("color","red")       //选择第几个~~
    $(".li").eq(2).css("color","red")       //效果同上 但方便遍历哦

    $(".li:odd").css("color","red")       //控制奇数偶数行
    $(".li:gt(2)").css("color","red")       //gt lt 大于或者小于xx行执行

    //属性选择器
    $("[alex = 'sb'][id = p1]").css("color","red")  //一个不够选两个属性
    //表单属性选择器
    $("[type = 'text']").css("width","200px")   //
    $(":text").css("width","200px")             //input表单的标签才可以这样哦
    
    
    //一堆筛选器
    $(".outer").children.css('color','red')     //son
    $(".outer").find.css('color','red')         //子代中

    $(".li").eq(2).nextAll().css('color','red')
    $(".li").eq(2).nextUntil("#end").css('color','red')     //直到id end

    $(".li").eq(2).prev().css('color','red')
    $(".li").eq(2).prevAll().css('color','red')
    $(".li").eq(2).prevUntil('li:eq(0)').css('color','red')

    console.log($(".outer .inner p").parent().html())   //第一个父亲
    $(".outer .inner p").parent().css('color','red')    //全红！
    $(".outer .inner p").parentsUntil("body").css('color','red')    //直到 全红！
    $(".outer").siblings().css('color','red')            //同胞
</script>

View Code

例子左侧菜单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 1000px;
            width:100%;
        }
        .menu{
            float:left;
            background-color: green;
            width: 30%;
            height: 500px;
        }
        .content{
            float:left;
            background-color: red;
            width: 70%;
            height: 500px;
        }
        .title{
            background-color: burlywood;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class = "outer">

    <div class = "menu">
        <div class = "item">
            <div class = "title" onclick="show(this)">菜单1</div>
            <div class = "con">
                <div>111</div>
                <div>211</div>
                <div>311</div>
            </div>
        </div>

        <div class = "item">
            <div class = "title" onclick="show(this)">菜单2</div>
            <div class = "con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class = "item">
            <div class = "title" onclick="show(this)">菜单3</div>
            <div class = "con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>

    <div class = "content"></div>
</div>
<script src = "jquery-3.1.1.js"></script>

<script>
    function show(self) {
        $(self).next().removeClass("hide")
        $(self).parent().siblings().children(".con").addClass("hide")
    }
</script>
</body>
</html>

View Code