jQuery

jquery 学习

初识jquery

中文学习网站地址(转载自网络)

• 导入js 依赖

• 编写一个简单的鼠标点击事件

  
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
  
  
  <a href="" id="test-jquery">点击跳转</a>
  
  <script>
  
      $('#test-jquery').click(function () {
          alert('hello jQuery');
      })
  
  </script>
  
  
  
  

  上面的代码在浏览器里面运行之后有页面会弹出

• 获取鼠标当前的坐标

      <script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
  
      <style>
          #divMove {
              width: 600px;
              height: 600px;
              border: 2px solid #0ED2F7;
          }
      </style>
  
  
  
  <!--获取鼠标当前的坐标-->
  mouse : <span id="mouseMove"></span>
  <div id="divMove">
      点击一个鼠标
  </div>
  
  <script>
      //当网页元素加载完毕，开始响应事件
      $(function () {
          $('#divMove').mousemove(function (e) {
              $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
          })
      });
  </script>
  

• 操作DOM

  $('#test-u1 li[name=python]').text(); //获取值
  $('#test-u1 li[name=python]').text('hello world');` //设置值
  

• 元素的显示和隐藏

  $('#test-u1 li[name=python]').show(); //显示
  $('#test-u1 li[name=python]').hide(); //隐藏