2.jQuery的基本使用

最新推荐文章于 2024-08-11 18:40:36 发布

终是痴情负了空

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量224

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51092575/article/details/126431772

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery基本使用的学习目标

能够说出什么是jQuery ；
能够说出jQuery的优点；
能够简单使用jQuery ；；
能够说出DOM对象和jQuery对象的区别；

1. jQuery的下载

官网地址: https://jquery.com/

版本介绍:

1x :兼容IE 678等低版本浏览器,官网不再更
2x:不兼容IE 678等低版本浏览器,官网不再更
3x :不兼容IE-678等低版本浏览器,是官方主要更新维护的版本；
各个版本的下载: https://code.jquery.com/

下载使用过程：
因为jQuery是开源的，可直接在官网下载

进入官网页面
点击Download jQuery
选择生产版本（压缩版，因为内存更小
创建jQuery.min.js文件
复制生产版本的全部内容，并加入js文件中
用script引入就可以了

2.jQuery的入口函数

$ (function () {
//此处是页面DOM加载完成的入口
}) ;

$ (document) . ready (function() {
//此处是页面DOM加载完成的入口
};

等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
相当于原生js中的DOMContentLoaded.
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div{
            background-color: #b9def0;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<script>
    // $('div').hide();

    // 解决js代码写在HTML代码前报错
    //1.等页面dom加载完毕在执行js代。码
    /*$(document).ready(function (){
        $('div').hide();
    })*/
    //2.等着dom加载完毕在执行js代码
    $(function (){
        $('div').hide();
    })
</script>
<div></div>
</body>
</html>

3. jQuery的顶级对象$

对“$”的认识：

1.$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$.

2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用
jQuery的方法。

案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
  <script src="js/jquery.min.js"></script>
  <style>
    div{
      background-color: #b9def0;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
<script>
 // 1.$是jQuery得别称
  jQuery(function (){
    jQuery('div').hide();
  })
 //$也是jQuery的顶级对象
</script>
<div></div>
</body>
</html>

4 jQuery对象与DOM对象的区别

DOM对象:用原生js获取过来的对象就是DOM对象；
jQuery对象:用jquery方式获取过来的对象是jQuery对象。
本质: 通过$把DOM元素进行了包装
jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法，不可以混用；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
  <script src="js/jquery.min.js"></script>
  <style>
    div{
      background-color: #b9def0;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
<div></div>
<span></span>
<script>
  // 1. DOM对象:用原生js获取过来的对象就是DOM对象
  var myDiv = document.querySelector('div')
  console.dir(myDiv)
  // 2. jQuery对象:用jquery方 式获取过来的对象是jQuery对象。本质: 通过$把DOM元素进行 了包装
  $('div');//$('div')是一个对象
  $('span');
  console.dir($('div'))
  // 3. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法,不可以混用
  myDiv.style.display = 'none'
  $('div').hide()

</script>
<div></div>
</body>
</html>

4.5 jQuery对象与DOM对象的转换

DOM对象与jQuery对象之间是可以相互转换的。

因为原生js比jQuery更大,原生的一些属性和方法 jQuery没有封装.那么要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
转换方法：

DOM对象转换为jQuery对象:$(DOM对象)

$('div)

jQuery对象转换为DOM对象（两种方式)

$('div') [index]             index是索引号
$('div') .get(index)         index是索引号

代码展示：

<body>
<video src="mov.mp4" muted></video>
<!--muted:使视频可以在谷歌中播放-->
<script>
  // 1. DOM对象转换为jQuery对象
  // (1) 我们直接获取视频，得到就是jQuery对象
  $('video' );
  // (2) 我们已经使用原生js获取过来DOM对象
  var myvideo = document.querySelector( 'video ');
  // $(myvideo) . play(); jquery里面没有play 这个方法；
  // 2. jQuery对象转换为DOM对象
  // myvideo.play();
  $('video')[0].play();
  $('video')get(0).play(); //二选一

</script>
<div></div>
</body>