初识jQuery

什么是jQuery

  • 官网:jQuery

  • 一个优秀的JS函数库

  • Write Less,Do More!!!

为什么选择jQuery

  • HTML元素选取(选择器)
  • HTML元素操作
  • CSS操作
  • HTML事件处理
  • JS动画效果
  • 链式调用
  • 读写合一
  • 浏览器兼容
  • 易扩展插件
  • ajax封装
  • ……

怎样使用jQuery

  1. 引入jQuery库

  2. 使用jQuery

    • jQuery核心函数:$/jQuery
    • jQuery核心对象:执行$()返回的对象
    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用原生的DOM -->
    <script>
    window.onload = function(){
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function(){
    var username = document.getElementById("username").value;
    alert(username);
    }
    }
    </script>

    <!-- 使用jQuery实现 -->
    <script src="jquery-3.6.0.js"></script>
    <script>
    //绑定文档加载完成的监听
    $(function(){
    var $btn2 = $('#btn2')
    $btn2.click(function(){ //给btn2绑定点击监听
    var username = $('#username').val()
    alert(username)
    })
    })
    </script>
    </head>
    <body>
    <!-- 点击“确定”按钮,提示输入的值 -->
    用户名:<input type="text" id="username">
    <button id="btn1">确定(原生版)</button>
    <button id="btn2">确定(jQuery版)</button>
    </body>
    </html>

    输出结果为:

    image-20210530121453679

jQuery的2把利器

jQuery核心函数

  • 简称:jQuery函数($/jQuery
  • jQuery库向外直接暴露的就是$/jQuery
  • 引入jQuery库后,直接使用$即可
    • 当函数用:$(xxx)
    • 当对象用:$.xxx()

jQuery核心对象

  • 简称:jQuery对象
  • 得到jQuery对象:执行jQuery函数返回的就是jQuery对象
  • 使用jQuery对象:$obj.xxx()

jQuery核心函数的使用

作为一般函数调用:$(param)

  1. 参数为函数:当DOM加载完成后,执行此回调函数
  2. 参数为选择器字符串:查找所有匹配的标签,并将它们封装为jQuery对象
  3. 参数为DOM对象:将DOM对象封装成jQuery对象
  4. 参数为html标签字符串(用的少):创建标签对象并封装成jQuery对象

实例:

  • 需求一:点击按钮,显示按钮的文本,显示一个新的输入框

    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
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用jQuery实现 -->
    <script src="jquery-3.6.0.js"></script>
    <script>
    //参数为函数:当DOM加载完成后,执行此回调函数
    $(function(){ //绑定文档加载完成的监听
    // 参数为选择器字符串:查找所有匹配的标签,并将它们封装为jQuery对象
    $('#btn').click(function(){ //绑定点击事件监听
    //this指向绑定事件的对象
    // alert(this.innerHTML); 也可像下面这么写
    alert($(this).html()); //参数为DOM对象:将DOM对象封装成jQuery对象
    //参数为html标签字符串(用的少):创建标签对象并封装成jQuery对象
    $('<input type="text" name="msg3"><br>').appendTo('div');
    })
    })
    </script>
    </head>
    <body>
    <div>
    <button id="btn">测试</button>
    <br>
    <input type="text" name="msg1">
    <br>
    <input type="text" name="msg2">
    <br>
    </div>
    </body>
    </html>

作为对象使用:$obj.xxx()

  • 需求二:遍历输出数组中所有元素值

    • 准备工作:

      文档找到数组相关操作的部分

    image-20210602180617365
    • $.each():隐式遍历数组

      1
      2
      3
      4
      var arr = [2,4,7];
      $.each(arr,function(index,item){
      console.log(index,item);
      })

      输出结果为:

      image-20210602181527421
  • 需求三:去掉字符串两端的空格

    • $.trim():去除两端的空格

      1
      2
      3
      4
      5
      var str = ' my string ';
      //原生JS
      console.log('---'+str.trim()+'---');
      //jQuery
      console.log('---'+$.trim(str)+'---');

      输出结果:

      image-20210602182713342

jQuery核心对象的使用

理解

  • 即执行jQuery核心函数返回的对象
  • jQuery对象内部包含的都是DOM元素对象的数组(可能只是一个元素)
  • jQuery对象拥有很多有用的属性和方法,让程序员能方便的操作DOM

属性/方法

基本行为

image-20210602214519924

  • length:属性,包含DOM元素的个数

  • [index]/get(index):得到对应位置的DOM元素(一般用第一个)

  • each():遍历包含的所有DOM元素

  • index():得到在所在兄弟元素中的下标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <body>
    <button>测试一</button>
    <button>测试二</button>
    <button id="btn3">测试三</button>
    <button>测试四</button>
    <script src="jquery-3.6.0.js"></script>
    <script>
    //需求1:统计一共有多少个按钮
    var $buttons = $('button');
    console.log($buttons.length);
    //需求2:取出第二个button的文本
    console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML);
    //需求3:输出所有button标签的文本
    $buttons.each(function(index, domEle){
    console.log(index, domEle.innerHTML, this);
    })
    //需求4:输出“测试三”按钮是所有按钮中的第几个
    console.log($('#btn3').index() + 1);
    </script>
    </body>

    输出结果为:

    image-20210606215728981

伪数组

  • 类型:Object对象

  • 行为:length属性,数值下标属性

  • 没有数组特别的方法:forEach()push()pop()splice()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    console.log($buttons instanceof Array); //false
    //自定义一个伪数组
    var weiArr = {};
    weiArr[0] = 'atguigu';
    weiArr.length = 1;
    weiArr[1] = 123;
    weiArr.length = 2;
    for (let i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i];
    console.log(i, obj);
    }

    输出结果为:

    image-20210606220844219