jQuery笔记

来源：互联网发布：股票医生软件下载编辑：程序博客网时间：2024/05/22 10:58

详细文档
http://www.php100.com/manual/jquery/index.html

知识点列表

jQuery for循环-each

此处this代表每个循环子项

function Reverse() {            $('table :checkbox').each(function () {                $(this).prop('checked', !$(this).prop('checked'));            })        }

注册滚动事件

$(window).scroll(function(){}//即注册窗体的滚动事件，每次滚动都会执行此方法

<script src="jquery-3.2.1.js"></script><script type="text/javascript">    function GoTop(){        //返回顶部        $(window).scrollTop(0);    }    $(function(){        $(window).scroll(function(){            //当滚动滑轮时，执行函数体            //获取当前滑轮滚动的高度            var top = $(window).scrollTop();            if(top>100){                //展示“返回顶部”                $('.back').removeClass('hide');            }else{                //隐藏“返回顶部”                $('.back').addClass('hide');            }        });    });</script>

    <script>        var uli = [11, 22, 33];        $.each(uli ,function (i, item) {            console.log(i, item)        })//        输出结果//        0 11//        1 22//        2 33    </script>

选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JQ01</title></head><body>    <div id="n1">Hi</div>    <div class="c1">22</div>    <div class="c1">33</div>    <a></a>    <span id="n2"></span>    <div id="n3">        <div>            <div class="c3">                <span>                    <a>                        BeautiFul                    </a>                </span>            </div>        </div>        <span>Wrong</span>    </div>    <script src="jquery-3.2.1.js"></script>    <script>//        ID选择器//        选择器、筛选去控制和提取标签//        jQuery('#n1').text('123');//        标签选择器//        将每一个DIV的文本设置成text//        $('div').text('EveryOne');//        匹配class//        $('.c1').text('Special');//        组合选择器//        将类为c1、a标签和id等于n2的标签text进行设置//        $('.c1, a, #n2').text('Yes,Ok!   ')//        层级选择器//        即n3下面所有标签中的a标签        $('#n3 a').text("Middle");    </script></body></html>

全选反选取消

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>select all</title>    <script src="jquery-3.2.1.js"></script>    <style>        .table_style{            /*border: 2px solid;*/        }    </style></head><body>    <table border="1" width="200px">        <tr>            <th>选择</th>            <th>内容</th>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>韩金龙</td>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>石乐志</td>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>徐晃</td>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>胡丽亚</td>        </tr>    </table>    <br />    <button onclick="All();">全选</button>    <button onclick="Cancel();">取消</button>    <button onclick="Reverse();">反选</button>    <script>        function All() {            $('table :checkbox').prop('checked', true);//            $('table input[type="checkbox"]').prop('checked', true);        }        function Cancel() {            $('table :checkbox').prop('checked', false);//            $('table input[type="checkbox"]').prop('checked', true);        }        function Reverse() {            $('table :checkbox').each(function () {                $(this).prop('checked', !$(this).prop('checked'));            })        }    </script></body></html>

返回顶部

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .back{            position: fixed;            bottom: 0px;            right: 0px;        }        .hide{            display: none;        }    </style></head><body><div style="height: 2000px;"></div><div onclick="GoTop()" class="back hide">返回顶部</div><script src="jquery-3.2.1.js"></script><script type="text/javascript">    function GoTop(){        //返回顶部        $(window).scrollTop(0);    }    $(function(){        $(window).scroll(function(){            //当滚动滑轮时，执行函数体            //获取当前滑轮滚动的高度            var top = $(window).scrollTop();            if(top>100){                //展示“返回顶部”                $('.back').removeClass('hide');            }else{                //隐藏“返回顶部”                $('.back').addClass('hide');            }        });    });</script></body></html>

阅读全文

0 0

jQuery笔记

知识点列表

选择器

全选 反选 取消

返回顶部

全选反选取消