• jQuery使用示例详解


    【jquery引用字段】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <div id="MyDiv" class="myClass">
            <p></p>
        </div>
    
        <input type="button" name="username" />
    
        <!--引用jQuery文件-->
        <script src="js/jquery-1.8.3.js"></script>
        <script>
            //id选择器:查找id为MyDiv的标签
            $('#MyDiv').
            //标签选择器:查找所有的div标签
            $('div').
            //class选择器:查找所有class为myClass的标签
            $('.myClass')
            //层级选择器:div标签下的p标签
            $('div p')
    
            //查找input标签name等于username,并且属性值为button的标签
            $('input[name="username"]').attr('button',true)
        </script>
    </body>
    </html>
    jquery字段引用说明

    【jquery字段参数】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <div id="MyDiv" class="myClass">123<a>hello</a></div>
    
        <input name="username" type="text" value="9999" />
    
        <input type="checkbox" />
    
        <!--引用jQuery文件-->
        <script src="js/jquery-1.8.3.js"></script>
        <script>
            //加参数是赋值,不加参数是取值
            $('#MyDiv').text;  //获取id为MyDiv的文本内容----123
            $('#MyDiv').text('haha');    //为id为MyDiv的标签添加文本内容
            $('#MyDiv').html;  //获取id为MyDiv的html内容----<a>hello</a>
            $('#MyDiv').html('<p>hehe</p>');  //为id为MyDiv的标签添加html内容
            $('input[name="username"]').val  //获取name为username的input标签的value值
            $('input[name="username"]').val('sb')  //为name为username的input标签的value赋值
    
            $('input[name="username"]').attr('name')   //获取name为username的input标签的name属性的值
            $('input[name="username"]').attr('name','Macoli')  //修改name为username的input标签的name属性的值为Macoli
    
            $('input[type="checkbox"]').prop('checked',true)   //选中所有的复选框(true为选中,fals为不选中,默认不选中)
            $('input[type="checkbox"]').prop('disabled',true)  //禁用所有的复选框(true为禁用,false为不禁用,默认不禁用)
        </script>
    </body>
    </html>
    jquery字段参数操作说明

    【jquery给html标签添加css】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <title>Title</title>
        <style>
            .c1{
                border: 1px solid red;
            }
            .c2{
                font-size: 50px;
            }
        </style>
    </head>
    <body>
    
        <div id="MyDiv" class="c1">hello</div>
    
        <input type="button" value="点击" onclick="Foo()" />
    
        <p>hello</p>
    
        <!--引用jQuery文件-->
        <script src="js/jquery-1.8.3.js"></script>
        <script>
    
            //给p标签设置css
            $('p').css({'color':'red','font-size':'50px'});
    
            function Foo() {
                $('.c1').toggleClass('c2');  //每次执行的时候交替添加、删除c2
            }
    
            //$('.c1').addClass('c2');  //为所有class为c1的标签再加一个c2的class(c1和c2同时存在)
        </script>
    </body>
    </html>
    jquery给html标签添加css

    【jquery常用函数】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <title>Title</title>
        <style>
            .returnTop{
                position: fixed;
                width: 32px;
                height: 35px;
                right: 20px;
                bottom: 20px;
                background-color: red;
                color: white;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <!--返回顶部功能实现-->
        <!--
        <div id="return_top" class="returnTop hide" onclick="Go()">返回顶部</div>
        -->
        <div id="return_top" class="returnTop hide">返回顶部</div>
    
        <div style="height: 10000px"></div>
    
    
        <!--引用jQuery文件-->
        <script src="js/jquery-1.8.3.js"></script>
        <script>
            //当页面框架加载完成后,默认执行该函数
            $(function () {
                $('#return_top').click(function () {
                    $(window).scrollTop(0);   //设置页面返回顶部
                })
            })
    
            //当页面滚动条变化时,执行的函数(每滚动一次,函数就执行一次)
            $(window).scroll(function () {
                var height = $(window).scrollTop();   //获取滚动条离顶部的距离
                if (height>0){
                    //显示返回顶部图标(或文字)
                    $('#return_top').removeClass('hide');   //去除hide
                }else {
                    //隐藏返回顶部图标(或文字)
                    $('#return_top').addClass('hide');
                }
            })
    
            /*
            function Go() {
                $(window).scrollTop(0)   //设置页面返回顶部
            }
            */
        </script>
    </body>
    </html>
    页面加载完成后执行的函数返回顶部函数

    【jquery添加删除内容】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <title>Title</title>
        <style>
    
        </style>
    </head>
    <body>
    
        <p>I would like to say:<span></span></p>
        <input type="button" value="追加1" id="addid1" />
        <input type="button" value="追加2" id="addid2" />
    
        <!--引用jQuery文件-->
        <script src="js/jquery-1.8.3.js"></script>
        <script>
    
            //append():内容后面追加  prepend():内容前面追加
            //appendto(content):把标签追加到content中(参数content也是一个标签,可以自定义)
            //empty():清空标签的所有内容(标签还在)
            //remove():删除标签(包括内容)
    
            //页面框架加载完成后执行的函数
            $(function () {
                $('#addid1,#addid2').click(function () {
                    //获取当前点击的标签Id
                    var currentId = $(this).attr('id')
                    if (currentId=='addid1') {
                        //$('p').append('Alex&nbsp;');   //往p标签中追加内容
                        $('p span').text('Alex');   //往p标签下的span标签中添加内容
                    }else if (currentId=='addid2'){
                        //$('p').append('Macoli&nbsp;');   //往p标签中追加内容
                        $('p span').text('Macoli');  //往p标签下的span标签中添加内容
                    }
                })
            })
        </script>
    </body>
    </html>
    jquery添加删除内容

    【jquery操作元素焦点】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js</title>
        <style>
            .gray{
                color: gray;
            }
            .black{
                color: black;
            }
        </style>
    </head>
    <body>
    
        <!--事件:onblur():元素失去焦点   onfocus():元素获得焦点-->
        <input type="text" class="gray" id="tip" value="请输入关键字" />
    
    
        <script src="js/jquery-1.8.3.js"></script>
        <script>
    
            //页面框架加载完成后执行的函数
            $(function () {
                //获取焦点
                $('#tip').focus(function () {
                    var id = $(this);
                    id.addClass('black');
                    if (id.val()=='请输入关键字'||id.val().trim()=='') {  //trim()函数:清除字符串的空格
                        id.val('');
                    }
                })
    
                //失去焦点
                $('#tip').blur(function () {
                    var id = $(this);
                    var val = id.val();
                    if (val.length==0||val.trim()==''){
                        id.val('请输入关键字');
                        id.addclass('gray');
                    }else {
                        id.adclass('black');
                    }
                })
            })
    
    
        </script>
    </body>
    </html>
    jquery获取、释放元素焦点

    【jquery操作多选框的全选、不选、反选功能】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js</title>
    
    </head>
    <body>
        <!--设置全选、不选、反选选项功能-->
        <div id="checklist">
            <input type="checkbox" value="1" />篮球
            <input type="checkbox" value="2" />足球
            <input type="checkbox" value="3" />羽毛球
        </div>
    
        <input type="button" value="全选" id="selectAll" />
        <input type="button" value="不选" id="unselectAll" />
        <input type="button" value="反选" id="reverseAll" />
    
    
    
        <script src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            //页面框架加载完成后执行的函数
            $(function () {
                $('#selectAll').click(function () {
                    //:checkbox和input[type=='checkbox']等价
                    //$('#changelist :checkbox').attr('checked',true);
                    $('#checklist input[type="checkbox"]').attr('checked',true);
                })
                
                $('#unselectAll').click(function () {
                    $('#checklist :checkbox').attr('checked',false);
                })
                
                $('#reverseAll').click(function () {//反选
                    //each:循环个标签,每个标签都执行函数
                    $('#checklist :checkbox').each(function () {
                        //获取标签是否被选中的信息,如果被选中,设置为取消选中;如果没被选中,设置为选中
                        $(this).attr('checked',!$(this).attr('checked'));
                    })
                })
            })
        </script>
    </body>
    </html>
    jquery操作多选框的全选、不选、反选功能

    【jquery操作菜单,选中菜单才显示子菜单】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css">
        <style>
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <!--菜单选中显示子菜单,不选中不显示功能-->
        <div class="container">
            <div>
                <div class="title">Menu1<i class="fa fa-beer" aria-hidden="true"></i></div>
                <div class="body hide">
                    <a href="">content1</a><br/>
                    <a href="">content2</a><br/>
                    <a href="">content3</a>
                </div>
            </div>
    
            <div>
                <div class="title">Menu2<i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
                <div class="body hide">
                    <a href="">content1</a><br/>
                    <a href="">content2</a><br/>
                    <a href="">content3</a><br/>
                </div>
            </div>
        </div>
    
    
    
        <script src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            //页面框架加载完成后执行的函数
            $(function () {
                $('.title').click(function () {
                    //当前标签的父标签的其他平级标签的class为body的子标签添加hide
                    $(this).parent().siblings().children('.body').addClass('hide')
                    //去掉当前标签的下一个标签的hide
                    $(this).next().removeClass('hide')
                })
            })
        </script>
    </body>
    </html>
    jquery操作菜单,选中菜单才显示子菜单

    【jquery选中不同标签显示不同内容】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css">
        <style>
            li{
                float: left;
                list-style: none;
                margin-right: 10px;
            }
            .current{
                background-color: wheat;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="tab-menu-box1">
                <div class="menu">
                    <ul id="tab-menu-title" style="overflow: hidden;">
                        <li class="current" content-to="1">价格趋势</li>
                        <li content-to="2">市场分析</li>
                        <li content-to="3">其他</li>
                    </ul>
                </div>
    
                <div id="tab-menu-body" class="content">
                    <div content="1">content1</div>
                    <div content="2" class="hide">content2</div>
                    <div content="3" class="hide">content3</div>
                </div>
            </div>
        </div>
    
    
    
        <script src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            //页面框架加载完成后执行的函数
            $(function () {
                ChangeTab('#tab-menu-title','#tab-menu-body');
            })
            
            function ChangeTab(title,body) {
                $(title).children().click(function () {
                    var $menu = $(this);
                    var contentvalue = $(this).attr('content-to');
                    var $content = $(body).find('div[content="' + contentvalue + '"]');
                    $menu.addClass('current').siblings().removeClass('current');
                    $content.removeClass('hide').siblings().addClass('hide')
                })
            }
        </script>
    </body>
    </html>
    View Codejquery选中不同标签显示不同内容

    【jquery使滚动条一直处于底部】

    <!--chat-message是标签的class名-->
    $('.chat-message').scrollTop($('.chat-message')[0].scrollHeight);
  • 相关阅读:
    Android学习笔记事件处理机制 希
    DIY我的博客皮肤 希
    CSS学习小札居中问题及解决方案 希
    Entity Framework 教程
    springcahce集成redis 设置过期时间 Hiro
    springboot集成springcache Hiro
    Geotools核心特点以及支持数据的格式和标准
    github使用
    一个jekyll使用大牛的博客
    在没有root权限情况下安装python
  • 原文地址:https://www.cnblogs.com/MacoLee/p/5888833.html
Copyright © 2020-2023  润新知