zoukankan      html  css  js  c++  java
  • html--前端jquery初识

    一、把 jQuery 添加到您的网页
    如需使用 jQuery,需要下载 jQuery 库,然后把它包含在希望使用的网页中。
    jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

    <head>
    <script src="js/jquery-3.4.1.js"></script>
    </head>

    请注意,<script> 标签应该位于页面的 <head> 部分。

    二、选择器参考

    简单的实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
        <!--    基本选择器-->
        <div id="div1">我正在学习jquery</div>
        <p>jquery是一门很牛X的脚本语言</p>
        <div class="div2">
            My name is yusheng_liang
        </div>
    
        <!--层级选择器-->
        <form>
            <label>Name:</label>
            <input name="name"/>
            <fieldset>
                <label>Newsletter:</label>
                <input name="newsletter"/>
            </fieldset>
        </form>
        <input name="none"/>
    
        <script>
                <!--基本选择器-->
            $("#div1").text("jquery");  //id选择器
            $(".div2").css("color","red");  //类选择器
            $("p").css("font-size","40px");  //标签选择器
    
                <!--层级选择器-->
            var ret = $("form input");        //找到表单中所有的 input 元素,结果:[ <input name="name" />, <input name="newsletter" /> ]
            var ret = $("form > input");        // 匹配表单中所有的子级input元素,结果:[ <input name="name" /> ]
            var ret = $("label + input");       //匹配所有跟在 label 后面的 input 元素,结果:[ <input name="name" />, <input name="newsletter" /> ]
            var ret = $("form ~ input");        //找到所有与表单同辈的 input 元素,结果:[ <input name="none" /> ]
        </script>
    </body>
    </html>

     

     jquery实现左边菜单示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>left_menu</title>
        <style>
            body{
                margin: 0;
            }
            .hide{
                display: none;
            }
            .top{
                height: 48px;
                background-color: darkturquoise;
            }
            .outer{
                float: left;
                 20%;
                height: 600px;
                background-color: darkgray;
            }
            .outer .menu .title{
                border: 1px solid darkcyan;
                background-color: darkcyan;
            }
            .content{
                float: left;
                 80%;
                background-color: bisque;
                height: 600px;
            }
        </style>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
        <div class="top"></div>
        <div class="outer">
            <div class="menu">
                <div class="title" onclick="Show(this);">菜单一</div>
                <ul class="con">
                    <li>菜单一中的功能一</li>
                    <li>菜单一中的功能二</li>
                    <li>菜单一中的功能三</li>
                </ul>
            </div>
            <div class="menu">
                <div class="title" onclick="Show(this);">菜单二</div>
                <ul class="con hide">
                    <li>菜单二中的功能一</li>
                    <li>菜单二中的功能二</li>
                    <li>菜单二中的功能三</li>
                </ul>
            </div>
            <div class="menu">
                <div class="title" onclick="Show(this);">菜单三</div>
                <ul class="con  hide">
                    <li>菜单三中的功能一</li>
                    <li>菜单三中的功能二</li>
                    <li>菜单三中的功能三</li>
                </ul>
            </div>
        </div>
        <div class="content"></div>
    
        <script>
            function Show(self) {
                $(self).next().removeClass("hide");
                $(self).parent().siblings().find(".con").addClass("hide");
            }
        </script>
    
    </body>
    </html>

    jquery实现tab栏示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquer_tab</title>
        <script src="js/jquery-3.4.1.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .current{
                background-color: cornflowerblue;
                color: white;
            }
            .tab{
                height: 40px;
                background-color: darkgray;
            }
            li{
                display: inline;
                list-style: none;
                padding: 20px;
    
            }
            .outer{
                 70%;
                margin: 0 auto;
                height: 300px;
                background-color: bisque;
            }
            .content{
                height: auto;
                padding: 50px;
                background-color: darkcyan;
    
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
    
        <div class="outer">
            <ul class="tab">
                <li sel="c1" class="current" onclick="Tab(this);">菜单一</li>
                <li sel="c2" onclick="Tab(this);">菜单二</li>
                <li sel="c3" onclick="Tab(this);">菜单三</li>
            </ul>
            <div class="content">
                <div id="c1">我是菜单一的内容</div>
                <div id="c2" class="hide">我是菜单二的内容</div>
                <div id="c3" class="hide">我是菜单三的内容</div>
            </div>
        </div>
    
        <script>
            function Tab(self) {
                $(self).addClass("current").siblings().removeClass("current");
                var index = $(self).attr("sel");
                $("#"+index).removeClass("hide").siblings().addClass("hide");
            }
        </script>
    
    </body>
    </html>
  • 相关阅读:
    友盟上报 IOS
    UTF8编码
    Hill加密算法
    Base64编码
    Logistic Regression 算法向量化实现及心得
    152. Maximum Product Subarray(中等, 神奇的 swap)
    216. Combination Sum III(medium, backtrack, 本类问题做的最快的一次)
    77. Combinations(medium, backtrack, 重要, 弄了1小时)
    47. Permutations II(medium, backtrack, 重要, 条件较难思考)
    3.5 find() 判断是否存在某元素
  • 原文地址:https://www.cnblogs.com/june-L/p/11932149.html
Copyright © 2011-2022 走看看