jQuery基础

心馨逸梦

已于 2023-07-07 10:14:24 修改

阅读量74

点赞数

文章标签： jquery 前端 javascript

于 2023-05-23 11:39:45 首次发布

本文链接：https://blog.csdn.net/m0_65731386/article/details/130823848

版权

1.1.jQuery介绍

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。 jQuery功能：使用CSS选择器进行元素查询事件机制 Dom操作属性操作工具方法 Ajax 我们将会从以上几个点展开讲述

学习jQuery之前需具备顶基础知识：

HTML

CSS

JavaScript

jQuery库包含**以下功能：**

HTML选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和函数

HTML DOM遍历和修改

AJAX

提示：除此之外，Jquery还提供了大量的插件，目前jQuery兼容于所有主流浏览器

1.2.jQuery安装

jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

网页中添加jQuery

从jquery.com下载jQuery库

从CDN中载入jQuery

下载jQuery

有两个版本的jQuery可供下载：

Production version -用于实际的网站中，已被精简和压缩

Development version -用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以在jQuery官网下载

jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用，但需要注意引入的jQuery的版本要和API手册版本/开发使用一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-HelloWorld.html</title>
  <!-- 本地引入 -->
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <!-- 通过cdn引入 -->
  <!-- 
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   -->
  <script>
    // 1.原生JS的固定写法
    window.onload = function () {
      alert('helloworld -- js')
    }
    // 2.jQuery的固定写法
    $(document).ready(function () {
      alert('helloworld -- jquery')
    })
  </script>
</head>
<body>
</body>
</html>

1.3.jQuery函数

通过"jQuery"和"$"来调用jQuery函数 $(选择器) 通过选择器选择到符合条件的Element元素，将其保存到jQuery对象 $(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象 $(Element元素) 将Element元素转换成一个jQuery对象 $(匿名函数) 匿名函数在文档加载完毕以后执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-jQuery的核心函数和核心对象.html</title>
  <!-- 
    1.jQuery核心函数
    简称:jQuery函数（$/jQuery）
    引入jQuery库以后，直接使用$/jQuery即可
    当函数用:$(params)
    当对象用的时候:$.each()
    2.jQuery核心对象
    简称:jQuery对象 $()
    得到jQuery对象：执行jQuery函数返回的就是jQuery对象
    使用jQuery对象:$obj.xxx()
   -->
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // jQuery核心函数
      console.log($, typeof $);
      // jQuery核心对象
      console.log($(), $() instanceof Object);
    })
  </script>
</head>
<body>
  
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-比较原生js和jQuery.html</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 -->
  <!-- 导入cdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    // JS原生DOM
    window.onload = function () {
      // 1.利用原生JS来查找DOM元素
      var div1 = document.getElementsByTagName('div')[0]
      var div2 = document.getElementsByClassName('box1')[0]
      var div3 = document.getElementById('box2')
      // console.log(div1);
      // console.log(div2);
      // console.log(div3);
      // 2.利用原生JS修改背景颜色
      // div1.style.backgroundColor = 'red'
      // div2.style.backgroundColor = 'yellow'
      // div3.style.backgroundColor = 'blue'
    }
    // jQuery
    $(document).ready(function () {
      // 1.通过jQuery来查找元素
      var $div1 = $('div:first')
      var $div2 = $('.box1')
      var $div3 = $('#box2')
      // console.log($div1);
      // console.log($div2);
      // console.log($div3);
      // 2.利用jQuery来修改背景颜色
      $div1.css({backgroundColor: 'red'})
      $div2.css({
        backgroundColor: 'yellow',
        width: '200px',
        height: '200px'
      })
      $div3.css({backgroundColor: 'blue'})
    })
  </script>
