【jQuery学习】.jQuery的基本使用

2.1 jQuery的入口函数

可以将<script>标签写在元素标签的上方。

传统入口函数：

$(document).ready(function(){
   ......
})

目前常用的入口函数：

$(function(){
   ......
})

1、等着DOM结构渲染完毕即可执行内部代码，不必等待所有外部资源加载完毕。

2、入口函数相当于原生js中的DOMContentLoaded。

3、不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

2.2 jQuery等级对象$

1、$等同于jQuery，代码中两者可以相互替换。

2、$为jQuery中的顶级对象，相当于原生js中的window。$把元素进行包装后即可调用jQuery函数。

$('div').hide()

2.3 jQuery对象与DOM对象

1、 DOM对象， 原生js获取过来的就是DOM对象

2、jQuery对象， 用jQuery方式获取过来的对象就是jQuery对象

本质：用$把DOM元素进行了包装，伪数组形式存储

3、jQuery对象只能使用jQuery方法，DOM对象只能使用原生js的属性和方法。

<div></div>
    <script>
        // 1. DOM对象， 原生js获取过来的就是DOM对象
        var myDiv = document.querySelector('div');
        console.log(myDiv);

        // 2.jQuery对象， 用jQuery方式获取过来的对象就是jQuery对象 本质：用$把DOM元素进行了包装
        $('div');
        console.dir( $('div'));

        // 3、jQuery对象只能使用jQuery方法，DOM对象只能使用原生js的属性和方法。
        myDiv.style.display = 'none';
        $('div').hide();
    </script>

DOM对象与jQuery对象可以相互转换。

因为原生js比jQuery更大，原生的一些属性和方法jQuery并没有封装进去，想要使用这些属性和方法就要把jQuery对象转变为DOM对象。

1. DOM对象转换为jQuery对象

$(DOM对象)

2.jQuery对象转换为DOM对象(两种方式)

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

$('div').get(index)

<video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为jQuery对象
        $('video');

        var myvideo = document.querySelector('video');
        $(myvideo).play(); jQuery里面没有play这个方法


        // 2.jQuery对象转换为DOM对象
        myvideo.play();
        $('video')[0].play();
        $('video').get(0).play();
    </script>