第十三 关于jQuery

一、jquery下载及引入

下载地址：https://jquery.com/download/

二、jquery使用

2.1.修改id为s1的内容

    <div id="s1"></div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $('#s1').text('ckl');
    </script>

查看页面：

2.2.修改标签为div的内容

    <div id="s1"></div>
    <div>wukaka</div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $('#s1').text('ckl');
        $('div').text('bengde');
    </script>

查看页面：

2.3.修改指定class的内容

    <div id="s1"></div>
    <div>wukaka</div>
    <div class="c1">young</div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $('#s1').text('ckl');
        $('div').text('bengde');
        $('.c1').text('always');
    </script>

查看页面:

2.4.同时修改几个内容

    <div id="s1"></div>
    <div>wukaka</div>
    <div class="c1">young</div>
    <a></a>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $('#s1').text('ckl');
        $('div').text('bengde');
        $('.c1').text('always');
        $('#s1,.c1,a').text('change three!');
    </script>

查看页面：

2.5.层级选择匹配

    <div id="s2">
        <div>
            <div class="c2">
                <span>
                    <a>summer</a>
                </span>
            </div>
        </div>
    </div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $("#s2 div .c2 span a").text('autumn');
    </script>

查看结果：

 三、jquery常用

选择器
    基本
    #id
    element
    .class
    *
    selector1,selector2,selectorN

    基本筛选器
    :first
    :not(selector)
    :even
    :odd
    :eq(index)
    :gt(index)

    内容
    :contains(text)
    :empty
    :has(selector)
    :parent
筛选
    过滤
    eq(index|-index)
    first()
    last()
    hasClass(class)
    filter(expr|obj|ele|fn)
    查找
    children([expr])
    find(e|o|e)
    next([expr])
    nextAll([expr])
    parent([expr])
    prev([expr])
    siblings([expr])

 2.6.左菜单选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Left Menu</title>
    <style>
        .mleft{
            float: left;width: 20%;height: 600px;background-color: #ff6f06;
        }
        .mright{
            float: left;width: 80%;height: 600px;background-color: aqua;
        }
        .ctitle{
            height: 50px;background-color: darkslategray;color: whitesmoke;
        }
        .mhidem {
            display: none;
        }
    </style>
</head>
<body>
    <div class="mleft">

        <div class="item">
            <div class="ctitle" onclick="kancai(this);">陕西菜</div>
            <div class="body">
                <div>带把肘子</div>
                <div>葫芦头</div>
                <div>水盆</div>
            </div>
        </div>

        <div class="item">
            <div class="ctitle" onclick="kancai(this)">广东菜</div>
            <div class="body mhidem">
                <div>麒麟鲈鱼</div>
                <div>蜜汁叉烧</div>
                <div>上汤焗龙虾</div>
            </div>
        </div>

        <div class="item">
            <div class="ctitle" onclick="kancai(this);">湖南菜</div>
            <div class="body mhidem">
                <div>剁椒鱼头</div>
                <div>干锅茶树菇</div>
                <div>农家小炒肉</div>
            </div>
        </div>

        <div class="item">
            <div class="ctitle" onclick="kancai(this);">四川菜</div>
            <div class="body mhidem">
                <div>水煮肉片</div>
                <div>夫妻肺片</div>
                <div>麻婆豆腐</div>
            </div>
        </div>

    </div>
    <div class="mright"></div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        function kancai(ths) {
　　　　　　　//找到this对于的菜系标签，下一级，然后移除隐藏
            $(ths).next().removeClass('mhidem');
　　　　　　　//找到this对应菜单的父类的兄弟类，找到“body”样式，添加class
            $(ths).parent().siblings().find(".body").addClass('mhidem');
        }
    </script>
</body>
</html>

运行结果：

点击选择其他菜系：

 

posted @ 2017-08-31 10:36  ckl893  阅读(141)  评论(0)  编辑  收藏  举报