• 中文
    • English
  • 注册
  • 查看作者
  • 1:JQuery简介

    一.  JQuery

    jQuery 是一个 JavaScript 函数库,通过jQuery可以将JavaScript中一些特别繁琐的操作给简化,大大提高我们的开发效率。

    二.  如何使用JQuery

    使用JQuery有两种方式,首先可以通过本地导入:

    <head>
    <script type="text/javascript" src="/jqery/jquery-1.8.3.min.js"></script>
    </head>

    还可以引入google的CDN来使用:

    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>

    三.  简单使用

    我们可以简单使用JQuery来实现以下效果:

    点击列表中的任意选项后,将该列表项隐藏:

    首先来看一下JavaScript的写法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                var lis = document.getElementsByTagName("li");
                for (var i = 0; i < lis.length; i++) {
                    lis[i].onclick = function () {
                        this.style = "display:none";
                    }
    
                }
    
            }
    
        </script>
    </head>
    <body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
        <li>列表项8</li>
        <li>列表项9</li>
        <li>列表项10</li>
    </ul>
    </body>
    </html>

    再来看一下JQuery的写法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>-->
        <script type="text/javascript">
            $(function () {
                $("li").click(function () {
                    $(this).hide();
                });
            });
        </script>
    </head>
    <body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
        <li>列表项8</li>
        <li>列表项9</li>
        <li>列表项10</li>
    </ul>
    </body>
    </html>

    Javascript中的window.onload可以直接用下面代码代替:

    $(function () {
       
    });

    山东省
  • 0
  • 0
  • 0
  • 1.4k
  • 请登录之后再进行评论

    登录
    单栏布局 侧栏位置: