JQuery

以下是对JQuery的学习

Javascript
JQuery库(小型且功能丰富的JavaScript库)，里面存在大量的Javascript函数(通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。)
能够避免重复造轮子。

获取JQuery

(CDN jQuery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
  //两种导入方式，一种本地，一种在线方式导入
    <!-- CDN引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="lib/jquery-3.6.0.js"></script>

  </head>
  <body>
    <a href="" id="test-jquery"></a>
    <script>
      document.getElementById('id');
      //选择器就是css的选择器
      $('test-jquery').click(function () {
        alert('hello,jQuery');
      });
    </script>
  </body>

选择器

1
2
3
4
5
6
7
8
9
10
11
//原生js,选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementById();
//jQuery  css种的选择器都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器

文档工具站：(https://jquery.cuishifeng.cn/)
文档工具

事件

鼠标事件，键盘事件，其他事件
鼠标点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <script src="lib/jquery-3.6.0.js"></script>//导入JQuery
</head>
<style>
  #divMove {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
</style>
<body>
  <!-- 事件：获取鼠标当前的一个坐标 -->
  mouse:<span id="mouseMove"></span>
  <div id="divMove">在这里移动鼠标试试</div>
  <script>
    //当网页元素加载完毕之后，响应事件
    // $(document).ready(function () {});
    //简写
    $(function () {
      $('#divMove').mousemove(function (e) {
        //e代表获取的参数
        $('#mouseMove').text('x:' + e.pageX + 'y' + e.pageY);
      });
    });
  </script>
</body>

操作DOM

节点文本操作

1
2
3
4
$('#test-ul  li[name=python]').text(); //获得值
$('#test-ul  li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css的操作

1
$('#test-ul  li[name=python]').css('color', 'red');

元素的显示和隐藏，本质display:none

1
2
$('#test-ul  li[name=python]').show()
$('#test-ul  li[name=python]').hide()

基于B站视频学习 特别感谢up主 遇见狂神说

JS
前端基础 JS JQuery

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！