</head>
<body>
  <div></div>
  <div class="box1"></div>
  <div id="box2"></div>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-jQuery和js入口函数的区别.html</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>

 /*
      前提：图片或者是资源是通过网络数据获取的
      需求：获取网络图片的宽度或高度
      区别一 原生JS和jQuery入口函数的加载模式不同
      原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
      jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
    */
      // 原生JS入口函数
      window.onload = function () {
        // 获取img
        var img = document.getElementsByTagName('img')[0]
        //var img=document.images[0];
        // 通过原生JS拿到DOM元素的宽高
        var width = window.getComputedStyle(img).width
        console.log('JS' ,width)
      }
      // jQuery入口函数
      $(document).ready(function () {
        // 获取img
        var $img = $('img')
        // console.log($img);
        // 通过jQuery来获取img的宽度
        var $width = $img.width()
        console.log('jquery', $width);//因网速、浏览器缓存，结果可能是null或者0或者470
      })
    /*
      区别2 
      原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
      jQuery如果编写了多个入口函数，后面的不会覆盖前面的
    */
      // 原生JS入口函数
      // 后面覆盖前面
      window.onload = function () {
        alert('第一个入口函数js')
      }
      window.onload = function () {
        alert('第二个入口函数js')
      }
      // jQuery入口函数
      // 依次执行
      $(document).ready(function () {
        alert('第一个入口函数jquery')
      })
      $(document).ready(function () {
        alert('第二个入口函数jquery')
      })
      
    /*
      jQuery入口函数的写法:
    */
      // 第一种写法
      $(document).ready(function () {
        alert('hello jQuery')
      })
      // 第二种写法
      jQuery(document).ready(function () {
        alert('hello jQuery')
      })
      // 第三种写法 (推荐写法)
      $(function () {
        alert('hello jQuery')
      })
      // 第四种写法
      jQuery(function () {
        alert('hello jQuery')
      })
  </script>
</head>
<body>
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594098348314&di=40aafcc3476781ff40766f2e9b5c165a&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg" alt="">
</body>
</html>

1.4.jQuery对象

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例如下代码，this是Element元素，如果想调用jQuery方法，需要使用$()将其转换为jQuery实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-jQuery和JS的基本使用小案例.html</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    // 原生JS
    window.onload = function () {
      var btn1 = document.getElementById('btn1')// 获取id为btn1的元素
      btn1.onclick = function () {// btn1设置点击事件
        console.log("btn1",this);
        // 获取到input输入框中的值
        var username = document.getElementById('username').value
        alert(username)
      }
    }
    // jQuery
    /*
      jQuery核心函数:($/jQuery)
      jQuery核心对象:执行$()返回的对象
    */
    $(function () {
      $('#btn2').click(function () {// 获取id为btn2的按钮，设置点击事件
        console.log("btn2",this,$(this),$('#btn2'));
        // 获取到input输入框中的值
        var username = $('#username').val()
        alert(username)
      })
    })
  </script>
</head>
<body>
  <!-- 需求：点击按钮，提示输入框中输入的值 -->
  用户名:<input type="text" id="username"><br>
  <button id="btn1">确定（原生）</button>
  <button id="btn2">确定（jQuery）</button>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-jQuery核心函数与对象的使用.html</title>
</head>
<body>
  <div>
    <button id="btn">测试</button><br>
    <input type="text" name="msg1"><br>
    <input type="text" name="msg2"><br>
  </div>
  <!-- 
    1.jQuery核心函数作为一般函数调用的时候:$(param)
      1-参数为函数: 当DOM加载完成后，执行此回调函数
      2-参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
      3-参数为DOM对象:将DOM对象封装成jQuery对象
      4-参数为HTML标签字符串(很少用):创建标签对象并封装成jQuery对象
    2.jQuery静态方法，$作为对象使用:$.xxx()
      1-$.each() 隐式遍历数组
      2-$.trim 取出两端的空格 
      等等
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 需求一：点击按钮，显示按钮的文本标题，增加一个新的输入框
    // 1.jQuery入口函数
    // 1-参数为函数: 当DOM加载完成后，执行此回调函数
    $(function () { //绑定文档加载完成的监听
      // 2.获取id为btn的按钮
      // 2-参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
      $('#btn').click(function () {
        // this是什么？ 发生事件的dom元素对象 当前就是btn按钮
        // 3.获取button按钮中的标题
        // alert(this.innerHTML)
        // jQuery获取元素内容
        // 3-参数为DOM对象:将DOM对象封装成jQuery对象
        alert($(this).html())
        // 增加新的输入框
        // 4-参数为HTML标签字符串:创建标签对象并封装成jQuery对象
        $('<input type="text" name="msg3">').appendTo('div')
      })
      // 需求二 遍历输出数组中的所有元素值
      var arr = [1,2,3,4,5,6]
      // 1-$.each() 隐式遍历数组
      $.each(arr, function (index, item) {
        console.log(index, item);
      })
      // 需求三 去掉 my jQuery 两端的空格
      var str = '     my jQuery    '
      console.log('----'+str.trim()+'-------');
      console.log('----' + $.trim(str) + '-------');
    })
  </script>
</body>
</html>