Python JQuery day

JQuery
中文文档http://jquery.cuishifeng.cn/
　　1.查找：
　　　　1.选择器
　　　　　　1.id选择器 $('#XX',)
　　　　　　2.标签选择器 $('.xx',)
　　　　　　3.类选择器
　　　　　　4.组合选择器
　　　　　　5.层级选择器

　　　　　　$('div:eq(1)') 找到所有div标签，把索引号为1的拿出来
　　　　2.筛选器
　　　　　　$('div').eq(1) == $('div:eq(1)')
　　　　　　$('#i1').find('.item') == $('#i1 .item')

　　　　例子：简单的菜单栏
　　　　$(ths) 可以把dom对象转换成Jquery对象（ths是this参数，是dom对象）
　　　　$(ths)[0] 把Jquery对象转换成dom对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .menu{
                /*height: 1000px;*/
                width: 50px;
                background-color: #5ab2ce;
            }
            .title{
                background-color: #2e6ab1;
                color: white;

            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="menu" >
            <div class="item">
                <div class="title" onclick="Show(this)">标签一</div>
                <div class="neirong hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
             </div>

            <div class="item">
                <div class="title" onclick="Show(this)">标签二</div>
                <div class="neirong hide">
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this)">标签三</div>
                <div class="neirong hide">
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>

                </div>
            </div>


        </div>
        <script src="jquery-3.5.0.js"></script>
        <script>
            function Show(ths) {
                $(ths).next().removeClass('hide')
                $(ths).parent().siblings().find('.neirong').addClass('hide')
            }
        </script>
    </body>
    </html>

菜单栏例子

　　2.操作：
　　　　1.CSS
　　　　2.属性
　　　　3.文本操作
　　3.事件：

　　4.扩展：
　　　　1.$.login
　　　　2.form表单验证
　　5.Ajax：
　　　　在页面不显示刷新的时候，偷偷提交数据

猜你喜欢