• 中文
    • 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.2k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: