0
点赞
收藏
分享

微信扫一扫

jQuery入门

janedaring 2022-03-11 阅读 84

文章目录

一、jQuery概述

1.1JS库

是一个很好的封装好的特定的集合(方法和函数)。从封装一大推的函数理解,就是再这个库中,封装了很多预先定义好的函数在里面,比如动画,获取元素
简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放到里面。我们可以以高效使用封装好的功能

jQuery就是为了快速操作DOM
在这里插入图片描述

1.2jQuery的概念

是一个快速简洁的js库,写更少的代码,做更多的事情
封装了常用的函数
在这里插入图片描述

二、jQuery的基本使用

2.1jquery下载

https://code.jquery.com/jquery-3.6.0.min.js

2.2jquery的使用步骤

1.引入jQuery文件

2.3jquery的入口函数

$function(){}

  $(function (){
    // DOM加载完成的入口
  });
  $(document).ready(function (){
    // DOM加载完成的入口
  })

1.等DOM结构渲染完毕即可执行内部代码,不必等到所有资源加载完成,jQuery帮我们完成了封装
2.相当于js中的DOMContentLoaded
3.不同于js中的load事件是等所有页面文档、外部的js文件、css、图片全部加载完成才执行内部代码。

2.4jQuery的顶级对象$

1.$是jQuery的别名

<script>
  // $(function (){
  //   alert(11);
  // })
  jQuery(function (){
    alert(11);
  })
</script>

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

2.5jQuery对象和DOM对象

1.用原生JS获取来的对象就是DOM对象
2.jQuery方法取的就是jQuery对象
3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式)
在这里插入图片描述
DOM对象与jQuery对象之间是可以相互转换的
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装
在这里插入图片描述

1.DOM对象转jQuery对象
    <script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
    // 1.DOM对象转换为jQuery对象
    // (1)直接俄获取视频,得到的就是jQuery对象
    $('video');
    // (2)使用JS获取来的
    var myvideo = document.querySelector('video');
    // $(myvideo).play(); jquery没有play方法
    // 2.jquery对象转为DOM对象
    // myvideo.play();
    $('video')[0].play();
    $('video').get(0).play();

</script>
举报

相关推荐

0 条评论